Em um mar de Frameworks...

Vue.JS

Introdução ao VueJS2

Lucas Macedo

@luuckymacedo

github.com/lucassmacedo

Back-End Developer

 

ADS Unicesumar

O QUE É?

 

Lib/Framework JS

 

Reativo

 

Desenvolvimento de Componentes e Spa`s.

Versátil & acessível

Framework Progressivo

Adequado para iniciantes

Produtivo para os mais experientes

<script src="https://unpkg.com/vue">
npm install vue

import Vue from 'vue'
# instala o vue-cli globalmente
npm install -g vue-cli

# cria um novo projeto com o template NUXT  "nuxt-community/starter-template"
vue init nuxt-community/starter-template femug-mga-nuxt

? Project name (femug-mga-nuxt)
? Project description (Nuxt.js project)
? Author (Lucas Macedo <luuckymacedo@gmail.com>)

   vue-cli · Generated "femug-mga-nuxt".

   To get started:

     cd femug-mga-nuxt
     npm install # Or yarn
     npm run dev

Install with vue-cli

npm install --save nuxt

Install manually

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

Rápido

Capacidade de resposta automática e otimizada

Virtual DOM

 

Reatividade

Basicamente é observar um objeto javascript e refletir suas alterações no DOM do html.

Virtual DOM

O DOM também pode ser representado como uma estrutura de dados em Javascript.

Exemplo Virtual Dom

Elemento renderizado pelo Javascriot

Completo & flexível

Templates, JSX, Hyperscript

Routing

State Management

Templates

<ul>
  <li v-for="task of tasks">
    <span>{{ task.text }}</span>
    <a v-on:click="removeTask(task)">Delete</a>
  </li>
</ul>

JSX

{
  render (h) {
    return <ul>
      {tasks.map(task => <li>
        <span>{task.text}</span>
        <a onClick={removeTask(task)}>Delete</a>
      </li>)}
    </ul>
  }
}

Routing

const routes = [
  { path: '/',      component: Home },
  { path: '/about', component: About },
  { path: '*',      component: NotFound },
]

State management (Vuex)

https://github.com/vuejs/vuex

devtools

.vue

Tudo isso..

Em menos de 30kb min+gzip

vue+vue-router+vuex = 28.11kb

jQuery = 29.41kb

angular2 hello world + tree shaking = ~50kb

Um projeto

Open Source

Criado por Evan You

em 2012

Fevereiro 2014

Primeira versão publicada

Outubro 2015

v 1.0

Setembro 2016

v 2.0

Um projeto em andamento

 65.000 stars GitHub

 

55.000.000 downloads npm 

 

30 000 000 visitas no site oficial


84 000 usuários devtools

Mantido pela Comunidade

Vue - Comunidade

Angular - Google

React - Facebook

 

Performances

Thanks !

@luuckymacedo

Links

@vuejs

vuejs.org

vuejs.org/guide

vuejs.org/api

github.com/vuejs/awesome-vue

github.com/vuejs/vuex

github.com/vuejs/vue-router

forum.vuejs.org

gitter.im/vuejs/vue

vuejobs.com

vueslack.com

Breve Introdução ao VueJS2

By Lucas Macedo

Made with Slides.com

Breve Introdução ao VueJS2

FEMUG-MGA #7 - Saura Consultoria https://www.meetup.com/femugmga/events/242830383/ https://vuejs.org https://vuejs.org/guide https://vuejs.org/api https://github.com/vuejs/awesome-vue https://forum.vuejs.org https://medium.com/the-vue-point https://vuejobs.com https://conf.vuejs.org

  • 1,053

More from Lucas Macedo