Frontend 2019: resultados do ano

Em 2019, o mundo do desenvolvimento front-end, como já aconteceu, estava se desenvolvendo a uma velocidade vertiginosa. O material, cuja tradução publicamos hoje, é dedicado a uma revisão de eventos importantes, notícias e tendências de 2019.



E aqui , a propósito, há material semelhante publicado por nós em 2018. No final, há uma seção de previsão para 2019. Em nossa opinião, muitos deles foram justificados. Este artigo não ficará sem previsões, mas não vamos nos antecipar.

Sobre o download de estruturas e bibliotecas populares de front-end do npm

A biblioteca React novamente pega a palma da mão e continua a crescer, e o jQuery, curiosamente, ficou em segundo lugar. Não muito longe dos líderes foram Angular e Vue. Ambas as estruturas têm uma base poderosa de desenvolvedores entusiasmados. A estrutura Svelte recebeu considerável atenção do público este ano, mas sua implementação ainda não é muito ativa.


Baixe estruturas e bibliotecas de front-end do npm ( fonte )

O WebAssembly se torna o quarto idioma da web, juntando HTML, CSS e JavaScript

Após um ano bastante tranquilo, a tecnologia WebAssembly, no início de dezembro, era bem conhecida por todos. O fato é que ele é oficialmente recomendado para o desenvolvimento da web do W3C. O W3C (World Wide Web Consortium) é uma organização internacional central dedicada à padronização de tecnologias da web.

A tecnologia WebAssembly, desde sua introdução em 2017, atraiu ampla atenção. Muitos já usam. Nos anos anteriores, a especificação WebAssembly 1.0 foi lançada; o suporte para essa tecnologia foi integrado a todos os principais navegadores.

Outra notícia de 2019 relacionada ao WebAssembly está relacionada à formação da Bytecode Alliance . O objetivo das organizações de alianças é garantir o futuro do WebAssembly fora do navegador, trabalhando juntos para implementar padrões e propor novos padrões.

Ainda estamos aguardando o momento em que a posição do WebAssembly seja realmente fortalecida, quando essa tecnologia será implementada em grandes quantidades. Toda melhoria no WebAssembly nos aproxima desse ponto. A afirmação do W3C é, obviamente, um grande passo em direção à legitimação dessa tecnologia no mundo corporativo. Precisamos continuar reduzindo as barreiras de entrada para o mundo da programação do WebAssembly, o que simplificará o desenvolvimento de novos projetos do WebAssembly.

O uso do TypeScript está crescendo rapidamente, muitos desenvolvedores admitem o amor por essa linguagem

2019 pode ser chamado de ano do TypeScript. Essa linguagem não se tornou apenas o padrão de fato na solução do problema de digitação do código JS. Muitos desenvolvedores também o preferem ao JavaScript comum, tanto em projetos pessoais quanto no trabalho.

Em um estudo StackOverflow publicado no início deste ano, o TypeScript, no ranking das linguagens mais apreciadas pelos desenvolvedores, compartilhou o segundo lugar com o Python, atrás apenas do Rust. E não será surpreendente se o TypeScript aumentar ainda mais no mesmo estudo, cuja saída é esperada no início de 2020.


Muitos desenvolvedores adoram o TypeScript

O TypeScript literalmente dominou o mundo do desenvolvimento web. Isso se aplica ao front-end e ao back-end. Alguns programadores tentaram descartar o TypeScript como outra tendência de curto prazo. Eles pensaram que ele compartilharia o triste destino do Coffeescript. Mas o TypeScript provou seu valor na solução do problema subjacente do desenvolvimento de JS. Há um sentimento de que, com o tempo, sua popularidade só está crescendo.

O TypeScript oferece aos desenvolvedores da Web grande comodidade através da integração com todos os principais editores de código. Os desenvolvedores de JavaScript veem o TypeScript como uma ferramenta cujo uso leva a menos erros. O TypeScript aos seus olhos é um código digitado que é mais fácil de ler do que o código JavaScript. Essas são interfaces de objeto que contribuem para a criação de programas de auto-documentação.

