O documento discute a complexidade do ecossistema JavaScript e como Vue.js pode ajudar a simplificar o desenvolvimento front-end. Ele explica conceitos como EcmaScript, Node, pacotes, task runners, transpilers, bundlers e testes. Em seguida, apresenta o framework Vue.js como uma forma progressiva de construir interfaces com componentes de único arquivo que oferecem renderização do lado do servidor e do cliente.

1. Javascript em 2016
Como sobreviver a essa sopa
de letrinhas com Vue.js

2. Vinicius Reis
@vinicius73@LuizVinicius73
Gravo aulas sobre Vue.js, Javascript e Laravel para codecasts.com.br
Engenheiro de Aplicações @ Decision6

3. Ecossistema Javascript

5. Assustador?

6. Tudo isso existe por um motivo
Cada peça resolve um problema específico.

7. Você não precisa saber todas
elas, só que elas resolvem
Como se isso fosse simples...

8. Organizando os Ingredientes da “sopa”

9. Ecossistema JavaScript
➔ Plataformas
➔ Package Mananer
➔ Task Runners
➔ Transpilers
➔ Bundlers (Builders)
➔ Templates Engines
➔ Scarfolds/Generators
➔ Test Libs
...Eu sei... muita coisa...

10. Antes...
O que realmente é o JavaScript?

11. EcmaScript
A especificação do JavaScript
➔ Motores
◆ V8 (Chrome, Node, Opera, ...)
◆ SpiderMonkey (Firefox)
◆ Chakra (MS Edge)
◆ Nitro (Safari, Qt 5)
◆ Rhino (Java)
➔ Plataformas
◆ Client-side (Navegadores)
◆ Server-side
● MongoDB, CouchDB
● Node
● JXcore (Node.js fork for IoT)
● DecafJS (JS Sync, Java)

12. Calma...
Ainda não acabou...

13. EcmaScript 6
● Ecma 5.1 -> ES5
● ES6 -> ES2015
● ES2016
● ES2017
● ES2017 -> ESNext
● ...
ATUALIZAÇÕES ANUAIS

15. Basicamente nada disso
importa no seu dia-a-dia

16. Então o que importa?

17. Plataformas
Node não é uma linguagem, ele é uma
plataforma com recursos (APIs) próprias.
Seu motor é o V8.
Não possui DOM.
Tem acesso físico a máquina onde está
“hospedado”
Navegadores tem motores (engines) que
interpretam e executam código
javascript.
Cada motor pode ter suas
particularidades.
DOM é presente e constante
Node Navegador

19. Package Manager
Ou Gerenciadores de Dependências
São ferramentas que (como o nome sugere) gerenciam as dependências dos
projetos, facilitando a distribuição e reuso delas.

20. Node Package Manager
Gerenciador de dependências
padrão do Node
Simples e poderoso, mas com seus
problemas.
NPM

21. Gerenciador de dependências para
front-end
Simples (até d+) porém cumpre
bem seu propósito.
Bower

22. Novo na praça
Corrige os “problemas” do NPM,
sendo mais rápido e inteligente
Tem uma compatibilidade com o
NPM muito grande
Yarn

23. NPM é requisito, saiba ele

24. Task Runners
São automatizadores.
Facilitam a execução de tarefas, seja em builds, testes ou validações.

25. Foi o primeiro a se popularizar.
Possui uma vasta gama de plugins.
É relativamente simples (config
based)
Pode não ser muito flexível ou
performático.
Grunt

26. “Concorrente” do grunt.
Basicamente tudo que existe para grunt
existe para gulp.
Extremamente flexível.
As tarefas são async e baseadas em
streams, assim ele fica mais rápido que o
grunt.
Ele é script based, assim pode ser mais
complexo para algumas pessoas
Gulp

27. Transpilers
Source-to-source Compiler
Ferramentas que permitem uma escrita com sintaxe ‘alternativa’ do
JavaScript.
Muitas vezes o objetivo é facilitar a escrita ou dar mais features

28. Um dos primeiros a se destacar.
Possui uma sintaxe similar ao Ruby,
pois é inspirado nele.
Tem features “extras” ao javascript
Seu objetivo é deixar o javascript
mais ‘simples’
CoffeeScript

29. Tem se destacado nos últimos
anos.
Solução da Microsoft para tipagem
estática no JavaScript.
Além de tipos ele fornece mais
features para o JavaScript.
TypeScript

30. Popular na comunidade React.
Solução do Facebook para tipagem
estática no javascript.
Diferente do TypeScript, o Flow
não dá mais features ao JavaScript,
apenas tipos.
Flow

31. Babel
Babel é um transpiller com o
objetivo de permitir a
retrocompatibilidade do javascript.
Permite escrever códigos ES2015,
ES2016, ES2017, ESNext...
Mantendo eles compatíveis com
navegadores sem suporte.

32. Bundlers
Bundle é o termo usado para descrever um arquivo JavaScript gerado
dinamicamente a partir da junção de um ou mais arquivos.
Muitas vezes esses arquivos passam por um processo de transformação como
Babel, CoffeeScript, TypeScript, JSX, Elm, Flow e similares.

33. Primeiro a se popularizar.
Extremamente simples.
Sua premissa é permitir o uso de
requirejs sem precisar do requirejs.
Browserify

34. Muito mais que um bundler para
arquivos .js
Seus loaders permitem processar
css, imagens, fontes, scss...
É capaz de substituir (em parte)
task runners
Não é tão simples
webpack

35. Nova estrela da constelação.
Possui uma abordagem moderna e
inteligente.
Consegue eliminar “código morto”
dos arquivos gerados.
rollup.js

36. Template Engine
Escrever HTML pode não ser tão simples ou eficiente em determinados
cenários.
Sistemas de template ajudam nisso.

37. Foi destaque por muito tempo.
Agnóstico (como a maioria)
Ainda é o sistema de template
padrão do Ember
Handlebars

38. Atualmente é o que mais se
destaca.
Simples, versátil e completo.
Fornece muitas possibilidades.
Pug (Jade)

39. Scarffolds/Generators
Ferramentas que permitem começar rapidamente projetos novos.

40. Basicamente o único que importa
São muitos tipos de projetos que
podem ser criados.
Possui uma lista dos geradores
feitos pela comunidade
Yeoman

41. Mesmo o Yeoman sendo popular,
muitas ferramentas decidiram criar
suas próprias ferramentas.
Comumente chamadas de “cli”
Standalones

42. Tests
Libs, Runners, Frameworks
Uma área um pouco obscura...
Temos libs, test runners, frameworks, libs de mock, plataformas...
TDD, Integração, BDD...

43. Automatiza testes em navegadores
Front-end
Usado para outros propósitos além
de testes
Selenium

45. Vue.js
Progressive Framework

46. vue-cli
Iniciar um projeto com facilidade
Usando Babel, WebPack e ESLint

47. Single File Components
- Simples, fácil leitura e manutenção
- Escreva HTML, Javascript e CSS

48. Single File Components
- Gosta de PUG/Jade?
- ES2015, JSX, CoffeeScript, TypeScript...
- Sass, PostCSS, Stylus...

49. V-DOM

50. 2x mais rápido

51. Server Side Rendering (SSR)
Renderizar componentes no backend

52. Ecossistema

53. vuex
flux para vue.js

54. vue-router
Router oficial

55. axios
Cliente HTTP agnóstico
Node e Navegador

57. Obrigado