Ember for Mobile

In this special workshop for EmberConf 2017, we'll be looking at Ember in the context of Progressive Web Apps, focusing on

  • Providing devices with metadata to transcend the browser
  • Benchmarking PWAs
  • Using Fastboot for server-side rendering
  • Employing Appcache and Service Workers to provide some limited offline capabilities

Ember for Mobile

Ember for Mobile

We'll explore the latest in PWA technology, server-side rendering, benchmarking tools, and device support for mobile-specific metadata.

  • Ember for MobileProgressive Web Principles

    On legacy browsers, progressive web apps work like any other app, but on a modern browser, they start to exhibit superhero characteristics that go beyond what traditional web offers. Let's look at what those superpowers are, and study a few examples in the wild.

  • Ember for MobileSpeedy Startup

    One of the most important metrics used to judge PWA performance is "time to first meaningful paint". We'll take advantage of the fact that CSS goes to work as soon as it lands, to get something "meaningful" rendered on the screen before we're even done downloading JavaScript. This is only possible thanks to Ember's server-side rendering technology: Fastboot

  • Ember for MobileEXERCISE: Measuring PWA Metrics - Fastboot vs. Client-Side Rendering

    You'll be provided with a mobile experience that currently uses client-side rendering. Using some of the tools we've introduced, come up with a baseline measurement for PWA suitability. Then, let's enable fast boot and measure the magnitude of improvement.

  • Ember for MobileMobile Metadata

    Superhero apps don't need to live as mere bookmarks in a mobile browser, the blur the line between web app and native app. We'll look at some things we can do with metadata files and HTML head tags to take steps to transcend the browser.

  • Ember for MobileEXERCISE: A Rich Mobile Experience

    We've discussed several ways we can give mobile devices hints that allow us to have a "Browser Plus" experience, including home screen icons, splash screens, removal of browser chrome and more. Using this newfound knowledge, enhance your project app to provide a rich experience to your users.

  • Ember for MobileNo Network

    One clear distinction between a traditional web app and a native app is that one is only usable while online, and the other lives on the device in a more permanent (offline friendly) way. We'll look at two technologies that allow us to function -- at least to a limited degree -- with no network connection: Appcache and Service Workers.

  • Ember for MobileEXERCISE: Appcache MVP

    While we can't get any new data when offline, at least we can avoid hitting a 404 page. Using appcache, create a fallback experience for your project, where the user sees a clear "you are offline" state rather than a blank screen or 404 page.

  • Ember for MobileEXERCISE: Service Workers

    Service workers provide some opportunity for several things, but in the context of supporting offline, we're primarily interested in how it can handle fetch requests. Using the Mozilla service worker cookbook, implement two of the caching strategies. Use the debugging techniques and development workflow we've outlined in the workshop.