JavaScript - Como sobreviver a essa sopa de letrinhas com Vue.js

JavaScript - Como sobreviver a essa sopa de letrinhas com Vue.js

F803c45d62a468e0cb990398c004bd3e?s=128

Vinicius Reis

June 07, 2017
Tweet

Transcript

  1. 2.

    Vinicius Reis @vinicius73 @LuizVinicius73 Gravo aulas sobre Vue.js, Javascript e

    Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6
  2. 4.
  3. 9.

    Ecossistema JavaScript ➔ Plataformas ➔ Package Mananer ➔ Task Runners

    ➔ Transpilers ➔ Bundlers (Builders) ➔ Templates Engines ➔ Scarfolds/Generators ➔ Test Libs ...Eu sei... muita coisa...
  4. 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)
  5. 13.

    EcmaScript 6 • Ecma 5.1 -> ES5 • ES6 ->

    ES2015 • ES2016 • ES2017 • ES2017 -> ESNext • ... ATUALIZAÇÕES ANUAIS
  6. 14.
  7. 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
  8. 18.
  9. 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.
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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.
  18. 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.
  19. 33.

    Primeiro a se popularizar. Extremamente simples. Sua premissa é permitir

    o uso de requirejs sem precisar do requirejs. Browserify
  20. 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
  21. 35.

    Nova estrela da constelação. Possui uma abordagem moderna e inteligente.

    Consegue eliminar “código morto” dos arquivos gerados. rollup.js
  22. 36.

    Template Engine Escrever HTML pode não ser tão simples ou

    eficiente em determinados cenários. Sistemas de template ajudam nisso.
  23. 37.

    Foi destaque por muito tempo. Agnóstico (como a maioria) Ainda

    é o sistema de template padrão do Ember Handlebars
  24. 38.

    Atualmente é o que mais se destaca. Simples, versátil e

    completo. Fornece muitas possibilidades. Pug (Jade)
  25. 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
  26. 41.

    Mesmo o Yeoman sendo popular, muitas ferramentas decidiram criar suas

    próprias ferramentas. Comumente chamadas de “cli” Standalones
  27. 42.

    Tests Libs, Runners, Frameworks Uma área um pouco obscura... Temos

    libs, test runners, frameworks, libs de mock, plataformas... TDD, Integração, BDD...
  28. 44.
  29. 48.

    Single File Components - Gosta de PUG/Jade? - ES2015, JSX,

    CoffeeScript, TypeScript... - Sass, PostCSS, Stylus...
  30. 49.
  31. 57.
  32. 58.