Training: June 20–21, 2016
Tutorials: June 21, 2016
Keynotes & Sessions: June 22–23, 2016
Santa Clara, CA

Building high-performance progressive web apps

Aditya Punjani (Facebook)
11:20am–12:00pm Wednesday, 06/22/2016
Performance for the people
Location: Ballroom CD Level: Intermediate
Average rating: ****.
(4.67, 3 ratings)

Prerequisite knowledge

Attendees should have web programming experience.

Description

Progressive web apps are a new class of web apps that provide an immersive full-screen experience right from the home screen on mobile phones, just like native apps. But how do they compete with the performance characteristics of native apps? Drawing on themes from his article “Building Flipkart Lite: A Progressive Web App,” Aditya Punjani explains how Flipkart built a high-performance PWA that runs smoothly on low-end devices and works seamlessly even on 2G or completely offline. With all these patterns, the total is greater than the sum of its parts. You end up with an immersive, high-performance web app that works seamlessly at scale and is always up to date.

Topics include:

  • A new approach to an application architecture optimized for perceived performance. Learn how to break down your web app into app shells and content, empowering a blazing fast, meaningful first paint for the users.
  • Utilizing service workers to eliminate all network latencies and bring it down to zero ms on repeat visits. Different network strategies with service workers help reduce load times and enable efficient bandwidth utilization so that the web app works flawlessly even on slow and flaky networks or even completely offline with lower battery consumption.
  • Leveraging GPU accelerated animations and GPU rasterization for smooth, buttery interactions. Almost every interaction and animation on the web app can remain on a fast path with the right set of GPU-friendly techniques.
  • Reducing server-side processing of network requests by moving the heavy lifting to the build process.
  • Over-indexing on perceived performance by using patterns such as quick response to inputs, eliminating long wait times by proactively engaging the users, in-memory cache programming, and optimistic updates for immediate rendering.
Photo of Aditya  Punjani

Aditya Punjani

Facebook

Aditya Punjani is a Software Engineer (Web) at Facebook, where he works on building high-performance experiences. Previously Aditya was the Tech Lead of Flipkart Lite, the world’s first major Progressive Web App. Aditya likes to push the Web forward and is passionate about JavaScript, network and rendering performance, developer tooling, browser internals, and user experience.