Como se sente ao aprender JavaScript em 2016

Não foram criadas estruturas de JavaScript durante a redação deste artigo.

O seguinte é inspirado no artigo "É o futuro" da Circle CI. Você pode ler o original aqui . Esta peça é apenas uma opinião, e, como qualquer estrutura de JavaScript, não deve ser levado a sério demais.

Ei, recebi este novo projeto na web, mas para ser sincero, não codifiquei muito na web em alguns anos e ouvi a paisagem mudar um pouco. Você é o desenvolvedor web mais atualizado por aqui?

– O termo atual é o engenheiro do Front End, mas sim, eu sou o cara certo. Eu faço web em 2016. Visualizações, tocadores de música, drones voadores que jogam futebol, você o nomeia. Acabei de voltar de JsConf e ReactConf, então eu conheço as tecnologias mais recentes para criar aplicativos da web.

Legal. Eu preciso criar uma página que exiba a atividade mais recente dos usuários, então eu só preciso obter os dados do ponto final REST e exibi-lo em algum tipo de tabela filtrável e atualizá-lo se alguma coisa mudar no servidor. Eu estava pensando talvez em usar jQuery para buscar e exibir os dados?

– Meu Deus, não, ninguém mais usa jQuery. Você deve tentar aprender Reagir, é 2016.

Ah ok. O que é Reagir?

– É uma biblioteca super legal feita por alguns caras no Facebook, ele realmente traz controle e desempenho para sua aplicação, permitindo que você lide com todas as mudanças de visualizações muito facilmente.

Isso parece limpo. Posso usar Reagir para exibir dados do servidor?

– Sim, mas primeiro você precisa adicionar Reagir e Reagir DOM como uma biblioteca em sua página.

Aguarde, por que duas bibliotecas?

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

JSX? O que é JSX?

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

O que há de errado com o HTML?

– É 2016. Ninguém codifica diretamente o HTML diretamente.

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

-Não bem. Você precisa adicionar Babel, e então você pode usar o React.

Outra biblioteca? O que é Babel?

-Oh, Babel é um transpiler que permite segmentar versões específicas do JavaScript, enquanto você codifica em qualquer versão do JavaScript. Você não deve incluir o Babel para usar o ReactJS, mas, a menos que você o faça, está preso com o uso do ES5, e seja real, é 2016, você deveria estar codificando no ES2016 + como o resto dos filhos legais.

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

-ES5 significa ECMAScript 5. É a edição que tem a maioria das pessoas alvo desde que foi implementada pela maioria dos navegadores hoje em dia.

ECMAScript?

– Sim, você sabe, o JavaScript padrão de scripts foi baseado em 1999 após sua versão inicial em 1995, na época, quando o JavaScript era chamado Livescript e só funcionava no Netscape Navigator. Isso foi muito desordenado naquela época, mas felizmente agora, as coisas são muito claras e temos, como, 7 edições dessa implementação.

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

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

Espere, o que aconteceu com o sexto?

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

Certo. E por que usar ES2016 + sobre ES6 então?

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

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

– É homem de 2016, ninguém usa jQuery mais, acaba em um monte de código de 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 agrupá-las com um gerenciador de módulos para carregar apenas um arquivo.

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

– A definição depende do ambiente, mas na Web geralmente queremos dizer algo que suporte módulos AMD ou CommonJS.

Riiight. E AMD e CommonJS são …?

– Definições. Há maneiras de descrever como várias bibliotecas JavaScript e classes devem interagir. Você sabe, exporta e exige? Você pode escrever múltiplos arquivos JavaScript que definem a API AMD ou CommonJS e você pode usar algo como Browserify para agrupá-los.

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

– É uma ferramenta que permite que você envolva as dependências descritas pelo CommonJS para arquivos que podem ser executados no navegador. Foi criado 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.

Como um CDN?

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

Oh, como Bower!

-Sim, mas é 2016 agora, ninguém mais usa Bower.

Oh, eu vejo … então preciso baixar as bibliotecas da npm então?

