Como é aprender JavaScript em 2016

JavaScript Libraries

Este texto é só uma opinião, e como qualquer estrutura de JavaScript, não deve ser levada muito a sério. Nenhum framework JavaScript foi criado durante a tradução deste artigo.

Opa, peguei um novo projeto web, mas sinceramente eu não venho programado para web a muitos anos e eu percebi que esse mundo mudou um bocado. Você é o web dev mais atualizado aqui, certo?

Na verdade o termo correto é Front End Developer, mas sim, eu sou o cara certo. Eu programo web em 2016. Visualizações, players de música, drones que jogam futebol, você escolhe. Acabei de vir da JsConf e ReactConf, então eu conheço as últimas tecnologias para criar web apps.

Legal. Eu preciso criar uma página que exiba as últimas atividades dos usuários, então eu só preciso consultar uns dados de um REST endpoint e exibi-los em algum tipo de tabela com filtro, e então atualizar se houver alguma mudança no servidor. Eu estava pensando em, talvez usar jQuery para trazer e exibir os dados?

Oh meu Deus, não, ninguém mais usa jQuery. Você deveria tentar aprender React, já é 2016!

Ah, ok. O que é React?

É uma biblioteca muito maneira que uns caras do Facebook fizeram, ela realmente traz controle e performance para sua aplicação, permitindo que lide com qualquer mudança na view facilmente.

Isso parece bacana. Eu posso usar React para exibir os dados do servidor?

Sim, mas antes você precisa adicionar as bibliotecas React e React DOM em sua webpage.

Espera, duas bibliotecas?

Então, uma é o a própria biblioteca, e a segunda é para manipulação do DOM, no qual agora você pode escrever com JSX.

JSX? O que é JSX?

JSX é apenas uma extensão do JavaScript muito parecido com XML. É como uma outra maneira de manipular o DOM, pense nisso como um HTML melhorado.

O que há de errado com HTML?

É 2016. Ninguém codifica mais códigos HTML.

Certo. De qualquer forma, se eu adicionar estas duas bibliotecas então pode usar React?

Não é bem assim. Você precisa adicionar Babel, e então você será capaz de usar o React.

Outra biblioteca? O que é Babel?

Então, Babel é um transpiler que permite que você crie versões específicas de JavaScript, enquanto você codifica em qualquer versão do JavaScript. Você não PRECISA incluir Babel para usar ReactJS, mas se fizer, você ficará engessado em usar apenas ES5 e, sejamos realistas, é 2016, você deve estar codificando ES2016 + como o resto dos caras legais.

ES5? ES2016 +? Estou ficando perdido por aqui. O que é ES5 e ES2016 +?

ES5 quer dizer ECMAScript 5. É a edição mais popular, desde que foi implementado, pela maioria dos navegadores atuais.

ECMAScript?

Sim, você sabe, o padrão do script do JavaScript definido em 1999 depois de seu lançamento inicial em 1995, quando o JavaScript chamava Livescript e rodava apenas no Netscape. Que era muito confuso, mas felizmente agora as coisas são muito claras e temos, assim, 7 edições dessa implementação.

7 edições. É sério? E ES5 e ES2016 + são o que?

A quinta e a sétima edição, respectivamente.

Espera, o que aconteceu com a sexta?

Quer dizer ES6? As sim, digo, a cada edição é um superconjunto do anterior, então se você estiver usando o ES2016 +, você está usando todos os recursos das versões anteriores.

Certo. E por que usar ES2016 +ao invés de ES6 então?

Bem, você poderia usar ES6, mas para usar recursos interessantes como async e await, você precisa usar ES2016 +. Caso contrário, você está preso com geradores do ES6 com corotinas para bloquear chamadas assíncronas e ter um melhor controle de fluxo.

Não faço ideia do que você disse, e todos esses nomes são confusos. Olha, eu só estou carregando um monte de dados de um servidor, eu costumava ser capaz de apenas incluir jQuery de uma CDN e obter apenas os dados com chamadas AJAX, por que eu não posso fazer isso?

É 2016 cara, ninguém mais usa o jQuery, ele acaba em um monte de código espaguete. Todo mundo sabe disso.

Tá, então minha alternativa é carregar três bibliotecas para buscar dados e exibir uma tabela HTML.

Bem, você incluir essas três bibliotecas mas empacotá-los com um gerenciador de módulo para carregar apenas um arquivo.

Entendo. E o que é um gerenciador de módulo?

A definição depende do ambiente, mas na web nós entendemos que é algo que suporta módulos de AMD ou CommonJS.

Ceeerto. E AMD e CommonJS são …?

