VUE JS THE SIMPLE REVOLUTION_

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

A GENTLE INTRODUCTION

+ BASICS

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

MVVM_

INSTANCE LIFECYCLE_

INSTANCE EXAMPLE_

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

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

THE REACTIVITY EXPLORATION

+ MEDIUM

REACTIVITY_

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

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

THE VIEW MODIFICATION

+ MEDIUM

VIEW TO MODEL_

‣ V-ON DIRECTIVE TO BIND USER EVENTS TO INSTANCE METHODS

‣ IT ACCEPTS EVENT MODIFIERS

FORM INPUT BINDING_

‣ V-MODEL DIRECTIVE TO BIND USER INPUT TO PROPERTIES

‣ V-FOR FOR LOOP ARRAY PROPERTIES

THE COMPONENTS COMPOSITION

+ MEDIUM

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

COMPONENT EXAMPLE_

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

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

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

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

THE COMPLEX APPLICATION

+ MEDIUM

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

ROUTING_

‣ VUE-ROUTER IS THE OFFICIAL CORE PLUGIN

‣ DYNAMIC ROUTING MATCHING WITH PARAMS AND QUERY PARAMS

‣ NESTED ROUTES, NAMED ROUTES

‣ REDIRECT & ALIAS

ROUTING EXAMPLE_

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

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

TOOLS_

‣ VUE-CLI FOR SCAFFOLDING

PROJECTS

‣ VUE DEV TOOLS FOR

INSPECTING COMPONENTS,

PROPERTIES AND TIME-TRAVEL

DEBUGGING

VUEJS VS OTHERS

+ ADVANCED

VUEJS 2.0 BENCHMARKS_

‣ PERFORMANCE

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-TREEWHEN COMPONENT STATE CHANGES

‣ VUEJS TRACK DEPS ON RENDERING SO ONLYUPDATES SPECIFIC COMPONENTS

‣ VUEJS FASTER DEV MODE WITH UP TO 10XFRAME RATE

THANK YOU