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
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
Node Package Manager
Gerenciador de dependências
padrão do Node
Simples e poderoso, mas com seus
problemas.
NPM
Slide 21
Slide 21 text
Gerenciador de dependências para
front-end
Simples (até d+) porém cumpre
bem seu propósito.
Bower
Slide 22
Slide 22 text
Novo na praça
Corrige os “problemas” do NPM,
sendo mais rápido e inteligente
Tem uma compatibilidade com o
NPM muito grande
Yarn
Slide 23
Slide 23 text
NPM é requisito, saiba ele
Slide 24
Slide 24 text
Task Runners
São automatizadores.
Facilitam a execução de tarefas, seja em builds, testes ou validações.
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
“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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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.
Slide 32
Slide 32 text
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.
Slide 33
Slide 33 text
Primeiro a se popularizar.
Extremamente simples.
Sua premissa é permitir o uso de
requirejs sem precisar do requirejs.
Browserify
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
Nova estrela da constelação.
Possui uma abordagem moderna e
inteligente.
Consegue eliminar “código morto”
dos arquivos gerados.
rollup.js
Slide 36
Slide 36 text
Template Engine
Escrever HTML pode não ser tão simples ou eficiente em determinados
cenários.
Sistemas de template ajudam nisso.
Slide 37
Slide 37 text
Foi destaque por muito tempo.
Agnóstico (como a maioria)
Ainda é o sistema de template
padrão do Ember
Handlebars
Slide 38
Slide 38 text
Atualmente é o que mais se
destaca.
Simples, versátil e completo.
Fornece muitas possibilidades.
Pug (Jade)
Slide 39
Slide 39 text
Scarffolds/Generators
Ferramentas que permitem começar rapidamente projetos novos.
Slide 40
Slide 40 text
Basicamente o único que importa
São muitos tipos de projetos que
podem ser criados.
Possui uma lista dos geradores
feitos pela comunidade
Yeoman
Slide 41
Slide 41 text
Mesmo o Yeoman sendo popular,
muitas ferramentas decidiram criar
suas próprias ferramentas.
Comumente chamadas de “cli”
Standalones
Slide 42
Slide 42 text
Tests
Libs, Runners, Frameworks
Uma área um pouco obscura...
Temos libs, test runners, frameworks, libs de mock, plataformas...
TDD, Integração, BDD...
Slide 43
Slide 43 text
Automatiza testes em navegadores
Front-end
Usado para outros propósitos além
de testes
Selenium
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Vue.js
Progressive Framework
Slide 46
Slide 46 text
vue-cli
Iniciar um projeto com facilidade
Usando Babel, WebPack e ESLint
Slide 47
Slide 47 text
Single File Components
- Simples, fácil leitura e manutenção
- Escreva HTML, Javascript e CSS
Slide 48
Slide 48 text
Single File Components
- Gosta de PUG/Jade?
- ES2015, JSX, CoffeeScript, TypeScript...
- Sass, PostCSS, Stylus...
Slide 49
Slide 49 text
V-DOM
Slide 50
Slide 50 text
mais rápido
Slide 51
Slide 51 text
Server Side Rendering (SSR)
Renderizar componentes no backend