JSFoo 2017

There are 340 million internet users in India, that’s more than the entire population of the US. Sadly, 86% of them are on slow networks. These harsh conditions bring out the best architecture patterns for building performant applications.

That does not mean that the developer experience has to be terrible. Let’s talk about server rendering, loading strategies and progressive enhancement to fulfil the gold standard performance checklist without breaking a sweat.

Outline

Takeaways:

1. Understand importance of performance for users + businesses
2. Take-home performance checklist
3. Architecture patterns that are friendly for developers + performant by default
4. How can they implement these in their applications today

Outline:

1. Why should you care about performance?
   1.1 Big numbers about the network spread in India (86% on slow networks)
   1.2 Some scary stats about impact of performance on user behaviour + businesses

2. Understand web performance nicely
   2.1 How to measure performance - chrome devtools audit (lighthouse perf)
   2.2 Metrics that matter
   2.2 Network constraints

3. What can I do to improve my application’s performance
   3.1 Performance budget
   3.2 Server side rendering (get to meaningful paint fast)
   3.3 Un-interactive interfaces (until javascript arrives, interactions don’t really work)
   3.4 Javascript loading strategies (serving the least amount, page-specific, code splitting, etc)
   3.5 Lazy loading good-to-have features, analytics et al (second level of code-splitting)
   3.6 Mention smaller frameworks (preact, react-lite, svelt, etc.)

4. We can do even better (advanced)
   4.1 2 state architecture pattern
   4.2 Build static pages, enhance with javascript (progressive enhancement)
   4.3 Think of each interactive component having 2 states (example in slides)
   4.4 Use only static state on AMP pages and 2G and get that SEO juice.

5. Cache + Prefetch
   5.1 Further optimisations: preload, h2 push and what can you do with them.
   5.2 Prefetch resources based on the next step in user’s journey (service worker)

6. Keeping things fast
   6.1 Make perf testing a part of CI builds
   6.2 Test on devices+network where your audience is

7. Sum up take aways for audience

Note: I purposefully do not go into the code of these to make it more audience friendly. Can add that and make it a Full talk (instead of crisp)

Requirements

Intended audience:

Folks who have built a web application or two. This isn’t very beginner friendly.
webperf fans will love this.

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.

Links

• Github: https://github.com/siddharthkp
• Twitter: https://twitter.com/siddharthkp
• Bunch of talks from this year: https://speakerdeck.com/siddharthkp
• Video:
• Jsfoo 2016 (Flash Talk): https://youtu.be/ZKb9l9NrW8E?t=1h2m46s
• React meetup: https://youtu.be/gIinaKFZXFA?t=1h48m35s

Slides

https://bit.ly/billion-slides