Se falarmos sobre a popularidade do TypeScript, vale a pena notar que pelo menos ele ultrapassou o React em 2019 no número de downloads do NPM. Ele também tem muito mais downloads que seus concorrentes - projetos como Flow e Reason.

Gostaria de chamar sua atenção para o fato de que TypeScript e React são tecnologias completamente diferentes, projetadas para resolver problemas diferentes. Portanto, essa comparação é como comparar quente a suave. Esta é apenas uma demonstração da popularidade do TypeScript.


O TypeScript ignora Reagir no NPM

O TypeScript 3.0 foi lançado no final de 2018. Em 2019, ele chegou à versão 3.7, que incluía os recursos mais recentes do padrão ECMAScript, como cadeias opcionais e verificação apenas de valores null e undefined . A nova versão do TypeScript aprimorou a funcionalidade relacionada ao trabalho com tipos.

Reagir continua a liderar, desenvolvedores apaixonados por ganchos

Vue e Angular têm comunidades de usuários dedicadas. Vue até superou o React no número de estrelas no GitHub. Mas em termos de uso prático, sejam projetos pessoais de programadores ou seu trabalho, o React ocupa o primeiro lugar.

No final de 2018, a equipe React lançou os chamados ganchos. Em 2019, os ganchos literalmente capturaram o mundo do React. A grande maioria dos desenvolvedores do React os utiliza como o principal mecanismo para gerenciar o estado dos componentes e trabalhar com eventos em seu ciclo de vida. Ao longo do ano, foram escritos inúmeros artigos sobre ganchos, os padrões de uso ficaram mais claros; os pacotes React mais importantes começaram a fornecer ganchos personalizados que podem ser usados ​​para trabalhar com esses pacotes.

Os ganchos fornecem ao programador uma maneira de gerenciar o estado e o ciclo de vida dos componentes funcionais usando sintaxe simples e concisa. Além disso, o React permite criar ganchos personalizados que ajudam os desenvolvedores a escrever um código adequado para reutilização, ajudam a criar lógicas que podem ser usadas juntas. Isso elimina a necessidade de componentes de ordem superior ou propriedades de renderização.

A equipe de desenvolvimento do React presta atenção especial à conveniência de programadores e ferramentas que ajudam a trabalhar de forma mais produtiva. Após o surgimento alto de ganchos no React 16.8, quando a biblioteca chegou à versão 16.4 em 2019, o restante das inovações não era tão grande.

Pode-se dizer que, após o lançamento dos ganchos, a equipe de desenvolvimento do React se concentrou na conveniência dos programadores criando ferramentas auxiliares. A conveniência do programador, as sensações que ele experimenta durante o desenvolvimento de aplicativos React, tornou-se o principal tópico da conferência React Conf 2019. Tom Ochchino, palestrante principal da conferência e gerente da equipe de reagentes, disse que os sentimentos do desenvolvedor sobre o uso do React são baseados em três idéias: baixa entrada barreira, alta produtividade, escalabilidade de soluções. Dê uma olhada no que foi lançado (ou planejado para ser lançado) pela equipe do React para apoiar essas idéias:

• Nova versão do React Developer Tools.
• Novo perfilador de desempenho.
• Crie o React App v3.
• Atualizações de utilitário para teste.
• Modo competitivo (esperado).
• O sistema CSS-in-JS usado pelo Facebook (esperado).
• Preparação progressiva / seletiva de código de página pré-renderizado para o trabalho (esperado).
• Reaja às melhorias principais em relação à disponibilidade (esperada).

Acredita-se que, se um programador estiver trabalhando agradavelmente, ele terá êxito em algo que causará uma impressão positiva nos usuários. Como resultado, a Iniciativa React Developer descrita acima é uma vitória para todos. Aqui está uma palestra do React Conf 2019 sobre os recursos esperados do React, e aqui está um link para todas as palestras deste evento.

A estrutura do Vue está se preparando para a versão 3, seu uso está crescendo

