As Principais Tendências do JavaScript a serem Observadas em 2018

Se você viveu debaixo de uma pedra ou está enterrado em projetos ao longo de 2017, este é o artigo para você.

Muito aconteceu em 2017 que observamos atentamente a X-Team , estabelecendo 2018 para muita ação e inovação.

Você também pode usar isso como um guia para planejar seu crescimento como desenvolvedor em 2018 para ajudá-lo a obter projetos mais inovadores.

Reagir contra Vue.js

Vamos direto para as coisas boas: nem muitos acreditavam que a Vue se tornaria um grande concorrente para reagir , mas era impossível ignorar o Vue este ano, mesmo que enviasse Angular para as sombras em termos de hype do desenvolvedor.

À medida que olharmos para 2018, estamos prestes a embarcar em uma intensa luta de 2 anos preenchida com muita campanha publicitária para a Vue .

Reagir ainda tem o apoio financeiro de uma das empresas mais ricas do mundo, para não mencionar alguns mantenedores incrivelmente talentosos.

Mas o Vue está fazendo todas as coisas que fazem os desenvolvedores realmente felizes:

  • Vue é leve, fácil de aprender, tem ferramentaria incrível, possui grande gerenciamento de estado e roteamento embutido (!), Etc.

A comunidade de Vue certamente não é tão grande como Reagir ainda, mas as comunidades crescem com base em se a equipe principal tem grandes embaixadores e escuta sua comunidade (ambas estão em vigor).

Quando se trata de desenvolvedores agradáveis, não esqueçamos a falha épica do Facebook neste ano com o snafu de licença BSD + Patents que passou muito bem com os desenvolvedores.

Na verdade, chegamos ao ponto em que você pode começar todo o projeto com o Vue para simplificar a vida, e essa é uma conquista impressionante pela equipe principal.

Aqui está um ótimo artigo no React vs. Vue vs. Angular deste ano.

O cenário final provável? O Facebook faz o que faz melhor: copie os inovadores e o mundo continua a usar Reagir.

Se você é um desenvolvedor angular que simplesmente se recusa a aprender Reagir, o Vue.js deve tornar-se rapidamente uma opção melhor para o seu trajeto de carreira à medida que as oportunidades angulares morrem (e a Vue possui alguma sintaxe semelhante ao Angular 1).

Todo o desenvolvedor da JS ainda deve considerar aprender o Vue.js, pois é um espetáculo bastante grande para onde estamos começando a ver os pedidos de contratação de desenvolvedores do Vue.js, o que significa que você pode criar algum valor para você no curto prazo finalmente.

Next.js

E então há Next.js , que chamaremos de ‘seguro para React’.

Mesmo que o Facebook nunca fique à frente do jogo e inova com o mesmo impulso que a Vue, o React junto com o Next.js, você se aproxima muito da experiência do Vue em termos de ferramentas, divisão de código, roteamento e gerenciamento de estado, permitindo que você também retive o ecossistema reativo de massa e suporte.

O próximo também é especialmente útil para aplicativos renderizados no lado do servidor, criados no React, uma tendência crescente por conta própria.

Além disso, adicione Now.js (criado pela mesma equipe) e você possui uma maneira super rápida de implantar seus aplicativos React.

À medida que a batalha Vue vs. React continua, espere ver cada vez mais adoção do Next em conjunto com o React para que todos no campo React se sintam mais à vontade.

Angular

Apesar das dificuldades crescentes de Angular em favorecer aos desenvolvedores, ela ainda continuará sendo uma estrutura amplamente utilizada em 2018.

Muitas empresas adotaram o Angular 1.0 e, à medida que procuram migrar para algo melhor em 2018-19, estarão olhando React ou Vue.js como alternativas melhor suportadas do que Angular 2.

Os defensores restantes de Angular assumiram a posição de que a Angular será a estrutura JS de escolha para a empresa, mas essa reivindicação ainda não foi comprovada e é improvável que seja comprovada em 2018.

Aqui está tudo o que você precisa saber sobre o que aconteceu com Angular em 2017.

Razão

Sempre vale a pena prestar atenção a qualquer coisa que o Facebook esteja usando na produção.

O Facebook agora usa a Razão (sua aceitação no já bem estabelecido OCaml) para a versão web do Facebook Messenger , entre outros projetos (WhatsApp, Instagram, Anúncios, etc.).

