Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
VUE JS
IN ACTION_
@Rafael_Casuso
A B O U T M E
•CTO @StayApp
•CEO @SnowStormIO
•Organizer @VueJsMadrid,
@BotDevMad
•Software Engineer with +...
A
QUICK
INTRODUCTION
+ BASICS
WHAT IS VUEJS?_
‣ A PROGRESSIVE FRAMEWORK FOR BUILDING INTERFACES
‣ MVVM PATTERN WITH FOCUS ON THE VIEWMODEL, CONNECTING
V...
MVVM_
INSTANCE EXAMPLE_
INSTANCE LIFECYCLE_
COMPONENTS ARCHITECTURE_
‣ APPLICATION AS A TREE OF SELF-CONTAINED REUSABLE COMPONENTS
COMPONENTS DEFINITION_
‣ A COMPONENT IS A VUE INSTANCE WITH PREDEFINED OPTIONS
‣ IT EXTENDS A HTML ELEMENT WITH ENCAPSULAT...
SINGLE-FILE COMPONENTS_
‣ SINGLE FILE .VUE WHERE TEMPLATE,
JAVASCRIPT AND CSS IS
ENCAPSULATED
‣ BUILD TOOL LIKE WEBPACK OR...
FEATURES_
‣ PROPERTIES ARE REACTIVE ATTRIBUTES PROXIED BY THE INSTANCE FROM DATA OBJECT
‣ METHODS ARE FUNCTIONS TO USE IN ...
THE
APPLICATION
OVERVIEW
+ MEDIUM
APPLICATION FEATURES_
‣ COMPLEX COMPONENT-BASED VUEJS APPLICATION
‣ ROUTING WITH VUE-ROUTER, INCLUDING CODE-SPLITTING
‣ ST...
ARCHITECTURE OVERVIEW_
CODE STRUCTURE_
‣ IF YOU CREATE A SINGLE APP, ROUTER, STORE IT WILL BE SHARED AMONG
REQUESTS
‣ THUS WE NEED FACTORY FUNCTI...
THE
SERVER-SIDE
IMPLICATION
+ ADVANCED
SERVER-SIDE RENDERING_
‣ BY DEFAULT VUE PRODUCES AND MANIPULATES DOM IN THE BROWSER
‣ SSR:
‣ RENDERS COMPONENTS INTO HTML ...
SERVER-SIDE RENDERING TRADE-OFFS_
‣ DEVELOPMENT CONSTRAINTS
‣ BROWSER-SPECIFIC CODE ONLY IN CERTAIN LIFECYCLE HOOKS
‣ SOME...
ISOMORPHIC CODE CAVEATS_
‣ NO DATA REACTIVITY ON SERVER
‣ DETERMINISTIC:
‣ COMPONENT ASYNC DATA IS PRE-FETCHED
‣ APP STATE...
THE
SERVER
APPLICATION
+ ADVANCED
BASIC IMPLEMENTATION_
BUNDLE RENDERER_
‣ SERVER-SIDE BUNDLE IS NOT USED DIRECTLY TO AVOID SERVER RESTART
‣ VUE-SERVER-RENDERER HAS CREATE-BUNDLE...
CACHING_
‣ PAGE-LEVEL CACHE
‣ IF CONTENT IS NOT USER-SPECIFIC WE CAN DO MICRO-CACHING
‣ LRU (LEAST RECENTLY USED) FOR 1 SE...
THE
APPLICATION
ROUTING
+ ADVANCED
ROUTING_
‣ WE REUSE SAME ROUTING CONFIG ON CLIENT & SERVER
‣ WEBSERVER GETS ALL ROUTES * & PASSES THEM TO VUE APP
‣ SEE EN...
THE
STATE
MANAGEMENT
+ ADVANCED
PRE-FETCHING DATA_
‣ SSR BASICALLY RENDERS A “SNAPSHOT” OF OUR APP
‣ ALL ASYNC DATA NEEDS TO BE PRE-FETCHED BEFORE RENDERI...
PRE-FETCHING DATA_
‣ SERVER DATA FETCHING:
‣ IT GETS COMPONENTS BY ROUTE & CALLS ASYNC-DATA OF EACH ONE
‣ PASSES STATE INT...
CLIENT HYDRATION_
‣ CLIENT STORE.REPLACE-STATE WITH INLINED STATE BY SERVER
‣ CLIENT MOUNTS APP ON DOM ON HYDRATION MODE W...
THANK YOU
VueJS in Action
Upcoming SlideShare
Loading in …5
×

