The stack behind Flipkart Lite | Modern Web Summit

Talk by me on "The Stack behind Flipkart Lite" @ Modern Web Summit ( Feb 4, 2016 ).

Transcript

1. Modern Web Summit THE STACK BEHIND FLIPKART LITE Boopathi Rajaa @heisenbugger
2. Modern Web Summit ???
3. Modern Web Summit We write lots of JavaScript
4. Modern Web Summit HTML Page Shells
5. Modern Web Summit Loading state (Pre data) Loaded State (Post data) SHELL SHELL + Content
6. Modern Web Summit Loading state (Pre data) Loaded State (Post data) SHELL SHELL + Content
7. Modern Web Summit Perceived > Actual
8. Modern Web Summit CLIENT SIDE ONLY SERVER SIDE RENDERING HTML PAGE SHELLS SHELLS +
 SERVICE WORKERS response rendering starts
9. Modern Web Summit React.renderToString()
10. Modern Web Summit componentDidMount
11. Modern Web Summit /:slug/p/:itemid /(.*)/pr /search /accounts/(.*)
12. Modern Web Summit ReactRouter
13. Modern Web Summit /:slug/p/:itemid /(.*)/pr /search /accounts/(.*) /:slug/p/:itemid /(.*)/pr /search /accounts/(.*)
14. Modern Web Summit function convertParams(p) { return PathUtils.injectParams(p, { splat: 'splat', slug: 'slug', itemId: 'itemId', sellerName: 'sellerName', sellerId: 'sellerId' }); } Hackity Hack Hack
15. Modern Web Summit Route Defined Route To Render Shell /:slug/p/:itemid → /slug/p/itemId → product /(.*)/pr → /splat/pr → browse /search → /search → search /accounts/(.*) → /accounts/splat → accounts injectParams
16. Modern Web Summit Bundle to Static assets
17. Modern Web Summit webpack
18. Modern Web Summit vendor.config.js react, react-router, phrontend, etc… client.config.js client.js → routes.js → root server.config.js server.js → routes.js → root hbs.config.js hbs-loader → hbs.bundle.js → <shell>.hbs sw.config.js sw.js + build props from client & vendor
19. Modern Web Summit Two level templating
20. Modern Web Summit index.hbs browse.hbs product.hbs search.hbs accounts.hbs build time render React.renderToString() hbs-loader /:slug/p/:itemid /(.*)/pr /search /accounts/(.*) runtime - express js
21. Modern Web Summit client bundle app.<hash>.js main.<hash>.css sw.js sw.bundle.<hash>.js (byte diff)
22. Modern Web Summit css-modules
23. Modern Web Summit .header { } .02jei { }
24. Modern Web Summit babel
25. Modern Web Summit phrontend github.com/flipkart-incubator/phrontend
26. Modern Web Summit Monorepo vs Repo per feature
27. Modern Web Summit Thank you Boopathi Rajaa @heisenbugger