Definições. Existem maneiras de descrever como várias bibliotecas JavaScript e classes devem interagir. Você sabe, exports e requires? Você pode escrever vários arquivos JavaScript, definindo a AMD ou CommonJS API e você pode usar algo como Browserify para eles.

Ok, isso faz sentido… Eu acho. O que é Browserify?

É uma ferramenta que permite que você empacote as dependências descritas no CommonJS que devem ser executados no navegador. Foi criado porque a maioria das pessoas publicam essas dependências no registro do npm.

Registro do NPM?

É um grande repositório público onde pessoas inteligentes colocam código e dependências como módulos.

Como um CDN?

Não mesmo. É mais como uma base de dados centralizada onde qualquer pessoa pode publicar e baixar bibliotecas, assim você pode usá-los localmente para seu desenvolvimento e então enviá-los para CDN se você quiser.

Ah, como Bower!

Sim, mas estamos em 2016, ninguém mais usa o Bower.

Tá, entendi… então eu preciso baixar as bibliotecas do npm então?

Sim. Assim, por exemplo, se você quiser usar React, você baixa o módulo de React e o importa no seu código. Você pode fazer isso com quase todas as bibliotecas de JavaScript.

Ahn, como Angular!

Angular é tão 2015. Mas sim. Angular estaria lá, ao lado de VueJS ou RxJS e outras bibliotecas legais de 2016. Quer aprender sobre eles?

Vamos nos manter ao React, já estou aprendendo muitas coisas agora. Então, se eu preciso usar React eu preciso busca-lo via npm e em seguida, usar essa coisa de Browserify?

Sim.

Isso parece excessivamente complicado apenas para trazer um punhado de dependências e agrupa-los.

É, é por isso que você usar um Task Manager como Grunt ou Gulp ou Broccolli, para automatizar a execução Browserify. Caramba, você ainda pode usar Mimosa.

Grunt? Gulp? Brócolis? Mimosa? O que estamos falando agora?

Task Managers. Mas eles não são mais legais. Nós os usávamos como em, 2015, então usamos Makefiles, mas agora nós envolvemos tudo com Webpack.

Makefiles? Pensei que era usado principalmente em projetos de C ou C++.

Sim, mas aparentemente na web nós amamos fazer as coisas complicadas e depois voltar para o básico. Fazemos isso todos os anos mais ou menos, apenas aguarde, nós vamos programar em assembly na web em um ou dois anos.

*Suspiro* Você mencionou algo chamado Webpack?

É um outro gerenciador de módulo para o navegador e também pode ser um tipo de gerenciador de tarefa. É como uma versão melhor do Browserify.

Ah, Okey. Por que é melhor?

Bem, talvez não melhor, é só tem mais opções sobre como suas dependências devem ser combinadas. Webpack permite que você use o diferentes gerenciadores de módulos e não apenas os tipos CommonJS, então por exemplo módulos com suporte nativo à ES6.

Eu estou extremamente confuso com tudo isso CommonJS/ES6.

Todos, mas você não deve se importar mais com SystemJS.

Jesus Cristo, outro nome-js. Ok, e o que é este SystemJS?

Bem, ao contrário de Browserify e Webpack 1. x, SystemJS é um carregador de módulo dinâmico que permite-lhe ligar vários módulos em vários arquivos em vez de empacota-los em um arquivo grande.

Peraí, mas pensei que queríamos construir nossas bibliotecas em um grande arquivo e carregar isso!

Sim, mas porque HTTP/2 está vindo agora múltiplas HTTP solicitações são realmente melhores.

Espera, então não pode apenas acrescentamos as três bibliotecas originais para o React??

Não mesmo. Quer dizer, você pode adicioná-los como scripts externos de uma CDN, mas você ainda precisa incluir Babel em seguida.

*Suspiro* E isso é ruim certo?

Sim, você incluiria o core do Babel inteiro, e não seria eficiente para produção. Em produção, você precisa realizar uma série de pre-tarefas para obter seu projeto pronto que faz o ritual para invocar o olhar de Satanás como uma receita de ovos cozidos. Você precisa minificar os arquivos, uglyficar, inline css, diferir, scripts, bem como-

Entendi, entendi. Então se você não incluir as bibliotecas diretamente em um CDN, como você faria isso?

Eu teria transpile de TypeScript usando um Webpack + SystemJS + Babel combinação.

TypeScript? Pensei que fossem estávamos ainda falando de JavaScript!

TypeScript é JavaScript, ou melhor, um superconjunto de JavaScript, JavaScript mais especificamente na versão ES6. Sabe, aquela sexta versão que falamos antes?

Pensei que ES2016 + já era um superconjunto de ES6! POR QUE agora temos esta coisa chamada TypeScript?

Oh, porque permite-nos usar JavaScript como uma linguagem tipada e reduzir os erros de tempo de desenvolvimento. É 2016, você deve adicionar tipos em seus códigos JavaScript.

