Herramientas y buenas practicas para desarrolladores frontend profesionales

Las mejores prácticas y herramientas que sugiero o comento aquí no son fórmulas mágicas que solucionarán y mejorarán todos los proyectos. Son una base de ideas y convenciones que considero que vale la pena probar y experimentar. Con suerte, pueden ayudarnos a tener una mejor experiencia de desarrollador y, en última instancia, ofrecer un software de mejor calidad.

El frontend es un tema muy necesario de conocer y actualizarnos, hasta donde sea posible. Pero al mismo tiempo es difícil estar al día, o al menos en desarrollos web de mediana o larga escala, por la gran variedad de opciones que hay. Es decir, que, es evidente que muchas de las buenas prácticas y herramientas sugeridas en los proyectos, pudieran ser útiles cuando se aplican en proyectos muy grandes,  y otras no lo son tanto en proyectos más pequeños.

Hay tanto que aprender sobre el desarrollo de frontend que puede parecer interminable. Con frecuencia aparecen nuevas herramientas y bibliotecas y puede ser difícil saber por dónde empezar, o si estamos yendo por un buen camino con las que estamos actualmente utilizando. El trabajo frontend cambia tan rápido que tienes que estar dispuesto a seguir aprendiendo y mejorando tus habilidades.

En el desarrollo FrontEnd con el tiempo han ido surgiendo (al igual que cualquier desarrollo de software) lo que se conoce como buenas prácticas, cosas que normalmente hacemos, que demuestran que ayudan en el ciclo del desarrollo de software mejorando los atributos de calidad del software, y haciendo desarrolladores de front end más profesionales.

Aunque el lenguaje predominante en el frontend sea Javascript, sabemos que realizar un desarrollo rápido en puro Javascript o vanilla-javascript, es, en su mayoría muy extenso para cubrir una funcionalidad simple. Y más que nada, sabiendo que algún framework de frontend, trae esa necesidad funcional "que se ocupa", en forma muy sencilla de implementar, trae consigo pros y contras que también necesitamos tener en cuenta.

Lo que si, es que vemos muy claro que existen al menos 3 variedades de frameworks predominantes en la industria de software como son: React, Vue, Angular. Y por supuesto las librerías de front-end de tipo toolkit como: bootstrap, material-ui, foundation entre otras.

https://npmcompare.com/compare/bootstrap,foundation,material-ui,react-bootstrap,reactstrap

Podemos observar, que cada librería y toolkits tiene sus pros y sus contras, y que no hay mucha compatibilidad entre sí.

https://hub.packtpub.com/bootstrap-vs-material-design-for-your-next-web-or-app-development-project

Entonces, si tenemos la libertad de escoger, es decir, que no tengamos prescrito por algún legacy code el framework a utilizar, dejando a un lado el expertise de la mayoría de los desarrolladores, entonces, nos llegan una serie de preguntas como:

1. ¿Cual es el mejor para el proyecto de mediano alcance? 

2. ¿Cuál o cuáles debería estudiar y/o especializarse más? 

3. ¿Que debería utilizar o proponer para el próximo proyecto de desarrollo web? 

4. ¿Cual tiene mayores beneficios? ¿Cual tiene menos problemas? 

5. ¿Cuáles serán las que tienen mayor futuro en las tendencias?
   Y la pregunta  más importante: 

6. ¿Qué conjunto o combinación de frameworks, librerías y toolkits  tienen mayores atributos de calidad como: 

• Robustez (fallas mínimas)

• Escalabilidad (Con una gran gama de expansiones, en plugins, en componentes etc.)

• Compatibilidad (facilidad de migración de versiones, pocos conflictos etc.)

• Portabilidad (interoperabilidad entre otros frameworks, etc.)

• Mobile first/friendly migrable to native

• Desacoplamiento (facilitar pruebas unitarias, funcionales etc.) 

• Rápida integración (rápida construcción de pruebas de concepto y a códigos heredados)

• Rendimiento (Acelera o quitar los retardos el la carga y/o el renderizado en el navegador)

• Legibilidad (Facilita el entendimiento del código.)

• Rápida curva de aprendizaje (aplicar rápidamente)

• Una comunidad creciente (tener disponible ayuda y colaboración)

• etc.

Sergio Xalambrí (2015), nos da una buena aportación al respecto en cuanto atributos de Rendimiento y Legibilidad, y dos buenas práctica bien conocidas, como: 1. la Usabilidad en el uso de preprocesadores, y otra de: funcionalidad al usuario en los atributos de calidad que nos muestra en su artículo Buenas prácticas del desarrollo FrontEnd (resumen de los puntos al final).

También vemos algunas buenas prácticas adicionales en CSS y HTML. en cuanto a (Legibilidad y Rendimiento ) en: https://www.slideshare.net/foobartel/front-end-best-practices

