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

30
The Progressive JavaScript Framework Vue.js

Upload: others

Post on 03-Jun-2020

20 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

The Progressive JavaScript Framework

Vue.js

Page 2: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

That guy

Page 3: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

What even is Vue?

Approachable Versatile Performant

Page 4: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Approachable

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

know-how

Page 5: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Approachable

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

know-how

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

Page 6: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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)

Page 7: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Versatile

● Designed from the ground up to be incrementally

adoptable

Page 8: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Versatile

● Designed from the ground up to be incrementally

adoptable

● Everything from simple view layer to fully featured

Single-Page Applications

Page 9: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Performant

● 30KB with Vuex + Vue Router

Page 10: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Performant

● 30KB with Vuex + Vue Router

● Virtual DOM

Page 11: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Performant

● 30KB with Vuex + Vue Router

● Virtual DOM

● Minimal optimization efforts

Page 12: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Getting Started

● Direct <script> include

● NPM

● Vue CLI

Page 13: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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

Page 14: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Code Time

Page 15: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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!

Page 16: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Vue Tooling

● Vue Router

● Vuex

● Vue Server Renderer

Page 17: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Vue vs The World

Page 18: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Vue vs React

● Both utilize virtual dom

● Reactive and composable component

● Focused core library with other libraries

● Speed differences are negligible

Page 19: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Vue vs React

● React has a steep learning curve

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

Page 20: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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

Page 21: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Vue vs React

● JSX vs HTML Templates

● Vue can do both!

Page 22: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Vue vs React

● Component scoped CSS

● CSS remains separated in a style tag in single file

component

Page 23: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

Vue vs React

● CLI Tools

● Vue CLI allows configuration without having to eject.

● Offers multiple templates vs one.

Page 24: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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

Page 25: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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

Page 26: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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

Page 27: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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.

Page 28: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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

Page 29: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

When to use Vue?

Page 30: Vue - Smart Data · 2019-06-19 · Vue vs React Redux can be used in Vue Vue has Vuex, an Elm-inspired state management solution ... Vue vs Angular (Angular 2) Typescript is optional

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