Tweet
Tweet

Slide 1

Slide 1 text

Progressive Web Apps with Vue.js Bruno Bonnin @_bruno_b_ #DevoxxMA

Slide 2

Slide 2 text

#DevoxxMA @_bruno_b_ About me https://github.com/bbonnin

Slide 3

Slide 3 text

#DevoxxMA @_bruno_b_ GDPR Data Governance Data Fabric

Slide 4

Slide 4 text

#DevoxxMA @_bruno_b_ Vue.js Component-oriented Dedicated to web interface creation Performant Very easy to learn Focus on the View layer Flexible

Slide 5

Slide 5 text

#DevoxxMA @_bruno_b_ Progressive Web Apps ? Reliable Fast Engaging Improving user experience !

Slide 6

Slide 6 text

#DevoxxMA @_bruno_b_ Make it installable !

Slide 7

Slide 7 text

#DevoxxMA @_bruno_b_ Manifest: metadata of your web app { "name": "Vue.js PWA", "short_name": "Vue.js PWA", "icons": [{ "icons": "icon-mid.png", "sizes": "96x96" }, { "icons": "icon-large.png", "sizes": "192x192" }], "theme_color": "#4DBA87", "background_color": "#000000", "display": "standalone", "orientation": "portrait", "start_url": "/demo" } manifest.json index.html

Slide 8

Slide 8 text

#DevoxxMA @_bruno_b_ Manifest: metadata of your web app { "name": "Vue.js PWA", "short_name": "Vue.js PWA", "icons": [{ "icons": "icon-mid.png", "sizes": "96x96" }, { "icons": "icon-large.png", "sizes": "192x192" }], "theme_color": "#4DBA87", "background_color": "#000000", "display": "standalone", "orientation": "portrait", "start_url": "/demo" } manifest.json

Slide 9

Slide 9 text

#DevoxxMA @_bruno_b_ Service workers

Slide 10

Slide 10 text

#DevoxxMA @_bruno_b_ Service workers Web app Cache Server Service Worker GET /api/stats GET /api/stats { “data”: [...] } { “data”: [...] } { “data”: [...] } Discussion on-going to cache POST requests https://github.com/w3c/ServiceWorker/issues/693 !

Slide 11

Slide 11 text

#DevoxxMA @_bruno_b_ Service workers Web app Cache Server Service Worker GET /api/stats { “data”: [...] } Caching strategies - caching falling back to the network - network falling back to the cache - cache first, then network - displays cache data until network response is returned - intercepts the network request and caches the response { “data”: [...] }

Slide 12

Slide 12 text

#DevoxxMA @_bruno_b_ Service workers Source: http://caniuse.com/#feat=serviceworkers

Slide 13

Slide 13 text

#DevoxxMA @_bruno_b_ What about Vue.js ?

Slide 14

Slide 14 text

#DevoxxMA @_bruno_b_ And with Vue.js ? Vue.js provides a PWA template! See: https://github.com/vuejs-templates/pwa $ npm install -g vue-cli $ vue init pwa $ npm install $ npm run dev

Slide 15

Slide 15 text

#DevoxxMA @_bruno_b_ Let’s go ! Source code: https://github.com/bbonnin/devoxxma2017-pwa

Slide 16

Slide 16 text

#DevoxxMA @_bruno_b_ In summary, PWA template includes... ● Manifest.json ○ makes the web app installable ● Service worker ○ By default, caches the application shell ○ Usable for any other resources: connectivity independence ● Preload/prefetch of app chunks for better performance ○ Preload : for resources that will be used in the page ○ Prefetch : for resources that might be needed

Slide 17

Slide 17 text

#DevoxxMA @_bruno_b_ Lighthouse Source:https://developers.google.com/web/tools/lighthouse/

Slide 18

Slide 18 text

#DevoxxMA @_bruno_b_ Conclusion Still a lot to see: ● More technologies, such as Push notifications, Performance improvement, Server-side rendering ● Other boilerplates, such as nuxtjs/pwa ○ https://github.com/nuxt-community/pwa-template ● Good source to compare frameworks: HNPWA ○ https://hnpwa.com/ ● Case studies: ○ https://developers.google.com/web/showcase/

Slide 19

Slide 19 text

Merci ! https://github.com/bbonnin/devoxxma2017-pwa #DevoxxMA