Progressive Web Apps & Polymer. Wendy Ginsberg Product Manager,

Transcription

1 Progressive Web Apps & Polymer Wendy Ginsberg Product Manager,

2 Who am I? Wendy Ginsberg Chrome Web Platform

3 Who are you??????????????????????????

4 1. Polymer 2. PWAs 3. Polymer + PWAs

5 1. Polymer

6 Polymer == An opinionated library that sugars Web Components APIs, to make it easy to build encapsulated, reusable custom elements.

7 Polymer library App Toolbox

8 Polymer library Polymer CLI App Toolbox Web Component Tester

9 What problems are we solving?

10

11 <h1> <ul> <p>

12 Building UI tabs should be easy!

13

14

15

16

17

18 NOT INTEROPERABLE

19 How can we redesign HTML for the (modern mobile) web?

20

21 <search-icon> <search-input> <drawer-panel> <paper-fab>

22 Build a better framework.

23 Build a better framework web.

24 That sounds hard. Where do we start?

25 The web platform is already incredibly powerful.

26 A study in <select>

27 Simple <select> </select>

28 Composable <select> <option>nylon</option> <option>teflon</option> <option>styrofoam</option> <option>lycra</option> </select>

29 Declarativ e <select> <option disabled>nylon</option> <option selected>teflon</option> <option disabled>styrofoam</option> <option disabled>lycra</option> </select>

30 Flexible <select multiple> <optgroup label= Clothing > <option>nylon</option> <option>lycra</option> </optgroup> </select>

31 Forgiving <select> <option>nylon</option> <option>teflon</option> <p>propylene?</p> <option>styrofoam</option> <option>lycra</option> </select>

32 Accessible Pick a Polymer <label for= polymer-picker >Pick a Polymer</label> <select id= polymer-picker > <option>nylon</option> <option>teflon</option> <option>styrofoam</option> <option>lycra</option> </select>

33 Programmable > this.selectedindex; >0 > this.addeventlistener( change, function() { > console.log( I changed! ); > });

34 <select> an amazing little element declarative, readable encapsulated behavior reusable across contexts <select> <option>nylon</option> <option>teflon</option> <option>styrofoam</option> <option>lycra</option> </select>

35 I want more elements like this.

36 I want to build elements like this.

37 ... n a c! You s t n e n o p m o C b e W with

38 Polymer == An opinionated library that sugars Web Components APIs, to make it easy to build encapsulated, reusable custom elements.

39 Web Components + Polymer Less markup. Less JS. Less confusion. <paper-tabs> <paper-tab>knowledge</paper-tab> <paper-tab>history</paper-tab> <paper-tab>food</paper-tab> </paper-tabs>

40 2. PWAs Progressive Web Apps

41

42

43

44

45 AliExpress Case Study 2X increase in page visits per session 104% increase in conversion rate for new users

46 Konga & Jumia Case Study Loads 2x faster than their previous web site Uses 6x less data than their native app counterparts

47 How did they do it?

48 How did they do it? PWAs

49 Reliable Fast Engaging checklist from /web

50 What? Load instantly, regardless of network connection Reliable Why? Send less data for initial page loads, save your users money How? Service Workers

51

52

53 What? No janky scrolling or slow to respond interfaces. Fast Why? 53% of users will abandon a site if it takes longer than 3 seconds to load! How? PRPL pattern (Push, Render, Pre-cache, Lazy load)

54 Push using HTTP2/push Render only the critical route or bundle Pre-cache the necessary files with a Service Worker Lazy load your content

55

56 What? Live anywhere an app can, send notifications to the user Engaging Why? Increase transactions and interactions with your app How? Web Push Notifications API, Add to Home screen

57

58

59

60 What do they look like? checklist from /web

61 We re here to help! developers.google.com/web

62

63 Here s a head start

64 3. Polymer + PWAs with the Polymer App Toolbox

65 Polymer App Toolbox Templates Layout Localization Routing App Storage Service Worker

66 Polymer App Toolbox Templates Layout Localization Routing App Storage Service Worker

67

68

69

70

71

72 How can I evaluate my PWA?

73

74

75 1. Polymer 2. PWAs 3. Polymer + PWAs

76 Thank you! Wendy Matterhorn CC0