java script em 2016 - como sobreviver a essa sopa de letrinhas com vue.js
TRANSCRIPT
![Page 1: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/1.jpg)
Javascript em 2016Como sobreviver a essa sopa
de letrinhas com Vue.js
![Page 2: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/2.jpg)
Vinicius Reis
@vinicius73@LuizVinicius73
Gravo aulas sobre Vue.js, Javascript e Laravel para codecasts.com.br
Engenheiro de Aplicações @ Decision6
![Page 3: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/3.jpg)
Ecossistema Javascript
![Page 4: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/4.jpg)
![Page 5: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/5.jpg)
Assustador?
![Page 6: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/6.jpg)
Tudo isso existe por um motivo
Cada peça resolve um problema específico.
![Page 7: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/7.jpg)
Você não precisa saber todas elas, só que elas resolvem
Como se isso fosse simples...
![Page 8: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/8.jpg)
Organizando os Ingredientes da “sopa”
![Page 9: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/9.jpg)
Ecossistema JavaScript
➔ Plataformas➔ Package Mananer➔ Task Runners ➔ Transpilers➔ Bundlers (Builders)➔ Templates Engines➔ Scarfolds/Generators➔ Test Libs
...Eu sei... muita coisa...
![Page 10: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/10.jpg)
Antes...O que realmente é o JavaScript?
![Page 11: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/11.jpg)
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)
![Page 12: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/12.jpg)
Calma...
Ainda não acabou...
![Page 13: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/13.jpg)
EcmaScript 6
● Ecma 5.1 -> ES5● ES6 -> ES2015● ES2016● ES2017● ES2017 -> ESNext● ...
ATUALIZAÇÕES ANUAIS
![Page 14: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/14.jpg)
![Page 15: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/15.jpg)
Basicamente nada disso importa no seu dia-a-dia
![Page 16: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/16.jpg)
Então o que importa?
![Page 17: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/17.jpg)
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
![Page 18: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/18.jpg)
![Page 19: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/19.jpg)
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.
![Page 20: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/20.jpg)
Node Package Manager
Gerenciador de dependências padrão do Node
Simples e poderoso, mas com seus problemas.
NPM
![Page 21: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/21.jpg)
Gerenciador de dependências para front-end
Simples (até d+) porém cumpre bem seu propósito.
Bower
![Page 22: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/22.jpg)
Novo na praça
Corrige os “problemas” do NPM, sendo mais rápido e inteligente
Tem uma compatibilidade com o NPM muito grande
Yarn
![Page 23: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/23.jpg)
NPM é requisito, saiba ele
![Page 24: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/24.jpg)
Task RunnersSão automatizadores. Facilitam a execução de tarefas, seja em builds, testes ou validações.
![Page 25: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/25.jpg)
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
![Page 26: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/26.jpg)
“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
![Page 27: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/27.jpg)
TranspilersSource-to-source CompilerFerramentas que permitem uma escrita com sintaxe ‘alternativa’ do JavaScript.Muitas vezes o objetivo é facilitar a escrita ou dar mais features
![Page 28: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/28.jpg)
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
![Page 29: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/29.jpg)
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
![Page 30: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/30.jpg)
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
![Page 31: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/31.jpg)
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.
![Page 32: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/32.jpg)
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.
![Page 33: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/33.jpg)
Primeiro a se popularizar.
Extremamente simples.
Sua premissa é permitir o uso de requirejs sem precisar do requirejs.
Browserify
![Page 34: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/34.jpg)
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
![Page 35: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/35.jpg)
Nova estrela da constelação.
Possui uma abordagem moderna e inteligente.
Consegue eliminar “código morto” dos arquivos gerados.
rollup.js
![Page 36: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/36.jpg)
Template EngineEscrever HTML pode não ser tão simples ou eficiente em determinados cenários.Sistemas de template ajudam nisso.
![Page 37: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/37.jpg)
Foi destaque por muito tempo.
Agnóstico (como a maioria)
Ainda é o sistema de template padrão do Ember
Handlebars
![Page 38: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/38.jpg)
Atualmente é o que mais se destaca.
Simples, versátil e completo.
Fornece muitas possibilidades.
Pug (Jade)
![Page 39: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/39.jpg)
Scarffolds/GeneratorsFerramentas que permitem começar rapidamente projetos novos.
![Page 40: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/40.jpg)
Basicamente o único que importa
São muitos tipos de projetos que podem ser criados.
Possui uma lista dos geradores feitos pela comunidade
Yeoman
![Page 41: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/41.jpg)
Mesmo o Yeoman sendo popular, muitas ferramentas decidiram criar suas próprias ferramentas.
Comumente chamadas de “cli”
Standalones
![Page 42: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/42.jpg)
TestsLibs, Runners, FrameworksUma área um pouco obscura...Temos libs, test runners, frameworks, libs de mock, plataformas...
TDD, Integração, BDD...
![Page 43: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/43.jpg)
Automatiza testes em navegadores
Front-end
Usado para outros propósitos além de testes
Selenium
![Page 44: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/44.jpg)
![Page 45: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/45.jpg)
Vue.jsProgressive Framework
![Page 46: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/46.jpg)
vue-cli
Iniciar um projeto com facilidadeUsando Babel, WebPack e ESLint
![Page 47: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/47.jpg)
Single File Components
- Simples, fácil leitura e manutenção- Escreva HTML, Javascript e CSS
![Page 48: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/48.jpg)
Single File Components
- Gosta de PUG/Jade?- ES2015, JSX, CoffeeScript, TypeScript...- Sass, PostCSS, Stylus...
![Page 49: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/49.jpg)
V-DOM
![Page 50: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/50.jpg)
2x mais rápido
![Page 51: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/51.jpg)
Server Side Rendering (SSR)Renderizar componentes no backend
![Page 52: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/52.jpg)
Ecossistema
![Page 53: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/53.jpg)
vuex
flux para vue.js
![Page 54: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/54.jpg)
vue-router
Router oficial
![Page 55: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/55.jpg)
axios
Cliente HTTP agnóstico
Node e Navegador
![Page 56: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/56.jpg)
![Page 57: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/57.jpg)
Obrigado
![Page 58: Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js](https://reader034.vdocuments.net/reader034/viewer/2022051502/58ee6e0c1a28abd63b8b45f1/html5/thumbnails/58.jpg)