A basic VueJS workshop regarding the basic setup of a complex web application including routing, state management and component composition

1. INTRO TO VUE JS
WORKSHOP_

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. A
QUICK
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 EXAMPLE_

7. INSTANCE LIFECYCLE_

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

9. SETTING UP
+ MEDIUM

10. SETTING UP_
‣ Latest Node installed
‣ Use Node Versions Manager like n
‣ npm i -g n
‣ git clone https://github.com/VueJSMadrid/vue-workshop
‣ npm i

11. CONFIGURATION_
‣ Package.json
‣ Webpack
‣ Dev configuration
‣ Build configuration
‣ Vue Loader Configuration
‣ API Access:
‣ Register in https://marvel.com/register with Email Account
‣ Access https://developer.marvel.com/account and get Public Api Key
‣ Create src/config.js with apiKey as single property
‣ npm run dev

12. TOOLS_
‣ VUE-CLI FOR SCAFFOLDING
PROJECTS
‣ VUE DEV TOOLS FOR
INSPECTING COMPONENTS,
PROPERTIES AND TIME-TRAVEL
DEBUGGING
‣ https://github.com/vuejs/vue-
devtools

13. ROUTING
+ ADVANCED

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

15. STATE
MANAGEMENT
+ ADVANCED

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

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

18. ANATOMY
OF
COMPONENT
+ ADVANCED

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

21. COMPONENT
COMPOSITION
+ ADVANCED

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

24. THANK YOU