a widget based web platform
DESCRIPTION
Organizing websites for target audiences. Organizing web pages in components. Orchestrating it all with Erlang. Letting it crash!TRANSCRIPT
![Page 2: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/2.jpg)
Introduction Meeting Me
• Software Architect• Passionate Erlang developer• Testing enthusiast• Love beautiful code!
2/30
![Page 3: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/3.jpg)
Introduction Meeting Spilgames
• Gaming Platform• Serving data to 190+ countries world-wide• 180+ million unique users per month
3/30
![Page 4: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/4.jpg)
Introduction Brands and Sites
• 5 Brands/Channels for target audiences• 1-15 Sites for different geographical regions• Strong domains
I www.agame.com for teens in the USI www.games.co.uk for families in the UKI www.juegosdechicas.com for girls in SpainI . . .
4/30
![Page 5: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/5.jpg)
Introduction Brands and Sites
5/30
![Page 6: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/6.jpg)
Old Portals Landscape
6/30
![Page 7: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/7.jpg)
Old Portals Landscape
• Monolithic portals per brand• Static pages with lots of AJAX
calls• Architectural layers developed
independently
7/30
![Page 8: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/8.jpg)
Old Portals Landscape What Was Good. . .
• Acceptable performance• Clear layer separation• Fast growth• Per brand & site development• Small learning curve
8/30
![Page 9: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/9.jpg)
Old Portals Landscape What Was Good. . .
9/30
![Page 10: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/10.jpg)
Old Portals Landscape . . . And What Wasn’t
• Extensive frontend caching• No global features• Lots of logic on the client• Long time to global market• Redundant code• Tiny changes, massive impact
10/30
![Page 11: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/11.jpg)
Wish List
11/30
![Page 12: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/12.jpg)
Wish List Architectural Wishes
• Isolated requests, features and crashes• Feature toggling on runtime• Linear scalability with supermarket hardware
12/30
![Page 13: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/13.jpg)
Wish List Architectural Wishes
• Isolated requests, features and crashes• Feature toggling on runtime• Linear scalability with supermarket hardware
12/30
![Page 14: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/14.jpg)
Wish List Development Wishes
• One modular codebase• Explicit component specifications• Small features, easy to deploy and rollback
13/30
![Page 15: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/15.jpg)
Wish List Erlang Based Web Platforms?
• Chicago Boss, Zotonic. . .I (+) Nice layer separationI (+) Mature solutionsI (+) Easy to use
• But. . .I (-) Feature isolation not key in their designI (-) A VC framework fits better (abstracted model)
14/30
![Page 16: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/16.jpg)
Wish List Erlang Based Web Platforms?
• Chicago Boss, Zotonic. . .I (+) Nice layer separationI (+) Mature solutionsI (+) Easy to use
• But. . .I (-) Feature isolation not key in their designI (-) A VC framework fits better (abstracted model)
14/30
![Page 17: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/17.jpg)
A Widget Platform Let’s Create Our Own Solution!
15/30
![Page 18: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/18.jpg)
A Widget Platform Pages Made Out Of Widgets
16/30
![Page 19: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/19.jpg)
A Widget Platform Pages Made Out Of Widgets
• Path determines an entry widget• Widgets and their children form a
tree• Tree generates fully working
HTML• Page generation time guaranteed!
(timeouts)
17/30
![Page 20: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/20.jpg)
A Widget Platform What’s A Widget?
• Isolated• Explicitly specified• Releasable separately
18/30
![Page 21: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/21.jpg)
A Widget Platform In Practice
• Feature focused development not brand• One widget to serve all brands
19/30
![Page 22: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/22.jpg)
A Widget Platform In Practice
• Minimal to no impact on otherfeatures
• Configurable per site and brand
{ themes , [
{ " f a m i l y " , [{ template , wdg_featured_games_compact } ,{num_games , 3 } ,{ css , [ " f a m i l y / wdg_featured_games " ] }
] } ,
{ { " famiy " , 88 } , [{num_games , 5 }
] } ,
{ "women" , [{ template , wdg_featured_games } ,{num_games , 6 } ,{ css , [ "women/ wdg_featured_games " ] }
] }
] }
20/30
![Page 23: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/23.jpg)
Managing Widgets
21/30
![Page 24: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/24.jpg)
Managing Widgets Deployments
• SWIFT as a central widgetrepository
• HTTP interface with simple GUI• Uses the platform management
interface:I List nodesI List widgets in a nodeI Enable/disable widget in a nodeI Change widget version in a node
• Enforces configuration to newcluster members
22/30
![Page 25: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/25.jpg)
Managing Widgets A Handy Tool
23/30
![Page 26: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/26.jpg)
Managing Widgets Master & Slaves In 1 Shell
• The platform master node runs:I A web serverI A management interfaceI A specific set of widgets
• Each slave node runs:I Its own specific set of widgets
24/30
![Page 27: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/27.jpg)
Managing Widgets Master & Slaves In 1 Shell
• The platform master node runs:I A web serverI A management interfaceI A specific set of widgets
• Each slave node runs:I Its own specific set of widgets
24/30
![Page 28: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/28.jpg)
Managing Widgets spil.com/?origins=w1,preview;w5,preview
• Widgets can be called in any node• Widgets can fail• Widgets can be disabled
25/30
![Page 29: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/29.jpg)
The Future
26/30
![Page 30: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/30.jpg)
The Future Lessons Learned
• Document by example• Reinforce the concepts adoption often• Review, review, review• Measure performance from early stages
27/30
![Page 31: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/31.jpg)
The Future Coming Up
• Native widget to backend connectivity• Performance analysis on CI• Historical imagediff for widgets• Device/Browser capabilities available for widgets• Widgets written in Elixir?
28/30
![Page 32: A Widget Based Web Platform](https://reader034.vdocuments.mx/reader034/viewer/2022051513/546f848db4af9f170b8b45ac/html5/thumbnails/32.jpg)
The Future What We’ve Used
• ErlyDTL for html templating• Cowboy as a web server• Lager for logging• Rebar for build tool• Lhttpc as HTTP client• Estatsd for monitoring• Sass as a CSS pre-processor
29/30