Progressive Web Apps with Vue.js

Presentation done at Devoxx Morocco 2017 about how to build progressive web apps with Vue.js

Transcript

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

   View Slide

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

   View Slide

3. #DevoxxMA @_bruno_b_
   GDPR
   Data Governance
   Data Fabric
   

   View Slide

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

   View Slide

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

   View Slide

6. #DevoxxMA @_bruno_b_
   Make it
   installable !
   

   View Slide

7. #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
   
   
   rel="manifest"
   href="/manifest.json">
   
   
   index.html
   

   View Slide

8. #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
   

   View Slide

9. #DevoxxMA @_bruno_b_
   Service
   workers
   

   View Slide

10. #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
    !
    

    View Slide

11. #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”: [...] }
    

    View Slide

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

    View Slide

13. #DevoxxMA @_bruno_b_
    What about
    Vue.js ?
    

    View Slide

14. #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
    

    View Slide

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

    View Slide

16. #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
    

    View Slide

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

    View Slide

18. #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/
    

    View Slide

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

    View Slide