Neste post, vou falar sobre vários aspectos do desenvolvimento web que qualquer programador do perfil relevante deve conhecer. Se possível, fornecerei links para materiais que demonstrem exemplos do uso dos recursos correspondentes e recomendações para seu uso correto. Aqui, vou me concentrar na implementação de certos mecanismos em Angular, React e Vue.
Interface de usuário
▍ Layout da página
A construção de um aplicativo da web começa com o design de um layout atraente e organizado que atrairá os usuários e os ajudará a passar muito tempo no site.
Existem muitos frameworks CSS por aí. Talvez entre eles você encontre exatamente aquele que mais lhe convier. O mais famoso deles é o Bootstrap, e graças aos novos recursos dos pré-processadores CSS, você pode personalizar profundamente os estilos desse framework. Lá você pode encontrar vários componentes e controles, o uso consistente dos quais permitirá que você crie sites com design consistente.
A versão alfa da versão 5 do Bootstrap já foi lançada .
Se você preferir criar conjuntos de estilos para seus projetos (componentes, preenchimento, contêineres e assim por diante), pode dar uma olhada no CSS Flexbox tornando este layout flexível de elementos de página da web a base de sua própria estrutura CSS.
CSS Grid tem uma abordagem diferente para organizar o conteúdo da página da web, colocando-o em uma grade.
▍ Design responsivo
Capacidade de resposta é a capacidade de um site de adaptar seu conteúdo ao dispositivo no qual é visualizado. Por exemplo, em um smartphone e em um laptop, este artigo terá uma aparência diferente.
A capacidade de resposta de um aplicativo da web ajuda a exibi-lo corretamente em diferentes telas, melhora a legibilidade do conteúdo e a experiência do usuário.
No MDN, você pode descobrir que consultas de mídia são usadas quando você precisa aplicar diferentes estilos CSS para diferentes dispositivos (por exemplo, para uma impressora ou monitor), bem como levar em consideração características e parâmetros específicos do dispositivo (por exemplo, para diferentes resoluções de tela ou para diferentes larguras da janela de visualização do navegador).
As consultas de mídia CSS são uma ferramenta poderosa para apoiar o design responsivo.
Eles podem ser usados em conjunto com o CSS Flexbox ou CSS Grid já mencionado. Se você preferir usar estruturas CSS, então essas estruturas geralmente já implementam os recursos correspondentes. Com essa abordagem, para criar páginas responsivas, basta adicionar as classes apropriadas aos elementos.
Quando falamos sobre o conceito de responsividade aplicado a imagens , podemos pensar em um atributo
srcset. O uso deste atributo permite exibir imagens de diferentes tamanhos dependendo das características da tela do dispositivo, o que ajuda a reduzir a quantidade de dados transmitidos do servidor para o navegador.
▍ Componentes e controles homogêneos
O usuário terá o prazer de trabalhar com o site, cujos componentes e controles são projetados de maneira uniforme, no mesmo estilo. Essa abordagem de design torna mais fácil para o usuário dominar os novos recursos do site e funciona como algo como um cartão de visita da empresa.
Se você deseja usar estruturas e bibliotecas existentes, Angular, React ou Vue para desenvolver seus projetos, aqui estão alguns exemplos de bibliotecas de estilo que implementam os princípios do Material Design projetados para essas ferramentas:
- Angular. Biblioteca de materiais angulares, onde você pode encontrar componentes poderosos e um CDK completo.
- Reagir. Os princípios do Material Design são implementados nos componentes da Web do Material UI .
- Vue. Aqui temos o Vuetify , uma implementação do Material Design projetada para projetos Vue.
▍ Validação de formulário e tratamento de erros
A validação de dados é a tarefa mais importante para aqueles projetos que recebem algo do usuário. Além disso, nada deve impedir que a aplicação receba os dados corretos do usuário: nem problemas de rede, nem erros no servidor, nem erros cometidos pelo próprio usuário. Aqui estão algumas das soluções de validação de entrada do usuário construídas para diferentes estruturas:
- Angular. Visto que o Angular é uma estrutura completa, ele nos fornece uma API especial para validação de formulário.
- Reagir. A biblioteca React Hook Form é provavelmente o validador de formulário mais comumente usado em projetos React .
- Vue. O nome da biblioteca correspondente para Vue, vuelidate , é construído em um trocadilho interessante.
Experiência de usuário
▍ Usando mecanismos assíncronos
Carregar dados em um aplicativo ou salvá-los pode levar milissegundos, segundos ou até minutos. Por isso, é importante informar ao usuário sobre tais operações por meio de indicadores apropriados e não bloquear o trabalho do usuário com o projeto.
Mecanismos de JavaScript como promessas e APIs de navegador como Fetch podem nos ajudar nessas tarefas .
▍Suporte para navegadores desatualizados (polyfills)
O mundo do desenvolvimento de front-end está evoluindo muito rapidamente. O mesmo pode ser dito para os navegadores. Mas pessoas diferentes usam navegadores diferentes e versões diferentes deles. Portanto, para garantir que seu código funcione corretamente em todas as plataformas utilizadas, o desenvolvedor precisa cuidar da compatibilidade. Por exemplo, a versão mais antiga do IE não oferece suporte aos mesmos recursos JS e CSS da versão mais recente do Google Chrome. Polyfills
são usados para garantir que o projeto funcione corretamente em navegadores mais antigos . Eles estão muito bem descritos neste artigo: "Um polyfill (polyfiller) é um pedaço de código (ou plug-in) que fornece uma implementação de uma tecnologia que você, o desenvolvedor, esperaria encontrar entre os recursos de navegador padrão."
Para descobrir se uma determinada regra CSS ou função JS é compatível com uma determinada versão do navegador, dê uma olhada no site Posso usar .
Se falamos sobre como resolver problemas de suporte do navegador no Angular, React e Vue, a situação é a seguinte:
- Angular. Há uma seção especial na documentação do Angular para suporte ao navegador.
- Reagir. Projetos criados com suporte para Criar aplicativo React , como ReactDOM , navegadores começando com IE 9. Esse suporte é baseado no uso de polyfills.
- Vue. Os detalhes de suporte para navegadores legados são descritos aqui na documentação da CLI.
▍Localização e internacionalização
Seu site pode ter usuários de todo o mundo. Levar este fato em consideração ao criar um projeto aumentará a usabilidade do site para todos que decidirem acessá-lo.
Localização (l10n, localização) é, conforme definido pelo W3C, a adaptação do conteúdo de um produto, programa ou documento ao idioma, cultura e outros requisitos de um mercado-alvo específico.
Internacionalização (i18n, internacionalização) é, com base nos materiais W3C, a criação e desenvolvimento de conteúdo, programa ou documentação de produto, permitindo fácil localização para mercados-alvo que diferem em cultura, região ou idioma.
Ambos os conceitos estão inter-relacionados e podem ser implementados de maneiras diferentes. Isso inclui, por exemplo, as seguintes técnicas:
- Usando uma lista suspensa no site com uma lista de idiomas suportados pelo projeto.
- Aceda às informações sobre a localização geográfica do utilizador (através da API do navegador Geolocation ) e adapte o site de acordo com os dados recebidos.
- Especificando informações de idioma no URL. Por exemplo, ele pode ter esta aparência:
example.com?lang=enou assim:example.com/enou mesmo modo:en.example.com.
Agora, para esses conceitos em Angular, React e Vue.
- Angular. Angular, mais uma vez, é uma estrutura completa, que dá ao desenvolvedor uma solução pronta .
- Reagir. As tarefas de internacionalização de projetos podem ser resolvidas usando a biblioteca react-i18next , popular no ambiente React .
- Vue. vue-i18n.
▍
Acessibilidade (a11y, acessibilidade) é a capacidade do site de se adaptar às necessidades dos usuários com deficiência.
A acessibilidade do site é frequentemente esquecida. Para tornar o projeto acessível a usuários com deficiência, pode ser necessário revisar a abordagem de formação da experiência do usuário utilizada nele, o que às vezes pode exigir um redesenho profundo do projeto. Em qualquer caso, é importante considerar as necessidades de todos os usuários, especialmente considerando que mesmo pequenas mudanças no código do projeto podem melhorar significativamente a usabilidade do site para aqueles que têm dificuldade em usar sites regulares.
Várias técnicas são aplicáveis para tornar os projetos da web acessíveis. Isso inclui o seguinte:
- Usando o atributo de imagem
alt. - O uso de atributos ARIA para desenhar descrições do conteúdo das páginas do site.
- Suporte para a capacidade de redimensionar texto.
- Modo de alto contraste disponível.
- Suporte para navegação no site usando o teclado, em particular as teclas
TABe setas.
O projeto a11yproject.com está implementando a ideia de padronizar esses conceitos. Esta iniciativa é digna de respeito! As principais bibliotecas e estruturas JS também estão se esforçando para apoiar o desenvolvimento de sites acessíveis:
- Angular. Há uma seção especial na documentação para esta estrutura . O desenvolvimento de projetos acessíveis é apoiado no nível do CDK Angular .
- Reagir. A acessibilidade também é discutida na documentação da biblioteca React. Há também uma biblioteca especial - react-a11y . Mas esta biblioteca não é mais suportada, então use-a com cuidado e tenha em mente que ela está planejada para ser substituída pela biblioteca react-ax .
- Vue. O plugin vue-a11y irá ajudá-lo a desenvolver projetos acessíveis no Vue . As considerações de acessibilidade também foram levadas em consideração ao criar a biblioteca vuetify .
▍Notificações
Para manter contato com os visitantes do seu site, você pode usar as notificações da API do navegador . Com sua ajuda, você pode informar aos usuários que algo novo apareceu no site.
Carregando e processando dados
▍Uma única fonte de dados confiáveis
As ferramentas de gerenciamento de estado do aplicativo, que ganharam popularidade em 2015, agora são essenciais para quase todos os projetos da web. Embora o domínio do gerenciamento do estado do aplicativo não seja direto, o uso de soluções personalizadas geralmente é um método simples e eficaz de centralizar os dados do aplicativo. Todas as ferramentas de gerenciamento de estado são baseadas no padrão Flux.
Implementação NgRx do padrão Flux (source - ngrx.io )
Essas ferramentas usam nomes diferentes para as mesmas entidades. Por exemplo, o que o NgRx chama de seletores é chamado de getters no Vuex. O que Angular chama de redutores é chamado de mutações no Vue.
Aqui estão as ferramentas de gerenciamento de estado usadas no Angular, React e Vue:
- Angular. "Gerenciamento de estado reativo para Angular": NgRx .
- Reagir. Aqui, é claro, o Redux é usado .
- Vue. O Vuex é usado para gerenciar o estado dos aplicativos Vue .
▍ Baixando dados
Existem diferentes maneiras de carregar dados em aplicativos. O mais comum deles é o uso de solicitações HTTP direcionadas a uma API da web. O navegador possui uma API Fetch projetada para organizar o carregamento de dados, mas para os principais frameworks e bibliotecas, suas próprias soluções foram desenvolvidas:
- Angular. A documentação Angular recomenda o uso de rxjs e a abordagem baseada em Observador (observáveis ou Assuntos são usados aqui).
- Reagir. A documentação do React recomenda o uso da API Fetch para carregar os dados.
- Vue. A comunidade Vue prefere usar a biblioteca Axios . Esta implementação do mecanismo de carregamento de dados é baseada em promessas.
Ao falar sobre mecanismos para carregar dados em aplicativos da web, vale a pena mencionar o GraphQL . Essa tecnologia mudou a abordagem usada ao carregar dados em aplicativos front-end. Ao aplicá-lo, "O cliente determina o que ele precisa usando a linguagem de consulta." Usando GraphQL, podemos obter exatamente o que precisamos de fontes de dados remotas e nada mais.
Aqui estão as implementações GraphQL para as ferramentas de front-end em que estamos interessados:
- Angular. apolo-angular
- Reagir. react-apollo
- Vue.js. vue-apollo
▍ Armazenamento de dados local
Armazenamento de dados local é o armazenamento de dados no computador do usuário. Os dados podem ser armazenados usando cookies , bem como usando localStorage e
sessionStorage.
▍ Trabalhadores da web
Os Web workers são uma tecnologia introduzida pela nova API do navegador. Ele permite que o código JavaScript seja executado em segundo plano, aliviando a carga no thread principal e não afetando o desempenho do código da página da web.
Web workers são aplicáveis em Angular, React e Vue:
- Angular. Há uma seção especial na documentação Angular para este tópico.
- Reagir. Há um gancho especial do React que pode ser encontrado aqui .
- Vue. Em aplicativos Vue, os web workers são convenientes para uso com a biblioteca vue-workers .
Networking e desempenho
▍ Tamanho do pacote de aplicativos
O crescimento do mercado de smartphones revolucionou o mundo do desenvolvimento web. Agora, ao criar sites, primeiro precisamos considerar as necessidades dos usuários móveis. Quanto menor a quantidade de dados que os dispositivos móveis precisam carregar ao trabalhar com projetos da web, melhor. De acordo com o cronograma abaixo, o uso da Internet móvel ultrapassou o uso da Internet em desktops em 2016.
Uso mundial da Internet (fonte - broadbandsearch.net )
Isso nos diz, em termos inequívocos, quão importante são os tamanhos dos pacotes de projetos da web atualmente. O tamanho dos arquivos baixados deve ser o menor possível para economizar recursos de usuários móveis. Felizmente para nós, os desenvolvedores das principais ferramentas de front-end e add-ons levam isso em consideração ao desenvolver seus projetos. Reduzir o tamanho dos pacotes de aplicativos também significa melhor desempenho.
- Angular. Os pacotes de aplicativos angulares são fáceis e convenientes de examinar com o webpack-bundle-analyser . Além disso, o Angular CLI nos dá uma opção
stats-jsonque nos permite gerar um relatório após construir um pacote. - React. Create React App , .
- Vue. Vue, Angular,
report, .
▍- -
Um service worker é um script executado em um navegador da web e gerencia o armazenamento em cache dos dados do aplicativo. Este é um dos mecanismos usados para transformar um site normal em um Aplicativo Web Progressivo (PWA). Você pode trabalhar com PWAs como um site normal usando HTTPS, mas os Progressive Web Apps têm alguns recursos especiais. Esses recursos incluem, por exemplo, a instalação de tais aplicativos em dispositivos móveis sem ter que publicá-los em lojas de aplicativos especializadas e o suporte à operação de aplicativos sem acesso à Internet.
Você pode usar service workers no Angular, React e Vue:
- Angular. O Angular fornece mecanismos para usar service workers.
- Reagir. Aqui está um tutorial sobre como desenvolver um PWA com o aplicativo Create React.
- Vue. A capacidade de criar PWAs no Vue é compatível com o nível CLI.
▍ Renderização de servidor
Server-Side Rendering (SSR) é um conjunto de tecnologias que estão revolucionando o desenvolvimento de aplicações baseadas em Angular, React e Vue. Com o SSR, o HTML é gerado no servidor e enviado ao navegador. Depois disso, a marcação HTML estática é colocada em um estado de funcionamento e o aplicativo da web está completamente pronto para uso no cliente. Existem vários objetivos ao usar a renderização do servidor:
- Melhorar sites de SEO.
- Aceleração da exibição de sites no navegador.
Aqui estão as soluções SSR para as ferramentas de front-end que estamos pesquisando:
- Angular. Lá usado Angular Universal .
- Reagir. Para renderização do lado do servidor de aplicativos React, Next.js é usado .
- Vue. A renderização do lado do servidor de aplicativos Vue é realizada usando a estrutura NuxtJS .
▍Geradores de sites estáticos
Com o uso crescente de Jamstack , os geradores de sites estáticos (SSGs) se tornaram uma tecnologia muito procurada. Um aplicativo Jamstack é um tipo de aplicativo da web que está pronto para o navegador e essencialmente não precisa de um servidor da web (esses materiais podem ser servidos aos clientes diretamente do CDN). Detalhes sobre esses sites podem ser encontrados no link acima. Listamos aqui apenas os principais pontos fortes do SSG:
- Velocidade: geradores de site estáticos criam páginas de site durante a construção do projeto, não quando essas páginas são solicitadas pelo cliente.
- Segurança: o uso de SSG permite abandonar os sistemas de gerenciamento de conteúdo (CMS), que muitas vezes são alvos de ataques de hackers.
- Simplifique o dimensionamento: um projeto da web usando SSG é uma coleção de arquivos que podem ser transferidos para um cliente de qualquer lugar. Isso torna muito mais fácil armazenar esses arquivos em um CDN. Como resultado, descobriu-se que os sites estáticos escalam muito bem.
- Processo de desenvolvimento simplificado: projetos SSG não precisam de back-end e banco de dados. Isso torna mais fácil para os desenvolvedores.
Existem soluções SSG para Angular, React e Vue:
Outros projetos SSG incluem o seguinte: 11ty , Hugo , Jekyll .
Analytics
▍ Monitoramento do comportamento do usuário e teste A / B
Observar o comportamento do usuário no site é opcional, mas a posse de tais dados é uma contribuição significativa para a melhoria dos projetos da web. Existe uma classe especial de ferramentas projetadas para coletar informações sobre como os usuários interagem com o site. Essas ferramentas permitem que os desenvolvedores de sites levem em consideração as necessidades dos usuários e, por meio de testes A / B, os ajudem a escolher as alternativas mais adequadas. Estamos falando sobre as capacidades dos sites, sobre os padrões de comportamento do usuário que eles suportam, sobre o design.
Aqui estão algumas soluções para monitorar o comportamento do usuário e testes A / B:
▍ -
É difícil desenvolver um aplicativo da Web de alto desempenho de uma vez. Mas, por exemplo, um aplicativo que foi otimizado para acelerar seu carregamento gerará mais emoções positivas do usuário do que sua versão mais lenta. Existem vários projetos que analisam sites e dão recomendações para a sua melhoria. Por exemplo - PageSpeed Insights do Google.
Entre as ferramentas de desenvolvedor do Google Chrome, você pode encontrar uma ferramenta muito valiosa para analisar o desempenho do site - Lighthouse . Ele avalia sites em cinco critérios (desempenho, acessibilidade, melhores práticas, SEO, PWA) usando uma escala de 100 pontos. Após a análise, é gerado um relatório com recomendações para melhorias no site.
Analisando um site com o Lighthouse
Outro analisador de desempenho que você pode encontrar entre as ferramentas de desenvolvedor do Chrome é o painel Cobertura , que permite pesquisar códigos JS e CSS não utilizados. Ao excluir esse código do projeto, você pode reduzir o tamanho de seu pacote. Isso irá acelerar o carregamento do site, o que será especialmente perceptível em dispositivos móveis.
▍SEO
SEO, search engine optimization, é o que você precisa fazer para aumentar a classificação de um site nos motores de busca, como Google, Bing, DuckDuckGo e muitos outros. Um site bem otimizado se torna mais visível. Na verdade, é tão importante que no mundo do desenvolvimento web haja até uma posição especial: “Especialista em SEO”.
Se falarmos sobre SEO no Angular, React e Vue, teremos o seguinte:
Concordo que o desenvolvimento de front-end é um campo de especialização vasto e em constante mudança. Na verdade, se alguém tentar se tornar um desenvolvedor universal, que sabe tudo e pode, será extremamente difícil para ele conseguir isso, e isso levará muito tempo. Além disso, cada projeto web tem suas próprias necessidades e prioridades. Por isso é necessário decidir o que é mais importante no início do trabalho de um projeto. Isso permitirá não se espalhar, selecionando e estudando apenas o mais necessário, e planejando a arquitetura do projeto de forma que corresponda aos seus objetivos.
Quais novas tecnologias de desenvolvimento de front-end você considera mais promissoras?
