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!)
- 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.