Intro to Vue

Why Vue.JS?
Speaker: Isatu Conteh
August 4th 2017

First off…. I know what your thinking
Not Another Javascript Framework

Excessive Javascript Tools = Fatigue!!!

Focus: Team/Individual Developer
-existing skill set
-choose: easiest tool to
integrate, work with and
learn

Reasons:
(for contextual purposes of
course)
- Was looking to add to my
online portfolio
- Decided to develop an old
idea
- Also, decided to use it to
keep old front-end skills
sharp

Project: More Details
Project details:
Business:
A basic web app that allows you to
search for different online learning
tools based on preference. Course
report for online learning (Udemy,
udacity etc.)
Technology:
- Tons of content from the server
- BaaS (Firebase)
- Interactions done on the client
(not trying to get charged if
people actually start using it)

While researching, I came across these...

Vue.JS
-Javascript Library
-Created by Evan You
-It is used to handle the view component of SPA’s where much of the functionality is
handled on the client
-It is normally used in conjunction with other packages created speciﬁcally to aid in
building and using a larger framework. This includes: Vue-router, vuex, vue-loader
etc.
-Like React?...

Community Adoption/ Integration with other tools
- Currently over 62K github stars
- 121 Github contributors
- Tons of easy to ﬁnd information written by community members
- Examples of Speciﬁc libraries written to use vue in conjunction with:
- Firebase (VueFire)
- Foundation (vue-foundation)
- RxJS (Vue-rx)
- Chrome Dev Tools (vue-devtools)
- Material UX (vue-material)
- etc.

Comparison: The Big Three - Similarities
Includes: React.js, Angular 2/4, Vue.js
1. Operate on component based (Unidirectional) architecture
2. All Three have a CLI (Command-line interface)

More on: Vue CLI - Options
● Webpack - a full featured Webpack + vue-loader setup with hot reload, linting,
testing & css extraction
● Webpack-simple - A simple Webpack + vue-loader setup
● Browserify - A full featured Browserify + vueify setup with hot-reload, linting
& unit testing
● Browserify-simple - A simple Broweserify + vueify
● PWA - pwa template for vue-cli based on the webpack template
● Simple - the simplest possible Vue setup in a single HTML ﬁle

Similarities:
- Use of the Virtual DOM
- Focus on core libraries
(routing and everything
else added later -
mentioned earlier)
Vue.js and React
Similarities:
Vue.js and Angular(2-4)
-Simple templating system
-Supports two-way, one-way and
one-time data binding

Differences
(Advantages):
Both
- Vue renders faster (yes, even
than react)
- Easier to learn/debug: written
in standard Javascript
- Easier to implement
- Documentation is better

Differences: Each
Vue.js and React.js
- No JSX
- Less dependant on use of a build
Vue.js and Angular (2-4)
- No Dirty-checking
- Less Opinionated
- Smaller in size, lighter
- No need for tree shaking
- Clearer separation of concerns
(directives, components etc.)
- No Typescript

Main drawback:
Underdeveloped Native
Platform

So you want to learn more ...
YouTube (Subscribe to):
Academing - Videos on the basics of Vue.js
CodingTheSmartWay.com - Videos on using Vue.js with other front-end services
Udemy:
Vue JS 2 - The Complete Guide (including Vue Router and Vuex)
The Ultimate Vue JS 2 Developers Course
Documentation : https://vuejs.org/v2/guide/

Thanks for Listening!:
Next up -
Lunch!! (12:50 - 1:45pm)

Intro to Vue

More Related Content

What's hot

Similar to Intro to Vue

Recently uploaded

Intro to Vue