Apresentação utilizada no meetup frontend bahia

1. Onde Já Se VUE?
Introdução ao VUE JS

2. Cristiano Gonçalves
Desenvolvedor Front-End
Twitter: @Gonkristiano
Blog: crisgon.github.io

3. Tornar a experiência
do usuário algo
extremamente
agradável.

4. Qual o problema?

5. A web atual é
altamente complexa.

6. Antes

7. Hoje

9. As aplicações possuem
diferentes estados
em uma única página.

11. Surge a necessidade
de reciclar parte das
aplicações.

12. Web
Components
É a capacidade de criar suas
próprias tags html que encapsulam
estrutura(html), estilo(css) e
interação(javascript)

14. Web components
Isso não é nada recente e é padronizado pela w3c, porém sua implementação não
é uma tarefa simples.

15. Olha que eu nem falei
sobre a manipulação
do DOM...

17. O que é o Vue js?

19. O que é o Vue js?
Vue (pronuncia-se /vjuː/, como view, em inglês) é um framework progressivo para
a construção de interfaces de usuário. Ao contrário de outros frameworks
monolíticos, Vue foi projetado desde sua concepção para ser adotável
incrementalmente. A biblioteca principal é focada exclusivamente na camada
visual (view layer), sendo fácil adotar e integrar com outras bibliotecas ou projetos
existentes. Por outro lado, Vue também é perfeitamente capaz de dar poder a
sofisticadas Single-Page Applications quando usado em conjunto com ferramentas
modernas e bibliotecas de apoio.

20. O Vue foi criado por Evan You
depois de trabalhar para o Google
usando o AngularJS em vários
projetos.
"Eu imaginei, e se eu pudesse
extrair a parte que eu realmente
gostei sobre o Angular e construir
algo realmente leve"?

21. O Vue foi lançado originalmente
em fevereiro de 2014 e sua versão
atual é a 2.6. Porém seu “bom”
iniciou em 2015.

22. Comunidade

24. Reatividade

25. Reatividade
Basicamente, nossos objetos vão
ter whatchers (observadores) que
vão ficar esperando alguma
mudança para então atualizar o
DOM.

26. Ecossistema
● Vuex para gerenciamento de estado.
● Vue-router para gerenciamento de rotas
● Vue-Cli para auxiliar na criação de projetos
● Vue dev tools para debugar
● Vue-Loader
● Vue-class-component

27. Algumas similaridades com o React
React e Vue compartilham muitas similaridades. Ambos:
● utilizam a abordagem de DOM virtual.
● provêm componentes visuais reativos e combináveis.
● mantêm o foco na biblioteca principal, com preocupações como roteamento
e gerenciamento de estado global tratadas por bibliotecas companheiras.

28. Algumas similaridades com o React
“MobX se tornou bem popular na comunidade React e, de fato, utiliza um sistema
de reatividade quase idêntico ao Vue. De forma simplista, o fluxo de trabalho
React + MobX pode ser pensado como um Vue com código mais prolixo. Por isso,
se você estiver usando essa combinação e estiver gostando, saltar para o Vue é,
provavelmente, o próximo passo lógico.”

29. Como usar?

30. Vue JS tem a curva de aprendizado menor que a do
react e do angular.

34. Diretivas
Diretivas são basicamente como atributos HTML. No vue js as diretivas começam
com “v-”, para que o vue diferencie diretivas de atributos padrões do html.

35. Diretivas
● V-if
● V-else
● V-show
● V-for
● V-on
● V-text
● V-bind
● V-model
● V-once

36. Ciclos de vida
● beforeCreate
● created
● beforeMount
● Mounted
● beforeUpdate
● updated
● beforeDestroy
● destroyed

37. Liberdade
Use template, jsx, sass, stylus, pug
ou o que você quiser.

38. Obrigado!!
https://br.vuejs.org/