Guías de estilos sobre JavaScript y AngularJS

AngularJS-Resources

En estos últimos años me he vuelto un obseso de la limpieza en el código. Durante mis primeras andaduras en el desarrollo sufrí bastante en proyectos que no mantenían un orden estricto o que se encontraban repletos de código espagueti.

No os creáis que estos proyectos de los que hablo eran proyectos desarrollados por otros compañeros, no, lo peor de todo es que por lo general, cuando más sufría era manteniendo código mío. Los primeros meses en la profesión son los típicos de contentarse con que las cosas funcionen y no con que las cosas estén bien hechas y estructuradas.

Empecé a sufrir mi forma de desarrollar muy temprano, cuando pasado un tiempo, tenia que afrontar nuevos evolutivos en mi propio código. El tiempo que dedicaba en leer código y en entender conceptos que yo mismo había ‘picado’ meses atrás, acabo por minarme de tal manera que salía del trabajo a horas intempestivas y por normal general, bastante frustrado.

Por suerte descubrí durante esa etapa grandes libros (como este y este) que me ayudaron bastante a ser consciente que estaba realizando las cosas mal y que tenia que cambiar el chip. Era hora de dejar de echar la culpa a los demás y de asumir que el problema estaba en mi falta de técnica y profesionalidad.

A día de hoy el orden y la limpieza han llegado a ser algo enfermizo y hay veces que se desatan en mi auténticas paranoias, pero los esfuerzos actuales me han servido para ser más feliz y estar más contento del trabajo que hago. Es por ello que cuando encaramos nuevos proyectos o tenemos en mente realizar un nuevo desarrollo en una tecnología en particular, solemos buscar, de gente experimentada, buenas prácticas a realizar por nosotros mismos en dicho framework, librería o lenguaje.

Actualmente en mi equipo, estamos sopesando la posibilidad de usar AngularJS como framework frontend y nos encontramos en una fase de investigación sobre cómo se deben hacer las cosas y en cómo vamos a trabajar como equipo. Muchas veces las buenas prácticas no son más que una serie de convenciones que nos gustan seguir para que nuestro código como equipo quede homogéneo. Estas convenciones nos hacen desarrollar más rápido ya que nadie improvisa y todos sabemos exactamente donde se encuentra cada elemento que comprende nuestra aplicación.

Esta tarea de la que hablamos no es más que la de mantener una guía de estilo. Una guía de estilo es como la biblia para un equipo de desarrollo. Se asemeja a la guía de estilos que pueda tener un periódico. Los periodistas que pertenecen a una editorial en concreto, tienen una serie de pautas a seguir para que el resultado final del periódico sea homogéneo y los texto expongan un nivel de calidad preestablecido. Con los informáticos pasa o debería pasar igual. Las convenciones son importantes y por ello hay que seguirlas a rajatabla, si no se sigue lo marcado el código acaba degradándose.

Como iba diciendo, durante este periodo de investigación hemos dado con dos recursos que a mi parecer son imprescindibles para cualquier programador frontend que trabaje con JavaScript y Angular:

El primero recurso se trata de una guía de estilos muy completa realizada por el equipo de la empresa Airbnb. Su equipo de desarrollo frontend ha decidido aportar su forma de trabajar y en ella podremos encontrar convenciones muy útiles y ver la forma en que trabajan tanto cuando encaran un desarrollo dedicado a ES5 como a ES6. La guía de estilo ha sido traducida a varios idiomas por la comunidad y es, bajo mi punto de vista, un buen sitio por el que empezar si queremos crear por nosotros mismos una guía de estilo para nuestro equipo. La guía la podéis encontrar aquí.

Por otro lado, hemos encontrado un grandísimo recursos en el repositorio público de Github de John Papa. En él encontramos una guía de estilo para desarrollos con AngularJS 1.X muy completa donde se abarcan todas las ‘features’ del framework y donde podemos ver las convenciones que sigue en sus desarrollos. Lo buenísimo de esta guía de estilos es que en cada convención se explican los porqués ellos hacen las cosas así. Al igual que en la guía de estilos JavaScript de Airbnb, la guía muestra ‘snippets’ de código donde se indica las convenciones a evitar y la forma de programarlas recomendada. Sin duda un recurso muy útil incluso para aprender AngularJS. La guía también ha sido traducida por la comunidad en otros idiomas.

Como dice John Papa en esa misma guía, algunas convenciones no son negociables, es decir, que por su experiencia, lo que él explica, se tiene que seguir si o si para obtener aplicaciones de calidad. Pero también explica que muchas otras convenciones son simplemente gustos personales de cómo él desarrolla.

Así que tengamos esto en cuenta: Estos recursos nos son útiles para aprender y evitar errores que otros profesionales experimentados ya han sufrido, pero en muchos casos, nuestro equipo tendrá que imponer su propio criterio y tendrá que ser lo suficientemente honesto como para saber lo que debe copiar de esas guías de estilo y lo que no.

Lo que si está claro, es que una vez se pacte una guía de estilo entre todo el equipo, esta se tendrá que seguir sin ningún tipo de duda o empezarán a surgir los problemas que tantos dolores de cabeza me supusieron hace ya años.

Nos leemos 🙂

Imagen | Back&

Anuncios

4 comments

  1. Pingback: ngCordova: Envolviendo un plugin de Apache Cordova en AngularJS | el.abismo = de[null]
  2. Pingback: AngularJS: Indicando dependencias manualmente | el.abismo = de[null]
  3. rosevelt · enero 6

    hola, me gusta tu blog, pero podrías categorizar los temas de alguna manera, y eliminar ese odioso scroll infinito =P jeje , paginar estaría bien .

    saludos.

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s