Como é aprender JavaScript em 2016

Nenhuma estrutura JavaScript foi criada durante a redação deste artigo.

O seguinte é inspirado no artigo “It's the future” do Circle CI. Você pode ler o original aqui . Este artigo é apenas uma opinião e, como qualquer framework JavaScript, não deve ser levado muito a sério.

Ei, eu tenho esse novo projeto web, mas para ser honesto, eu não programo muito web há alguns anos e ouvi dizer que o cenário mudou um pouco. Você é o desenvolvedor web mais atualizado por aqui, certo?

- O termo real é engenheiro de front-end, mas sim, eu sou o cara certo. Eu trabalho com web em 2016. Visualizações, tocadores de música, drones voadores que jogam futebol, o que você quiser. Acabei de voltar da JsConf e ReactConf, então conheço as últimas tecnologias para criar aplicativos web.

Legal. Preciso criar uma página que exiba as últimas atividades dos usuários, então só preciso obter os dados do endpoint REST e exibi-los em algum tipo de tabela filtrável, e atualizá-la se algo mudar no servidor. Eu estava pensando em talvez usar jQuery para buscar e exibir os dados?

-Meu Deus, não, ninguém mais usa jQuery. Você deveria tentar aprender React, estamos em 2016.

Ah, ok. O que é React?

- É uma biblioteca super legal feita por alguns caras do Facebook, ela realmente traz controle e desempenho ao seu aplicativo, permitindo que você lide com qualquer alteração de visualização muito facilmente.

Isso parece legal. Posso usar React para exibir dados do servidor?

-Sim, mas primeiro você precisa adicionar o React e o React DOM como uma biblioteca na sua página web.

Espere, por que duas bibliotecas?

- Então uma é a biblioteca real e a segunda é para manipular o DOM, que agora você pode descrever em JSX.

JSX? O que é JSX?

-JSX é apenas uma extensão de sintaxe JavaScript que se parece muito com XML. É uma outra maneira de descrever o DOM, pense nele como um HTML melhor.

O que há de errado com HTML?

- Estamos em 2016. Ninguém mais codifica HTML diretamente.

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

-Não exatamente. Você precisa adicionar Babel, e então você poderá usar React.

Outra biblioteca? O que é Babel?

-Oh, Babel é um transpilador que permite que você tenha como alvo versões específicas do JavaScript, enquanto você codifica em qualquer versão do JavaScript. Você NÃO PRECISA incluir Babel para usar ReactJS, mas a menos que você faça isso, você está preso usando ES5, e sejamos realistas, é 2016, você deveria estar codificando em ES2016+ como o resto dos garotos legais fazem.

ES5? ES2016+? Estou me perdendo aqui. O que é ES5 e ES2016+?

-ES5 significa ECMAScript 5. É a edição mais procurada pelas pessoas, já que foi implementada pela maioria dos navegadores atualmente.

Script ECMA?

-Sim, você sabe, o padrão de script JavaScript foi baseado em 1999, após seu lançamento inicial em 1995, naquela época quando JavaScript era chamado Livescript e só rodava no Netscape Navigator. Isso era muito bagunçado naquela época, mas felizmente agora as coisas estão bem claras e temos, tipo, 7 edições dessa implementação.

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

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

Espera, o que aconteceu com o sexto?

-Você quer dizer ES6? Sim, quero dizer, cada edição é um superconjunto da anterior, então se você estiver usando ES2016+, você está usando todos os recursos das versões anteriores.

Certo. E por que usar ES2016+ em vez de ES6 então?

-Bem, você PODERIA usar ES6, mas para usar recursos legais como async e await, você precisa usar ES2016+. Caso contrário, você está preso a geradores ES6 com coroutines para bloquear chamadas assíncronas para fluxo de controle adequado.

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

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

Certo. Então minha alternativa é carregar três bibliotecas para buscar dados e exibir uma tabela HTML.

-Bem, você inclui essas três bibliotecas, mas as agrupa com um gerenciador de módulos para carregar apenas um arquivo.

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

- A definição depende do ambiente, mas na web geralmente queremos dizer qualquer coisa que suporte módulos AMD ou CommonJS.

Certo. E AMD e CommonJS são…?

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

OK, isso faz sentido… eu acho. O que é Browserify?

