$30 off During Our Annual Pro Sale. View Details »

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

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

Vinicius Reis

November 19, 2016
Tweet

More Decks by Vinicius Reis

Other Decks in Programming

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