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

  1. Courses
  2. Progressive Web Fundamentals
  3. Terms and Tools

Terms and Tools

We'll look at the important characteristics of Progressive Web Apps, and introduce some important metrics like "time to first paint" and "time to interactive". By getting hands-on experience with advanced areas of Chrome developer tools and other utilities, we'll learn how to keep an eye on "progressive web fitness".

  • Terms and ToolsWelcome and Setup

    We'll grab some coffee, and make sure everyone has our workshop project properly installed.

  • Terms and ToolsFrom MPA to SPA to PWA

    The way we think about web applications has evolved over the years. Before we jump in and start walking through the latest advancements, we'll set the stage of how we got to where we are. By looking at some characteristics of the Multi Page Apps that were popular in the mid-2000s, and the Single Page Apps that we've been building for years, we'll be able to identify the strengths and weaknesses of both approaches, and how a Progressive Web App measures up.

  • Terms and ToolsAudits and Instrumentation

    This course will take the form of improving a Single Page App so that it takes advantage of the latest features the web platform has to offer. In order to understand the work that needs to be done, we'll familiarize ourselves with some important tools, including:

    • Chrome (Canary) Dev Tools (now includes Lighthouse!)
    • WebPageTest.org
    • iOS Simulator (OS X only)
    • Android Emulator
    • Google Structured Data Testing Tool

    We'll talk about and measure some important performance metrics, like "time to first paint", "time to interactive" and more!

  • Terms and ToolsEXERCISE: Progressive Web Examples

    We'll apply our new auditing tools to some progressive web app examples.

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!