Provavelmente, embora o Vue não possa ser chamado de estrutura mais comum, mas é difícil não perceber que uma comunidade se formou em torno dela, cujos membros são apaixonados por seus negócios como nenhuma outra. Sabe-se que o Vue tirou o melhor de React e Angular, mas é mais fácil construir do que eles. Outra vantagem importante do Vue é sua maior abertura, e que ele não é controlado por nenhuma grande empresa como o Facebook (o React é sua ideia) ou o Google (o suporte dessa empresa é Angular).

As principais notícias do mundo Vue são o próximo lançamento 3.0. A versão alfa está prevista para o final do ano. Este ano, o Vue 2.x recebeu apenas algumas atualizações, estava mais próximo do início do ano. O fato é que todas as forças dos desenvolvedores visam o lançamento do Vue 3.0.

O fato de o Vue não ter lançado muitos lançamentos este ano não significa que nada de interessante esteja acontecendo com essa estrutura. Quando Ewan Yu lançou o RFC para a terceira versão do Vue, houve uma ampla discussão na comunidade sobre mudanças. Por exemplo, você pode lê-los aqui e aqui .

O principal problema que incomodou os desenvolvedores do Vue foi uma grande mudança na API do framework. No entanto, após o surgimento de uma reação tão negativa, foi dito que as novas APIs serão adicionadas às antigas e que serão compatíveis com o Vue 2. Muitos desenvolvedores dizem que, se o novo lançamento do Vue não tiver a aparência desejada, eles considerarão a capacidade de mudar para o Svelte. As pessoas temem que as mudanças no Vue façam com que essa estrutura se pareça muito com o React. Embora muitos membros da comunidade ainda estejam preocupados com o futuro da estrutura, há uma sensação de que o barulho diminuiu e todos estão apenas esperando por um novo lançamento.

No Vue 3, além da funcionalidade controversa, são esperados alguns novos recursos interessantes e alterações úteis:

• Composição da API.
• Alterações nas APIs de configuração e montagem.
• Fragmentos.
• Suporte à tecnologia Time Slicing (experimental).
• Suporte para vários modelos em v.
• Portais
• Nova API de diretivas personalizadas.
• Reatividade aprimorada.
• DOM virtual reescrito.
• Aumentando propriedades estáticas.
• Suporte à API do Hook (experimental).
• Otimização da geração de slots (separação de renderização para componentes pai e filho).
• Suporte aprimorado ao TypeScript.

Um evento notável no mundo Vue foi o lançamento da 4ª versão do Vue CLI este ano, onde o foco principal é a atualização das ferramentas básicas.

Aqui está a palestra de Ewan Yu sobre Vue.

As versões 8 e 9 do Angular serão lançadas, bem como o novo mecanismo de compilação / renderização Ivy

A filosofia da Angular, quando a estrutura prescreve certos esquemas de ação para o desenvolvedor, ajudou essa ferramenta a obter uma grande base de usuários. Angular diz aos desenvolvedores o que é certo e o que não é, mas fornece todas as ferramentas que os desenvolvedores precisam.

Isso elimina muitos motivos para discutir quais bibliotecas e dependências devem ser incluídas no projeto. Note-se que esses problemas geralmente surgem em equipes que usam o React. Além disso, os aplicativos angulares gravam no TypeScript. Como quem escolhe a Angular precisa concordar que muitas decisões já foram tomadas por ele, essa estrutura é muito popular entre várias empresas. Esse estado de coisas permite que os desenvolvedores se concentrem no desenvolvimento de produtos de software, em vez de perder tempo pensando em pacotes.

Em 2019, a versão 8 do Angular foi lançada. No mesmo ano, o novo mecanismo de compilação / renderização Ivy foi lançado. A força principal de Ivy é que reduz o tamanho dos pacotes. Mas, de fato, traz ao Angular e a muitas outras utilidades. Agora, antes do lançamento do Angular 9, Ivy é um recurso opcional. Aqui você pode ler os detalhes do que há de novo no Angular 8. Gostaria especialmente de observar o seguinte:

