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