Going Progressive with Ember

Transcript

1. GOING PROGRESSIVE WITH SAMANTA DE BARROS EMBERCONF 2017
2. +
3. PROGRESSIVE WEB APP CARMELO, URUGUAY
4. “Progressive Web Apps take advantage of new technologies to bring the best of mobile sites & native apps to users. They’re reliable, fast, and engaging. They originate from a secure origin and load regardless of network state.“ - Addy Osmani
5. I HAVE A DREAM…
10. PROGRESSIVE WEB APP? LA PEDRERA, URUGUAY
11. LOOKS GOOD
12. LOOKS GOOD INSTALLS ON DEVICE
13. LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE
14. LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE WORKS FAST
15. PUNTA DEL ESTE, URUGUAY LOOKS GOOD?
16. NATIVE VS WEB
17. PUNTA DEL DIABLO, URUGUAY INSTALLS ON DEVICE?
18. THE WEB APP MANIFEST
24. BEFORE
25. AFTER
28. BEFORE
29. AFTER
31. ember-web-app Generates App Manifest and iOS tags from config file github: san650/ember-web-app
32. config/manifest.js
33. LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE WORKS FAST
34. WORKS OFFLINE? LA PEDRERA, URUGUAY
36. THE SERVICE WORKER
37. It’s a script Runs in the background Doesn't need a web page or user interaction
42. SAVE ASSETS ON INSTALL EVENT
43. SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST
44. SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST BACKGROUND SYNC
45. SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST BACKGROUND SYNC PUSH NOTIFICATIONS
46. SAVE ASSETS ON INSTALL EVENT INTERCEPT EVERY REQUEST BACKGROUND SYNC PUSH NOTIFICATIONS ALL YOU CAN DREAM OF
47. ember-service-worker broccoli-serviceworker
48. ember-service-worker Plugable approach Base addon just registers SW Add plugins for different cache strategies github: dockyard/ember-service-worker
49. ember-service-worker ember-service-worker-index ember-service-worker-asset-cache ember-service-worker-cache-fallback
50. broccoli-serviceworker Generates SW based on configuration Pre-caches app files by default github: jkleinsc/broccoli-serviceworker
51. app/config/environment.js
56. BEFORE
57. AFTER
58. AFTER
60. Chrome 37.7% MOBILE BROWSER USAGE WORLDWIDE Safari 22.2% Firefox 0.1% IE 0.1% Samsung Internet 5.4% Opera 8.6% http://gs.statcounter.com/browser-market-share/mobile-tablet/worldwide/#monthly-201602-201702-bar
61. MOBILE BROWSER USAGE Safari 55.9% Chrome 31.4% USA http://gs.statcounter.com/browser-market-share/mobile-tablet/united-states-of-america/#monthly-201602-201702-bar
63. THE APPLICATION CACHE
68. Generates appcache manifest with app resources Can be configured to ignore certain paths broccoli-manifest github: racido/broccoli-manifest
69. app/config/environment.js
70. USER DATA OFFLINE?
71. LOCAL STORAGE
72. LOCAL STORAGE WEBSQL
73. LOCAL STORAGE WEBSQL INDEXED DB
74. LOCAL STORAGE WEBSQL INDEXED DB LOCAL FORAGE (WRAPS ALL 3)
75. ember-localstorage-adapter ember-localforage-adapter ember-pouch
76. ember-localstorage-adapter Ember data adapter for local storage Local storage: key/value pair store, works with strings github: locks/ember-localstorage-adapter
77. ember-localforage-adapter github: genkgo/ember-localforage-adapter Ember data adapter for local forage LocalForage: wrapper for indexedDb and WebSQL that falls back to local storage
78. ember-pouch Ember Data for PouchDB/ CouchDB Saves data client side to IndexedDB or WebSQL Can sync to PouchDB github: nolanlawson/ember-pouch
79. LOOKS GOOD INSTALLS ON DEVICE WORKS OFFLINE WORKS FAST
80. DOES IT WORK FAST? MONTEVIDEO, URUGUAY
81. NATIVE VS PWA
82. FIRST PAGE RENDER
83. ember-cli-fastboot Server side rendering Still beta github: ember-fastboot/ember-cli-fastboot
84. SECOND PAGE RENDER
85. Service Worker / App Cache
86. TIME TO INTERACTION
87. Allows composition of apps into a single app Lazy loading of engines ember-engines github: ember-engines/ember-engines
88. TOOLS JOSE IGNACIO, URUGUAY
89. LIGHTHOUSE
92. web manifest + service worker + app cache
94. + fastboot
96. + ember-engines?
98. BACK TO THAT DREAM… PUNTA DEL ESTE, URUGUAY
99. 1. IT IS POSSIBLE
100. 1. IT IS POSSIBLE 2. IT IS DOABLE WITH EMBER
101. 1. IT IS POSSIBLE 2. IT IS DOABLE WITH EMBER 3. IT CAN GET EVEN BETTER
102. WE NEED YOUR HELP!
103. THANKS! @sami_dbc @sdebarros CABO POLONIO, URUGUAY