The React architecture for performance and productivity (Intermediate)
Submitted by Siddharth Kshetrapal (@sidkp) on Saturday, 3 June 2017
Section: Workshop Technical level: Intermediate
Learn how to build performant applications with React and make your developer experience super sweet.
Let’s talk about server rendering, loading strategies and progressive enhancement to fulfil the gold standard performance checklist without breaking a sweat.
Start with a badly designed app and make it awesome. This workshop is a step by step refactor of a badly performing React application (instagram clone)
Uses concepts from my talk proposal: https://reactfoo.talkfunnel.com/2017/4-building-applications-for-the-next-billion-users
1.1 Why should you care about performance?
1.2 How to measure performance
1.3 Metrics that matter (meaningful paint, time o interaction)
Where to start?
2.1 Performance budget
2.2 Server side rendering (get to meaningful paint fast)
2.4 Lazy loading good-to-have features, analytics et al (second level of code-splitting)
1.1 Code structure
1.4 Bundling (webpack)
1.5 Developer experience (webpack dev middleware, hot module replacement, etc.)
2.1 CSS-in-JS: Why?
2.2 CSS-in-JS: Implementation
3.1 Route specific code spliting
3.2 Lazy loading
3.3 Data fetching on the server
3.4 Swap with preact
Laptop with node + npm installed.
Folks who have built a react application or two. This isn’t very beginner friendly.
Why should you let me talk about this/Why am I excited about it?
- I spend a lot of time during my day job thinking about (and implementing) architecture patterns for a healthcare startup in India. (It is literally my job to talk about this :D)
- I am a regular speaker at ReactJS Meetup in Bangalore. Have talked about styling, testing, performance, designing and some more
- I make OSS projects for building performant apps easier: cost-of-modules, recreate, reaqt, css-constructor.
- I obsess over interfaces, web performance and developer experience.