Minha nova pilha de tecnologias da web para 2020

Lembra dos dias em que as pilhas de tecnologia da Web eram simples? Quando os níveis dessas pilhas podem ser designados na forma de uma redução de quatro letras como LAMP, LEMP ou LEPP? Quando tudo o que era necessário para criar e manter sites foi reduzido a um hardware completamente comum, a algum software de código aberto e à persistência em atingir a meta?

Meu primeiro site de sucesso, agora um projeto antigo de 1999, foi criado usando tecnologias que podem ser contadas com os dedos de uma mão: HTML4, CSS2, JavaScript3 e Apache 1.1. Tudo isso estava girando em um servidor com Linux 2.0. O site incluiu 38.000 páginas. E hoje, depois de 20 anos, ele ainda os emite .



Desde então, tudo mudou. Isso também se aplica às pilhas de tecnologia da web. Agora eles não são mais os mesmos de antes.

O autor do artigo, cuja tradução estamos publicando hoje, quer falar sobre como ele mudou da pilha completa para a pilha de 2020. Algumas tecnologias inesperadamente se tornaram favoritas durante essa jornada e outras perderam seu apelo anterior.

2020 Web Stack

2020 é o começo de uma nova década. Este é o momento de falar sobre a nova pilha de tecnologias da web.

Como é a pilha de 2020? Devo dizer que isso é muito influenciado pelo que o desenvolvedor do site está tentando alcançar. A escolha dos níveis certos depende muito do grau de escalabilidade necessário para o projeto.

Estou particularmente interessado em sites pequenos. Aqueles que se sentem bem em um servidor virtual. Esses sites não precisam de balanceadores de carga ou armazenamentos de dados persistentes. Este é o nicho do CMS que o WordPress ocupa há muito tempo. Mas no cerne de tudo isso não existe algum tipo de servidor minimalista. Em vez disso, estamos falando de um sistema que pode suportar um fluxo constante de tráfego sem a necessidade de aumentar automaticamente sua potência durante o horário de pico.

Agora, para o desenvolvimento e suporte de projetos na minha área de interesse, uso uma pilha de tecnologia composta por 12 níveis.

▍1 Provedor de nuvem

A base da minha pilha é um provedor de nuvem que leva em consideração as necessidades daqueles que estão acostumados a ajustar os ambientes nos quais seus projetos web são executados. Usei meus próprios servidores até o custo do suporte deles ficar muito alto. Alugar espaço no rack do servidor, um endereço IP dedicado, garantindo a largura de banda necessária ... Tudo isso contribui para o custo mensal de um servidor físico. Mas o verdadeiro ransomware é o custo da eletricidade. Os provedores de nuvem são muito mais baratos do que os US $ 1,25 por dia que enviei ao fornecedor de eletricidade. Rejeitar essas despesas me permitiu economizar centenas de dólares por ano.

§ 2 Distribuição do Fedora Linux com SELinux

Segurança é o que realmente nos incomoda. O SELinux pode ser comparado com um poderoso sistema de segurança em execução no Linux. Se adicionarmos a isso um firewall de iptables bem configurado, será possível que o proprietário do site durma tranquilamente à noite. Se você não tiver certeza de que precisa de tudo isso, faça o seguinte experimento. Implante um novo servidor no seu provedor de nuvem favorito e observe como ele será atacado em breve. Vi como os ataques de força bruta em novos servidores com tentativas de login SSH começaram menos de 10 minutos após a criação.

▍3 Serviço de Leitura e Gravação de Servidor Web

Eu uso o servidor Web Read Write Serve com certificados TLS da LetsEncrypt. Eu era fã do Apache, levei apenas alguns minutos para configurar e lançar novos sites. Mas desde que mudei do PHP para o JavaScript, tive que esquecer o Apache. O servidor Express me pareceu uma ferramenta extremamente simples, mas apenas até eu tentar reproduzir nele toda a funcionalidade que o Apache me dava. Estamos falando do mecanismo de coordenação de conteúdo, do cache condicional, da compactação de dados, da reescrita de URLs para SEO, do CORS, das políticas de proteção de conteúdo. Como resultado, mudei para o servidor Read Write Serve, no qual todos esses recursos estão presentes por padrão.

▍4 Tempo de execução do aplicativo Node.js.

O ambiente Node.js é responsável pela lógica do aplicativo em execução no servidor. Há um sentimento de que no ecossistema NPM há pacotes para todas as ocasiões. Portanto, as tarefas de montar a partir dos pacotes disponíveis o que eu precisava exatamente e de lançar tudo isso no Read Write Serve acabaram sendo simples e compreensíveis. Para organizar o trabalho de tudo o que é necessário para um projeto da web moderno, você não precisa fazer esforços excessivos. Isso está enviando email, trabalhando com serviços de pagamento, acessando bancos de dados e tudo mais, implicando o trabalho com APIs de servidor.

▍5. Banco de Dados MariaDB

