vue - smart data · 2019-06-19 · vue vs react redux can be used in vue vue has vuex, an...

The Progressive JavaScript Framework

Vue.js

That guy

What even is Vue?

Approachable Versatile Performant

Approachable

● All you need is some Javascript, HTML, and CSS

know-how

Approachable

● All you need is some Javascript, HTML, and CSS

know-how

● Plug and play, just drop in a script tag and code away

Approachable

● All you need is some Javascript, HTML, and CSS

know-how

● Plug and play, just drop in a script tag and code away

(so easy)

Versatile

● Designed from the ground up to be incrementally

adoptable

Versatile

● Designed from the ground up to be incrementally

adoptable

● Everything from simple view layer to fully featured

Single-Page Applications

Performant

● 30KB with Vuex + Vue Router

Performant

● 30KB with Vuex + Vue Router

● Virtual DOM

Performant

● 30KB with Vuex + Vue Router

● Virtual DOM

● Minimal optimization efforts

Getting Started

● Direct <script> include

● NPM

● Vue CLI

Vue CLI

● Install with npm or yarn

● Out of the box support for all your favorites

● Plugin system for community created solutions

● No need to eject

● GUI

Code Time

But wait, there’s more

● Mixins : Reusable options objects that’s mixed into the instance

● Animations

● Custom directives with Vue.directive()

● Utilize render functions

● Plugins for globally available functionality

● Filters for common text formatting tasks

● Slots!

Vue Tooling

● Vue Router

● Vuex

● Vue Server Renderer

Vue vs The World

Vue vs React

● Both utilize virtual dom

● Reactive and composable component

● Focused core library with other libraries

● Speed differences are negligible

Vue vs React

● React has a steep learning curve

● You can start with Vue with a simple script tag.

Vue vs React

● React: Component state change = re-render of entire

component subtree

● Vue: Tracks dependencies and only re-renders what’s

affected by state change

Vue vs React

● JSX vs HTML Templates

● Vue can do both!

Vue vs React

● Component scoped CSS

● CSS remains separated in a style tag in single file

component

Vue vs React

● CLI Tools

● Vue CLI allows configuration without having to eject.

● Offers multiple templates vs one.

Vue vs React

● Redux can be used in Vue

● Vue has Vuex, an Elm-inspired state management

solution

● Vuex and Vue Router are officially supported, React’s

companions are community based

Vue vs React

● React has React Native

● Weex, UI framework that allows Vue component syntax

to be rendered on browser & natively is still in

development.

● NativeScript with NativeScript-Vue

Vue vs AngularJS

● Vue is much simpler than AngularJS

● AngularJS is strongly opinionated while Vue is much

more flexible.

● Vue has better performance and is much easier to

optimize

Vue vs AngularJS

● AngularJS uses two-way data binding between scopes

while Vue has one-way data flow between components

● Difference between directive and components is much

clearer in Vue.

Vue vs Angular (Angular 2)

● Typescript is optional in Vue but it’s very hard to use

Angular without Typescript

● Vue is much smaller

● Vue is still less opinionated

● Steeper learning curve

When to use Vue?

Resources

● Vue docs - https://vuejs.org/v2/guide/

● Vue updates - https://news.vuejs.org/

● Github - https://github.com/vuejs

● Tools and Libraries - https://curated.vuejs.org/

● Awesome Vue - https://github.com/vuejs/awesome-vue