Em 2017, eles também lançaram Razão-Reação, que cria ligações para Reagir, para que você possa realmente escrever o código Razão que compila o ReactJS idiomático.

Então, imagine não precisar instalar o Babel (+ muitos plugins), Fluxo, etc., e apenas precisando do poder do OCaml + Rason (que agora é compatível com ligações de Reacção). Essa é uma grande tendência à espera de explodir.

Razão ganhou muito mais atenção este ano no domínio JS do que a maioria das outras linguas de compilação para js (desculpe, Elm, nós ainda te amamos de qualquer maneira), então é definitivamente um para continuar assistindo e brincando com 2018.

GraphQL

GraphQL é uma linguagem de consulta para APIs (pense: uma tomada moderna em REST).

GraphQL viveu até o hype em 2017, como grandes empresas como Yelp, Spotify, Github, Walmart, NYTimes, etc., todos agora possuem APIs baseadas em GraphQL.

Algumas dessas APIs são mesmo exclusivamente GraphQL, sem opção REST disponível. Simplificando: empresas inovadoras estão colocando suas apostas no GraphQL.

As APIs RESTful certamente estão longe de morrer, mas novamente, olhando para as tendências de onde as startups estão se movendo, o GraphQL é uma opção popular.

Alternativas como Falcor, por outro lado, quase nunca foram discutidas.

Este é definitivamente o momento de começar a aprender o GraphQL se quiser obter emprego em empresas inovadoras.

Redux, Relay Modern e Apollo

O Redux é o popular projeto Dan Abramov / Andrew Clark que rapidamente se tornou a solução de go-to para gerenciamento de estado e busca de dados no React.

Mas o GraphQL realmente abalou as coisas para o Redux, principalmente quando se trata de buscar dados.

Agora, temos as estruturas de clientes do Relay Modern (criado pelo Facebook) e do Apollo , GraphQL que permitem que você obtenha e passe dados GraphQL no seu aplicativo React de forma mais eficiente do que o Redux pode.

Mas como um desenvolvedor aponta sobre Relay / Apollo / Redux:

Esses quadros e seus benefícios não precisam ser mutuamente exclusivos. Na verdade, usá-los juntos pode proporcionar uma boa separação de preocupações que é tão importante no desenvolvimento web.

Isso significa que você ainda pode usar o Redux em paralelo com o Relay, usando o Redux para o estado local e algum estado complexo não-servidor e, em seguida, Relé para busca.

Mas a comunidade está ansiosa por algo para simplificar isso (e até agora, a única resposta é Vuex / Vue.js / Apollo ou Cashay ).

Livro de histórias

Wow, Storybook realmente explodiu em 2017.

Storybook é um ambiente para definir, desenvolver e testar componentes de interface do usuário.

Ele passou de praticamente morto no início do ano, para ser massivamente popular em meados de 2017 graças a um enorme esforço da comunidade. É uma história tão inspiradora de como o trabalho de código aberto deve evoluir e vale a pena ler.

É tão incrivelmente útil (e até mesmo divertido de usar), permitindo que você crie e teste componentes de interface do usuário de forma isolada. É como uma guia de estilo UI que realmente oferece um valor real para o desenvolvedor.

Você provavelmente se deparou com um projeto de código aberto usando o Storybook já, mas para vê-lo em ação para si mesmo, confira o livro de histórias para o selecionador de data do Airbnb.

Se você deseja se destacar como desenvolvedor em 2018, então compareça a uma entrevista com um livro de histórias do seu último projeto.

Bônus: veja também o reagente-bluekit , uma alternativa de Storybook que a equipe de engenharia da Netflix está usando para a biblioteca de componentes.

Mais bonito

Como o nome sugere, o Prettier é um formatador de código que torna seu código muito mais legível e, bem, bonito.

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

torna-se…

 foo ( 
 reallyLongArg (), 
 omgSoManyParameters (), 
 ISHouldRefactorThis (), 
 isThereSeriouslyAnotherOne () 
 );

Com mais de 18 mil estrelas no Github , os desenvolvedores adoram esse projeto simples e valioso.

Também é usado em uma série de outros projetos que você provavelmente já ama, como Webpack, React, Next.js, Babel e muito mais.