VueJS in Action

An action journey through VueJS both on client and server, with special focus into SSR (Server-Side Rendering) and advanced techniques like caching and hydration.

VueJS in Action

  1. 1. VUE JS IN ACTION_
  2. 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. 3. A QUICK INTRODUCTION + BASICS
  4. 4. 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
  5. 5. MVVM_
  6. 6. INSTANCE EXAMPLE_
  7. 7. INSTANCE LIFECYCLE_
  8. 8. COMPONENTS ARCHITECTURE_ ‣ APPLICATION AS A TREE OF SELF-CONTAINED REUSABLE COMPONENTS
  9. 9. COMPONENTS DEFINITION_ ‣ 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
  10. 10. 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
  11. 11. 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
  12. 12. THE APPLICATION OVERVIEW + MEDIUM
  13. 13. 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
  14. 14. ARCHITECTURE OVERVIEW_
  15. 15. CODE STRUCTURE_ ‣ IF YOU CREATE A SINGLE APP, ROUTER, STORE IT WILL BE SHARED AMONG REQUESTS ‣ THUS WE NEED FACTORY FUNCTIONS TO CREATE NEW APP, ROUTER, STORE FOR EACH REQUEST ‣ SEE APP.JS ‣ BUILD STEP IS NECESSARY FOR BOTH SERVER & CLIENT: ‣ SERVER BUNDLE WILL BE REQUIRED BY SERVER AND USED TO SSR ‣ CLIENT BUNDLE IS SENT TO BROWSER TO HYDRATE MARKUP & 
 SYNC STATE ‣ SEE DIRECTORY STRUCTURE
  16. 16. THE SERVER-SIDE IMPLICATION + ADVANCED
  17. 17. SERVER-SIDE RENDERING_ ‣ BY DEFAULT VUE PRODUCES AND MANIPULATES DOM IN THE BROWSER ‣ SSR: ‣ RENDERS COMPONENTS INTO HTML STRINGS IN SERVER ‣ SENDS THESE STRINGS TO CLIENT ALONG WITH SERIALIZED STATE ‣ CLIENT HYDRATES THE MARKUP AND SYNCS STATE ‣ ADVANTAGES: ‣ BETTER SEO, SPECIALLY FOR ASYNC CONTENT-DEPENDANT APPS ‣ FASTER TIME-TO-CONTENT WITH BETTER USER EXPERIENCE & CONVERSION RATE ‣ ISOMORPHIC JAVASCRIPT THAT RUNS BOTH ON CLIENT & SERVER
  18. 18. SERVER-SIDE RENDERING TRADE-OFFS_ ‣ DEVELOPMENT CONSTRAINTS ‣ BROWSER-SPECIFIC CODE ONLY IN CERTAIN LIFECYCLE HOOKS ‣ SOME EXTERNAL LIBRARIES MAY NEED SPECIAL TREATMENT ‣ MORE SERVER LOAD SO CACHING STRATEGY IS RECOMMENDED ‣ PRE-RENDERING ‣ IF YOU WANT TO GENERATE STATIC PAGES FOR BETTER SEO YOU MAY JUST NEED TO PRE-RENDER THEM IN SERVER ‣ IF YOU USE WEBPACK, PRE-RENDER-SPA-PLUGIN IS NICE
  19. 19. ISOMORPHIC CODE CAVEATS_ ‣ NO DATA REACTIVITY ON SERVER ‣ DETERMINISTIC: ‣ COMPONENT ASYNC DATA IS PRE-FETCHED ‣ APP STATE IS ALREADY RESOLVED BEFORE RENDERING ‣ REACTIVITY IS DISABLED BY DEFAULT ON SERVER ‣ LIFECYCLE HOOKS ‣ SSR: ONLY BEFORECREATE & CREATED ‣ CLIENT: KEEP GLOBAL EFFECTS TO ONLY-CLIENT HOOKS ‣ PLATFORM SPECIFIC APIs: ‣ USE UNIVERSAL APIs (Axios) or KEEP TO SPECIFIC HOOKS
  20. 20. THE SERVER APPLICATION + ADVANCED
  21. 21. BASIC IMPLEMENTATION_
  22. 22. BUNDLE RENDERER_ ‣ SERVER-SIDE BUNDLE IS NOT USED DIRECTLY TO AVOID SERVER RESTART ‣ VUE-SERVER-RENDERER HAS CREATE-BUNDLE-RENDERER ‣ WEBPACK PLUGIN CREATES SERVER BUNDLE TO A JSON FILE ‣ BUNDLE RENDERER USES THAT JSON FILE TO RECREATE RENDERER ‣ ADVANTAGES: ‣ BUILT-IN SOURCEMAP SUPPORT ‣ HOT RELOAD DURING DEVELOPMENT ‣ AUTOMATICALLY INLINES CSS OF COMPONENTS NEEDED IN RENDER ‣ INJECTS CODE-SPLIT CHUNK NEEDED FOR INITIAL RENDER
  23. 23. CACHING_ ‣ PAGE-LEVEL CACHE ‣ IF CONTENT IS NOT USER-SPECIFIC WE CAN DO MICRO-CACHING ‣ LRU (LEAST RECENTLY USED) FOR 1 SECOND ‣ AT MOST ONE FULL RENDER PER SECOND PER CACHED PAGE ‣ COMPONENT-LEVEL CACHE ‣ VUE-SERVER-RENDER HAS BUILT-IN SUPPORT FOR CACHE ‣ TYPICAL LRU IMPLEMENTATION IS PASSED TO RENDERER ‣ COMPONENT MUST DECLARE A NAME & SERVER-CACHE-KEY ‣ REUSE THE ENTIRE CACHED SUB-TREE ‣ TYPICAL USE FOR BIG V-FOR LISTS
  24. 24. THE APPLICATION ROUTING + ADVANCED
  25. 25. ROUTING_ ‣ WE REUSE SAME ROUTING CONFIG ON CLIENT & SERVER ‣ WEBSERVER GETS ALL ROUTES * & PASSES THEM TO VUE APP ‣ SEE ENTRY-CLIENT.JS & ENTRY-SERVER.JS ‣ CODE SPLITTING: ‣ LAZY-LOADING PART OF YOUR APP (JUST WHAT IS NEEDED) ‣ IMPROVES TIME-TO-INTERACT ‣ BUILT-IN AT A ROUTE-LEVEL WITH WEBPACK ‣ USED ROUTER.ONREADY ON BOTH CLIENT & SERVER TO WAIT FOR ASYNC COMPONENTS TO BE LOADED ‣ PRE-FETCH ASYNC DATA ON SERVER & CLIENT BEFORE RENDER/HYDRATE
  26. 26. THE STATE MANAGEMENT + ADVANCED
  27. 27. PRE-FETCHING DATA_ ‣ SSR BASICALLY RENDERS A “SNAPSHOT” OF OUR APP ‣ ALL ASYNC DATA NEEDS TO BE PRE-FETCHED BEFORE RENDERING ‣ ON SERVER TO DO A DETERMINISTIC RENDER ‣ ON CLIENT TO USE SAME STATE TO HYDRATION TO BE SUCCESSFUL ‣ TO ADDRESS THIS CONSISTENTLY WE NEED A STATE STORE ‣ ON SERVER WE FETCH & FILL THE STORE & SERIALIZE STATE INTO HTML ‣ ON CLIENT WE GET INLINED STATE BEFORE MOUNT THE APP ‣ EACH COMPONENT HAS ASYNC-DATA STATIC METHOD ‣ IT RECEIVES STORE & ROUTE & RETURNS PROMISE OF ACTION DISPATCHED BY STORE
  28. 28. PRE-FETCHING DATA_ ‣ SERVER DATA FETCHING: ‣ IT GETS COMPONENTS BY ROUTE & CALLS ASYNC-DATA OF EACH ONE ‣ PASSES STATE INTO CONTEXT OF RENDERER SO IS INLINED AS WINDOW.__INITIAL_STATE__ ‣ CLIENT DATA FETCHING: ‣ ON ROUTE GUARD BEFORE-RESOLVE TO AVOID FETCH DATA WE ALREADY HAVE
  29. 29. CLIENT HYDRATION_ ‣ CLIENT STORE.REPLACE-STATE WITH INLINED STATE BY SERVER ‣ CLIENT MOUNTS APP ON DOM ON HYDRATION MODE WHEN DATA-SERVER- RENDERED ATTRIBUTE IS DETECTED AT APP ROOT ELEMENT ‣ IN DEVELOPMENT SERVER-SIDE HTML & CLIENT-SIDE V-DOM TREE ARE COMPARED, IN PRODUCTION THAT’S DISABLED
  30. 30. THANK YOU

×