Get best of the week

10 princípios de projetos front-end escaláveis

Os aplicativos da Web percorreram um longo caminho desde a sua criação. Sabemos qual papel importante o JavaScript desempenha na Web e quais possibilidades ilimitadas temos ao escolher estruturas e tecnologias. Cada estrutura tem suas próprias vantagens e desvantagens, mas quase todas usam algum tipo de metodologia básica. Ferramentas como create-react-app, next.js, vue-cli e outras são realmente úteis para a formação inicial do projeto e sua estrutura, mas, caso contrário, você é livre para criar o aplicativo de acordo com suas preferências e requisitos do projeto.

Este artigo contém uma lista de princípios que serão úteis ao criar aplicativos da Web usando o React e o Vue.. Eles ajudarão você a definir a direção certa e agilizar o desenvolvimento. A maioria desses princípios se aplica à criação de qualquer software, mas ainda assim a lista foi projetada especificamente para aplicativos da Web.

1. Projete componentes, não telas


  • Tente encapsular toda a lógica do componente para que ele possa ser facilmente exibido em qualquer lugar, por exemplo, em telas diferentes e em seções diferentes.
  • Todas as operações CRUD aplicam-se aos dados necessários aos controladores / fornecedores. Esses dados são então transferidos para os componentes que estão associados a eles. Uma abordagem comum é usar o redux / vuex: os dados são armazenados no armazenamento e considerados verdadeiros, e os contêineres recuperam as informações necessárias.

2. Separe as camadas de apresentação da lógica / gerenciamento de negócios


Nem todos os componentes precisam de uma conexão com o armazenamento, uma API do servidor ou algum outro serviço. Quando você torna os componentes "indiferentes à fonte de dados", as possibilidades de reutilizá-los aumentam bastante.

3. Use o método padrão de extração de dados.


  • Este princípio ilustra maravilhosamente ganchos de descanso , o que incentiva a criação de uma estrutura simples e compreensível de chamadas de API.
  • Para alguns projetos, o uso de chamadas com extração explícita de dados é suficiente. Mas se você trabalha com várias fontes e relacionamentos, a abstração da API do servidor o ajudará.

4. Use uma estratégia comum de entrada do usuário


  • Isso inclui formulários, seleção de etiqueta, validação e validação, condições de erro.
  • : antd.
  • UI-, .

5.



6. Storybook


O Storybook é uma ótima ferramenta para interagir com designers e discutir a funcionalidade. Ele serve como um "guia de estilo" para sua aplicação.

7. Use linters e formatadores


  • Exemplos de linter: ESLint, stylelint .
  • A maioria das ferramentas de início rápido, como create-react-app, pré-instala linters para você. Mas se você estiver trabalhando com a base de código antiga, os linters podem ser inúteis.
  • Eles ajudam a encontrar bugs, mas também podem ser usados ​​para estilizar o código que a equipe escreve. Isso reduz a carga cognitiva ao trabalhar nos recursos que você recebeu de seus colegas.
  • O plug-in sonarJS eslint ajudará a melhorar a qualidade do código, verificando sua estrutura lógica.
  • prettier — . . .

8.


  • .
  • CSS- CSS-in-JS.
  • .

9.


:


- — commitlint


10. Registro de alterações do suporte


No início de qualquer projeto, geralmente é fácil manter todas as alterações na memória. À medida que o projeto cresce, o changelog pode ser o principal "repositório", onde mudanças notáveis ​​na base de código serão descritas. Meses e até anos passarão e ainda serão relevantes para você.

A lista continua e continua


Sim, aqui você pode adicionar muitos outros pontos, dependendo do escopo do seu projeto e das tecnologias utilizadas. O acima será suficiente para melhorar radicalmente muitos aplicativos front-end. Quase todos os princípios podem ser aplicados gradualmente e dependendo das prioridades que você e sua equipe determinarão. Portanto, você não precisa pensar em como aplicar tudo de uma vez :)

More articles:


All Articles