Progressive Web Fundamentals

Progressive Web App technologies let you delight your users with the best modern browsers have to offer, without sacrificing compatibility for legacy environments.

Progressive Web Fundamentals

Runtime Performance

Single page apps have a reputation for providing rich experiences, but at the cost of having to download lots of code that tend to run slowly. It may seem that this is the inevitable consequence of complexity. However, with a few adjustments, we'll be able to keep both initial and return visits loading quickly and performing as well as they can in modern JavaScript runtimes.

  • Runtime PerformanceBuild Improvements: Tree Shaking

    One of the ways we can reduce our "page weight" is by applying a technique known as "tree shaking", whereby we avoid including unused code in our production assets. We'll look at:

    • How this works in practice,
    • What you can do today to benefit from tree shaking as much as possible,
    • Rollup.js vs Webpack.
  • Runtime PerformanceEXERCISE: Tree Shaking

    Update the build configuration of our projects so that unused code is "shaken" away.

  • Runtime PerformanceBuild Improvements: Partial Evaluation is a new tool from Facebook, which applies a technique called partial evaluation. Essentially, values that can be calculated or simplified ahead of time are optimized, reducing the amount of code we have to send over the wire, and the amount of work that needs to be done at runtime. We'll look at how we can make use of this tool to further reduce page weight, and the techniques to apply to benefit from Prepack as much as possible, while still having deterministic builds.

  • Runtime PerformanceEXERCISE: Partial Evaluation

    Further reduce our project's page weight, time to first meaningful paint, and time to interactive by setting up Prepack in our example app.

  • Runtime PerformanceCode Improvements: A V8 Primer

    A little awareness of how modern JavaScript engines work goes a long way, particularly when it comes to keeping our code in "fast mode" as much as possible. We'll briefly discuss the architecture of the V8 JS engine, touching on parts like Ignition (interpreter) and Turbofan (compiler). We'll discuss some rules you can apply, and enforce with static analysis tools to avoid expensive de-optimizations.

  • Runtime PerformanceEXERCISE: Consistent Shapes and Hot Functions

    Apply some of the performance debugging and performance optimization techniques to our example app. Particularly:

    • Make sure object shapes are not altered,
    • Refactor any functions that are de-optimized after being made "hot".
  • Runtime PerformanceNetwork Improvements: HTTP/2

    HTTP/2 (originally named HTTP/2.0) is a major revision of the HTTP network protocol. In addition to making traditional use cases addressed by HTTP/1.1 more efficient and performant, it also opens up totally new capabilities. We'll look at how we can use nginx in front of a Node.js API to reap the benefits of HTTP/2, without exposing our API to the hazard of long-running connections.

Profoundly Practical

We have an unapologetic bias for the pragmatic and will make sure you leave with skills you can actually use. We've carefully crafted examples that reflect real world problems developers encounter daily.

Challenging by Choice

Toy problems are fun, but we want to make sure you leave with skills and not just another pointless tutorial app. Prepare to tackle some serious snags, in a non-trivial context!

Approachable and Advanced

We pride ourselves in making web technology as approachable as possible. By the end of this training, you'll be the one explaining these topics to your peers!