A Progressive Web Application introduction through Component-Oriented Front-end with VueJS, including Service Worker main features.

1. COMPONENT-ORIENTED
PWAS WITH VUEJS_

2. @Rafael_Casuso
A B O U T M E
•CTO @StayApp
•CEO @SnowStormIO
•Organizer @VueJsMadrid,
@BotDevMad
•Software Engineer with +10 years
of experience leading teams and
developing.
•Software Architect looking for
revolutionary ways to change the
world.
•Specialties: JavaScript, NodeJS,
Conversational Intelligences.
2

3. PROGRESSIVE
WEB
APPLICATION
+ BASICS

4. WHAT IS A PROGRESSIVE WEB APP?_
‣ IN 2015 DESIGNER FRANCES BERRIMAN AND GOOGLE CHROME ENGINEER
ALEX RUSSELL COINED THE TERM
‣ IT IS A WEB APPLICATION THAT INTEGRATES MODERN BROWSER
TECHNOLOGY LIKE SERVICEWORKER AND APP MANIFEST TO UPGRADE
PROGRESSIVELY INTO MOBILE OS TO ADD NATIVE-LIKE FEATURES

5. PWA MAIN CHARACTERISTICS_
‣ PROGRESSIVE - INTEGRATES INTO OS THROUGH GRADUAL TECHNOLOGIES
‣ RESPONSIVE - ON ALL SCREEN SIZES
‣ CONNECTIVITY-INDEPENDENT - WORKS OFFLINE DUE TO SERVICE WORKER
‣ APP-LIKE - FULLSCREEN, OS NATIVE-LIKE BEHAVIOUR
‣ FRESH - DUE TO SERVICE WORKER UPDATE PROCESS
‣ SAFE - SERVED WITH HTTPS
‣ DISCOVERABLE - AS APP THANKS TO MANIFEST AND SW REGISTRATION
‣ RE-ENGAGEABLE - WITH FEATURES LIKE PUSH NOTIFICATIONS
‣ INSTALLABLE - ADD TO HOMESCREEN WITHOUT APP STORE
‣ LINKABLE - IT CAN BE SHARED WITH A COMMON WEB LINK

6. APP SHELL ARCHITECTURE_
‣ APP SHELL IS THE MINIMAL HTML, CSS & JS TO POWER THE USER INTERFACE
‣ IT IS CACHED OFFLINE FOR INSTANT PERFORMANCE WITH SERVICE WORKER

7. APP DECLARATION_
‣ APP DECLARATION INTO MANIFEST.JSON
‣ APP NAME
‣ ICONS FOR ALL DEVICES
‣ SPLASH SCREEN
‣ BACKGROUND COLOR
‣ NAME AND ICON ARE INFERRED
‣ THEME COLOR FOR TOOLBAR
‣ DISPLAY
‣ ORIENTATION
‣ START URL

8. APP DECLARATION_

9. APP INSTALATION_
‣ AUTOMATIC ADD TO HOMESCREEN BUTTON
‣ MANIFEST WITH SHORTNAME, NAME,
192X192 ICON & START URL
‣ REGISTERED SERVICE WORKER
‣ SERVED OVER HTTPS
‣ LAUNCH:
‣ CHROME INITIATES
‣ SPLASH SCREEN IS SHOWN
‣ PWA IS LOADED FROM CACHE OR NET
‣ TARGET FOR ITS URL DOMAIN

10. WHAT IS A SERVICE WORKER?_
‣ IT IS A TYPE OF WEB WORKER THAT RUNS IN AN INDEPENDENT THREAD
DEDICATED TO NETWORK AND PWA SUPPORT
‣ MAIN FEATURES:
‣ INTERCEPTS NETWORK REQUESTS
‣ CACHING
‣ WEB PUSH NOTIFICATIONS
‣ CURRENT SUPPORT:
‣ CHROME
‣ FIREFOX
‣ STILL EXPERIMENTAL IN EDGE AND SAFARI

11. SERVICE WORKER_
‣ NETWORK PROXY DESIGNED TO BE ASYNC, NON-BLOCKING
‣ CANNOT PERFORM SYNC OPERATIONS
‣ CANNOT ACCESS DOM DIRECTLY
‣ COMMUNICATES WITH MAIN THREAD THROUGH MESSAGES
‣ SECURE, ONLY RUNS ON HTTPS TO PREVENT MAN-IN-THE-MIDDLE ATTACKS
‣ BECOMES IDLE WHEN NOT USED AND REACTS TO EVENTS
‣ USE PROMISES
‣ IT IS REGISTERED ONCE LOADED

12. CACHING_
‣ SW APP CACHE USES CACHE API, A PERSISTENCE INDEPENDENT OF
BROWSER CACHE
‣ SERVICE WORKER ASSETS PRECACHING
‣ INTEGRATED INTO BUILD PROCESS
‣ SW-PRECACHE PLUGIN
‣ SW-PRECACHE-WEBPACK
‣ OFFLINE DATA CACHING THROUGH VUEJS:
‣ PERSISTED STORE
‣ VUEX PERSISTED STATE