También existen los mejores libros de desarrollo de frontend sobre una amplia variedad de temas. Todos muy útiles para aprender diferentes idiomas / herramientas en diferentes etapas del proceso de aprendizaje. https://whatpixel.com/best-frontend-development-books

Todo lo anterior nos da 2 atributos de calidad que son sumamente importantes en Rendimiento  y Legibilidad.  

Todo está muy bien, pero:

• ¿Qué hay en cuanto a  Compatibilidad, Portabilidad, Desacoplamiento, Rápida integración  y otros más mencionados anteriormente?, y  

• ¿Cuáles serían las mejores opciones de herramientas, librerías que hay disponibles y que se usan más en la industria de software para considerar aprender en los restantes atributos de calidad?

---

Dentro de las herramientas que se ponen interesantes está la de Storybook, ya que nos brinda Compatibilidad, Portabilidad, Desacoplamiento y también una relativa Rápida integración.

Storybook es el taller de componentes favorito del mundo, ampliamente adoptado por gigantes de la industria, empresas emergentes y proyectos de código abierto por igual. Organiza los componentes y sus estados para estructurar el desarrollo, las pruebas y la documentación de la interfaz de usuario para cada capa de vista principal.

La versión 6.0 convierte Storybook en una herramienta para desarrolladores frontend profesionales.

Investigamos equipos líderes en empresas como BBC, IBM, Cisco y Shopify. Estos equipos han escalado con éxito las bibliotecas de componentes y han sido pioneros en sus propias mejores prácticas.

El nuevo Storybook incorpora estas mejores prácticas para que todos los equipos puedan beneficiarse. Además, eliminamos el texto estándar y la configuración para optimizar su experiencia de desarrollador. Storybook es el estándar de facto para construir componentes de UI. Permite el desarrollo y la documentación de la interfaz de usuario estructurada para todos los marcos principales.

📈 Registro de adopción. El uso de Storybook continúa creciendo, recientemente cruzando 50,000 repositorios públicos y 7 millones de descargas npm por mes. Hemos visto un crecimiento especialmente alto entre las comunidades Vue, Angular y Web Component.

👩‍💻 Comunidad próspera. Storybook es uno de los 10 proyectos de OSS de más rápido crecimiento de 2019 según GitHub. Recientemente superó los 1000 contribuyentes y 50,000 estrellas.

🧪 Innovación de plataforma. Lanzamos con éxito varios cambios en la plataforma principal al tiempo que garantizamos la estabilidad para nuestros usuarios. 

Basado en: https://medium.com/storybookjs/storybook-6-0-1e14a2071000

Conoce mas de Storybook  https://storybook.js.org

---

Aqui esta un resumen de sus puntos de Buenas prácticas del desarrollo FrontEnd de Sergio Xalambrí (2015)  :

1. Comentar el HTML (Legibilidad)

2. Minificar el HTML (Rendimiento)

3. Cargar el CSS lo antes posible (Rendimiento)

4. Insertar en tu HTML el CSS crítico para tu aplicación (Rendimiento)

5. Cargar el JS al final(Rendimiento) 

6. Cargar cualquier JS no indispensable de forma asíncrona (Rendimiento) 

7. Usar la menor cantidad de etiquetas posibles (Legibilidad)

8. Comprimir todas tus imágenes (Rendimiento) 

9. Evitar los @import en el CSS (Rendimiento) 

10. Minificar el CSS (Rendimiento) 

11. Agrupar los media query (Rendimiento)

12. Eliminar el CSS innecesario (Rendimiento) 

13. Usar preprocesadores (desacoplamiento)

14. Separar tus hojas de estilos en varios archivos por cada 4095 selectores (Rendimiento) 

15. Armar una guía de estilos al escribir código JS (Legibilidad)

16. Modularizar el código JS (Legibilidad)

17. Comentar el código JS (Legibilidad)

18. Documentar tus funciones y APIs (Legibilidad)

19. Evitar ensuciar el scope global (Legibilidad)

20. Evitar estilizar el DOM con JS (Legibilidad)

21. Reducir el acceso al DOM (Rendimiento) 

22. Reducir los Event Listeners (Rendimiento) 

23. Reducir las peticiones al servidor (Rendimiento) 

24. Usar compresión GZIP (Rendimiento) 

25. Cargar de forma diferida imágenes, vídeos, etc. (Rendimiento) 

26. Evitar los src vacíos (Rendimiento)

27. Precargar el contenido (Rendimiento)

28. Evitar los 404 (Rendimiento)

29. Renderizar la primera carga en el servidor (Rendimiento)

30. No quitar funcionalidad al usuario (Usabilidad )

31. Recordar las acciones del usuario y el estado de la aplicación (Rendimiento)