Kit de ferramentas front-end: utilitários e recursos úteis para acelerar o desenvolvimento

Já se foram os dias em que foi suficiente para o concorrente abrir o Bloco de Notas, escrever algumas linhas de código, verificá-lo em um navegador e enviá-lo ao servidor via FTP. O desenvolvimento moderno da interface do usuário tornou-se muito mais complicado. O ecossistema JavaScript está crescendo e mudando tão rapidamente que é fácil ficar confuso. Neste post, mostrarei o que a equipe de front-end do Parallels usa para otimizar o desempenho.

Estou certo de que agora, em algum lugar do mundo, dois fornecedores front-end estão discutindo seriamente sobre qual estrutura é melhor usar para o projeto. E o terceiro está conectado a eles - um oponente ardente dos quadros. Ele afirma que você precisa escrever em JavaScript baunilha, porque todos esses pribluds progressivos apenas inflam código com dependências desnecessárias e geralmente são projetados para quem não pode programar. A discussão deles provavelmente terminará em nada. Uma hora depois, todos se dispersam discretamente nos empregos. Todos permanecerão em sua própria opinião e trabalharão como costumavam.

Na minha opinião, essas disputas são piores do que as que surgiram antes, uma galinha ou um ovo. Porque a única solução eficaz e verdadeira para o desenvolvimento de front-end sem problemas não existe. Concordo que todas as funções básicas podem ser realizadas sem o uso de Angular, React, Vue.js e estruturas semelhantes. Mas se o objetivo é a cooperação e você cria um aplicativo em larga escala, não apenas um, mas como uma equipe, é mais fácil com eles.

Obviamente, você pode ficar sem eles, mas eles tornam possível não perder tempo criando um padrão, definir a estrutura (você sempre sabe onde fica), facilitar a rotina e acelerar o desenvolvimento. Se assumirmos que o idioma é um alfabeto, a estrutura pode ser considerada um livro de frases com diálogos de clichês que facilitam a construção da comunicação.

Nesta postagem, compartilharei ferramentas úteis que eu e a equipe usamos ao criar a interface do usuário. Eles simplificam bastante o desenvolvimento conjunto e o apoio adicional ao projeto.

***
Acho que, para começar, vale a pena contar um pouco sobre você. Entrei no mundo da TI há nove anos, em 2011. Ele começou como uma pilha cheia em uma pequena organização. Então ele se envolveu em aplicativos móveis híbridos, ele foi responsável pela parte da lógica que estava no WebView. E alguns anos depois, ele acabou em Parallels. Aqui, trabalho na equipe de nuvem, fornecedora de soluções web para todos os produtos da empresa. A maior parte dos recursos de negócios exige que eu pense e implemente tarefas de front-end. Agora focado no desenvolvimento do portal Minha conta.

Como você provavelmente já entendeu no texto acima, a criação da interface desse aplicativo Web não ficou isenta de estrutura. Escolhemos Vue.js. Para tornar agradável trabalhar com ele, eles também implementaram ferramentas adicionais. Foi isso que nos ajudou a otimizar o processo de desenvolvimento o máximo possível.

Vue CLI

Este utilitário de linha de comando inclui muitos recursos úteis e foi projetado para o rápido desenvolvimento do projeto. Grosso modo, ele cria uma estrutura padrão para o lançamento e permite que você se concentre na criação do aplicativo sem pensar no estágio inicial sobre as ferramentas e a configuração da montagem. Eles podem ser personalizados para as necessidades do projeto posteriormente.

O Vue CLI fornece suporte para as principais tecnologias de desenvolvimento da web. Fora da caixa estão ferramentas como Webpack, Babel, TypeScript, ESLint, Sass. Além disso, há suporte integrado para testes de unidade e de ponta a ponta usando Mocha e Nightwatch.

Vue devtools

Uma extensão para o navegador que permite depurar o aplicativo em tempo real. Ele tem acesso às propriedades e métodos dos componentes, uma lista de todos os eventos. Você pode controlar completamente o estado do aplicativo por meio de uma página da web e não esperar que uma partição veja o resultado.

Funciona no Chrome e Firefox. Não há extensão oficial para outros navegadores, mas você pode executar o Vue Devtools através do aplicativo Electron. Em seguida, a ferramenta estará disponível em qualquer ambiente.

Zeplin

O serviço facilita a transferência de layouts para o desenvolvimento. Como em qualquer empresa grande, temos um conjunto de componentes de interface do usuário. Anteriormente, ele estava nos arquivos PSD e, por isso, o acesso a ele era muito caótico. E em Zeplin existe uma coisa chamada guia de estilo global.

Nele, você pode coletar todas as regras para a construção de interfaces corporativas. Para cada componente da interface do usuário, o código CSS é gerado automaticamente - as cores, tamanhos, recuos e outras propriedades de cada bloco que compõem o elemento são indicados. Ou seja, os estilos não precisam mais ser implementados sempre do zero, o que acelera bastante o trabalho. A era do PSD acabou.

Além disso, há um histórico de todas as alterações. Você pode acompanhar facilmente como foi no estágio inicial e o que aconteceu no final.

URL Git como dependência

Este é o recurso npm que estamos usando. Precisávamos compartilhar um conjunto de componentes de interface do usuário para que colegas da empresa tivessem acesso a ele e pudessem usá-lo para suas necessidades. A solução mais óbvia para esse problema é o pacote npm. Mas não o desejávamos no registro público, o servidor npm local não era uma boa ideia, por isso usamos o pacote git + npm.

Assim, cada funcionário da Parallels tem acesso à base de código da interface do usuário e, como é git, o problema de versão também é resolvido. Não haverá problemas devido a atualizações, nada será interrompido.

Sentinela

Para coletar erros e logs que ocorrem no lado do cliente, sem aguardar uma reclamação, conectamos o Sentry . Essa ferramenta rastreia a execução do código em navegadores personalizados.

Se um erro for detectado, uma solicitação é automaticamente enviada a nós com um relatório completo que reflete a essência do incidente e a lista de ações que o precederam. Com base nesses dados, é muito fácil encontrar o motivo e corrigir tudo.

Também nos permitiu descarregar um pouco nosso suporte técnico, salvando nossos colegas de chamadas e chamadas desnecessárias.

Sobre os perigos dos vícios

Finalmente, um pequeno conselho. Tente escrever utilitários você mesmo. Recentemente, as bibliotecas com soluções prontas tornaram-se muito populares. Chega ao ponto que as propostas de front-end assumem dependências mesmo para as funções de “linha única” que podem escrever com os olhos fechados. O que isso ameaça? Falha.

Uma história instrutiva aconteceu há quatro anos. Uma pessoa removeu seu pacote de 11 linhas do registro npm e, assim, quebrou cerca de mil projetos. Desenvolvedores de todo o mundo começaram a receber mensagens de erro ao tentar implantar seus aplicativos devido à falta de um pequeno módulo chamado "canhoto".

Portanto, não seja preguiçoso, não substitua o código por várias dependências. Confie em si mesmo e escreva pequenos utilitários e use soluções de bibliotecas prontas apenas para funções complexas - onde elas realmente ajudam a não reinventar a roda.