No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
denver-demo
getting-started
.gitignore
README.md
awesome-vue.svg
custom.js
growth.png
package-lock.json
package.json
styles.css

README.md

To view this as a slide deck:

npm install

npm start


An Overue of

@cj on Denver Devs
cj@null.computer
git.io/w3cj

w3cj.now.sh

YouTube.com/c/CodingGardenWithCJ

Agenda

  • whoami
  • Who are you?
  • What is Vue.js?
  • A Brief History of Vue.js
  • An OverVue of Vue.js
  • Vue.js Community

Hello friends! 👋 My name is CJ 👽.
I am a Full Stack Developer 🥞, Educator 🏫, and Maker 🛠 based in the Denver 🏔 area.

I have worn many 🎩s in my career including Instructor 👨‍🏫, Software Engineer 🚂, QA Analyst 🚨, System Administrator 🔥, and Help Desk Consultant .

Raise your hand if I have ever helped you debug some code.


Lead Instructor, Principal Full Stack Developer

at


I'm currently seeking my next adventure...


@makervanlife on instagram


Coding Garden with CJ

YouTube.com/c/CodingGardingWithCJ

Live stream schedule at https://coding.garden


I am a co-organizer of the Dener ue Meetup
We are currently looking for food and drink sponsors. We're always looking for full talk and lightning talk speakers.

Frontend Framework Experience

  • 2+ years working with Angular 1.x
    • 3 Angular 1.x apps in production
  • ~1 year working with React/Redux
    • 1 React/Redux Application in Production
  • ~1.5 years working with Vue.js 2.x
    • 4 Vue.js 2.x apps in production
  • 10+ toy projects playing around with frontend frameworks

Who are you?


Show of hands:

Who writes JavaScript daily?


Show of hands:

Who has used a front-end JS framework?


Show of hands:

Who has heard of Vue.js before this talk?


Show of hands:

Who has never used Vue.js?


Show of hands:

Who has used Vue.js in a project?


Show of hands:

Who uses Vue.js daily?


What is Vue.js?


The Progressive JavaScript Framework


A progressive, incrementally-adoptable JavaScript framework for building UI on the web.




Approachable

Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!


Versatile

Simple, minimal core with an incrementally adoptable stack that can handle apps of any scale.


Performant

  • 20kb min+gzip Runtime
  • Blazing Fast Virtual DOM
  • Minimal Optimization Efforts

A Brief History of Vue.js


Evan You

Vue.js was created by Evan You in late 2013 while working at google.


My job at Google involved a lot of prototyping in the browser. We had this idea and we wanted to get something tangible as fast as possible. Some of the projects used Angular at that time. For me, Angular offered something cool which is data binding and a data driven way of dealing with a DOM, so you don’t have to touch the DOM yourself. It also brought in all these extra concepts that forced you to structure the code the way it wanted you to. It just felt too heavy for the use case that I had at that time.

- Evan You, Interview 2017

Between the Wires: An interview with Vue.js creator Evan You


I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?

- Evan You, Interview 2017

Between the Wires: An interview with Vue.js creator Evan You


Notable Events

  • February 2014 - Released on github
  • April 2015 - Tweet from Taylor Otwell (Creator of Laravel - PHP Framework)
  • September 2016 - Vue.js 2.0 released
  • June 2017 - The first official VueConf in Poland
  • 2017 - Single most starred repo on Github
  • February 2018 - VueConf Amsterdam
  • March 2018 - VueConf US - New Orleans

Growth of Vue


Vue.js Today


Version Timeline

  • VueJS (v0.6.0 released on 8 Dec 2013)
  • Animatrix (v0.9.0 released on 25 feb 2014)
  • Blade Runner (v0.10.0 released on 23 Mar 2014)
  • Cowboy Bepob (v.0.11.0 released on 7 Nov 2014)
  • Dragon Ball (v.0.12.0 released on 12 Jun 2015)
  • Evangelion (v.1.0.0 released on 27 Oct 2015)
  • Ghost in the Shell (v.2.0.0 released on 30 Sep 2016)
  • Hunter X Hunter (v.2.1.0 released on 22 Nov 2016)
  • Initial D (v.2.2.0 released on 26 Feb 2017)
  • JoJo's Bizarre Adventure (v.2.3.0 released on 27 Apr 2017)
  • Kill la Kill (v.2.4.0 released on 13 Jul 2017)
  • Level E (v.2.5.0 released on 12 Oct 2017)

