Javascript em 2016Como sobreviver a essa sopa

de letrinhas com Vue.js

Vinicius Reis

@vinicius73@LuizVinicius73

Gravo aulas sobre Vue.js, Javascript e Laravel para codecasts.com.br

Engenheiro de Aplicações @ Decision6

Ecossistema Javascript

Assustador?

Tudo isso existe por um motivo

Cada peça resolve um problema específico.

Você não precisa saber todas elas, só que elas resolvem

Como se isso fosse simples...

Organizando os Ingredientes da “sopa”

Ecossistema JavaScript

➔ Plataformas➔ Package Mananer➔ Task Runners ➔ Transpilers➔ Bundlers (Builders)➔ Templates Engines➔ Scarfolds/Generators➔ Test Libs

...Eu sei... muita coisa...

Antes...O que realmente é o JavaScript?

EcmaScriptA 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)

Calma...

Ainda não acabou...

EcmaScript 6

● Ecma 5.1 -> ES5● ES6 -> ES2015● ES2016● ES2017● ES2017 -> ESNext● ...

ATUALIZAÇÕES ANUAIS

Basicamente nada disso importa no seu dia-a-dia

Então o que importa?

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

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

Node Package Manager

Gerenciador de dependências padrão do Node

Simples e poderoso, mas com seus problemas.

NPM

Gerenciador de dependências para front-end

Simples (até d+) porém cumpre bem seu propósito.

Bower

Novo na praça

Corrige os “problemas” do NPM, sendo mais rápido e inteligente

Tem uma compatibilidade com o NPM muito grande

Yarn

NPM é requisito, saiba ele

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

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

“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

TranspilersSource-to-source CompilerFerramentas que permitem uma escrita com sintaxe ‘alternativa’ do JavaScript.Muitas vezes o objetivo é facilitar a escrita ou dar mais features

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

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

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

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.

BundlersBundle é 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.

Primeiro a se popularizar.

Extremamente simples.

Sua premissa é permitir o uso de requirejs sem precisar do requirejs.

Browserify

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

Nova estrela da constelação.

Possui uma abordagem moderna e inteligente.

Consegue eliminar “código morto” dos arquivos gerados.

rollup.js

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

Foi destaque por muito tempo.

Agnóstico (como a maioria)

Ainda é o sistema de template padrão do Ember

Handlebars

Atualmente é o que mais se destaca.

Simples, versátil e completo.

Fornece muitas possibilidades.

Pug (Jade)

Scarffolds/GeneratorsFerramentas que permitem começar rapidamente projetos novos.

Basicamente o único que importa

São muitos tipos de projetos que podem ser criados.

Possui uma lista dos geradores feitos pela comunidade

Yeoman

Mesmo o Yeoman sendo popular, muitas ferramentas decidiram criar suas próprias ferramentas.

Comumente chamadas de “cli”

Standalones

TestsLibs, Runners, FrameworksUma área um pouco obscura...Temos libs, test runners, frameworks, libs de mock, plataformas...

TDD, Integração, BDD...

Automatiza testes em navegadores

Front-end

Usado para outros propósitos além de testes

Selenium

Vue.jsProgressive Framework

vue-cli

Iniciar um projeto com facilidadeUsando Babel, WebPack e ESLint

Single File Components

- Simples, fácil leitura e manutenção- Escreva HTML, Javascript e CSS

Single File Components

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

V-DOM

2x mais rápido

Server Side Rendering (SSR)Renderizar componentes no backend

Ecossistema

vuex

flux para vue.js

vue-router

Router oficial

axios

Cliente HTTP agnóstico

Node e Navegador

Obrigado