Eu uso o servidor de banco de dados MariaDB. Este é um fork do MySQL renomeado e dominado pela comunidade de código aberto. Quando preciso armazenar dados JSON não estruturados, uso o PostgreSQL. O fato é que isso me permite executar solicitações diretamente em propriedades JSON específicas. É um pouco como o MongoDB, mas baseado na sintaxe familiar do SQL.

§ 6 HTTP / 2

Confio nos recursos HTTP / 2 com conexões persistentes e multiplexação de fluxo para se comunicar entre partes de aplicativos. Estas são duas adições ao respeitável protocolo HTTP / 1.1. mudou minha abordagem para a formação de documentos. Em primeiro lugar, o problema de bloquear o início da fila desapareceu. Como resultado, a necessidade de listas de sprites desapareceu, mesmo que eu tenha dezenas de imagens pequenas. Em segundo lugar, agora não há necessidade de otimizar arquivos JavaScript e CSS combinando-os em pacotes configuráveis. Depois que a conexão cliente-servidor é estabelecida, todos esses arquivos pequenos são transferidos sem interrupção por meio dessa conexão.

▍ 7. Modelo HTML usando frase azul

O Blue Phrase é um sistema de modelos que permite descrever com precisão as estruturas HTML em um formato compacto. Para mim, os tempos de um hash ilegível de código HTML e as discrepâncias entre as tags de abertura e fechamento terminaram. Nos modelos, costumo usar apenas um pequeno número de variáveis ​​(título, descrição, palavras-chave, dados de SEO, tela de carregamento, data etc.) e colocá-las em um modelo em estilo declarativo.

▍8. Escrevendo código de página usando o documento de leitura e gravação

Quando crio novas páginas, concentro-me no que estou tentando expressar, não no layout. Para resolver esse problema, eu uso o Read Write Doc. Essa ferramenta me ajuda a fazer negócios sem se distrair com nada. Eu o uso mesmo quando o que estou trabalhando está planejado para ser publicado no Medium (e há um excelente editor online do WYSIWYG). Eu me considero um veterano em desenvolvimento web, por isso estou acostumado a fontes monoespaçadas e para garantir que minhas mãos estejam no teclado, e não me apressem entre o teclado e o mouse. De qualquer forma, se eu precisar ver o que estou trabalhando com o CSS aplicado a ele, posso, usando uma combinação simples de teclas, alternar entre os modos de visualização e edição.

▍ 9. Componentes da Web padrão

Na área de trabalho com componentes da Web, eu aderir aos padrões W3C. Estes são sombra DOM, elementos do usuário, <template> HTML <template> , módulos ECMAScript. Isso me permite incorporar totalmente tudo o que preciso nos pacotes que distribuo por meio do NPM. Para mim, a maior vantagem de tudo isso foi o nível de isolamento que o sombra DOM fornece. Isso nos permitiu livrar-se da maldição do CSS, de poluir os namespaces.

10. JavaScript para scripts do cliente

Para escrever scripts de cliente, uso código JavaScript modular orientado a objeto. Aplico os novos recursos do padrão ECMAScript somente quando o suporte deles aparece nas versões mais recentes do navegador. Ou seja, eu os incluo no meu arsenal no momento em que vejo que todos os principais navegadores ficam "verdes" no caniuse.com . Eu evito polyfills.

▍11. Estilo CSS

CSS é tipografia e layouts de página. A tipografia começa com a seleção de fonte correta. O mais importante para mim é a boa legibilidade do texto. Recentemente, fiz uma regra para hospedar os arquivos de fontes usadas no meu próprio servidor. Isso protege meus recursos da possibilidade de bloqueio causado pela largura de banda limitada de alguns serviços de terceiros. Por exemplo, eu uso aproximadamente as seguintes construções:

 <link href='/fonts/source-serif-pro-400-latin.woff2' rel=preload as=font crossorigin /> 

Uma vantagem adicional dessa abordagem é que ela me salva completamente do problema conhecido como FOUT - (flash de texto sem estilo, flash de uma fonte comum).

12. Preparando recursos gráficos com o GIMP e o InkScape

E, finalmente, para a preparação de recursos gráficos, eu uso alguns editores. Preparo imagens PNG de bitmap usando o GIMP e materiais SVG vetoriais usando o InkScape.

Tecnologias que perderam seu apelo anterior

Algumas das ferramentas que eu realmente gostei antes, e outras que eu gostava de pouco tempo, não fazem mais parte da minha pilha de tecnologias da web.

