Progressive Web Applications and Offline
Join us for an Awesome Workshop on:

Progressive Web Applications and Offline

July 27 to 28, 2017 - 9:30am to 5:30pm Central US Time

This workshop has already been published as a course!

Progressive Web Applications and Offline

Some Key Takeaways!

By coding along with us in the Workshop, you'll:

  • Learn how to audit a web application for "Progressive Web Fitness" with Lighthouse, and to measure important performance metrics like "time to first load" and "time to interactive"
  • Take a "classic" client-side-rendered single-page app, and make it work offline, without changing a single line of the app's code
  • Get hands-on experience with IndexedDb, a worker-friendly nosql database that's built in to most browsers
  • Build an example of the App-Shell architecture, where large portions of the UI load almost instantly
  • Walk through a proper HTTP/2 server-side rendering setup, by putting nginx in front of node.js
  • Learn how to apply Rollup and Prepack to your code, to shrink your production bundles down as much as possible
  • Learn what you can do to keep your JavaScript code fast, by taking a look at some aspects of JavaScript engines, and taking advantage of some tools to keep us on the speedy path

Your (Awesome) Instructor

Mike North

Mike North

Mike is a Staff Engineer and tech lead at LinkedIn where he works with the Presentation Infrastructure team as one of the company’s deepest TypeScript, PWA and Ember.js experts, to help maintain LinkedIn’s tech stack. Prior to working at LinkedIn, Mike was the CTO of Levanto Financial and the UI Architect of Yahoo’s Ads & Data division. As part of his ongoing work to improve the JavaScript ecosystem, Mike is a regular contributor and maintainer of a wide range of open source libraries. His areas of focus are TypeScript , Ember.js and Progressive Web Applications.

Spend A Full Day Immersed With Mike North and Steve Kinney

Workshop Details

Progressive Web Apps become superheroes when they can, while still providing a great baseline experience on less modern browsers. They're reliable, fast, engaging, and although they can do many of the things users expect from native apps, they don't take up a lot of space, or require a long install process. In this workshop, we'll begin with a "classic" single page app, that's a bit bulky in size, has a slow initial load, doesn't work offline, and provides a very "basic" mobile web experience. We'll then enhance it in several ways, so that when key technologies are supported in your users' browsers, their experience ends up being substantially better! First, we'll add any mobile-specific metadata to the app, and look at how we can use android studio and the iOS simulator to test out our improvements. In order to reduce our page weight a little bit, we'll discuss how to choose between image types like png and jpeg, and some recent advances in compression. Next, we'll add a service worker, and apply a few caching strategies to ultimately allow our app to work offline! Additionally, we'll take advantage of IndexedDb, so that new data created on a mobile device can be stored as a structured record, available both in our application and service worker scopes. Finally, we'll work on reducing our initial page weight, by applying code splitting, and reduce the size of our bundles with Rollup and Prepack. In the end, our "classic" app will load quickly on the first visit, and nearly instantly for every visit thereafter!

Daily Schedule

We've already held over 150 workshops with thousands of attendees in-person and online. In this time we've discovered ways to schedule the day, so it goes smoothly and efficiently. Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.

Day 1

  • 9:30AM
    Welcome and Setup
  • 9:45AM
    From MPA to SPA to PWA
  • 10:15AM
    Audits and Instrumentation
  • 10:45AM
    Exercise: Progressive Web Examples
  • 11:00AM
    HTTP Caching
  • 11:30AM
    Using AppCache (responsibly)
  • 12:00PM
    Exercise: Appcache
  • 12:30PM
    Service Workers
  • 1:00PM
    Lunch
  • 2:00PM
    Exercise: Service Workers 1
  • 2:30PM
    Service Worker Cache APIS
  • 3:00PM
    Exercise: Crushing Caches
  • 3:30PM
    Basic IndedDB
  • 4:00PM
    Exercise: IndedDB IDB
  • 5:00PM
    Indexes, Version Migration and IndexedDB 2.0
  • 6:00PM
    Exercise: IndedDB2.0 and Migrations
  • 6:30PM
    Recap and Wrap Up

Day 2

  • 9:30AM
    Welcome and Recap
  • 9:45AM
    Mobile and Social Metadata
  • 10:15AM
    Exercise: Mobile Web, as an APP!
  • 10:45AM
    Push Notifications
  • 11:00AM
    Payment Processing
  • 11:30AM
    Background Tasks
  • 12:00PM
    Exercise: Background Processes
  • 12:30PM
    Building Improvements: Tree Shaking
  • 1:00PM
    Lunch
  • 2:00PM
    Exercise: Tree Shaking
  • 2:30PM
    Building Improvements: Partial Evaluation
  • 3:00PM
    Exercise: Partial Evaluation
  • 3:30PM
    Code Improvements: A V8 Primer
  • 4:00PM
    Exercise: Constant Shakes and Hot Functions
  • 4:30PM
    Network Improvements: HTTP/2
  • 5:00PM
    APP Shell
  • 5:30PM
    Exercise: APP Shell
  • 5:45PM
    PRPL
  • 6:00PM
    Exercise: PRPL
  • 6:30PM
    Wrap Up
Expand...

Interact with the Instructor - Online & In-Person

Get Your Questions Answered • Code Along with the Class • Classroom Format

Is This Workshop for Me?

Summary

This workshop is for people who want to bring their web applications to the next level, and leverage the full current offline capabilities to their fullest extent.

Any Prerequisites?

  • A knowledge of HTML, CSS and JavaScript is required.

Event Details

What

2 Full Day Workshop Sessions

Replay Videos (available immediately)

When

July 27 to 28, 2017 - 9:30am to 5:30pm Central US Time

Where

Option 1: Attend online on our full HD live stream

Option 2: Attend in-person at HQ in Minneapolis, MN