Abhinav Rastogi
Web Developer, Photographer, Designer. Loves Pink Floyd, Coldplay, Beatles. Travelling is fun, science is awesome!
Scaling React @ Flipkart
Abhinav Rastogi
@_abhinavrastogi
The Journey So Far
Fully Server-side
Isomorphic
Fully Client-side
??
PhrontendJS
http://github.com/Flipkart/phrontend
Web vs App
No, I am not talking about the website :P
What does web do best?
Immediacy
Compatability
Upgradability
What do apps do best?
Hardware access
Offline access
Personalisation
Why not both?
Web is getting more and more powerful everyday
Content served live, smaller downloads
Continuous Deployment, Push updates
Direct hardware APIs,
JS interfaces for others
Caching,
Service Workers
Toh problem kya hai?
Consistency and reusability across applications
React
Solves UI beautifully
Virtual DOM
Enforces modularity
"Cascading" Style Sheets
Global Namespace
Dependencies
Dead code elimination
Component System?
"CSS in JS" by vjeux
PostCSS
Super-set of SASS, LESS
Its a JS module
Modular
Upto 30x faster
Smart auto-prefixer!
Trivial Redundancies
ES6 & ES7
Classes and inheritance!
Lexical `this` binding using Arrow funcs
Destructuring
Babel allows you to use tomorrow's ES6, today!
"React is
the V in MVC"
What about the rest?
Flux
Uni-directional, ease-to-reason data flow
Smarter data stores
AmpersandJS State
Observable
Extensible
Derived, watchable properties
Type checking!
Packing it all together
Webpack
A module bundler
Takes dependencies
Gives static assets
Learnings
#gyaan
Try solving the problem ourselves
Only then we choose a library
Incrementally add technologies
Regular sessions, discussions, polls
Keep CSS close to components
We don't allow
cross-component styling
Naming is important!
We have naming conventions
Linting is
important!
To ensure coding standard
Testing
is important!
React shallow-render, Jest
That's all folks!
@_abhinavrastogi
Scaling React @ Flipkart
By Abhinav Rastogi
Scaling React @ Flipkart
Slides to accompany my talk about how we scaled React and other UI technologies to millions of users at Flipkart.