-É uma ferramenta que permite que você agrupe dependências descritas pelo CommonJS em arquivos que podem ser executados no navegador. Foi criada porque a maioria das pessoas publica essas dependências no registro npm.

registro npm?

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

Gosta de uma CDN?

-Na verdade não. É mais como um banco de dados centralizado onde qualquer um pode publicar e baixar bibliotecas, então você pode usá-las localmente para desenvolvimento e então carregá-las para um CDN se quiser.

Ah, como Bower!

-Sim, mas já estamos em 2016 e ninguém mais usa o Bower.

Ah, entendi… então preciso baixar as bibliotecas do npm?

-Sim. Então, por exemplo, se você quiser usar React, você baixa o módulo React e o importa no seu código. Você pode fazer isso para quase todas as bibliotecas JavaScript populares.

Ah, como o Angular!

-Angular é tão 2015. Mas sim. Angular estaria lá, junto com VueJS ou RxJS e outras bibliotecas legais de 2016. Quer aprender sobre elas?

Vamos ficar com React, já estou aprendendo coisas demais agora. Então, se eu precisar usar React, eu busco isso desse npm e então uso essa coisa do Browserify?

-Sim.

Parece muito complicado simplesmente pegar um monte de dependências e juntá-las.

-É, é por isso que você usa um gerenciador de tarefas como Grunt ou Gulp ou Broccoli para automatizar a execução do Browserify. Caramba, você pode até usar o Mimosa.

Grunhido? Gulp? Brócolis? Mimosa? Do que diabos estamos falando agora?

- Gerenciadores de tarefas. Mas eles não são mais legais. Nós os usávamos em 2015, depois usávamos Makefiles, mas agora envolvemos tudo com Webpack.

Makefiles? Eu pensei que era mais usado em projetos C ou C++.

-Sim, mas aparentemente na web nós amamos complicar as coisas e depois voltar ao básico. Fazemos isso todo ano ou mais, espere só, vamos fazer assembly na web em um ou dois anos.

Suspiro. Você mencionou algo chamado Webpack?

-É outro gerenciador de módulos para o navegador, sendo também uma espécie de executor de tarefas. É como uma versão melhorada do Browserify.

Ah, ok. Por que é melhor?

-Bem, talvez não melhor, é apenas mais opinativo sobre como suas dependências devem ser amarradas. O Webpack permite que você use diferentes gerenciadores de módulos, e não apenas os CommonJS, então, por exemplo, módulos nativos com suporte a ES6.

Estou extremamente confuso com toda essa coisa do CommonJS/ES6.

-Todo mundo é, mas você não deve se importar mais com o SystemJS.

Jesus Cristo, outro substantivo-js. Ok, e o que é esse SystemJS?

- Bem, diferente do Browserify e do Webpack 1.x, o SystemJS é um carregador de módulos dinâmico que permite vincular vários módulos em vários arquivos em vez de agrupá-los em um arquivo grande.

Espere, mas pensei que queríamos construir nossas bibliotecas em um arquivo grande e carregá-lo!

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

Espera, então não podemos simplesmente adicionar as três bibliotecas originais do React?

-Na verdade não. Quero dizer, você poderia adicioná-los como scripts externos de um CDN, mas ainda precisaria incluir Babel então.

Suspiro. E isso é ruim, certo?

-Sim, você estaria incluindo todo o babel-core, e não seria eficiente para produção. Na produção, você precisa executar uma série de pré-tarefas para deixar seu projeto pronto, o que faz o ritual para invocar Satanás parecer uma receita de ovos cozidos. Você precisa minificar ativos, torná-los feios, inline css acima da dobra, adiar scripts, assim como-

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

-Eu transpilaria do Typescript usando uma combinação Webpack + SystemJS + Babel.

Typescript? Pensei que estivéssemos codificando em JavaScript!

-Typescript É JavaScript, ou melhor dizendo, um superconjunto de JavaScript, mais especificamente JavaScript na versão ES6. Sabe, aquela sexta versão da qual falamos antes?

Eu pensei que o ES2016+ já fosse um superconjunto do ES6! POR QUE precisamos agora dessa coisa chamada Typescript?

-Ah, porque nos permite usar JavaScript como uma linguagem tipada e reduzir erros de tempo de execução. Estamos em 2016, você deveria estar adicionando alguns tipos ao seu código JavaScript.

E o Typescript obviamente faz isso.