Então, novamente, você poderia se tornar um desenvolvedor Go e nem sequer precisar de instalar isso.

Jest e Enzyme

Quando se trata de testes de JavaScript, Jest certamente assumiu a liderança, com Enzyme como um excelente complemento ao criar especificamente aplicativos React.

Como você verá aqui , Jest agora está dominando o Jasmine em downloads.

O recurso instantâneo do Jest realmente decolou em 2017, tornando-se muito menos doloroso para lidar com os testes. Veja esta conversa do React Conf 2017 para aprender tudo sobre isso.

Enzima , criada pela equipe de engenharia da Airbnb, é uma biblioteca de JavaScript para testar os componentes do React. Ele explodiu para 12 mil estrelas no Github desde 2016.

Instantâneos do Jest + API super simples da Enzyme para testes Os componentes do Reactor fazem um ótimo comboio de testes que continuará a aumentar em popularidade em 2018.

Webpack

O Webpack aumentou para se tornar o acumulador de ativos mais popular. A Webpack também teve um ano INCRÍVEL .

Desta vez, no ano passado, a Webpack quase não tinha documentação e a maioria dos desenvolvedores não tinha idéia de como começar com isso.

Então, no início do ano, eu escrevi sobre o quão incrível que o Webpack tenha levado US $ 15.000 em 3 meses ( e como estávamos felizes em ser um dos primeiros patrocinadores ) a apoiar o projeto. Eles agora têm centenas de milhares de dólares em financiamento.

Não só a Webpack está abrindo o futuro de como os projetos de fonte aberta podem prosperar, mas o desenvolvimento do projeto manteve seu enorme impulso ao longo do ano.

E com Sean Larkin felizmente ainda liderando o movimento Webpack, não há realmente nenhum fim à vista para o que Webpack é capaz de alcançar a seguir.

Por causa de quão bem apoiado este projeto é (e quanto eles se importam com sua comunidade), torna a tendência mais fácil de prever para 2018.

Parcela

Mas com todas as tendências maciças, há uma força crescente de desenvolvedores descontentes.

Parcel, um concorrente bundler, está ganhando impulso bastante rápido com 12.000 estrelas de Github fora do portão em 2017 e indo diretamente após a garganta do Webpack.

O ponto da parcela é que todos os outros agrupadores ficaram muito inchados, enquanto o Parcel funciona duas vezes mais rápido em pacotes como o Webpack (10 vezes mais rápido ao usar seu cache).

Ele também segue a configuração de configuração um tanto confusa do Webpack, como acontece com o Parcel, não é necessária nenhuma configuração.

“Basta apontá-lo no ponto de entrada da sua aplicação, e faz o que é certo”.

Embora a simplificação da configuração e a melhoria da velocidade sejam grandes melhorias, não ficaria surpreso se o Webpack não copiar essas melhorias até o primeiro semestre de 2018.

Semelhante a Vue vs. React, o pequeno cara sempre inovará mais rápido, mas cabe ao grande ser inspirado por essa inovação e melhorar seus projetos.

Você pode ler todo o debate aqui.

Gatsby

Gatsby é um gerador de site estático para o React, construído por Kyle Mathews.

Desde que Kyle foi a tempo inteiro em Gatsby no ano passado, realmente começou a ganhar impulso.

Não há melhor prova disso do que o fato de que o próprio site do React foi criado usando o Gatsby.

Gatsby é tudo sobre desempenho e entrega a experiência web mais rápida possível no React.

Este diagrama do seu site dá uma idéia de como funciona:

Gatsby também usa tecnologia web progressiva que prefecta recursos para outras páginas, então a navegação é rápida.

Embora Gatsby não vai dominar a indústria por qualquer meio, é uma solução fantástica para a construção de sites estáticos rápidos que continuarão a aumentar de popularidade.

Para mais informações sobre o Gatsby, leia esta publicação.

Também ficamos felizes em patrocinar o desenvolvimento da Gatsby este ano.

Babel

Babel não precisa de introdução neste momento e continua a ser uma tendência essencialmente por padrão.

Em suma, foi um bom ano novamente para a Babel, principalmente focada na construção do Babel 7 (espero que seja lançado no início de 2018). Mais importante, eles escreveram uma música 🙂

