ReactFoo 2017

A conference on React


The React architecture for performance and productivity (Intermediate)

Submitted by Siddharth Kshetrapal (@sidkp) on Saturday, 3 June 2017

Section: Workshop Technical level: Intermediate Status: Waitlisted


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:


  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


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.


  •   Siddharth Kshetrapal (@siddharthkp) 2 years ago

    Workshop length: 1.5 hours (can be squeezed down to 45mins as well)

  •   henry dsouza (@jazz23) 12 months ago

    It is great that you want to hack tiktok followers at this website and it is so easy here to get them for free online.

Login with Twitter or Google to leave a comment