E TypeScript, obviamente, faz isso.

Flow também faz muito bem, embora ele só verifica durante a digitação, enquanto TypeScript é um superconjunto do JavaScript que precisa ser compilado.

*Suspiro*E Flow é?

É um verificador de tipo estático feito por uns caras no Facebook. Eles codificaram isso em OCaml, programação funcional é fantástico.

OCaml? Programação funcional?

É o que garotos novos usam hoje em dia, cara, você sabe, 2016? Programação funcional? Funções de ordem elevada? Currying? Funções puras?

Não faço a mínima ideia do que você está falando.

Ninguém faz no início. Olha, você só precisa saber que programação funcional é melhor do que a OOP e é isso que deve ser usando em 2016.

Espera, eu aprendi a OOP na faculdade, achei que era bom?

Então era Java antes de ser comprada pela Oracle. Quero dizer, OOP era bom nos velhos tempos e ainda hoje tem seus usos, mas agora todo mundo está percebendo modificar estados é equivalente a bater em bêbados, então agora todo mundo está se mudando para objetos imutáveis e programação funcional. Os caras de Haskell vinham avisando há anos — sem falar dos caras do Elm — mas felizmente na web agora temos bibliotecas como Ramda que nos permitem usar programação funcional em JavaScript puro.

Você está inventando esses nomes para me zoar? Que diabos é Ramnda?

Não. Ramda. Como Lambda. Você sabe, biblioteca do David Chambers?

David quem?

David Chambers. Cara legal. Um dos contribuintes para Ramda. Você também deve ver sobre o Erik Meijer, se você quer realmente aprender sobre programação funcional.

E Erik Meijer é….?

Um cara de programação funcional também. Cara incrível. Ele tem um monte de apresentações onde ele destrói o Agile usando esta camisa de cor estranha. Você também deve verificar algumas coisas do Tj Jash Kenas, Sindre Sorhus, Paul irlandês, Addy Osmani-

Tá. Vou parar por aí. Tudo isso é bom e legal, mas acho que tudo está tão complicado e desnecessário para apenas buscar dados e exibi-los. Tenho certeza de que não preciso conhecer essas pessoas ou aprender todas essas coisas para criar uma tabela com dados dinâmicos. Vamos voltar ao React. Como posso buscar os dados do servidor com React?

Bem, na verdade, você não pode buscar dados com React, você apenas exibir os dados com React.

Ah, maldito seja. Então o que você usa para fazer fetch nos dados?

Você deve usar Fetch para fazer fetch nos dados do servidor.

Como é? Você usa Fetch para fazer fetch nos dados? Quem dá nome para essas coisas precisa de um dicionário de sinônimos.

E não é? É o nome da aplicação nativa para executar XMLHttpRequests contra um servidor.

Ah, então AJAX.

AJAX é apenas o uso de XMLHttpRequests. Mas, claro. Fetch permite que você faça AJAX com base em promessas, que em seguida, você pode resolve-las para evitar o inferno de callbacks.

Inferno de callbacks?

Sim. Cada vez que você executar uma solicitação assíncrona contra o servidor, você precisa esperar por sua resposta, que então faz com que você adicione uma função dentro de uma função, que é chamada de pirâmide do inferno.

Ah, Ok. E essa coisa de promessa resolve isso?

De fato. Manipulando seus callbacks através de promessas, você pode escrever um código mais fácil de ser entendido, simular e testa-lo, bem como executar solicitações simultâneas e esperar até que todas elas são carregadas.

E isso pode ser feito com Fetch?

Sim, mas somente se seu usuário utiliza um navegador atualizado, caso contrário, que você precisa incluir um Fetch retroativo ou usar Request, Bluebird ou Axios.

Quantas bibliotecas preciso saber pelo amor de Deus? Quantas são elas?

É o JavaScript. Deve haver milhares de bibliotecas que fazem a mesma coisa. Conhecemos que as bibliotecas, de verdade, e nós temos as melhores bibliotecas. Nossas bibliotecas são enoormes, e às vezes incluímos fotos de Guy Fieri nelas.

Disse Guy Fieri? Vamos parar com isso. Que estas bibliotecas Bluebird, Request e Axios fazem?

Elas são bibliotecas para executar XMLHttpRequests que retornam as promessas.

Método de AJAX do jQuery não começou retornar promessas também?

Nós não usamos a palavra “J” em 2016 mais. Basta usar Fetch e retroagir quando não é uma navegação ou use Bluebird, Request ou Axios em vez disso. Em seguida, gerenciar a promessa com await dentro de uma função async e boom, você tem o fluxo de controle adequado.

É a terceira vez que você menciona await, mas não tenho ideia o que é.