-Flow também, embora ele só verifique a digitação, enquanto o Typescript é um superconjunto do JavaScript que precisa ser compilado.

Suspiro… e o Flow é?

-É um verificador de tipo estático feito por alguns caras do Facebook. Eles o codificaram em OCaml, porque programação funcional é incrível.

OCaml? Programação funcional?

-É o que os garotos legais usam hoje em dia, cara, sabe, 2016? Programação funcional? Funções de alta ordem? Currying? Funções puras?

Não faço ideia do que você acabou de dizer.

-Ninguém faz isso no começo. Olha, você só precisa saber que programação funcional é melhor que POO e é isso que deveríamos usar em 2016.

Espera, eu aprendi POO na faculdade, achei isso bom?

- Assim era o Java antes de ser comprado pela Oracle. Quer dizer, POO era bom antigamente, e ainda tem seus usos hoje, mas agora todo mundo está percebendo que modificar estados é equivalente a chutar bebês, então agora todo mundo está migrando para objetos imutáveis e programação funcional. Os caras do Haskell vinham chamando isso há anos, - e nem me faça começar com os caras do Elm - mas felizmente na web agora temos bibliotecas como Ramda que nos permitem usar programação funcional em JavaScript simples.

Você está apenas citando nomes por falar? O que diabos é Ramnda?

-Não. Ramda. Como Lambda. Sabe, aquela biblioteca do David Chambers?

David quem?

-David Chambers. Cara legal. Joga um jogo Coup incrível. Um dos contribuidores do Ramda. Você também deve conferir Erik Meijer se você leva a sério o aprendizado de programação funcional.

E Erik Meijer é…?

-Cara de programação funcional também. Cara incrível. Ele tem um monte de apresentações onde ele destrói o Agile enquanto usa essa camisa colorida estranha. Você também deveria conferir algumas coisas do Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. Vou parar você aqui. Tudo isso é bom e ótimo, mas acho que tudo isso é muito 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 o React?

- Bem, na verdade você não busca os dados com o React, você apenas os exibe com o React.

Ah, droga. Então o que você usa para buscar os dados?

-Você usa o Fetch para buscar os dados do servidor.

Desculpe? Você usa Fetch para buscar os dados? Quem quer que esteja nomeando essas coisas precisa de um dicionário de sinônimos.

-Eu sei, certo? Fetch é o nome da implementação nativa para executar XMLHttpRequests em 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 então você pode resolver para evitar o inferno do callback.

Inferno de retorno de chamada?

-Sim. Toda vez que você executa uma requisição assíncrona contra o servidor, você precisa esperar por sua resposta, o que então faz você adicionar uma função dentro de uma função, que é chamada de pirâmide de callback do inferno.

Ah, ok. E essa coisa de promessa resolve?

-De fato. Ao manipular seus callbacks por meio de promessas, você pode escrever um código mais fácil de entender, simular e testá-los, bem como executar requisições simultâneas de uma vez e esperar até que todas sejam carregadas.

E isso pode ser feito com o Fetch?

- Sim, mas somente se o seu usuário usar um navegador evergreen, caso contrário você precisará incluir um polyfill Fetch ou usar Request, Bluebird ou Axios.

Quantas bibliotecas eu preciso conhecer, pelo amor de Deus? Quantas são?

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

Você acabou de dizer Guy Fieri? Vamos acabar logo com isso. O que essas bibliotecas Bluebird, Request, Axios fazem?

-São bibliotecas para executar XMLHttpRequests que retornam promessas.

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

- Não usamos mais a palavra “J” em 2016. Basta usar Fetch e polyfill quando não estiver em um navegador ou usar Bluebird, Request ou Axios em vez disso. Então gerencie a promessa com await dentro de uma função async e bum, você tem o fluxo de controle adequado.

É a terceira vez que você menciona wait, mas não faço ideia do que seja.

-Await permite que você bloqueie uma chamada assíncrona, permitindo que você tenha melhor controle sobre quando os dados estão sendo buscados e aumentando a legibilidade geral do código. É incrível, você só precisa ter certeza de adicionar a predefinição stage-3 no Babel, ou usar syntax-async-functions e o plugin transform-async-to-generator.

Isso é loucura.

- Não, é loucura o fato de você precisar pré-compilar o código Typescript e então transpilá-lo com o Babel para usar o await.

O quê? Não está incluído no Typescript?

