Get best of the week

10 principios de proyectos front-end escalables

Las aplicaciones web han recorrido un largo camino desde su inicio. Sabemos qué papel importante juega JavaScript en la web y qué posibilidades ilimitadas tenemos al elegir marcos y tecnologías. Cada marco tiene sus propias ventajas y desventajas, pero casi todos utilizan algún tipo de metodología básica. Herramientas como create-react-app, next.js, vue-cli y otras son realmente útiles para la formación inicial del proyecto y su estructura, pero de lo contrario, puede crear la aplicación de acuerdo con sus preferencias y requisitos del proyecto.

Este artículo contiene una lista de principios que serán útiles al crear aplicaciones web usando React y Vue.. Le ayudarán a establecer la dirección correcta y agilizar el desarrollo. La mayoría de estos principios se aplican a la creación de cualquier software, pero aún así la lista está diseñada específicamente para aplicaciones web.

1. Diseñar componentes, no pantallas


  • Intente encapsular toda la lógica del componente para que pueda visualizarse fácilmente en cualquier lugar, por ejemplo, en diferentes pantallas y en diferentes secciones.
  • Todas las operaciones CRUD aplican para los datos necesarios a los controladores / proveedores. Estos datos luego se transfieren a los componentes que están asociados con ellos. Un enfoque común es usar redux / vuex: los datos se almacenan en el almacenamiento y se consideran verdaderos, y los contenedores recuperan la información necesaria.

2. Separe las capas de presentación de la lógica / gestión empresarial


No todos los componentes necesitan una conexión al almacenamiento, una API de servidor o algún otro servicio. Cuando hace que los componentes sean "indiferentes a la fuente de datos", las posibilidades de reutilizarlos aumentan considerablemente.

3. Utilice el método estándar de extracción de datos.


  • Este principio ilustra maravillosamente ganchos de descanso , lo que fomenta la creación de una estructura simple y comprensible de llamadas API.
  • Para algunos proyectos, el uso de llamadas con extracción de datos explícita es suficiente. Pero si trabaja con numerosas fuentes y relaciones, entonces abstraer la API del servidor lo ayudará.

4. Use una estrategia de entrada de usuario común


  • Estos incluyen formularios, selección de etiquetas, validación y validación, condiciones de error.
  • : antd.
  • UI-, .

5.



6. Storybook


Storybook es una gran herramienta para interactuar con diseñadores y discutir la funcionalidad. Sirve como una "guía de estilo" para su aplicación.

7. Use linters y formateadores


  • Ejemplos de linter: ESLint, stylelint .
  • La mayoría de las herramientas de inicio rápido, como create-react-app, preinstalarán linters por usted. Pero si está trabajando con la antigua base de código, las linters pueden ser inútiles.
  • Ayudan a encontrar errores, pero también se pueden usar para diseñar el código que escribe el equipo. Esto reduce la carga cognitiva al trabajar en funciones que recibió de sus colegas.
  • El complemento sonarJS eslint ayudará a mejorar la calidad del código al verificar su estructura lógica.
  • prettier — . . .

8.


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

9.


:


- — commitlint


10. Registro de cambios de soporte


Al comienzo de cualquier proyecto, generalmente es fácil mantener todos los cambios en la memoria. A medida que el proyecto crece, el registro de cambios puede ser el principal "repositorio", donde se describirán cambios notables en la base del código. Pasarán meses e incluso años, y seguirá siendo relevante para usted.

La lista sigue y sigue


Sí, aquí puede agregar muchos más puntos, según el alcance de su proyecto y las tecnologías utilizadas. Lo anterior será suficiente para mejorar radicalmente muchas aplicaciones front-end. Casi todos los principios se pueden aplicar gradualmente y dependiendo de las prioridades que usted y su equipo determinen. Por lo tanto, no necesita pensar en cómo aplicar todo de una vez :)

More articles:


All Articles