• Carregamento diferencial do código JavaScript moderno.
• Uma oportunidade de se familiarizar com a tecnologia Ivy.
• Garantindo a compatibilidade com versões anteriores do roteador Angular.
• Montagem aprimorada de trabalhadores da Web.
• Capacidade de transmitir informações sobre como usar a CLI Angular para desenvolvedores Angular.
• Atualizações de dependência.

Durante dezembro de 2019, a equipe Angular estava se preparando para lançar o Angular 9. Parece que esta versão do framework será lançada no final deste ano ou no início do próximo. A maior inovação do Angular 9 é que o Ivy se tornará o mecanismo de renderização padrão. Aqui está um vídeo assistindo, que você pode descobrir mais sobre o Angular 9.

Agora, é dada mais atenção à acessibilidade (a11y) e à internacionalização (i18n) do que antes

A web deve ser um espaço aberto a todas as pessoas e utilizável por todas as pessoas. Como resultado, a acessibilidade front-end e a internacionalização tornaram-se prioridades. Após o rápido desenvolvimento do JavaScript e da Web, iniciado em 2015, os padrões e as estruturas estão finalmente começando a se estabilizar. Atualmente, quando as tecnologias são mais estáveis ​​do que há vários anos, a situação permite que os desenvolvedores prestem mais atenção às ferramentas para localizar aplicativos e aumentar sua disponibilidade. Isso torna a web um local mais acolhedor para todas as categorias de usuários. Devemos nos orgulhar do caminho nessas direções que já percorremos, mas ainda há muito por vir.

Aqui está o que eles dizem sobre acessibilidade no MDN : “Acessibilidade é uma prática que permite que seu site seja usado por tantas pessoas quanto possível. Tradicionalmente, pensamos nisso como acessibilidade para pessoas com deficiência, mas, na verdade, esse número inclui outros grupos de usuários que usam dispositivos móveis ou têm uma conexão de rede lenta. ”

E aqui está o que é dito sobre internacionalização no w3.org : “Se você internacionaliza um projeto, significa que está projetando ou criando seus próprios materiais, aplicativos, especificações e outros recursos semelhantes, para que eles possam funcionar normalmente para usuários pertencentes a qualquer cultura morando em qualquer região, falando qualquer idioma ou facilitando sua adaptação a esses usuários ".

Recursos do ES2019

O ECMAScript (a especificação na qual o JavaScript se baseia) continua a seguir o ciclo de atualização anual deste ano. O padrão ES2019 tem muitos recursos novos . Aqui estão alguns deles:

• Método Object.fromEntries() .
• String.trimStart() e String.trimEnd() .
• Suporte unicode aprimorado no método JSON.stringify() .
• Array.flat() .
• Array.flatMap() .
• Trabalho aprimorado com try/catch .
• Propriedade de description dos objetos Symbol .

Embora novos recursos muito interessantes tenham aparecido no ES2019, algumas coisas podem surgir no próximo padrão ES2020 que provavelmente será o mais esperado desde o ES6 / ES2015:

• Campos de classe privada.
• Cadeias opcionais são obj.field?.maybe?.exists .
• Verificando valores apenas em null e undefined - item ?? 'use this only if item is null/undefined' item ?? 'use this only if item is null/undefined' .
• BigInt dados BigInt .

Popularidade da vibração explosiva

Flutter saiu 2 anos depois do React Native, mas rapidamente ganhou popularidade. Este projeto está muito próximo do React Native em termos de número de estrelas no GitHub. E se a popularidade do projeto continuar crescendo no mesmo ritmo, em breve ultrapassará o React Native. O Flutter concorre com o React e é outra ótima ferramenta de desenvolvimento de aplicativos móveis de plataforma cruzada.

Considerando que o Flutter não pode se orgulhar da mesma comunidade de desenvolvedores amigáveis ​​que o React Native possui e é representada por desenvolvedores da Web usando o React, esses sucessos parecem especialmente impressionantes. O objetivo do Flutter é ser a melhor estrutura de desenvolvimento móvel multiplataforma.

Aqui está uma tabela na qual React Native e Flutter são correspondidos para alguns indicadores.

A Fundação Node.js e a JS Foundation se fundiram para formar a OpenJS Foundation; Node.js 12 será a versão LTS

