ReactFoo 2017

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.

Outline

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

Concepts:

1. Performance
   1.1 Why should you care about performance?
   1.2 How to measure performance
   1.3 Metrics that matter (meaningful paint, time o interaction)

2. Where to start?
   2.1 Performance budget
   2.2 Server side rendering (get to meaningful paint fast)
   2.3 Javascript loading strategies (serving the least amount, page-specific, code splitting, etc)
   2.4 Lazy loading good-to-have features, analytics et al (second level of code-splitting)

Code time:

1. Upgrade tooling
   1.1 Code structure
   1.2 Server
   1.4 Bundling (webpack)
   1.5 Developer experience (webpack dev middleware, hot module replacement, etc.)

2. Styling
   2.1 CSS-in-JS: Why?
   2.2 CSS-in-JS: Implementation

3. Performance optimisations
   3.1 Route specific code spliting
   3.2 Lazy loading
   3.3 Data fetching on the server
   3.4 Swap with preact

Requirements

Laptop with node + npm installed.

Folks who have built a react application or two. This isn’t very beginner friendly.

Speaker bio

Why should you let me talk about this/Why am I excited about it?

1. 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)
2. I am a regular speaker at ReactJS Meetup in Bangalore. Have talked about styling, testing, performance, designing and some more
3. I make OSS projects for building performant apps easier: cost-of-modules, recreate, reaqt, css-constructor.
4. I obsess over interfaces, web performance and developer experience.