Await permite bloquear uma chamada assíncrona, permitindo que você ter um melhor controle sobre quando os dados estão sendo buscados e aumentando a legibilidade do código. É incrível, você só precisa certificar-se de que você adicionar o stage-3 pré-configurado de Babel, ou uso de sintaxe-async-functions e plugin transform-async-to-generator.

Isso é loucura.

Não, loucura é o fato de você precisa pré-compilar códigoTypeScript e então transpilar com Babel para usar await.

O quê? Ela não está incluída no TypeScript?

Estará na próxima versão, mas a partir da versão 1.7 só gera ES6, então se você quiser usar await no navegador, primeiro você precisa compilar seu código transcrito para ES6 e, em seguida, Babel para ES5.

Neste momento, não sei o que dizer.

Olha, é fácil. Crie tudo com TypeScript. Todos os módulos que usam Fetch compile para ES6, transpile com Babel em stage-3 preset e carregue com SystemJS. Se você não tem Fetch, retroative, ou use o Bluebird, Request ou Axios e lidar com todas as suas promessas com await.

Temos diferentes definições de fácil. Então, com esse ritual eu finalmente alcancei os dados e agora eu possa exibi-las com React, certo?

Seu aplicativo vai lidar com as alterações de estado?

Err, acho que não. Eu só preciso exibir os dados.

Oh, graças a Deus. Caso contrário eu teria que explicar sobre Flux, e implementações como Flummox, Alt, Fluxible. Embora, para ser honesto, você deve estar usando Redux.

Eu vou só ignorar esses nomes. Novamente, eu só preciso exibir dados.

Ah, se você só estiver exibindo os dados você não precisa de React para começar. Você teria sido bem com um template engine.

Está brincando? Você acha que isso é engraçado? Isso é como você trata seus entes queridos?

Eu estava explicando o que poderia usar.

Pare. Apenas pare.

Quero dizer, mesmo que ele só está usando o template engine, eu ainda usaria um Typescript + SystemJS + Babel se eu fosse você.

Eu preciso para exibir dados em uma página, não executar o fatality de MK original do Sub Zero. Diga-me que template engine posso utilizar e toco sozinho.

Há vários, qual deles você está familiarizado?

Ugh, não lembro o nome. Foi há muito tempo.

jTemplates? jQote? PURE?

Err, não me lembro. Mais um?

Transparency? JSRender? MarkupJS? KnockoutJS? Aquele tinha ligação bidirecional.

Mais um?

PlatesJS? jQuery-tmpl? Hendlebars? Algumas pessoas ainda usam.

Talvez. Lá são semelhantes para o último?

Mustache, underscore? Acho que agora nem o lodash tem um ser honesto, mas esses são o tipo de 2014.

Err… Talvez fosse mais recente.

Jade? DustJS?

Não.

DotJS? EJS?

Não.

Nunjucks? ECT?

Não

Mah, ninguém gosta da sintaxe Coffeescript. Jade?

Não, você já disse Jade.

Quis dizer Pug. Eu quis dizer o Jade. Quer dizer, Jade é agora Pug.

*Suspiro* Não, não me lembro. Qual deles você usaria?

Provavelmente só ES6 native template strings.

Deixe-me adivinhar. E isso exige ES6.

Correto.

Que, dependendo de qual navegador estou usando precisa de Babel.

Correto.

Que, se eu quiser incluir sem adicionar a biblioteca do núcleo inteiro, preciso carregá-lo como um módulo do npm.

Correto.

Que, exige Browserify, ou Wepback, ou provavelmente outra coisa chamada SystemJS.

Correto.

Que, a menos que seja Webpack, idealmente deve ser gerido por um Task Runner.

Correto.

Mas, desde então eu deveria estar usando programação funcional e linguagens que primeiro precisam pré-compilar ou adicionar este treco de Flux.

Correto.

E então enviar tudo para o Babel, se eu quiser usar o await.

Correto.

Para então poder usar Fetch, promessas e controle de fluxo e toda aquela magia.

-Só não se esqueça de usar fetch retroativo se ele não é suportado, Safari ainda não consegue lidar com isso.

Que saber? Acho que terminamos aqui. Na verdade, acho que terminei. Terminei com a web, e com JavaScript por completo.

Está bem, em poucos anos, todos vão ser codificação em Elm ou WebAssembly.

Só vou voltar para o back-end. Não consigo suportar essas muitas mudanças e versões e edições e compiladores e transpilers. A comunidade de JavaScript é louca se acha que alguém pode manter-se com isto.

Te entendo. Você deve tentar a Comunidade Python.

Por que?

Já ouviu falar de Python 3?

Uma tradução livre do original How it feels to learn JavaScript in 2016.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.