JavaScript em 2016: Como sobreviver a essa sopa de letrinhas com Vue.js

Transcript

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

   View Slide

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

   View Slide

3. Ecossistema Javascript
   

   View Slide

4. View Slide

5. Assustador?
   

   View Slide

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

   View Slide

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

   View Slide

8. Organizando os Ingredientes da “sopa”
   

   View Slide

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

   View Slide

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

    View Slide

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)
    

    View Slide

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

    View Slide

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

    View Slide

14. View Slide

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

    View Slide

16. Então o que importa?
    

    View Slide

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
    

    View Slide

18. View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

23. NPM é requisito, saiba ele
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. View Slide

45. Vue.js
    Progressive Framework
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. V-DOM
    

    View Slide

50. 2x mais rápido
    

    View Slide

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

    View Slide

52. Ecossistema
    

    View Slide

53. vuex
    flux para vue.js
    

    View Slide

54. vue-router
    Router oficial
    

    View Slide

55. axios
    Cliente HTTP agnóstico
    Node e Navegador
    

    View Slide

56. View Slide

57. Obrigado
    

    View Slide

58. View Slide