Vue JS - A Progressive Framework

Uma introdução aos conceitos de Vue JS e a motivação da sua criação.

Transcript

1. Vue.js The Progressive JavaScript Framework
2. Origem do framework? • Criado por Evan You em 2013 enquanto fazia parte do time de desenvolvimento do Angular.JS; • Motivado em reduzir o problema de performance causado pelo two-way data binding; • Em Fevereiro de 2014 era lançada a primeira release oficial;
3. Comparando Frameworks no Github
4. Open Collective: Plataforma de crowdfunding norte-americana para projetos diversos. Como é mantido o projeto? Patreon: web site norte-americano de financiamento coletivo para profissionais.
5. Características do Framework • Progressivo: Pode ser aplicado parcial ou totalmente em um projeto: ◦ Script importado via cdn ou; ◦ Uso de bibliotecas de seu ecossistema; • Reativo: Capacidade de observar um objeto javascript e suas alterações refletirem no DOM HTML; • Componentes: Cada parte de um sistema tem seus próprios estilos e comportamentos, sendo customizada a comunicação entre eles.
6. Exemplo instância Vue.js • Vue pode ser instanciado por mais de uma forma, sendo elas: ◦ Utilizando a biblioteca diretamente do CDN; <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ◦ Com o comando npm install; $ npm install vue ◦ Utiliza sua CLI oficial Vue CLI $ npm install -g vue-cli • vue create [project-name]
7. Diretivas • Atributos especiais no formato v-; • Tem por objetivo alterar o DOM perante determinadas condições; • São exemplos de diretivas: v-model, v-if, v-for, v-on, v-show.
8. Ecossistema Vue.js Vue Ecosystem Vue CLI Vue Dev Tools Vue Router Vue Loader Vuex Vue Test Utils Vue SSR
9. Roteamento - Vue-router • Biblioteca de rota oficial para construção de Single Page Applications; • Para adição de rotas, é necessário o mapeamento dos componentes e definição do lugar de apresentação dos mesmos.
10. Exemplo de rota com Vue Router // routes.js import Home from './components/Home.vue'; import Register from './components/Register.vue'; import Login from './components/Login.vue'; const routes = [ { path: '/', component: Home }, { path: '/register', component: Register }, { path: '/login', component: Login }, ]; export default routes
11. Exemplo de rota com Vue Router // main.js import Vue from 'vue'; import App from './App.vue'; import VueRouter from 'vue-router'; import routes from './routes'; Vue.config.productionTip = false; Vue.use(VueRouter); const router = new VueRouter({routes}); new Vue({ router, render: h => h(App) }).$mount('#app');
12. Exemplo de rota com Vue Router <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/register">Go to Foo</router-link> <router-link to="/login">Go to Bar</router-link> </p> <router-view></router-view> </div>
13. Rotas Nomeadas com vue router <router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view> const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })
14. Gerenciamento de estado com Vuex • Biblioteca padrão de gerenciamento de estado do Vue de uma forma centralizada; • Inspirado no Flux, Redux e Arquitetura ELM;
15. Estrutura da store do Vuex • State: Objeto simples contendo todos níveis de estado; • Mutations: Única forma de manipular os dados, chamados da forma; • Actions: Chama as mutations e pode ser utilizado de forma assíncrona; • Getters: Recebem state como primeiro argumento, funções comuns de manipulação de estado da aplicação.
16. Definição de mutations • Única forma de modificar o estado em uma store: mutations: { increment (state, n) { state.count += n } } store.commit('increment', 10)
17. Definição de Actions • Similar a mutations, ela executa o commit de mutations invés de mudança de estado; • Necessário quando uma modificação reflete em mais de um atributo de estado. const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })
18. Características de um state na store • Compõe-se de uma simples árvore de estados; • Não podem ser modificados diretamente.
19. Store modular • Por usar uma árvore de estado simples, ao crescer a aplicação, pode-se criarem módulos. const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> `moduleA`'s state store.state.b // -> `moduleB`'s state
20. Exemplo estrutura da store Vuex • HTML Todo MVC • Javascript Todo MVC • Sample test with Cypress
21. Vue-loader - loader que possibilita transformar componentes • Permite utilização de especificações ECMA5 com Babel; • Permite utilização de pré compiladores css, como sass; • O componente pode pode possuir estilos somente em seu próprio escopo.
22. Casos de uso do Vue loader <template lang="pug"> div(ok) h1(:class="$style.red") hello </template> <script> export default { data () { return { msg: 'fesfff' } } } </script>
23. Casos de uso do Vue loader <style module> .red { color: red; } </style> <foo> export default comp => { console.log(comp.options.data()) } </foo>
24. CLI Oficial do Vue - Vue CLI • CLI oficial do Vue para criação de aplicações; • Não é necessário ejetar para conseguir customizar, já vem com um conjunto de configurações pré-definidas; • Possui opções de de testes unitários com Mocha ou Jest por padrão.
25. Inspecionando com Vue Dev Tools • Ferramenta de depuração que pode ser instalada no Chrome e Firefox; • Serve para realizar debug na versão de desenvolvimento;
26. Referências Medium - Evan You (Vue.js creator) Site Oficial Projetos com vue.js Nuxt.js - Framework para aplicações Vue.js Série de construção de TDD com Vue
27. Muito Obrigado! Objective Solutions, João Gualberto 1740, Curitiba - PR mauricio.azevedo@objective.com.br www.objective.com.br