- Isso acontece na próxima versão, mas a partir da versão 1.7 ele só tem como alvo o ES6, então se você quiser usar o await no navegador, primeiro você precisa compilar seu código Typescript tendo como alvo o ES6 e então o Babel para ter como alvo o ES5.

Neste ponto não sei o que dizer.

-Olha, é fácil. Codifique tudo em Typescript. Todos os módulos que usam Fetch os compilam para o ES6 de destino, transpilam-nos com Babel em uma predefinição de estágio 3 e os carregam com SystemJS. Se você não tem Fetch, faça polyfill, ou use Bluebird, Request ou Axios, e lide com todas as suas promessas com await.

Temos definições muito diferentes de fácil. Então, com esse ritual, finalmente busquei os dados e agora posso exibi-los com React, certo?

-Seu aplicativo vai lidar com alguma mudança de estado?

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

-Oh, graças a Deus. Senão eu teria que explicar Flux, e implementações como Flummox, Alt, Fluxible. Embora, para ser honesto, você deveria usar Redux.

Vou apenas voar sobre esses nomes. Novamente, preciso apenas exibir dados.

-Oh, se você está apenas exibindo os dados, você não precisava do React para começar. Você teria ficado bem com um mecanismo de template.

Você tá brincando comigo? Você acha isso engraçado? É assim que você trata seus entes queridos?

-Eu estava apenas explicando o que você poderia usar.

Pare. Simplesmente pare.

-Quer dizer, mesmo que seja apenas usando um mecanismo de template, eu ainda usaria uma combinação Typescript + SystemJS + Babel se fosse você.

Preciso exibir dados em uma página, não executar a fatalidade original do MK do Sub Zero. Apenas me diga qual mecanismo de template usar e eu cuido disso.

-Há muitos, com quais você está familiarizado?

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

-jTemplates? jQote? PURO?

Err, não me lembra nada. Mais um?

-Transparência? JSRender? MarkupJS? KnockoutJS? Esse tinha ligação bidirecional.

Mais um?

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

Talvez. Há algo parecido com o último?

-Bigode, sublinhado? Acho que agora até o lodash tem um, para ser honesto, mas esses são meio 2014.

Err... talvez fosse mais novo.

-Jade?PoeiraJS?

Não.

-DotJS? EJS?

Não.

-Nunjucks? ECT?

Não.

-Mah, ninguém gosta da sintaxe Coffeescript de qualquer maneira. Jade?

Não, você já disse Jade.

-Eu quis dizer Pug. Eu quis dizer Jade. Quero dizer, Jade agora é Pug.

Suspiro. Não. Não consigo lembrar. Qual você usaria?

-Provavelmente apenas strings de modelo nativas do ES6.

Deixe-me adivinhar. E isso requer ES6.

-Correto.

O que, dependendo do navegador que estou usando, precisa do Babel.

-Correto.

O que, se eu quiser incluir sem adicionar a biblioteca principal inteira, preciso carregá-la como um módulo do npm.

-Correto.

O que requer Browserify, ou Wepback, ou provavelmente outra coisa chamada SystemJS.

-Correto.

O que, a menos que seja o Webpack, idealmente deve ser gerenciado por um executor de tarefas.

-Correto.

Mas, como eu deveria usar programação funcional e linguagens tipadas, primeiro preciso pré-compilar o Typescript ou adicionar esse negócio de Flow.

-Correto.

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

-Correto.

Então posso usar Fetch, promessas, fluxo de controle e toda essa mágica.

- Só não se esqueça de aplicar polyfill ao Fetch caso ele não seja suportado, o Safari ainda não consegue lidar com isso.

Sabe de uma coisa? Acho que terminamos aqui. Na verdade, acho que terminei. Terminei com a web, terminei com JavaScript de uma vez.

- Tudo bem, em alguns anos todos nós estaremos programando em Elm ou WebAssembly.

Vou voltar para o backend. Simplesmente não consigo lidar com tantas mudanças, versões, edições, compiladores e transpiladores. A comunidade JavaScript é louca se acha que alguém consegue acompanhar isso.

-Eu te entendo. Você deveria tentar a comunidade Python então.

Por que?

-Já ouviu falar do Python 3?

Atualização: Obrigado por apontar erros de digitação e enganos, atualizarei o artigo conforme observado. Discussão no HackerNews e Reddit .