Para apoiar o ecossistema JavaScript e acelerar o crescimento da linguagem, a Fundação Node.js e a JS Foundation se uniram para formar a OpenJS Foundation . A idéia principal desta etapa é estabelecer cooperação e desenvolvimento tecnológico sob os auspícios de uma organização neutra, que agora une 31 projetos de código aberto. Esses projetos incluem Node, jQuery e Webpack. Essa iniciativa pode ser vista como um movimento positivo para toda a comunidade JS. É suportado pelas principais empresas de tecnologia como Google, IBM e Microsoft.

A 12ª versão do Node.js, lançada este ano, de acordo com a tradição estabelecida, receberá suporte de longo prazo (LTS, suporte de longo prazo) até abril de 2023. O Node.js 12 oferece muitos novos recursos, atualizações de segurança e melhorias de desempenho. Algumas inovações notáveis ​​incluem suporte nativo para construções de import/export , suporte para campos de classe privada, compatibilidade com o mecanismo V8 versão 7.4, suporte para TLS 1.3 e o surgimento de ferramentas de diagnóstico adicionais. Aqui está o material sobre as inovações do Node.js 12.

A estrutura Svelte atrai muita atenção, mas ainda não é amplamente utilizada.

A estrutura Svelte conseguiu encontrar seu lugar no mundo já cheio de estruturas front-end. No entanto, como já mencionado, isso ainda não levou ao uso generalizado dessa estrutura. Se expressar a essência do Svelte em poucas palavras, podemos dizer que esta é uma ferramenta "simples, mas poderosa". O site do projeto tem três pontos fortes:

• Desenvolvedores sofisticados escrevem menos código.
• A estrutura não usa um DOM virtual.
• Ele é verdadeiramente reativo.

Svelte está tentando levar a maior parte do trabalho para o estágio de compilação, em vez de fazer algo no navegador enquanto a página está funcionando. O Svelte possui uma arquitetura baseada em componentes, cujas estruturas são compiladas em HTML e JavaScript puro. Isso promete a necessidade de menos código padrão. A estrutura usa as idéias de programação reativa, que permitem fazer alterações diretas no DOM em vez de alterar o DOM virtual e, em seguida, reconciliar as alterações com a real.

O Svelte oferece aos desenvolvedores de front-end algo novo e interessante, dando-lhes mais oportunidades, mas menos. Em 2020, será interessante observar o crescimento e desenvolvimento do Svelte. Gostaria de poder ver exemplos de seu uso em projetos de grande escala. Isso permitirá que você saiba como fica em comparação com seus concorrentes maiores - React, Vue e Angular.

Sites estáticos ainda são relevantes, os desenvolvedores estão apresentando o JAMStack

Sites estáticos provaram que fazem parte da web e não vão desistir de posições. Essa afirmação é apoiada pela expansão do uso de estruturas como Gatsby, o rápido crescimento da hospedagem de sites estáticos como o Netlify, inúmeras empresas novas que criam o CMS sem uma interface de usuário.

Sites estáticos combinam o que já estava na web com novas ferramentas e bibliotecas. Eles permitem criar projetos incomparáveis ​​com qualquer outra coisa. Podemos criar sites usando bibliotecas modernas como React e compilá-los em páginas HTML estáticas durante a construção do projeto. Como agora todas as páginas são armazenadas prontas, o servidor não gasta recursos preenchendo-as com dados quando o cliente acessa. As páginas podem ser entregues instantaneamente ao cliente; os projetos podem aproveitar ao máximo os benefícios do cache da CDN. Isso permite que você mantenha o conteúdo dos sites o mais próximo possível dos usuários.

Ao criar sites estáticos, o padrão JAMStack (JavaScript, API, Marcação) é muito popular. Essa é uma abordagem híbrida que combina sites estáticos e aplicativos de página única. Usando essa abordagem, as páginas são fornecidas ao cliente de forma estática, mas quando aparecem no cliente, elas se comportam como SPAs, que usam APIs e ações do usuário para alterar o estado da interface.

As PWAs estão crescendo, sua implementação está aumentando

