Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Vue JS - Kuala Lumpur JS

TM Lee
April 19, 2017

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.

TM Lee

April 19, 2017
Tweet

More Decks by TM Lee

Other Decks in Technology

Transcript

  1. 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
  2. • Not included by default • Single Page Application capability

    • Map components to a Route • https://github.com/vuejs/vue-router (maintained by Core) Vue Router
  3. State Handling for Components Parent Child Child wants to make

    changes to “props” data $emit event to the parent
  4. State Handling for Components Parent Child Parent listens to $emit

    event Triggers update to data Reactivity kicks in, updating all children
  5. Problem Parent Child Parent Child • Distinct components need to

    inform event to each other • Too easy to make changes to reactive data
  6. 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
  7. Vue Dev Tools • Inspect Data • Inspect Component •

    $emit Event Logging • Time Travel Debugging for Vuex
  8. 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.
  9. 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
  10. 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
  11. 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?
  12. 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