O mundo do desenvolvimento web está crescendo incrivelmente rápido. O que foi notícia ontem pode ficar desatualizado hoje, e o que quase ninguém sabe hoje pode amanhã se tornar o motor do progresso. O material, cuja tradução publicamos hoje, considerará todas as coisas mais interessantes que aconteceram na esfera de frontend em 2018. Falaremos sobre o desenvolvimento de estruturas e ferramentas auxiliares, sobre tendências de JavaScript e sobre a direção em que o frontend pode ir em 2019.
Padronização do WebAssembly
O WebAssembly é frequentemente considerado uma das tecnologias nas quais a web do futuro será construída. Essa tecnologia visa maximizar o desempenho do código, reduzir seu tamanho e a possibilidade de desenvolvimento da Web usando diferentes idiomas, convertendo os programas escritos neles em um único formato binário suportado pelos navegadores da Web.
No segundo semestre de 2017, os desenvolvedores de todos os principais navegadores
relataram suporte ao WebAssembly. Então, em fevereiro de 2018, ocorreram três eventos importantes: a primeira versão da
especificação WebAssembly foi lançada, as especificações da
interface JavaScript correspondente e
da API da web foram publicadas.
Sobre o download de bibliotecas de front-end populares da npm
Os quatro primeiros módulos front-end mais populares baixados do npm incluem React, jQuery, Angular e Vue. Abaixo, falaremos sobre a situação com bibliotecas para desenvolvimento da Web em mais detalhes.
Downloads de biblioteca front-end de 2018 a partir da npmO React continua a dominar o mundo das bibliotecas front-end e está em constante evolução
A React é líder em desenvolvimento web há muitos anos. O escopo de seu uso continuou a crescer em 2018. Essa biblioteca continua sendo uma das mais amadas entre os programadores, de acordo com uma
pesquisa realizada pela Stack Overflow.
A equipe principal de desenvolvimento do React é muito ativa no desenvolvimento da biblioteca e na adição de novos recursos. Durante 2018, muitas adições ao React v16 puderam ser vistas, incluindo novos
métodos de ciclo de vida do componente, uma nova
API de contexto ,
novos eventos de ponteiro do mouse,
funções preguiçosas e um novo
componente de ordem superior do
React.memo . Deve-se observar que mais atenção foi dada aos
ganchos da API React e Suspense .
Ganchos de reação foram recebidos com grande interesse, eles escreveram muito sobre eles, muitos gostaram deles. Essa tecnologia permite adicionar estado aos componentes funcionais usando a função
useState , possibilitando o gerenciamento de eventos do ciclo de vida dos componentes.
Aqui está um vídeo que demonstra como o uso de ganchos pode melhorar significativamente o código do aplicativo React.
Outro novo recurso interessante desta biblioteca é o React Suspense. Ele foi projetado para controlar o carregamento de dados nos próprios componentes do React. A API Suspense permite pausar a saída de dados enquanto aguarda a conclusão da operação assíncrona de recebê-los de qualquer fonte. É a API Suspense usada em funções lentas para implementar a separação do código do componente. O principal objetivo da implementação dessa tecnologia é a capacidade de gerenciar downloads de dados assíncronos, como solicitações para várias APIs. Além disso, a API Suspense permite armazenar em cache solicitações de resposta.
Há um exemplo especialmente projetado que demonstra muitos indicadores para carregar dados em uma página, exibidos desde que os sinalizadores
isFetching configurados como
true . Graças à API Suspense, o desenvolvedor possui controles de interface do usuário, em particular, essas ferramentas podem ser usadas para indicar o que deve ser exibido na tela enquanto aguarda o carregamento dos dados, definir um tempo limite e configurar a navegação. Existe até uma crença generalizada de que a API Suspense pode eliminar a necessidade de Redux.
Neste discurso de Dan Abramov, você pode aprender sobre o desenvolvimento de aplicativos usando esta API.
O Vue continua a crescer ignorando a reação por número de estrelas no GitHub
Após o crescimento explosivo do Vue em 2017, o mesmo continuou em 2018. Esse quadro
superou o React em termos de número de estrelas no GitHub.
Embora os desenvolvedores da Web gostem do Vue, essa estrutura ainda está bem atrás do React e do Angular em termos de uso real. No entanto, o Vue possui uma base de usuários ativos que continua a crescer, o que dá esperança de que o Vue tenha um papel significativo no desenvolvimento da web no futuro.
Ewan Yu (criador do Vue) fala muito sobre o Vue 3
O Vue está prestes a lançar a versão 3.0. Em 2018, o criador do framework, Ewan Yu, falou em vários eventos sobre os recursos esperados do framework e
escreveu sobre ele.
Estrutura angular continua muito popular, seu sétimo lançamento
Em outubro de 2018, o sétimo lançamento do Angular foi lançado. Essa estrutura passou por um desenvolvimento significativo até o momento, passando da arquitetura MVC para um sistema moderno usando componentes. Sua popularidade também está em constante crescimento.
Embora a Angular não tenha os mesmos zelosos apoiadores que distinguem React e Vue, essa estrutura ainda é popular em projetos profissionais. Muitos desenvolvedores se cansam do React, porque ao usar essa biblioteca, eles precisam tomar muitas decisões com relação à escolha de ferramentas adicionais, projetando a arquitetura do aplicativo, construindo o processo de construção de projetos. A Angular, por outro lado, remove do desenvolvedor a necessidade de tomar muitas decisões, coloca à sua disposição modelos de arquitetura amplamente utilizados. Angular é uma estrutura cujos recursos abrangem todas as necessidades de um desenvolvedor de aplicativos Web, e a ferramenta de linha de comando correspondente cuida completamente do processo de criação do projeto. Obviamente, muitas coisas com essa abordagem são definidas de maneira bastante rígida na estrutura. Outra vantagem do uso do Angular em um ambiente profissional é o fato de ele ter sido projetado para usar o TypeScript. Como resultado da Angular, podemos dizer que essa estrutura criou um nome para si mesma no ambiente de desenvolvimento da web e continua a fortalecer sua posição.
Deve-se notar que o pacote
@angular/core npm é o novo Angular e o pacote
angular é o antigo AngularJS.
Aqui estão os dados npm sobre os downloads dos pacotes
@angular/core ,
angular , react e
vue em 2018, bem como informações sobre o status desses projetos no GitHub.
Dados do projeto para angular / núcleo, angular, reagir e vueCada vez mais desenvolvedores gostariam de aprender o GraphQL, mas essa tecnologia ainda não passou pelo REST.
A tecnologia GraphQL encontrou aplicação em alguns projetos grandes, como o
GitHub , mas ainda não se espalhou amplamente. De acordo com o estudo do State of JS, apenas um pouco mais de 20% dos desenvolvedores de front-end usavam a tecnologia GraphQL, mas o indicador que caracteriza aqueles que ouviram falar e planejam usá-la é um impressionante 62,5%.
Tecnologia GraphQL
A tecnologia CSS-in-JS está se tornando mais comum
Ao analisar um ambiente de desenvolvimento web, sente-se que está no caminho de unificar absolutamente tudo usando JavaScript. Essa tendência também é visível quando aplicada à tecnologia CSS-in-JS, usando quais estilos são criados usando as ferramentas de sequência JS. Isso permite que você trabalhe com estilos e dependências usando a sintaxe JS usual e os mecanismos de importação e exportação. Além disso, simplifica o estilo dinâmico, pois os componentes que usam CSS-JS podem converter propriedades em estilos. A seguir, exemplos de CSS e CSS-in-JS regulares.
Para gerenciar estilos dinâmicos usando CSS regular, você precisa trabalhar com nomes de classes no componente e atualizá-los com base no estado e nas propriedades. Além disso, para diferentes opções de estilo, você precisa usar classes CSS:
Graças ao CSS-in-JS, as classes CSS não são mais necessárias. É suficiente passar a propriedade correspondente ao componente estilizado que implementa a estilização dinâmica. O código sai muito mais limpo, temos uma separação mais clara de tarefas entre estilos e React, permitindo que o CSS faça um estilo dinâmico com base nas propriedades. No React, esse código parece um JavaScript bastante normal:
const Header = styled.div` color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => ( <Header isActive={isActive}>HI</Header> )
Para implementar recursos CSS-in-JS, bibliotecas como
componentes estilizados e
emoção são usadas principalmente. A biblioteca de componentes com estilo existe mais que o Emotion, tornou-se mais difundida, mas a popularidade do Emotion está crescendo rapidamente, muitos desenvolvedores o escolhem. Deve-se notar que Kent S. Dodds até
parou de trabalhar em sua biblioteca Glamourous CSS-in-JS, preferindo Emotion. Veja como são os componentes Styled e as bibliotecas Emotion em termos de npm e GitHub.
Componentes estilizados e bibliotecas Emotion em 2018A estrutura do Vue suporta CSS local ao usar componentes de arquivo único sem o uso de bibliotecas adicionais. Para fazer isso, basta adicionar a propriedade com
scoped à tag do componente
style , após o qual o Vue usa a tecnologia CSS-in-JS para organizar o trabalho com estilos locais que não vão além do componente e não se enquadram em outros componentes.
Além disso, deve-se notar que no Angular, por padrão, através do uso da tecnologia de
encapsulamento de
exibição , o escopo CSS é usado.
Desenvolvedores que lutam contra o cansaço da tecnologia encontram salvação nas ferramentas de linha de comando
Todo mundo sabe como pode ser exaustivo monitorar bibliotecas atualizadas constantemente, que são vitais para projetos da Web, bem como atualizar projetos corretamente, levando em consideração as atualizações da biblioteca e tomar as decisões arquiteturais corretas nessas condições. Esse problema se tornou um catalisador para o desenvolvimento de ferramentas de linha de comando que resolvem esses problemas, permitindo que os programadores se concentrem no trabalho em aplicativos. Todas essas ferramentas se tornaram o principal meio pelo qual novos aplicativos são criados em 2018. Em particular, os seguintes projetos podem ser observados nesta área:
Next.js (SSR para React),
Create-React-App (criando aplicativos React para clientes),
Nuxt.js (SSR para Vue),
Vue CLI (aplicativos cliente Vue) ,
Expo CLI para React Native, ferramentas
angulares padrão.
O desejo dos desenvolvedores de simplificar o front end e aumentar a produtividade levou a um aumento na popularidade dos geradores de sites estáticos
Durante o desenvolvimento rápido e revolucionário do JavaScript, todos gostaram de aprender as bibliotecas mais recentes e colocá-las em prática. No entanto, agora que tudo é mais ou menos estabilizador, os desenvolvedores começaram a perceber que nem todos os sites devem ser aplicativos complexos de página única (SPA). Esse entendimento levou ao surgimento, crescimento e desenvolvimento de geradores de sites estáticos. Graças a eles, você pode desenvolver projetos usando várias ferramentas de front-end, como React ou Vue, que, durante a montagem, são convertidas em arquivos HTML estáticos. Isso permite que você ofereça rapidamente aos clientes uma página totalmente finalizada.
Os sites estáticos são bons, pois são a combinação perfeita de simplicidade e desempenho. Se arquivos HTML são gerados durante a montagem do projeto, isso permite enviar páginas concluídas para usuários que carregam quase instantaneamente, sem recorrer à renderização do servidor ou do cliente. Juntamente com o código HTML, o cliente também carrega os arquivos JS necessários para a página funcionar, o que oferece aos usuários os mesmos recursos que os aplicativos comuns de página única.
Os geradores de sites estáticos são ótimos para criar algo como sites pessoais ou blogs, mas também podem ser usados em projetos maiores. Em 2018, geradores como
Gatsby e
React Static para aplicativos React e ferramentas como projetos baseados no
VuePress for Vue estavam crescendo em popularidade. De fato, sites estáticos se tornaram tão populares que o projeto Gatsby de código aberto se tornou uma empresa e recebeu investimentos de capital de risco.
Arquiteturas sem servidor e JAMStack
A crescente popularidade dos sites estáticos levou ao desenvolvimento de tecnologias de servidor projetadas para apoiá-los. Portanto, os últimos anos no campo do desenvolvimento da Web falaram constantemente sobre arquiteturas sem servidor, devido ao fato de permitirem a organização da separação do código do servidor e do cliente e reduzir o custo de manutenção de projetos.
O movimento em direção à ausência de servidor foi expandido graças à metodologia de desenvolvimento de projeto da web JAMStack (J é JavaScript, A é API, M é Marcação, ou seja, marcação). O JAMStack é baseado nos conceitos de desenvolvimento de sites estáticos, sobre os quais falamos na seção anterior. Essa técnica permite atingir velocidades extremamente altas de carregamento no local devido à marcação pré-formada. No cliente, esses sites se transformam em SPA dinâmico por meio do uso de APIs de servidor especiais. Em 2018, ele até passou, sob os auspícios do freeCodeCamp, Netlify e GitHub, a primeira
hackathon JAMStack .
Aqui está o material que demonstra os recursos do uso da arquitetura JAM em freecodecamp.com, que permite avaliar as possibilidades de desenvolvimento de aplicativos em larga escala usando a metodologia JAMStack.
TypeScript pode ser o futuro do JS, mas o mesmo não pode ser dito para o Flow
O JavaScript é frequentemente criticado por sua falta de digitação estática. As principais ferramentas para resolver esse problema são
TypeScript e
Flow . Ao mesmo tempo, o TypeScript é muito mais popular que o Flow e, de fato, um estudo do Stack Overflow mostrou que os desenvolvedores adoram o TypeScript ainda mais que o próprio JavaScript (os números correspondentes para essas linguagens são 67% e 61,9%). De acordo com o estudo State of JS, mais de 80% dos desenvolvedores planejam usar o TS ou já o estão usando com prazer. Se falarmos sobre o Flow, apenas 34% dos desenvolvedores o usam ou desejam usá-lo.
A julgar por todos os indicadores, o TypeScript é uma solução padrão para digitação estática em JS; muitos preferem TS em vez de JavaScript comum. Este ano, o número de downloads de TS em npm aumentou constantemente e significativamente, enquanto o cronograma de downloads do Flow permaneceu bastante estável. Fica-se com a sensação de que o TypeScript, de uma ferramenta usada apenas por adeptos fervorosos da digitação estática, está se tornando uma ferramenta extremamente usada para o desenvolvimento da web. Aqui estão os dados TypeScript e Flow (como
babel-preset-flow ) do npm e do GitHub.
Downloads TypeScript e Flow no segundo semestre de 2018O Webpack 4 foi lançado no início de 2018
O Webpack 4 foi lançado apenas 8 meses após o lançamento do Webpack 3. A nova versão do Webpack continuou avançando no sentido de simplificar o trabalho e acelerar o processo de compilação. Às vezes, o desempenho do Webpack 4 pode exceder o desempenho do Webpack 3 em 98%. O Webpack 4 tem como objetivo usar parâmetros padrão razoavelmente selecionados, suporta mais recursos sem a necessidade de plug-ins e, para começar a usar o Webpack, não é mais necessário primeiro preparar um arquivo de configuração. Além disso, o Webpack agora suporta WebAssembly e permite importar diretamente arquivos WebAssembly.
Lançamento do Babel 7.0
O Babel 7 foi lançado em 2018 - depois de quase três anos desde o lançamento do Babel 6. O Babel é uma biblioteca através da qual o código JavaScript é transformado, que utiliza os recursos de novos padrões (ES6 +), em código ES5, o que permite compatibilidade do navegador de projetos JS.
O material que informa sobre o lançamento da nova versão do Babel indica que o Babel 7 é mais rápido, mais moderno, suporta opções de configuração avançadas, possui funcionalidade aprimorada relacionada à minificação, suporta as tecnologias JSX Fragments e TypeScript, novas construções de linguagem que estão em seus estágios iniciais harmonização e muito mais. Note-se que os pacotes Babel no npm agora usam o espaço
@babel nome
@babel .
Publicações importantes de 2018
Considere várias publicações significativas lançadas em 2018.
- Aqui está o material sobre quanto você paga pelo JavaScript em 2018.
- Aqui está uma postagem do evento React Conf, na qual você pode aprender sobre o futuro do React.
- Neste artigo, o Airbnb compartilha sua experiência com o React Native, adquirido pela empresa há mais de 2 anos.
- Aqui, o Google mostra a todos que desejam um dispositivo de interface do usuário da Web do Google Fotos.
- Aqui você pode ler que a Microsoft transferirá o navegador Edge para a plataforma Chromium.
- E aqui está uma apresentação muito interessante de Ryan Dahl, criador do Node.js.
Previsão para 2019
O que aguarda o frontend em 2019? Aqui está a nossa previsão:
- O WebAssembly se tornará cada vez mais comum em projetos da Web devido ao desenvolvimento contínuo dessa tecnologia, padronização e desejo dos desenvolvedores por produtividade.
- O React ainda estará no topo do ranking das ferramentas de desenvolvimento da Web, enquanto o Vue e o Angular continuarão aumentando sua base de usuários.
- CSS-in-JS pode ser a abordagem de estilo padrão, substituindo o CSS comum.
- Talvez os desenvolvedores prestem atenção aos componentes padrão da web .
- Sem surpresa, a produtividade continuará atraindo a atenção global. Isso sugere que os aplicativos avançados da Web (PWA) e as tecnologias de compartilhamento de código serão usados na grande maioria dos projetos da web.
- Graças à disseminação e desenvolvimento do PWA, os projetos da Web serão mais fortemente integrados aos recursos dos dispositivos móveis e de desktop e fornecerão aos usuários oportunidades de trabalho completas sem se conectar a uma rede.
- O crescimento e o desenvolvimento de ferramentas de linha de comando destinadas a liberar os desenvolvedores da necessidade de configurar ferramentas de forma independente e dar a eles a oportunidade de criar com calma projetos da Web continuarão.
- Mais empresas implementarão soluções móveis baseadas em tecnologias padrão, como React Native ou Flutter .
- No desenvolvimento front-end, o papel da conteinerização aumentará (em particular, estamos falando sobre Docker e Kubernetes).
- Será realizada uma promoção significativa do GraphQL, essa tecnologia será usada em mais empresas.
- O TypeScript não será mais considerado uma alternativa ao JavaScript comum, mas uma opção padrão nas situações em que o JavaScript geralmente era escolhido anteriormente.
- A tecnologia de realidade virtual dará um grande passo adiante usando bibliotecas como A-Frame , React VR e Google VR .
Caros leitores! O que você espera do desenvolvimento front-end em 2019?