Usar sites estáticos é uma maneira de criar projetos da Web extremamente rápidos. Mas eles não são adequados para todos os casos. Outra opção interessante é um aplicativo da web progressivo (PWA, aplicativo da web progressivo). Os PWAs permitem que você armazene em cache os recursos em um navegador para acelerar o tempo de reação das páginas às influências do usuário e garantir a operacionalidade dos projetos sem conexão à Internet. Além disso, eles permitem que você use fluxos de trabalho em segundo plano que aproximam esses aplicativos dos aplicativos nativos, implementando, por exemplo, a funcionalidade de notificações por push.

Alguns até afirmam que o PWA pode substituir aplicativos móveis convencionais. Seja como for, pode-se notar que não há dúvida de que as PWAs serão por muito tempo uma parte importante dos conjuntos de tecnologias utilizadas pelas empresas no desenvolvimento de seus projetos.

Ferramentas Frontend tornam-se verdadeiramente de alta qualidade

Os desenvolvedores de front-end reclamam da fadiga do JavaScript há vários anos. Mas você pode ver como esse problema está desaparecendo gradualmente, graças aos enormes esforços daqueles que apóiam projetos de código aberto.

Anteriormente, se você precisava criar um SPA, precisava criar seu próprio conjunto de dependências usando o Bower ou o NPM. Era necessário entender como traduzir o código usando o Browserify ou Webpack; era necessário escrever um servidor Express do zero e manter seus aplicativos à tona nas tempestades de atualizações da biblioteca.

, , . , . , , Create React App, Vue CLI, Angular CLI. — Gatsby, , Expo, React Native. Next Nuxt , . GraphQL- Hasura, TypeScript- GraphQL Code Generator. Webpack. — , .

, « -»?

GraphQL ,

GraphQL , , REST. , , GraphQL. , API GitHub GraphQL , .

GraphQL- . , JSON-. API GraphQL , , API .

API GraphQL , , , TypeScript-. GraphQL Code Generator , TypeScript-, .

GraphQL . Apollo .


GraphQL

CSS-in-JS

-, , JavaScript. CSS-in-JS, , JavaScript-.

, , , JavaScript- import/export . , , , , CSS-in-JS , . , , Facebook CSS-in-JS — , .

, CSS CSS-in-JS. CSS , . , CSS-:

 // JS-  const MyComp = ({ isActive }) => {  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div> } // CSS- .active { color: green; } .inactive { color: red; } 

CSS-in-JS CSS- . , . , React, , . JS-, React:

 const Header = styled.div`  color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => (  <Header isActive={isActive}>HI</Header> ) 

styled-components emotion — CSS-in-JS-. emotion 2019 styled-components . , , , CSS-in-JS. , .


CSS-in-JS-

VS Code

IDE . , , , . -, , . , , VS Code. — , , , , .

State of JS Survey 2019 .


VS Code —

Webpack 5 -

Webpack , JavaScript-. — . Webpack , , . 5 Webpack :

• .
• .
• , , Webpack.

Jest Flow TypeScript

Facebook , Jest . Flow — TypeScript. 2019 , Jest Flow TypeScript. , TypeScript JS-. TypeScript 2020 , .

Chrome 72-78

Chrome . , -, . 2019 7 Chrome. Chrome 79 -, Chrome 80 dev-, Chrome 81 — canary-. , Chrome 2019 .

Microsoft Edge Chromium

Internet Explorer, Edge, - . , , . , - . , Microsoft Chromium Google. 2019 -.

Facebook Hermes — JavaScript- Android, React Native

Facebook , JavaScript- Android . — Hermes . Facebook React Native. , , React Native .

2020

, 2020 :

• - . PWA.
• WebAssembly , .
• GraphQL REST, , GraphQL.
• TypeScript .
• , , -. .
• CSS-in-JS , CSS, .
• «» . , . , . 2020 .
• Flutter React Native - .
• , Svelte.
• Deno ( TypeScript, Node.js).
• AR/VR A-Frame , React VR Google VR . AR/VR.
  
• - (Docker, Kubernetes).

Caros leitores! -2020?