A única preocupação da Babel atualmente (além de seu extraordinário mantenedor, tomando uma ruptura indefinida / vaga do projeto ) é algo como Reason tornar-se mainstream.

Mas por enquanto, Babel deve continuar forte ao longo de 2018.

Também ficamos felizes em patrocinar Babel este ano.

Flow & Tipografia

O tipo de texto e o fluxo são duas excelentes opções de tipo estático para que desenvolvedores de JavaScript estejam usando para melhorar a qualidade do código.

Nós provavelmente não veremos que alguém destrua o outro em 2018, pois ambos sobreviveram juntos, servindo diferentes casos de uso.

Flow, construído pelo Facebook, é a escolha preferida para os desenvolvedores do Reactor, uma vez que ele se integra facilmente com a Babel, também comumente usado nos projetos React.

TypeScript, construído pela Microsoft, é popular entre os desenvolvedores Angular 2+, pois é o idioma principal.

2018 provavelmente será aborrecido em termos de avanços desses dois, e a questão real nos próximos anos se tornará se algo como a Razão os substitui.

Immutable.js

Eu gosto da maneira como um redditor descreveu Immutable.js :

ImmutableJS garante que os desenvolvedores de grandes equipes não façam algo estúpido.

Simplesmente: Immutable.js , outro projeto do Facebook, garante que o estado não seja mutado usando objetos imutáveis ??(imutáveis).

Como nosso amigo redditor apontou, isso pode ser incrivelmente útil em uma grande equipe de desenvolvedores que podem estragar o estado sem querer.

Os dados encapsulados em um objeto Immutable.JS nunca são mutados. Uma nova cópia sempre é retornada. Isso contrasta com o JavaScript, em que algumas operações não muda seus dados (por exemplo, alguns métodos Array, incluindo mapa, filtro, concat, forEach, etc.), mas alguns fazem (Array’s pop, push, splice, etc.).

Existem algumas limitações bastante importantes para o uso de Immutable.JS, mas limitações que podem não importar dependendo de suas necessidades. Você pode ler mais sobre eles aqui.

Com 20.000 estrelas no Github agora, Immutable.js aumentou em popularidade em 2017 e pode-se esperar que continue a aumentar em 2018, já que os desenvolvedores começam a tomar o tempo para entender o conceito e os tradeoffs.

Popmotion

Popmotion é uma biblioteca de movimento JavaScript que ganha estrelas rapidamente no Github.

Pense nisso, como o Flash atende jQuery.

Agora, eu percebo que usar essas duas palavras na mesma frase não ajuda a vender essa biblioteca cada vez mais popular.

Mas quanto mais você mergulha neste projeto, mais você descobre um grupo de pessoas que tiveram queixas sérias com jQuery e Flash e simplesmente precisava melhorar as coisas.

E a Popmotion é realmente uma experiência melhor com muita inovação em torno da animação na web, começando a ferver. Este é um para assistir em 2018 com certeza.

Confira seu site para começar a tentar fazê-lo.

Reative Native & Electron

O React Native permite que você crie aplicativos React para dispositivos móveis, enquanto o Electron permite que você crie aplicativos JavaScript para desktops.

Ambos se tornaram estruturas bem estabelecidas em 2017 e ambas são ótimas soluções para passar do JavaScript para um aplicativo nativo.

Alguns aplicativos notáveis ??construídos no Electron incluem: Slack, Atom, Github Desktop e Discord.

E os aplicativos populares criados com o React Native incluem: Facebook, Instagram, Airbnb e UberEATS.

Você também pode criar aplicativos React Native para Windows.

Seja como for, é um bom momento para ser um desenvolvedor de JavaScript, considerando que você pode criar aplicativos tanto para desktop quanto para celular, muito mais facilmente do que no passado.

Bônus: Assembléia da Web

Com todos os 4 navegadores agora suportando o Web Assembly , estamos quase lá. Ainda é cedo demais para chamar uma tendência para 2018, então vamos atualizá-lo em 12 meses.

Mas mantenha isso em seu radar, como todos estão olhando muito isso agora.

2018 Materiais de estudo

Depois de analisar todas as tendências futuras, aqui está o que recomendamos que considere aprender em 2018 para se manter competitivo como desenvolvedor remoto e liberar seu potencial:

Importe esta lista de recursos como um projeto Todoist :