VueJS: The Simple Revolution
- 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
- 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_
- 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
- 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
- 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
- 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
- 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
- 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
- 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