13. PUSH NOTIFICATIONS_
‣ HOW THEY WORK - BROWSER TO SERVER:
‣ ASK USER FOR PERMISSION
‣ GET SUBSCRIPTION FROM BROWSER SERVICE
‣ STORE IT IN YOUR SERVER

14. PUSH NOTIFICATIONS_
‣ HOW THEY WORK - RECEIVING PUSHES:
‣ SERVICE WORKER LISTENS PUSH EVENTS AND SHOWS NOTIFICATION

15. PUSH NOTIFICATIONS_

16. VUE PWA TEMPLATE_
‣ VUE BOILERPLATE FOR PWA DEVELOPMENT
‣ https://github.com/vuejs-templates/pwa
‣ INCLUDES
‣ SERVICE WORKER PRECACHING OF APP SHELL
‣ SCRIPT ASYNC PRELOADING
‣ APPLICATION MANIFEST
‣ DEV ENVIRONMENT WITH WEBPACK, HMR, LINTER, SOURCEMAPS
‣ PROD BUILD WITH ASSETS MINIFIER, INJECTION IN GENERATED HTML,
‣ TESTING ENVIRONMENTS FOR BOTH UNIT & FUNCTIONAL TESTS

17. OS
INTEGRATION
NATIVE-LIKE
FEEL
ENGAGEMENT

18. A VUEJS
QUICK
INTRODUCTION
+ BASICS

19. WHAT IS VUEJS?_
‣ A PROGRESSIVE FRAMEWORK FOR BUILDING INTERFACES
‣ MVVM PATTERN WITH FOCUS ON THE VIEWMODEL, CONNECTING
VIEW AND MODEL WITH TWO-WAY REACTIVE DATA-BINDING
‣ CORE VALUES: REACTIVITY, COMPONENTIZATION, MODULARITY,
SIMPLICITY AND STABILITY
‣ INFLUENCED BY ANGULARJS, KNOCKOUTJS, RACTIVEJS AND RIVETJS

20. MVVM_

21. INSTANCE EXAMPLE_

22. INSTANCE LIFECYCLE_

23. FEATURES_
‣ PROPERTIES ARE REACTIVE ATTRIBUTES PROXIED BY THE INSTANCE FROM DATA OBJECT
‣ METHODS ARE FUNCTIONS TO USE IN THE INSTANCE OR IN DIRECTIVE EXPRESSIONS
‣ INTERPOLATIONS CAN BE TEXT OR ATTRIBUTES WITH PROPERTIES OR JS EXPRESSIONS
‣ DIRECTIVES ARE V-ATTRIBUTES THAT MODIFY THE DOM WHEN JS EXPRESSION
CHANGES
‣ FILTERS ARE FOR TEXT TRANSFORMATIONS, COMPUTED PROPS FOR MORE COMPLEX
‣ COMPUTED PROPS ARE COMPLEX MANIPULATIONS OF REACTIVE PROPS, CACHED
BASED ON THEIR DEPENDENCIES
‣ COMPONENTS ARE USED TOGETHER USUALLY IN PARENT-CHILD RELATIONS
‣ PARENT PASSES DOWN DATA TO THE CHILD VIA PROPS
‣ CHILD SENDS MESSAGES TO PARENT VIA EVENTS

24. REACTIVITY
DEVELOPER
EXPERIENCE
MODULARITY

25. COMPONENT
ORIENTED
FRONT-END
+ BASICS

26. WHAT IS A COMPONENT?_
‣ A FUNCTIONAL REUSABLE, ENCAPSULATED AND AUTONOMOUS PIECE OF
USER INTERFACE
‣ IT HAS ITS OWN INTERFACE TO GET DATA AND INTERACT WITH EXTERIOR
‣ IT REPRESENTS MODULARITY INTO A USER INTERFACE
‣ IT IS COMPOSABLE WITH OTHER COMPONENTS

27. WHY COMPONENTS?_
‣ FUNCTIONALITY ENCAPSULATION ALLOWS DISTRIBUTED DEVELOPMENT
‣ AUTONOMY ALLOWS REUSABILITY
‣ INDEPENDENCE ALLOWS INDIVIDUAL RENDERING
‣ VIRTUAL DOM ALLOWS DIFFS
‣ REACTIVITY IS APPLIED SELECTIVELY
‣ DATA UPDATES ONLY AS REQUIRED

28. COMPONENTS ARCHITECTURE_
‣ APPLICATION AS A TREE OF SELF-CONTAINED REUSABLE COMPONENTS

29. COMPONENTS DEFINITION IN VUEJS_
‣ A COMPONENT IS A VUE INSTANCE WITH PREDEFINED OPTIONS
‣ IT EXTENDS A HTML ELEMENT WITH ENCAPSULATED REUSABLE CODE
‣ THEY ARE NOT WEB COMPONENTS SPECIFICATION CUSTOM ELEMENTS:
‣ DO NOT NEED POLYFILLS
‣ IMPORTANT FEATURES LIKE CROSS-COMPONENT DATA FLOW, CUSTOM
EVENT COMMUNICATION AND BUILD TOOLS INTEGRATION
‣ REGISTRATION CAN BE GLOBAL OR LOCAL
‣ DATA (MODEL) MUST BE A FUNCTION TO AVOID SHARING SAME REFERENCE
BETWEEN COMPONENTS

