Preparando-se para 2020: 8 tendências no desenvolvimento de JavaScript do cliente que você precisa conhecer

O autor do material, cuja tradução publicamos hoje, diz que deseja compartilhar com os leitores uma previsão sobre o desenvolvimento de tecnologias da web para os próximos anos. Em particular, falaremos sobre o que, segundo o autor, os desenvolvedores de front-end provavelmente valem a pena aprender hoje.

Tudo relacionado ao JavaScript está se desenvolvendo muito rápido. Isso também se aplica ao que pode ser atribuído ao campo do desenvolvimento web. Atualmente, aqueles cujos projetos não são baseados nas mais modernas tecnologias estão começando a sentir especialmente a diferença entre o que usam e o novo que aparece quase diariamente. Essas tecnologias incluem Webpack, React, Jest, Vue, Angular em seu estado atual. Enquanto a “população” do mundo do desenvolvimento front-end, que inclui especialistas técnicos e programadores, está em constante crescimento, este mundo está se esforçando para padronizar. O advento de novas tecnologias e ferramentas já está mudando a situação.



Podemos dizer com um certo grau de certeza que a padronização do desenvolvimento de interfaces de usuário será uma tendência comum no desenvolvimento de tecnologias front-end. Em particular, estamos falando de uma composição baseada em componentes, o desejo por sistemas modulares. Essa tendência afeta quase tudo - do estilo ao teste e até ao gerenciamento do estado dos aplicativos. Essa tendência pode incluir tecnologias criadas em torno de componentes da Web, módulos ES, as ferramentas correspondentes e muito mais.

1. Sistemas para trabalhar com componentes da web, independentemente de estruturas e bibliotecas

Em geral, podemos dizer que este é o futuro. Porque O fato é que os sistemas em questão são independentes das estruturas. Isso significa que eles podem trabalhar de forma completamente independente e em conjunto com qualquer estrutura, considerando seus recursos em relação à apresentação do código. Esses sistemas não são caracterizados pelo que é chamado de "fadiga do JavaScript", "fadiga do JavaScript". Eles são suportados por navegadores modernos. Nos projetos criados com o uso deles, a quantidade ideal de código auxiliar é incluída. Eles fazem bom uso dos recursos do VDOM.

Os componentes em questão são criados usando o padrão Custom Elements. Ele permite que você crie novas tags HTML, ajuste suas propriedades - da aparência aos mecanismos e recursos internos do trabalho com o Shadow DOM.

Projetos notáveis ​​nessa área são Lit-html (e Lit-elemento ), StencilJS , SvelteJS , Bit .

Como devem ser os princípios de modularidade, reutilização, encapsulamento e padronização na era dos componentes? Se você pensar bem, pense no futuro do desenvolvimento da interface do usuário, o futuro é representado por componentes da web. Voltaremos a essa ideia. Enquanto isso, aqui estão alguns materiais úteis sobre componentes da Web. Aqui você pode ler sobre as ferramentas para o desenvolvimento de componentes da web. Aqui está o material sobre as bibliotecas de componentes da web. Aqui você pode encontrar um exemplo de criação de protótipo de um leitor de RSS usando componentes da web.

2. Sobre o futuro das guerras de estruturas e bibliotecas

Em termos de número de downloads do NPM, o React ainda está constantemente ignorando o Angular e o Vue. Pelo menos por enquanto .

Aqui não vamos falar sobre quais estruturas e bibliotecas são melhores que outras e por que isso acontece. Se você estiver interessado em ler sobre isso - aqui está - materiais nos quais, em dados reais, Angular, React e Vue são comparados. Nós vamos estudar o quadro geral. E fica assim: no desenvolvimento front-end, a participação de tecnologias baseadas em componentes está crescendo. Está em constante crescimento. O número de desenvolvedores que usam tecnologias semelhantes também está crescendo e - rapidamente. Além disso, nesta área, há espaço livre suficiente para a introdução de novas ferramentas.

Então, qual estrutura virá primeiro em 5 anos? Ninguém sabe disso. Mas é seguro dizer que alguém que quer estar preparado para o futuro deve estudar as tecnologias básicas do ecossistema JavaScript e se acostumar com o ambiente em que o DOM é controlado por componentes da Web. Talvez em 5 anos o React seja a principal ferramenta para o desenvolvimento de interfaces. Você pode pensar sobre isso olhando para o gráfico acima, construído com dados do NPM. Mas não é tão simples. Veja, por exemplo, essas métricas. Eles nos permitem dizer que, em termos de uso real, a diferença entre React e Vue é muito pequena.


Vue e React, em termos de uso real, estão muito próximos

No futuro, esperamos melhorar a padronização dos componentes da web, independentemente das estruturas. Nesse sentido, pode-se refletir sobre que efeito isso terá sobre a guerra-quadro. E, a propósito, como todos sabemos, o React não é nem uma estrutura, mas apenas uma biblioteca.

3. Isolamento, reutilização e composição de componentes

Bit é um exemplo de plataforma focada no desenvolvimento de componentes, colaborando com eles e reutilizando-os

Falando sobre desenvolvimento front-end e os componentes a partir dos quais as interfaces com o usuário são construídas, não se pode deixar de lembrar o Bit .

Essa plataforma de código aberto permite isolar componentes (ou qualquer parte do código JS adequado para reutilização) e transformá-los em blocos de construção que podem ser usados ​​em muitos projetos. Nesse caso, o desenvolvedor pode controlar o código fonte dos componentes, gerenciar suas alterações e uma árvore completa de suas dependências.