OverVue of Vue.js

  • Getting Started
  • Vue.js CLI
  • Vue.js Directives
  • Vue.js Components
  • Vue.js Router*
  • Vue.js Reactivity*
  • Vue.js State Management*

Getting Started


new Vue({
  el: '#app',
  data: {
    message: 'Hello Friends!'
  }
})
<main id="app">
  <h2>{{message}}</h2>
</main>

To the Docs!


Vue.js CLI


Vue CLI v2

# install vue-cli v2
$ npm install -g vue-cli
# create a project using the webpack template
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Templates

  • simple - The simplest possible Vue setup in a single HTML file
  • webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
  • browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  • webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  • pwa - PWA template for vue-cli based on the webpack template
  • browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

Custom Templates

vue init username/repo my-project

Vue CLI v3

# install vue-cli v3
$ npm install -g @vue/cli
# create a project and choose your plugins
$ vue create my-project

Vue.js Directives


  • Conditionals
    • v-if/v-else
    • v-show
  • Loops
    • v-for
  • Handling User Input
    • v-on:event
    • v-model
  • Class and Style
    • v-bind:class
    • v-bind:style

Shorthands

<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

Vue.js Components



<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Vue.component('talk-item', {
  template: '<li>OverVue of Vue.js</li>'
});
<ul>
  <talk-item></talk-item>
</ul>

Props

new Vue({
  el: '#app',
  data: {
    talks: [
      'OverVue of Vue.js',
      'VueConf Re-Cap'
    ]
  }
})

Vue.component('talk-item', {
  props: ['talk'],
  template: '<li>{{talk}}</li>'
});

<main id="app">
  <ul>
    <talk-item
      v-for="talk in talks"
      :talk="talk">
    </talk-item>
  </ul>
</main>

Vue.js Single File Components



Vue.js Single File Components

  • Imported as an ES2015 module
  • Collocation of Template, Logic and Style
  • Use what you know: HTML, CSS, JavaScript
  • Embedded pre-processor support: seamlessly use Babel, SASS, Less or even Pug in the same file
  • Hot-reload out of the box
  • Scoped CSS

Vue Life Cycle Hooks


Vue.js Router


vue-router


$ npm install vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router';

Vue.use(VueRouter);

new Vue({
  ...
  router,
  ...
});
<router-view></router-view>

Vue Router

  • Officially-supported by Vue.js
  • Nested route/view mapping
  • Modular, component-based router configuration
  • Route params, query, wildcards
  • View transition effects powered by Vue.js' transition system
  • Fine-grained navigation control
  • Links with automatic active CSS classes
  • HTML5 history mode or hash mode, with auto-fallback in IE9
  • Customizable Scroll Behavior

Router Link

<router-link :to="{ name: 'user', params: { userId: 123 }}">
  User
</router-link>

Vue.js Reactivity



Limitations

// Vue.set(object, key, value)
this.$set(this.someObject, 'b', 2)

Vue.js State Management


Simple State Management from Scratch

const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})


Complex State Management

  • Vuex - Elm-inspired (flux/redux) state management library
    • Based on the idea that POJOs can be reactive

Awesome Vue.js



Vue.js Community


  • Denver Vue.js Meetup
  • Forum: The best place to ask questions and get answers about Vue and its ecosystem.
  • Chat: A place for Vue devs to meet and chat in real time.
  • The “Show and Tell” Subforum: Another great place to check out what others have built with and for the growing Vue ecosystem.

Support Evan You on Patreon!


?


Thank ue!

@cj on Denver Devs
cj@null.computer
git.io/w3cj

w3cj.now.sh

YouTube.com/c/CodingGardenWithCJ