-Sim. Então, por exemplo, se você quiser usar o React, faça o download do módulo React e importe-o no seu código. Você pode fazer isso para quase todas as bibliotecas populares de JavaScript.

Ah, 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 esses?

Vamos ficar com o React, já estou aprendendo muitas coisas agora. Então, se eu precisar usar Reagir eu buscá-lo a partir desta npm e depois usar esta coisa Browserify?

-Sim.

Isso parece excessivamente complicado apenas agarrar um monte de dependências e amarrá-los.

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

Grunhido? Gole? Brócolis? Mimosa? Desculpe, estamos falando agora?

– Gerenciadores de quadros. Mas eles não são mais legais. Nós os usamos em como, 2015, então usamos Makefiles, mas agora nós embrulhamos tudo com o Webpack.

Makefiles? Eu pensei que fosse usado principalmente em projetos C ou C ++.

– Sim, mas aparentemente na internet adoramos fazer as coisas complicadas e voltar ao básico. Nós fazemos isso todos os anos, espero por isso, vamos fazer assembléia na web em um ano ou dois.

Suspiro. Você mencionou algo chamado Webpack?

– É outro gerenciador de módulos para o navegador enquanto também é um tipo de corredor de tarefas. É como uma versão melhor do Browserify.

Ah ok. Por que é melhor?

– Certo, talvez não melhor, é mais uma opinião sobre como suas dependências devem estar vinculadas. O Webpack permite que você use diferentes gerenciadores de módulos, e não apenas CommonJS, portanto, por exemplo, módulos nativos compatíveis com ES6.

Estou extremamente confuso com esta coisa comum do CommonJS / ES6.

– Todo mundo é, mas você não deveria se preocupar mais com o SystemJS.

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

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

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

Sim, mas porque o HTTP / 2 está chegando agora, vários pedidos HTTP são realmente melhores.

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

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

Suspiro. E isso é ruim, certo?

-Sim, você estaria incluindo todo o babel-core, e não seria eficiente para a produção. Na produção, você precisa executar uma série de pré-tarefas para preparar seu projeto que faça o ritual para convocar Satanás como uma receita de ovos cozidos. Você precisa minificar ativos, usá-los, cSS embaixo acima da dobra, adiar scripts, bem como –

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

– Eu o transpiro do tipo de letra usando um pacote Webpack + SystemJS + Babel.

Tipografia? Eu pensei que estávamos codificando em JavaScript!

-Tipescript IS JavaScript, ou melhor colocado, um superconjunto de JavaScript, mais especificamente JavaScript na versão ES6. Você sabe, a sexta versão da qual já falamos antes?

Eu pensei que ES2016 + já era um superconjunto do ES6! PORQUE, nós precisamos agora disso, chamado Tipcript?

-Oh, porque nos permite usar o JavaScript como um idioma digitado e reduzir os erros de tempo de execução. É 2016, você deve adicionar alguns tipos ao seu código JavaScript.

E o tipo de letra obviamente faz isso.

-Flow também, embora apenas verifique se a digitação, enquanto o tipo de letra é um superconjunto de JavaScript que precisa ser compilado.

Suspiro … e Flow é?

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

OCaml? Programação funcional?

– É o que as crianças legais usam hoje em dia homem, você sabe, 2016? Programação funcional? Funções de alta ordem? Currying? Funções puras?

Eu não tenho ideia do que você acabou de dizer.

– Ninguém faz no início. Olhe, você só precisa saber que a programação funcional é melhor do que o OOP e é isso que devemos usar em 2016.

Espero, aprendi o OOP na faculdade, pensei que era bom?

-Sim, era Java antes de ser comprado pela Oracle. Quero dizer, o OOP estava bem de volta nos dias, e ainda tem seus usos hoje, mas agora todos estão percebendo que modificar estados é equivalente a chutar bebês, então agora todos estão se movendo para objetos imutáveis ??e programação funcional. Os indivíduos de Haskell estavam chamando isso por anos, e não me começam com os garotos de Elm, mas, felizmente na internet, agora temos bibliotecas como a Ramda que nos permitem usar programação funcional em JavaScript simples.