Simplificando, graças ao Bit, o desenvolvedor tem a oportunidade de melhorar seus componentes em diferentes projetos e sincronizar as alterações. Graças ao hub de componentes bit.dev, essa idéia se estende ao desenvolvimento da equipe, permitindo que os membros da equipe organizem e compartilhem o código.

O hub Bit fornece ao desenvolvedor tudo o que é necessário para a criação e o uso conjunto de componentes. Por exemplo - ferramentas de pesquisa convenientes, um ambiente interativo no qual você pode experimentar componentes, suporte completo para CI / CD.

Graças ao Bit, você pode usar não apenas os componentes criados pelos esforços de sua equipe, mas também projetos de código aberto. Isso inclui a capacidade de recomendar alterações nos componentes existentes e a capacidade de compartilhar seus desenvolvimentos.

4. Módulos ES e CDN

Os módulos ES fazem parte do padrão ES6 que descreve como trabalhar com os módulos no navegador. O uso dessa tecnologia permite transferir algumas funcionalidades para módulos que podem ser baixados, por exemplo, via CDN. Após o lançamento do Firefox 60, podemos dizer que os módulos ES suportam todos os principais navegadores . O trabalho de suporte aos módulos ES também está em andamento no Node.js. Além disso, espera-se que o suporte aos módulos ES seja adicionado ao WebAssembly .

5. Gerenciamento de estado em nível de componente

O que há de novo no gerenciamento do estado do aplicativo? Atualmente, o gerenciamento de estado se resume a colocar qualquer coisa no repositório global do Redux.

Mas essa abordagem pode complicar o trabalho com componentes, pode se tornar um obstáculo à divulgação completa de suas capacidades em termos de reutilização e modularidade. Se considerarmos a situação desse ponto de vista, podemos dizer que projetos como o MobX nos fornecem uma abordagem interessante e mais reativa para trabalhar com o estado dos aplicativos (aqui você também pode se lembrar do projeto não declarado ).

Se falarmos sobre os novos mecanismos padrão do React para gerenciar o estado, podemos recuperar a API de contexto e os ganchos. Sua aparência significa que o programador não precisa mais de bibliotecas de terceiros para gerenciar o estado, e esse estado pode ser gerenciado no nível dos componentes funcionais. Isso melhora a modularidade dos projetos e a capacidade de reutilizar componentes.

Como resultado, se você tentar olhar para o futuro, pode muito bem acontecer que o termo “estado” seja usado principalmente no aplicativo para componentes encapsulados, e não no aplicativo para determinados data warehouses globais de nível de aplicativo.

6. A estilização de componentes é uma composição

Separação de componentes que implementam lógica e estilos - a maneira de estilizar componentes através da composição

Muito foi dito sobre como estilizar componentes. Existem muitas oportunidades nessa área. São CSS incorporados, módulos CSS, descrição CSS no código JS, componentes estilizados e soluções intermediárias como o Stylable.

Pensando no futuro estilo dos componentes, costumo imaginar o estilo como uma composição. Isso significa que os sistemas de design de componentes devem incluir componentes que implementam alguma lógica e componentes que descrevem estilos. Com essa abordagem, é possível criar um sistema de design de componentes que se desenvolve à medida que o projeto se desenvolve. Isso elimina a necessidade de desenvolvedores dominarem bibliotecas volumosas para modelagem. Ferramentas usadas para projetar componentes como Sketch ou Figma também podem usar essa idéia.

7. API do GraphQL e aplicativos clientes orientados a dados

A tecnologia GraphQL e uma abordagem de desenvolvimento baseada em componentes oferecem oportunidades interessantes para aplicativos clientes baseados na Web. Por exemplo, usando o Apollo, você pode criar facilmente componentes da interface do usuário que funcionam com dados através do GraphQL. Existem muitas outras ferramentas que facilitam o trabalho com o GraphQL.

O manuseio razoável de várias APIs simplifica o desenvolvimento de aplicativos orientados a dados. Isso permite aumentar a velocidade do desenvolvimento. Como resultado, o GraphQL é uma tecnologia que deve prestar atenção àqueles que estão pensando no futuro.

8. Ferramentas de designer baseadas em componentes

Os componentes estão gradualmente se tornando parte integrante dos sistemas de design de projetos da web. Isso reduz a diferença entre designers e programadores. Ambos estão se aproximando.

Por exemplo, o Sketch já fornece ferramentas para o desenvolvimento modular de projetos de componentes que exigem dependências entre os componentes. Já existem ferramentas para trabalhar no Sketch com componentes que moldam sua apresentação visual programaticamente. O uso generalizado dessas ferramentas é apenas uma questão de tempo. Ferramentas como o Figma são direcionadas principalmente para componentes reutilizáveis ​​da interface do usuário. O projeto Framer está desenvolvendo uma ferramenta para designers de programação. Essa ferramenta permite que os designers controlem como os elementos da interface do usuário são transformados em componentes do React.

Sumário

Aqui, apresentamos a você várias tendências no desenvolvimento da Web do cliente, que, segundo o autor do material, devem prestar atenção a alguém que deseja estar pronto para o futuro. Esperamos que esta publicação tenha fornecido a você uma reflexão.

Caros leitores! Como você vê o futuro do desenvolvimento web?