Introduction to Vue JS - Kuala Lumpur JS

High level introduction of VueJS at the Kuala Lumpur JS Meetup on Apr 19, 2016.

This slide covers a short history about VueJS, the philosophy behind Vue, who is using it, what you would get, how parent-child event works, and some comparison with the other javascript frameworks.

Transcript

1. Intro to Vue JS Github: @tmlee | KLJS, Apr 18th 2017
4. View only Fully Featured Structure
6. Focuses on Approachability
7. Get productive quickly & easily Incrementally introduce complexity as your app needs it
8. Who uses VueJS?
9. Installation
10. a. Script Tag b. NPM With Gulp/Browserify/Webpack c. vue-cli tool 1. Install & Use VueJS
11. Declarative Rendering
12. Reactivity View State Render User Input View
13. Declarative Rendering Hello World! Vue Instance
14. Reactivity
15. Conditionals Vue Instance
16. Loops Vue Instance
17. User Inputs
18. Component
19. Component Hierarchy
20. Single File Component (.vue) Template Vue Instance Definition Style • Requires Webpack/Browserify • ES2015 module (Test Friendly) • Template, Logic & Style in one place • Standard HTML, CSS, JS • Pre-processor support ie. Babel, Sass, Coffeescript • Scoped CSS • Separation of concerns != Separation of file types (by default) • More Info
21. Router
22. • Not included by default • Single Page Application capability • Map components to a Route • https://github.com/vuejs/vue-router (maintained by Core) Vue Router
23. State Management
24. State Handling for Components Parent Child Parent defines data Passes to Child using “Props”
25. State Handling for Components Parent Child Child wants to make changes to “props” data $emit event to the parent
26. State Handling for Components Parent Child Parent listens to $emit event Triggers update to data Reactivity kicks in, updating all children
27. Problem Parent Child Parent Child • Distinct components need to inform event to each other • Too easy to make changes to reactive data
28. State Management with Vuex State Single source of truth Mutations Channel to make changes ie. change name, change age Actions Publicly available Plain methods calling mutations
29. State Management with Vuex Reactive Re-render State Mutations Actions
30. Dev Tools
31. Vue Dev Tools • Inspect Data • Inspect Component • $emit Event Logging • Time Travel Debugging for Vuex
32. Vue-CLI for Scaffold
33. Vue-CLI for Scaffold • Best way to get started with Vue • Webpack pre-configured. Phew! • Hot-Reloading out of the box • Test framework with Webpack pre-configured as well! • May seem like a magic setup, but it is the best way to learn.
34. Comparison
35. Vue VS Angular 2 • Similar concept like custom directives (ng- & v- ) • Angular 2 is designed for large complex application • Angular enforces Typescript • Angular is opinionated • Framework Complexity vs. Application Complexity (Balancing Act) • Performance comparison
36. Vue VS React • Similar Concepts VirtualDOM, Reactivity, Components Progressive Framework (extend functionality with plugins) Native Rendering (ReactNative & Weex by Alibaba) • Vue uses plain HTML. React uses JSX (Can use JSX in Vue) • Vuex & Vue-Router are maintained by the Core Team • Matter of Preference • For detailed comparison • Performance comparison
37. JSX Vue Template
38. Why would you choose Vue? • New to Front End Frameworks • Need something in between Backbone & Angular • Writing Document-based Webapps • Continue to write vanilla JS • Hiring JS developers • Risk?
39. Resources I Used To Learn Vue • Vue.js 2.0 In 60 Minutes • State Management with Vuex ◦ Vuex For The Clueless  ◦ Vuex Book • Advanced Vue + Routing • Testing with Karma & Nightwatch • Build a Plugin ◦ https://github.com/tmlee/vue-floatThead Webpack