Component-Oriented Progressive Web Applications 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
- 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
- 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
- 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
- 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_
- 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
- 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
- 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
- 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
- 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
- 47. THANK YOU