An in-depth exploration of VueJs, the progressive front-end framework with focus on reactivity, componentization and simplicity

1. VUE JS
THE SIMPLE REVOLUTION_

2. @Rafael_Casuso
A B O U T M E
•Head of JavaScript @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. A
GENTLE
INTRODUCTION
+ BASICS

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. MVVM_

6. INSTANCE LIFECYCLE_

7. INSTANCE EXAMPLE_

8. PROPERTIES & METHODS_
‣ METHODS ARE FUNCTIONS TO USE IN THE INSTANCE OR IN DIRECTIVE EXPRESSIONS
‣ PROPERTIES ARE REACTIVE ATTRIBUTES PROXIED BY THE INSTANCE FROM DATA OBJECT

9. INTERPOLATIONS, DIRECTIVES & FILTERS_
‣ 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

10. THE
REACTIVITY
EXPLORATION
+ MEDIUM

11. REACTIVITY_

12. REACTIVITY INTERNALS_
‣ CHANGES ARE TRACKED THROUGH GETTERS (DEPENDENCIES) AND
SETTERS (NOTIFICATIONS) ON DATA PROPERTIES
‣ REACTIVE ROOT PROPERTIES MUST BE DECLARED UPFRONT, NESTED
CAN BE ADDED WITH VM.SET
‣ ALL DOM UPDATES ARE ASYNCHRONOUS, WITH A QUEUE THAT
BUFFERS ALL CHANGES WITHIN THE SAME EVENT LOOP AND WILL BE
RENDERED IN THE NEXT TICK

13. COMPUTED PROPERTIES AND WATCHERS_
‣ COMPUTED PROPS ARE COMPLEX
MANIPULATIONS OF REACTIVE PROPS,
CACHED BASED ON THEIR
DEPENDENCIES
‣ WATCHERS ARE GENERIC WAY TO REACT
TO DATA CHANGES, FOR
ASYNCHRONOUS OR EXPENSIVE
OPERATIONS

14. THE
VIEW
MODIFICATION
+ MEDIUM

15. VIEW TO MODEL_
‣ V-ON DIRECTIVE TO BIND USER EVENTS TO INSTANCE METHODS
‣ IT ACCEPTS EVENT MODIFIERS

16. FORM INPUT BINDING_
‣ V-MODEL DIRECTIVE TO BIND USER INPUT TO PROPERTIES
‣ V-FOR FOR LOOP ARRAY PROPERTIES

17. THE
COMPONENTS
COMPOSITION
+ MEDIUM

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

19. 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

20. COMPONENT EXAMPLE_

21. 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

22. PROPS_
‣ CUSTOM ATTRIBUTES TO PASS DOWN DATA FROM PARENT TO CHILD COMPONENTS
‣ THEY FOLLOW ONE-WAY-DOWN PATTERN, CAN NOT BE MODIFIED IN CHILD
‣ CHILD MUST DECLARE THE PROPS IT EXPECTS
‣ THEY CAN BE BINDED IN THE TEMPLATE IN ORDER TO UPDATE WHEN PARENT DATA
CHANGES

23. CUSTOM EVENTS_
‣ VUE INSTANCE IMPLEMENTS AN EVENT INTERFACE:
‣ LISTEN AN EVENT WITH $ON(EVENTNAME)
‣ TRIGGERS AN EVENT WITH $EMIT(EVENTNAME)
‣ PARENT COMPONENT CAN LISTEN CHILD EVENTS WITH V-ON DIRECTLY IN TEMPLATE

24. CONTENT DISTRIBUTION WITH SLOTS_
‣ EVERYTHING IN PARENT TEMPLATE WILL BE
COMPILED IN PARENT SCOPE
‣ EVERYTHING IN CHILD TEMPLATE WILL BE
COMPILED IN CHILD SCOPE
‣ SLOTS ARE PLACEHOLDERS FOR PARENT
CONTENT INTO CHILD COMPONENT

25. THE
COMPLEX
APPLICATION
+ MEDIUM

26. 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

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

28. ROUTING EXAMPLE_

29. 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

30. 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

31. TOOLS_
‣ VUE-CLI FOR SCAFFOLDING
PROJECTS
‣ VUE DEV TOOLS FOR
INSPECTING COMPONENTS,
PROPERTIES AND TIME-TRAVEL
DEBUGGING

32. VUEJS
VS
OTHERS
+ ADVANCED

33. VUEJS 2.0 BENCHMARKS_
‣ PERFORMANCE

34. VUEJS VS REACT_
‣ REACT WINS IN RICHNESS OF ITS ECOSYSTEM AND CUSTOM RENDERERS
‣ VUEJS WINS IN ALL PERFORMANCE PROFILES
‣ ITS VIRTUAL DOM IMPLEMENTATION SNABBDOM-BASED IS FASTER WITH
LESS CALCULATIONS
‣ UPDATE PERFORMANCE:
‣ REACT RE-RENDERS WHOLE SUB-TREE
WHEN COMPONENT STATE CHANGES
‣ VUEJS TRACK DEPS ON RENDERING SO ONLY
UPDATES SPECIFIC COMPONENTS
‣ VUEJS FASTER DEV MODE WITH UP TO 10XFRAME RATE

36. THANK YOU