Executando no local e desenvolvimento web

Olá pessoal!

Agora vou lhe contar uma história estranha. Uma vez, eu morava em um condomínio, no qual, no térreo, havia uma sala de ginástica com esteiras. Na minha juventude, participei ativamente do esporte e, em seguida, consegui conhecer o estado que ocorre durante a corrida e é chamado de "segundo vento": é quando de repente você começa a se sentir inspirado por uma divindade que não conhece fadiga. Respiração, palpitações e movimentos corporais têm alguma ressonância especial e o transformam em um carro em movimento. O sentimento é mais brilhante, na minha opinião, mais você NÃO gostava de correr até esse ponto. Então, todos os dias eu passava pelas esteiras e achava bom lembrar a juventude. Bem, eu lembrei. A esteira ajudou com isso, permitindo ajustar o ritmo e alcançar o ritmo desejado. Na rua, não posso fazer isso: é muito difícil andar pela cidade a uma velocidade uniforme, o terreno e os obstáculos interferem. Depois de algum tempo, mudei-me para um apartamento comum (sem academia) e comecei a pensar em adquirir minha própria esteira.

Sim, é claro, você pode simplesmente comprar uma assinatura do clube esportivo mais próximo, mas eu, como muitos de meus colegas de TI, sou uma fobia social. Se não é mesmo um sociopata. O exercício é um processo íntimo para mim. Bem, usar qualquer minuto livre para o treinamento também foi tentador: “saúde dos nerds” e tudo isso ... Em suma, eu olhei para ofertas de lojas on-line, li críticas, me perguntei quanto você poderia gastar nesse negócio, como resolver o problema com barulho e onde colocar esse grande bandura ... Então eu caí nas mãos de uma corda de pular comum e disse a mim mesmo: bem, aqui está ele, uma boa opção para treinamento cardio sem muita hemorróida! Tudo o que você precisa é de pé direito alto e ... Nada aconteceu: para pular uma corda de pular ritmicamente e uniformemente, você precisa ser capaz de fazê-lo. Voltamos a pensar sobre a esteira ou ... Espere um minuto, por que não tentar RUNNING IN PLACE? Oh, bem, de alguma maneira MUITO simples e estúpido. Mas eu tentei. E você sabe o que? Isso é ótimo! As sensações são quase as mesmas que eu experimentei na esteira, mas tudo é muitas vezes mais simples: você aperta a mão com uma pulseira de fitness, coloca fones de ouvido com salsicha, liga o temporizador - e pronto! Sim, existem nuances, mas acredite, elas são insignificantes. Como resultado, estou com esse tópico há algum tempo, tanto que quero me juntar à seita das mesmas pessoas loucas. Você me pergunta: do que você está falando em geral, como isso tudo está relacionado ao desenvolvimento web?

E aqui está como

Considere a pilha de tecnologia popular para o desenvolvimento moderno de front-end:

TypeScript + LESS / SCSS / PostCSS + React + Redux / Mobx + Webpack

De fato, agora esse é um certo padrão. É fácil verificar isso analisando vagas. Qualquer novo projeto este ano, com o mais alto grau de probabilidade, será lançado com uma lista semelhante sob o capô. Este é um conjunto tão bom de esteiras testadas pelo tempo. Vamos examinar esta lista juntos e ver o que resta dela se usarmos a abordagem Executar no Local.

TypeScript