Você está apenas deixando nomes por causa disso? O que diabos é Ramnda?

-Não. Ramda. Como Lambda. Você sabe, a biblioteca de David Chambers?

David, quem?

-David Chambers. Cara legal. Reproduz um jogo de golpe médio. Um dos contribuidores para Ramda. Você também deve verificar Erik Meijer se você for sério sobre a aprendizagem de programação funcional.

E Erik Meijer é …?

Pessoal de programação funcional também. Cara fantástico. Ele tem um monte de apresentações onde ele trash Agile enquanto usa esta estranha camiseta colorida. Você também deve verificar algumas coisas do Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Está bem. Eu vou parar você lá. Tudo isso é bom e bom, mas acho que tudo isso é tão complicado e desnecessário para apenas obter dados e exibi-lo. Tenho certeza de que não preciso conhecer essas pessoas ou aprender todas essas coisas para criar uma tabela com dados dinâmicos. Voltemos a Reagir. Como posso obter os dados do servidor com o React?

– Bem, você realmente não busca os dados com Reagir, você apenas exibe os dados com Reagir.

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

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

Eu sinto Muito? Você usa Fetch para buscar os dados? Quem está nomeando essas coisas precisa de um tesauro.

-Eu sei direito? Obtenha o nome da implementação nativa para executar XMLHttpRequests contra um servidor.

Ah, então, AJAX.

-AJAX é apenas o uso de XMLHttpRequests. Mas claro. O Fetch permite que você faça o AJAX com base em promessas, o que, então, você pode resolver para evitar o despertador.

Callback hell?

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

Ah ok. E essa coisa de promessa resolve isso?

-De fato. Ao manipular seus callbacks através de promessas, você pode escrever mais fácil de entender o código, simulá-los e testá-los, além de executar solicitações simultâneas de uma só vez e aguardar até que todos sejam carregados.

E isso pode ser feito com o Fetch?

-Sim, mas somente se o usuário usar um navegador de sem-fim, caso contrário, você precisa incluir um Fitch polyfill ou use Request, Bluebird ou Axios.

Quantas bibliotecas eu preciso saber pelo amor de Deus? Quantos são deles?

– É o JavaScript. Tem que haver milhares de bibliotecas que todos façam o mesmo. Conhecemos as bibliotecas, de fato, temos as melhores bibliotecas. Nossas bibliotecas são huuuge, e às vezes incluímos fotos de Guy Fieri nelas.

Você falou Guy Fieri? Vamos acabar com isso. O que essas bibliotecas Bluebird, Request, Axios fazem?

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

O método AJAX da jQuery também começou a retornar promessas?

– Não usamos mais a palavra "J" em 2016. Basta usar o Fetch e polir-lo quando não estiver em um navegador ou usar Bluebird, Request ou Axios. Em seguida, gerencie a promessa com aguardar dentro de uma função e boom assíncronas, você possui um fluxo de controle adequado.

É a terceira vez que você menciona aguardar, mas não tenho idéia do que é.

-Await permite que você bloqueie uma chamada assíncrona, permitindo que você tenha um melhor controle quando os dados estiverem sendo buscados e aumentando a legibilidade do código. É incrível, você só precisa ter certeza de adicionar a pré-configuração do estágio 3 na Babel, ou usar sintaxe-async-functions e transformar-async-to-generator plugin.

Isso é uma loucura.

-Não, louco é o fato de você precisar precompilar o código do tipo e, em seguida, transferi-lo com o Babel para usar aguardar.

Wat? Não está incluído em Tipografia?

– Isso ocorre na próxima versão, mas, a partir da versão 1.7, ele apenas tem como alvo o ES6, então, se você deseja usar no navegador, primeiro você precisa compilar seu código de tipo que se destina a ES6 e, em seguida, o Babel que merda para segmentar o ES5.

Neste ponto, não sei o que dizer.

