Monday, April 6, 2020

Import line spacing - Angular / React

Una de las buenas prácticas que considero que hacen lucir un código limpio es el *import line spacing* o una línea de separación entre los tipos de imports que hacés al inicio de tu código.

Podemos dividir los imports en al menos dos categorías: third party imports y application imports (o sea, las libraries de terceros y los imports de nuestra propia aplicación)

De igual forma, mantener un orden alfabético por módulo así como también los destructured imported.

Pero, ¿por qué? Así separamos visualmente lo que tiene que ver con ellos (third-party) con lo nuestro.

Y el orden alfabético nos ayuda a tener una mejor legibilidad y localizar fácilmente los símbolos.

Por otra parte, también nos puede servir de una métrica para saber si estamos haciendo mucho código en un archivo. O sea, por ejemplo, si ves que tenés más de 5 imports en el primer grupo o en el segundo grupo, podés usarlo de parámetros para reconsiderar y tratar de refactorizar tu código.

This is an example of a angular file: 

Esto es lo que debes evitar:


Aquí estamos siguiendo la buena práctica:


Source 1https://v2.angular.io/docs/ts/latest/guide/style-guide.html#!#03-06 
Source 2: https://dev.to/jorgealvarez/react-imports-the-rule-of-5-ji3