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