• Adobe Photoshop e Illustrator. Esses são dois ótimos aplicativos que, por muitos anos, atenderam a todas as minhas necessidades gráficas. Infelizmente, digo adeus a eles e agradeço por estarem comigo. Agora tudo o que preciso é de seus substitutos gratuitos de código aberto.
• jQuery Essa biblioteca se tornou desnecessária quando as guerras de compatibilidade entre navegadores terminaram. O recurso jQuery mais valioso para mim era a sintaxe do seletor. Acabou sendo tão requisitado que em 2009 foi adicionado ao DOM como um querySelector .
• AJAX. Este progenitor da Web 2.0. agora se transformou em uma relíquia do passado. A API XMLHttpRequest está sendo substituída por uma API de fetch moderna e mais simples, e o JSON está substituindo o XML.
• SASS / SCSS. Admito que escrever código CSS sem variáveis ​​foi ineficiente; como resultado, muitas pessoas gostaram do SASS. E os módulos também foram uma característica muito importante. Mas, no final, para usar tudo isso em JavaScript, você teve que gastar muito tempo e esforço. Ao mesmo tempo, juntamente com o desenvolvimento de ferramentas auxiliares para trabalhar com estilos, o padrão CSS também não parou. Como resultado, várias ferramentas para converter código CSS estão gradualmente se tornando uma coisa do passado.
• BEM. O esquema de nomeação de entidades BEM (Bloco, Elemento, Modificador) usado na formação de nomes de classes CSS resolve o problema global do espaço para nome. Mas você tem que pagar por isso usando designs muito longos. Eu mudei para seletores pai / filho em elementos semânticos, preferindo uma abordagem mais fácil para identificadores e nomes de classe.
  
  Por exemplo:
  
  

   header > ul > li {   ... } nav > ul > li {   ... } footer > ul > li {   ... } 

• Fontes da Geórgia e Verdana. Essas duas fontes estão no topo da minha classificação de fontes há muitos anos. Eu poderia confiar em sua acessibilidade e legibilidade. Mas depois que a regra @font-face apareceu, e depois que as fontes de código aberto começaram a se espalhar, comecei a usar fontes semelhantes.
• Babel, Grunhido, Gole, Browserify, WebPack. Os quatro primeiros itens desta lista provavelmente não surpreenderão ninguém. Mas por que meu webpack saiu do Webpack? O fato de esse empacotador ter perdido relevância para mim tem alguns motivos nos quais vou me concentrar com mais detalhes:
  
  
  1. Antes do HTTP / 2, com suporte para conexões persistentes e multiplexação de fluxo, dependíamos dos recursos dessas ferramentas para criar pacotes de recursos de aplicativos. Mas o agrupamento não nos dá nada em um mundo onde existe HTTP / 2.
  2. O padrão ECMAScript 2015 era uma nova palavra no desenvolvimento JavaScript; todos se apressaram em usar os novos recursos da linguagem no momento em que viram a luz do dia. No entanto, houve um problema. O código escrito usando novos recursos não é suportado pelos navegadores. Portanto, ele teve que ser transposto para o código 5 do ECMAScript. Nesse negócio, contamos com a Babel, sua aplicação era uma etapa padrão na preparação de projetos da web para publicação. Hoje, todos os novos recursos de idioma que preciso estão disponíveis literalmente em todos os lugares. Como resultado, não preciso mais de Babel.
  3. Antes da possibilidade de importação dinâmica de módulos nos navegadores, o código precisava ser traduzido para o formato CommonJS. Agora, a maioria dos principais navegadores suporta <script type='module'> (e o Edge 76+ será exibido em breve). Como resultado, em breve poderemos dizer olá aos módulos do ECMAScript e dizer adeus a todo o resto.
• JSX. Eu não entendo quem acredita que o JSX é bom. E "Mas você está acostumado", para mim - não uma discussão.
• Programação funcional. Limitei o uso da programação funcional no meu código a construções simples de linha única como numbers.sort((a, b) => a - b); . Para todo o resto, uso programação orientada a objetos.

Tecnologias que se tornaram favoritas

Aqui está uma visão geral dos níveis da minha pilha de tecnologia em que estou particularmente impressionado:

• Módulos JavaScript. Os módulos se provaram no código JavaScript do servidor. E estou imensamente feliz por finalmente poder usá-los no lado do cliente.
• JavaScript orientado a objeto Aqui estão cinco regras de ouro para o desenvolvimento de JavaScript orientado a objetos:
  
  
  1. Substitua objetos anônimos por classes nomeadas.
  2. Declare e inicialize todas as propriedades dos objetos nos construtores.
  3. Proteja objetos de alterações imediatamente após a criação.
  4. Declarar métodos com assinaturas imutáveis.
  5. Vincule this a cada retorno de chamada.
• Frase azul Esse sistema me permite usar uma abordagem declarativa ao criar modelos e preparar vários materiais. Torna a escrita de código HTML de qualidade um prazer.

Sumário

Anteriormente, as pilhas de tecnologia da Web podiam incluir apenas quatro elementos. Mas nas condições modernas você não surpreenderá ninguém com uma pilha de doze níveis. Não quero parecer uma pessoa que expressa verdades conhecidas, mas, mesmo assim, concluindo este material, direi que cada desenvolvedor pode ter sua própria pilha. E seria extremamente interessante para mim aprender sobre o que os outros chamam de “pilha ideal de tecnologias da web para 2020”.

Caros leitores! E qual é a sua - sua pilha de tecnologias da web em 2020?

Isenção de responsabilidade do tradutor: Frase azul, Ler e escrever e Ler e escrever - tecnologias desenvolvidas pelo autor deste artigo. O download e a instalação são por sua conta e risco.