Upload
others
View
29
Download
0
Embed Size (px)
Citation preview
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