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

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