– Olhe, é fácil. Codifique tudo em Tipografia. Todos os módulos que usam o Fetch compilam-os para segmentar o ES6, transfira-os com o Babel em uma pré-configuração do estágio 3 e carregue-os com o SystemJS. Se você não tiver Fetch, polvilhe, use Bluebird, Request ou Axios, e aguarde todas as suas promessas.

Temos definições muito diferentes de fáceis. Então, com esse ritual eu finalmente obtive os dados e agora eu posso exibi-lo com o React Right?

– Seu aplicativo vai lidar com quaisquer mudanças de estado?

Err, eu não penso assim. Eu só preciso exibir os dados.

-Oh! Graças a deus. Caso contrário, eu teria que explicar o Flux, e implementações como Flummox, Alt, Fluxible. Embora seja honesto, você deveria usar o Redux.

Eu vou simplesmente passar por esses nomes. Mais uma vez, eu só preciso exibir dados.

-Oh, se você está apenas exibindo os dados que você não precisou Reagir para começar. Você teria ficado bem com um motor de modelos.

Você está 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.

– Quero dizer, mesmo que seja apenas usando um mecanismo de modelo, eu ainda usaria uma combinação de tipos + SystemJS + Babel se eu fosse você.

Eu preciso exibir dados em uma página, não executar a fatalidade MK original do Sub Zero. Apenas me diga o que o motor de modelos deve usar e eu vou pegar de lá.

– Há muito, qual deles você conhece?

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

-jTemplates? jQote? PURO?

Err, não toca um sino. Outro?

-Transparência? JSRender? MarkupJS? KnockoutJS? Aquele tinha uma ligação de dois sentidos.

Outro?

-PlatesJS? jQuery-tmpl? Guidão? Algumas pessoas ainda usam isso.

Talvez. Existe semelhante ao último?

-Mustache, sublinhado? Eu acho que agora mesmo lodash tem um para ser honesto, mas esses são um pouco de 2014.

Err .. talvez fosse mais novo.

-Jade? DustJS?

Não.

-DotJS? EJS?

Não.

-Nunjucks? ECT?

Não.

-Má, 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 cadeias de modelo nativo ES6.

Deixe-me adivinhar. E isso requer ES6.

-Corrigir.

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

-Corrigir.

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

-Corrigir.

O que, requer Browserify, ou Wepback, ou muito provavelmente o outro chamado SystemJS.

-Corrigir.

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

-Corrigir.

Mas, uma vez que eu deveria estar usando a programação funcional e as linguagens digitadas, eu primeiro preciso compilar o tipo de letra ou adicionar esse Flow thingy.

-Corrigir.

E então envie isso para Babel se eu quiser usar aguardar.

-Corrigir.

Então eu posso usar Fetch, promessas e controle de fluxo e tudo isso mágico.

– Simplesmente não se esqueça de preencher o Polyfill se não for suportado, o Safari ainda não pode lidar com isso.

Você sabe o que. Acho que acabamos aqui. Na verdade, acho que acabei. Termino com a web, acabei com o JavaScript completamente.

– Tudo bem, em alguns anos, todos nós estaremos codificando em Elm ou WebAssembly.

Eu apenas vou voltar para o backend. Eu simplesmente não consigo lidar com essas muitas mudanças e versões e edições e compiladores e transpilers. A comunidade de JavaScript está louca se achar que qualquer um pode acompanhar isso.

-Eu te escuto. Você deve experimentar a comunidade Python então.

Por quê?

– Ouviu falar do Python 3?

Atualização: Obrigado por apontar erros de digitação e erros, vou atualizar o artigo como observado. Discussão em HackerNews e Reddit .

Hacker Noon é como os hackers começam suas tardes. Somos uma parte da família @AMI . Agora estamos aceitando envios e estamos felizes em discutir oportunidades de propaganda e patrocínio .

Se você gostou desta história, recomendamos ler nossas últimas histórias de tecnologia e histórias de tecnologia de tendências . Até a próxima, não concorde com as realidades do mundo!