30. COMPONENT EXAMPLE_

31. COMPONENTS COMPOSITION_
‣ COMPONENTS ARE USED TOGETHER USUALLY IN PARENT-CHILD RELATIONS
‣ THEIR COMMUNICATION IS SUMMARIZED AS PROPS DOWN, EVENTS UP:
‣ PARENT PASSES DOWN DATA TO THE CHILD VIA PROPS
‣ CHILD SENDS MESSAGES TO PARENT VIA EVENTS

32. SINGLE-FILE COMPONENTS_
‣ SINGLE FILE .VUE WHERE TEMPLATE,
JAVASCRIPT AND CSS IS
ENCAPSULATED
‣ BUILD TOOL LIKE WEBPACK OR
BROWSERIFY IS NEEDED
‣ VUE-LOADER FOR WEBPACK &
VUEIFY FOR BROWSERIFY
‣ COMPLETE SYNTAX HIGHLIGHTING
‣ COMMONJS MODULES
‣ COMPONENT-SCOPED CSS

33. FLEXIBILITY
DISTRIBUTED
DEVELOPMENT
REUSABILITY

34. THE
APPLICATION
OVERVIEW
+ MEDIUM

35. APPLICATION STRUCTURE_
‣ APPLICATION-LEVEL NAVIGATION:
‣ COMPONENT-BASED ROUTING
‣ PAGE TRANSITIONS
‣ FLEXIBLE NAVIGATION FOR WEB AND APP ENVIRONMENTS
‣ PUSH NOTIFICATIONS DEEP LINKING

36. APPLICATION STRUCTURE_
‣ APPLICATION-LEVEL DATA:
‣ DECOUPLED FROM PARTICULAR COMPONENTS
‣ ENCAPSULATED MANAGAMENT
‣ MUTATIONS TO PERFORM TRACKED STATE CHANGE
‣ GETTERS FOR COMPUTED PROPERTIES DERIVED FROM STATE
‣ ACTIONS TO RETRIEVE ASYNC DATA
‣ PERSISTED IN STORE

37. APPLICATION FEATURES_
‣ COMPLEX COMPONENT-BASED VUEJS APPLICATION
‣ ROUTING WITH VUE-ROUTER, INCLUDING CODE-SPLITTING
‣ STATE MANAGEMENT WITH VUEX
‣ SERVER-SIDE RENDERING
‣ SERVER-SIDE DATA PRE-FETCHING
‣ CLIENT-SIDE STATE & DOM HYDRATION
‣ SINGLE-FILE COMPONENTS
‣ HOT RELOADING IN DEVELOPMENT
‣ CSS EXTRACTION IN PRODUCTION

38. ROUTING_
‣ VUE-ROUTER IS THE OFFICIAL CORE PLUGIN
‣ DYNAMIC ROUTING MATCHING WITH PARAMS AND QUERY PARAMS
‣ NESTED ROUTES, NAMED ROUTES
‣ REDIRECT & ALIAS

39. ROUTING EXAMPLE_

40. PAGE TRANSITIONS_
‣ SINCER ROUTER-VIEW IS A BUILT-IN DYNAMIC COMPONENT
IT CAN HAVE TRANSITIONS

41. STATE MANAGEMENT_
‣ VUEX IS THE ELM-INSPIRED OFFICIAL FLUX-LIKE IMPLEMENTATION
‣ VUEX CORE IS THE STORE, A CONTAINER OF APPLICATION STATE
‣ STORE IS THE SOURCE OF TRUTH

42. STATE MANAGEMENT_

43. STATE MANAGEMENT_
‣ STORE PASSED TO ROOT INSTANCE IS
INJECTED IN CHILD COMPONENTS
‣ COMPONENTS CAN STILL HAVE LOCAL
STATE
‣ STORE STATES ONLY CHANGES
THROUGH COMMITTING MUTATIONS
‣ ACTIONS COMMIT MUTATIONS AND
CAN CONTAIN ASYNC OPERATIONS

44. STATE MANAGEMENT_
‣ PERSISTED STATE TO LOCAL STORAGE WITH VUEX-PERSISTEDSTATE
‣ ALWAYS CHECK IF DATA ALREADY EXISTS IN STATE
‣ YOU DON’T HAVE TO WAIT FOR ACTIONS TO RESOLVE TO PAINT
‣ PERFORM STORE ACTIONS ANYWAY TO RETRIEVE FRESH DATA

45. UNIT AND FUNCTIONAL TESTING_
‣ COMPONENT-BASED UNIT TESTING WITH JEST
‣ END-TO-END TESTING WITH NIGHTWATCH
‣ MAIN APPLICATION FUNNELS

46. COMPONENT-
BASED ROUTING
DECOUPLED
STATE
MANAGEMENT
UNIT &
FUNCTIONAL
TESTING

47. THANK YOU