Coisa maravilhosa. Qualquer pessoa que já tenha escrito algo sério para a web entenderá isso. Muitas vezes, em artigos sobre TypeScript para iniciantes, dando exemplos, eles falam sobre coisas muito simples e banais, como passar argumentos digitados para uma função ou as vicissitudes da conversão de tipos em JavaScript, das quais você é salvo. Mas os recursos do TS são maiores e mais profundos do que as verificações de tipo no estágio de compilação, pois podem levar o desenvolvedor "pela mão" durante todo o projeto, solicitando e não deixando tropeçar mais uma vez. Mas o TS tem suas desvantagens: ele NÃO funciona em um navegador sem transpail e sua sintaxe, digamos, “ondula” nos olhos. Quando você trabalha com o front-end, seu fluxo de trabalho geralmente envolve a verificação de como o código é executado no navegador, você precisa de acesso constante ao tempo de execução nativo. A perda de tempo para reconstruir um projeto para refletir mudanças, em conjunto, pode ser enorme. Mesmo se você tiver tudo o que precisa, é armazenado em cache e otimizado. O que fazer? Minha opção: use JS + JSDoc. Sim, o TS Static Analyzer suporta o formato JSDoc . Ao mesmo tempo, você vê seu código diretamente no navegador e tira proveito dos benefícios da civilização. Os blocos que descrevem tipos e outras dicas não são misturados com o código e têm limites óbvios, o que, pessoalmente, para mim, ajuda muito a ler o código na diagonal. Se você usa o VS Code, pode tentar essa abordagem simplesmente adicionando a linha // @ ts-check no início do seu código. Se você precisar de suporte para navegadores herdados, a compilação do ES6 +, é claro, ainda será necessária, mas apenas para a versão de produção. Como resultado, você simplifica a depuração em tempo de execução (da qual a ausência de erros e avisos durante a montagem não será salva) e economiza muito tempo.

MENOS / SCSS / PostCSS

Desse conjunto, meus favoritos eram MENOS e PostCSS. Adorei o LESS por sua sintaxe mais "nativa" e pela relativa facilidade das dependências necessárias para o ambiente de desenvolvimento. O PostCSS ajudou a criar todos os tipos de truques com SVG e prefixos de faixa. As desvantagens, como no parágrafo anterior, eu chamaria a necessidade de recompilação constante. Bem, as próprias dependências. No entanto, em nosso ano de 2018, temos uma coisa maravilhosa como variáveis ​​CSS nativas! Isso é algo extremamente poderoso com o qual nenhum pré-processador pode comparar: você pode redefinir suas variáveis ​​diretamente em tempo de execução! Isso abre um mundo inteiro de novas possibilidades. Por exemplo, você pode, de maneira simples, "on the fly", alterar os temas de todo o aplicativo, bem como seus blocos individuais. Literalmente, um usuário pode colar uma capa para um aplicativo com algum seletor de cores e, para isso, você não precisa manter pacotes separados com estilos pré-compilados ou sobrecarregar seu JS com lógica adicional. E muito mais, mais sutil e específico. Eu escolho CSS moderno nativo. Mas se você precisa apoiar o IE11, então tristeza .

Reagir

O React nos trouxe um novo conceito de decomposição modular, que caiu muito bem nas necessidades de desenvolvimento do lado do cliente, porque a estrutura dos componentes repetiu a estrutura da apresentação, simplificando a percepção e trazendo ordem aos chefes dos desenvolvedores. É por isso que, na minha opinião, ele se tornou tão popular e é por isso que ele agradece. No entanto, agora o React adquire cada vez mais as propriedades de um culto à carga: as pessoas começam a arrastá-lo para projetos apenas porque "todo mundo faz". E isso é terrível, porque a escolha da engenharia, especialmente em uma questão tão importante, deve ser o mais consciente possível. E, para conscientização, você precisa entender que o React está cheio de falhas. Para mim, isso é, antes de tudo, que é uma abstração muito espessa sobre o DOM nativo e traz uma quantidade enorme de especificidades próprias com as quais você precisa lidar em vez de resolver problemas diretamente. Isso é especialmente sentido e deprimente se suas tarefas são um pouco menos triviais que os moldes banais. Você pode falar sobre esse tópico por um longo tempo, lembre-se de JSX, VDOM e mais, mas para nós agora a principal questão é: qual é a alternativa? Não, não Vue. E não, especialmente, angular. Para mim, esses são componentes da Web: um conjunto de padrões CustomElements + ShadowDOM + ES Modules + HTML Templates . Porque Porque esses são os padrões suportados pela própria plataforma da web, e não a meta-plataforma e os complementos de JS.

