Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js

74 visualizações

Publicada em

-

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
74
No SlideShare
0
A partir de incorporações
0
Número de incorporações
0
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js

  1. 1. Javascript em 2016 Como sobreviver a essa sopa de letrinhas com Vue.js
  2. 2. Vinicius Reis @vinicius73@LuizVinicius73 Gravo aulas sobre Vue.js, Javascript e Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6
  3. 3. Ecossistema Javascript
  4. 4. Assustador?
  5. 5. Tudo isso existe por um motivo Cada peça resolve um problema específico.
  6. 6. Você não precisa saber todas elas, só que elas resolvem Como se isso fosse simples...
  7. 7. Organizando os Ingredientes da “sopa”
  8. 8. Ecossistema JavaScript ➔ Plataformas ➔ Package Mananer ➔ Task Runners ➔ Transpilers ➔ Bundlers (Builders) ➔ Templates Engines ➔ Scarfolds/Generators ➔ Test Libs ...Eu sei... muita coisa...
  9. 9. Antes... O que realmente é o JavaScript?
  10. 10. 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)
  11. 11. Calma... Ainda não acabou...
  12. 12. EcmaScript 6 ● Ecma 5.1 -> ES5 ● ES6 -> ES2015 ● ES2016 ● ES2017 ● ES2017 -> ESNext ● ... ATUALIZAÇÕES ANUAIS
  13. 13. Basicamente nada disso importa no seu dia-a-dia
  14. 14. Então o que importa?
  15. 15. 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
  16. 16. 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.
  17. 17. Node Package Manager Gerenciador de dependências padrão do Node Simples e poderoso, mas com seus problemas. NPM
  18. 18. Gerenciador de dependências para front-end Simples (até d+) porém cumpre bem seu propósito. Bower
  19. 19. Novo na praça Corrige os “problemas” do NPM, sendo mais rápido e inteligente Tem uma compatibilidade com o NPM muito grande Yarn
  20. 20. NPM é requisito, saiba ele
  21. 21. Task Runners São automatizadores. Facilitam a execução de tarefas, seja em builds, testes ou validações.
  22. 22. 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
  23. 23. “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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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.
  29. 29. 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.
  30. 30. Primeiro a se popularizar. Extremamente simples. Sua premissa é permitir o uso de requirejs sem precisar do requirejs. Browserify
  31. 31. 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
  32. 32. Nova estrela da constelação. Possui uma abordagem moderna e inteligente. Consegue eliminar “código morto” dos arquivos gerados. rollup.js
  33. 33. Template Engine Escrever HTML pode não ser tão simples ou eficiente em determinados cenários. Sistemas de template ajudam nisso.
  34. 34. Foi destaque por muito tempo. Agnóstico (como a maioria) Ainda é o sistema de template padrão do Ember Handlebars
  35. 35. Atualmente é o que mais se destaca. Simples, versátil e completo. Fornece muitas possibilidades. Pug (Jade)
  36. 36. Scarffolds/Generators Ferramentas que permitem começar rapidamente projetos novos.
  37. 37. Basicamente o único que importa São muitos tipos de projetos que podem ser criados. Possui uma lista dos geradores feitos pela comunidade Yeoman
  38. 38. Mesmo o Yeoman sendo popular, muitas ferramentas decidiram criar suas próprias ferramentas. Comumente chamadas de “cli” Standalones
  39. 39. Tests Libs, Runners, Frameworks Uma área um pouco obscura... Temos libs, test runners, frameworks, libs de mock, plataformas... TDD, Integração, BDD...
  40. 40. Automatiza testes em navegadores Front-end Usado para outros propósitos além de testes Selenium
  41. 41. Vue.js Progressive Framework
  42. 42. vue-cli Iniciar um projeto com facilidade Usando Babel, WebPack e ESLint
  43. 43. Single File Components - Simples, fácil leitura e manutenção - Escreva HTML, Javascript e CSS
  44. 44. Single File Components - Gosta de PUG/Jade? - ES2015, JSX, CoffeeScript, TypeScript... - Sass, PostCSS, Stylus...
  45. 45. V-DOM
  46. 46. 2x mais rápido
  47. 47. Server Side Rendering (SSR) Renderizar componentes no backend
  48. 48. Ecossistema
  49. 49. vuex flux para vue.js
  50. 50. vue-router Router oficial
  51. 51. axios Cliente HTTP agnóstico Node e Navegador
  52. 52. Obrigado

×