Progressive Web Apps & Web Components

Progressive Web Apps & Web Components

Mobile web apps are gaining ground on native apps in terms of features, performance and flexibility.

In this talk, I'll cover progressive web apps & web components - two key technologies that can speed up development, simplify maintenance, enhance usability & boost performance of modern web apps.

The ubiquity of mobile devices continues to fuel demand and innovation in the mobile apps market. And while native (Android & iOS) development continues to flourish, it is increasingly finding competition from both mobile web apps (browser-based) and hybrid apps (web apps adapted & packaged for deployment to native app markets).

As web developers, we now have two new technologies to add to our tool-belt that can make web apps competitive in experience and performance, with native counterparts.

MongoDB World 2018
https://www.mongodb.com/world18/session/174100

5b392dc79d5b6d1dab580bf60e26fb7c?s=128

Nitya Narasimhan, PhD

June 26, 2018
Tweet

Transcript

  1. #mdbw18 #pwacamp @nitya Progressive Web Apps & Web Components Prototyping

    a Modern Web App Nitya Narasimhan, PhD GDG New York City | BitnBot June 2018 #mdbw18 #pwacamp http://bit.ly/2018-mdbw18-pwacamp
  2. #mdbw18 #pwacamp @nitya Research Distributed Systems & Ubiquitous Computing Development

    Mobile & Web Applications, Machine Learning & IoT Advocacy Training, Mentoring & Speaking. Community & Entreprenership @nitya https://nityan.me
  3. Let’s talk about Modern Web Apps

  4. #mdbw18 #pwacamp @nitya Trend / ‘Mobile first’ development Credit: Google

    Developers
  5. #mdbw18 #pwacamp @nitya Perception / Native apps dominate web Credit:

    Google Developers
  6. #mdbw18 #pwacamp @nitya 78%of user time spent in top 3

    apps ... 0 new apps (on avg) installed each month 100 websites visited each month on avg Reality / Favorites vs. Frictionless Credit: Google Developers
  7. How can we convert Casual Browsing into Recurring Usage?

  8. #mdbw18 #pwacamp @nitya User Experience Developer Experience

  9. #mdbw18 #pwacamp @nitya User Experience Credit: The Noun Project FAST

    INTEGRATED RELIABLE ENGAGING
  10. #mdbw18 #pwacamp @nitya Has Goals FAST | The RAIL Performance

    Model Has Guidelines Key performance metrics related to user experience Recommendations to help you achieve those goals In under 50ms frame in ~10ms maximize it Interactive in 5s
  11. #mdbw18 #pwacamp @nitya INTEGRATED | Familiar, Full-screen, immersive UX Full-screen

    PWA display: fullscreen Add To Home Screen aka ‘web app install prompt’ Mini-infobar or Dialog (Chrome 68 onwaards)
  12. #mdbw18 #pwacamp @nitya RELIABLE | “Offline first” with ServiceWorker The

    Offline Cookbook Jake Archibald Web Fundamentals Caching Patterns On install (shown), or on activate, push, user interaction, response etc Retrieval Patterns Shows “cache, fall-back network”, but many other options exist...
  13. #mdbw18 #pwacamp @nitya ENGAGING | Web Push & Notifications Use

    Service Workers To deliver Timely, Precise & Relevant Notifications Web Push Is when the server supplies information to the Service Worker Notifications Action of Service Worker or Web Page Script showing information to user
  14. #mdbw18 #pwacamp @nitya WEB FUNDAMENTALS | Tools & Libraries JS

    library with offline support for Web Apps: best practices & code for integrating service workers + support for caching, routing & sync strategies Lighthouse Audit Report: Audits app for performance, accesibility, progressive web apps & best practices Chrome User Experience Report: UX metrics for how real-world Chrome users experience popular destinations on the web. Automated Web App Testing: Node library to control Headless Chrome over DevTools protocol, to automate user interaction testing or diagnose perf issues
  15. #mdbw18 #pwacamp @nitya User Experience Developer Experience

  16. #mdbw18 #pwacamp @nitya Developer Experience Credit: The Noun Project FLEXIBLE

    INTEROPERABLE REUSABLE EFFICIENT
  17. #mdbw18 #pwacamp @nitya Credit: The Noun Project FLEXIBLE / is

    it customizable for my needs? INTEROPERABLE / does it play well with others REUSABLE / is it modular and composable? EFFICIENT / is it easy to use & maintain
  18. #mdbw18 #pwacamp @nitya WEB COMPONENTS | Building blocks for web

    apps A set of platform APIs to create custom, reusable and encasulated tags for use in web pages and web apps that works across modern browsers and can be used with any JS framework or library that works with HTML
  19. #mdbw18 #pwacamp @nitya WEB COMPONENTS | Started as four distinct

    APIs Custom Elements Shadow DOM HTML Imports HTML Template s design and use new types of DOM elements e.g., <chicago-bears> encapsulate state (style) & hide markup complexity (structure) declarative markup snippets; inert till activated; repeatable support reuse & inclusion of HTML docs in other HTML docs
  20. The core of web components are Custom Elements

  21. #mdbw18 #pwacamp @nitya CUSTOM ELEMENTS | The “div soup” challenge

  22. #mdbw18 #pwacamp @nitya CUSTOM ELEMENTS | Readable, Reusable, Extensible <paper-tabs

    selected=“1”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs> var tabs = document.querySelector('paper-tabs'); tabs.addEventListener('core-activate', function() { console.log(this.selected); }); Vision: Behaves exactly like any other HTML tag once used. Can be styled, selected, interacted with
  23. #mdbw18 #pwacamp @nitya CUSTOM ELEMENTS | Implementation Today (v1) class

    ChicagoBears extends HTMLElement { ... } window.customElements .define('chicago-bears',ChicagoBears); Define custom element (ES6 classes) Register it with the platform for use
  24. #mdbw18 #pwacamp @nitya CUSTOM ELEMENTS | Usage Today (v1) Import

    its definition into new HTML doc Then use it just like any other tag .. <link rel="import" href="../chicago-bears/chicago-bears.html"> // usage (in HTML) <chicago-bears> </chicago-bears>
  25. #mdbw18 #pwacamp @nitya CUSTOM ELEMENTS | Usage Today (v1) e.g.,

    creating that element in JS <link rel="import" href="../chicago-bears/chicago-bears.html"> document.body.appendChild (chicagoBears); var chicagoBears = document.createElement ('chicago-bears' ); // usage (in HTML) <chicago-bears> </chicago-bears>
  26. #mdbw18 #pwacamp @nitya CUSTOM ELEMENTS | “There’s an element for

    that!” https://www.webcomponents.org Search Collections Preview Usage Publish Element Publish Collection
  27. #mdbw18 #pwacamp @nitya WEB COMPONENTS | Ecosystem Readiness https://www.webcomponents.org

  28. #mdbw18 #pwacamp @nitya WEB COMPONENTS | Interoperability testing https://www.custom-elements-everywhere.com Runs

    regular suite of tests list interoperability issues, highlight potential fixes used by others
  29. Architecture & Workflow can be non-trivial Web component libraries can

    help
  30. #mdbw18 #pwacamp @nitya The Polymer Project from Google | https://the-polymer-project.org

    Web Components Library Syntax / Code clarity CLI / Build efficiency App Toolbox Routing, Layout, Localization Demo Apps / News & Shop #UseThePlatform Shrinks with platform growth Polymer 3.0 / May 2018 / “Inflexion point” in adoption
  31. #mdbw18 #pwacamp @nitya The Polymer Project from Google | https://the-polymer-project.org

    End-to-End Polymer Apps w/ the Modern Web Platform Structuring app for PERFORMANCE Factoring the USER INTERFACE Managing the APP STATE Serving for PRODUCTION
  32. #mdbw18 #pwacamp @nitya Polymer @Google I/O 2018 | https://events.google.com/io/ PWA

    Starter Kit / Scaffolding PWA + Web Components lit-html Material Components bwer ⇒ npm / yarn html imports ⇒ es6
  33. #mdbw18 #pwacamp @nitya PWA-Starter Kit / https://github.com/Polymer/pwa-starter-kit

  34. #mdbw18 #pwacamp @nitya Progressive Web Apps Web Components Fast Integrated

    Reliable Engaging Flexible Interoperable Reusable Efficient Developer Experience User Experience
  35. #mdbw18 #pwacamp @nitya Thank You Nitya Narasimhan @nitya | #in/nityan

    #pwacamp #mdbw18 Resources Web Components Repository https://webcomponents.org Polymer Project Site https://www.polymer-project.org/ Custom Elements Everywhere Test Reports https://custom-elements-everywhere.com/ Articles Eric Bidelman / Custom Elements v1 Monica Dinculescu / Web Components Intro Polymer Resources Slack: https://bit.ly/polymerslack/ Codelabs: https://codelabs.developers.google.com/ Summit: https://summit.polymer-project.org/ http://bit.ly/2018-mdbw18-pwacamp