Você pode dividir seu código em blocos organizados e organizá-lo como quiser, usando módulos nativos. Sim, os módulos são suportados por todos os navegadores modernos e você não precisa ser reconstruído durante o processo de desenvolvimento. Sim, você pode armazenar estilos e modelos separadamente em módulos. Sim, você pode ativar especificamente o suporte à sintaxe para esses arquivos e trabalhar com eles como HTML e CSS nativo. O ciclo de vida dos componentes da Web o ajudará a organizar a renderização e as atualizações sem analisar e alterar desnecessariamente a estrutura do DOM. O ShadowDOM permite que você se livre do BEM pesado e não se preocupe com o encapsulamento de estilos.
O ShadowDOM é transparente para variáveis ​​CSS e permite que você passe parâmetros para dentro de qualquer nível apropriado de aninhamento. Isso permite que você experimente o design paramétrico e faça muitos outros truques. Os componentes da Web funcionam totalmente com a API DOM usual, enquanto são elementos html completos: todos os métodos padrão estão em suas mãos. Você pode usar atributos personalizados para passar parâmetros e exibir configurações (embora, ao contrário do React, você não possa transmitir nada além de cadeias e valores booleanos, mas para mim não é um problema). Seu código será mais fácil e rápido. Acredite, eu tenho sido capaz de comparar. Um pouco triste: para a maioria dos usuários, tudo funcionará nativamente, mas alguns precisarão de polifiles . Se suas estatísticas e público-alvo, principalmente sobre navegadores modernos, se sentirem à vontade para mergulhar neste tópico, vale a pena.

Redux / mobx

É mais complicado. Por um lado, há vários artigos listando os pontos fortes e fracos e comparando diferentes abordagens para o armazenamento de estados. E para ir ao específico - você precisa de um caso específico. Acontece que esse tópico me assombra há bastante tempo: eu me deparo com tarefas bastante complexas de trabalhar com dados estruturados complexos. Bem, em geral: dados próximos da realidade, nunca na prática são simples, normalizados convenientemente com uma hierarquia universal clara. Na maioria das vezes, este é um gráfico complicado, que requer que você inicialmente coloque a máxima flexibilidade no sistema. Nesse assunto, sou adepto da construção de bicicletas, mas não recomendarei indiscriminadamente o meu próprio caminho a todos. Definitivamente, o que posso aconselhar é não desdenhar os fundamentos da ciência da computação moderna, ler algo popular sobre teoria dos grafos, teoria dos conjuntos, teoria do caos. Além disso, não estou falando de algum tipo de hardcore: as idéias mais gerais podem ser muito úteis e "limpar o cérebro" da maneira certa. No caso simples, você poderá escrever seu próprio repositório de estado com blackjack e assinaturas de joelhos, e não será mais difícil do que investigar a documentação das bibliotecas populares.

Webpack

Obviamente, podemos abandonar completamente o sistema de montagem. Mas resolver a cadeia de importação em código em tempo real não é a coisa mais rápida. Portanto, ainda precisamos de pacotes para a versão de produção. Bem, algum tipo de minificação / ofuscação, mais uma vez, e um pai compacto dist ... É por isso que deixamos o Webpack. Mas precisamos dele apenas alguns módulos com configurações mínimas e sem observadores e reconstruções para o processo de desenvolvimento. Pessoalmente, minha configuração de compilação parece muito compacta e não requer um grande número de dependências. Recentemente, ouço frequentemente sobre o novo Parcel builder, e seu conceito minimalista me atrai muito, mas, tanto quanto eu sei, ele não funciona com os módulos ES e, na minha opinião, é um arquivo. Espero que isso mude.

Qual é o resultado

Costumo ouvir a opinião de que, se você escrever "baunilha" - inevitavelmente se deparará com o fato de que seu projeto logo se transformará em um mingau sem suporte com macarrão. Deixe-me aparar: primeiro, se desejado, o mingau também pode ser preparado a partir de uma redução com uma redução (já vi o suficiente). E segundo, tudo será muito bom se você usar módulos, JSDoc e boas práticas de OOP. Então, a que chegamos:

JS + CSS + Componentes da Web + Webpack

Das cinco "esteiras", resta apenas uma, significativamente leve. E isso é suficiente para sentir as "asas para trás".

PS: Não afirmo de maneira alguma que minhas abordagens serão adequadas a todos. Peço-lhe que considere essa obra pelo menos como uma ocasião para pensar no que nos parece garantido.