Consejos para Enfrentar un Proyecto Web – Javascript

Nota: Este post es parte de una serie titulada Consejos para Enfrentar un Proyecto Web y viene después de Del Mockup al CSS

Una de las cosas más importantes y potencialmente peligrosas del mundo web actual es el uso de Javascript. La aparición de frameworks como jQuery, MooTools, Prototype, YUI, etc., le han dado nueva vida a este lenguaje que solía ser un gran dolor de cabeza, sobre todo para nóveles programadores, por la dificultad para comprender el DOM, lo tedioso que significaba hacer cosas realmente serias (más allá de hacer una ventana pop-up con un tamaño determinado y poco más) y los problemas que implicaba hacer un código crossbrowser.
A esto se le une AJAX, este conjunto de tecnologías que, al combinarlas, nos permiten manipular datos vía javascript de forma asíncrona y sin necesidad de refrescar toda la página. La aparición en nuestras vidas de Gmail (de honorable memoria) fue el fenómeno que realmente nos hizo pronunciar las palabras mágicas de todo buen geek: AJAX FTW!
Claro, no todo es dulzura en las intarwbz. La facilidad en la que se ha convertido el uso de javascript (sobre todo por librerías como jQuery) también ha sido motivo del abuso que se ha hecho de él. Evitar esos abusos será la misión de este post.

  1. Dile No al javascript obstrusivo

    Uno de los grandes males que han hecho a la humanidad editores como Dreamweaver (y yo amo a DW) es la utilización de javascript dentro del HTML (lo que se conoce como javascript obstrusivo). Nunca será suficiente decir que combinar XHTML con CSS y Javascript en la misma página es una terrible idea. Afortunadamente, es una práctica que va desapareciendo, pero es común verla sobre todo en quienes comienzan. Entonces, para evitar eso, digásmoslo de una vez: El código javascript (todo el código) debe ir en su archivo correspondiente, jamás mezclado con el HTML. Luego podrás llamarlo desde tu página usando la etiqueta <script></script>.

  2. Comenta tu código, no seas perezoso(a)

    Cuando escribimos código -confesémoslo- tenemos la costumbre de hacerlo todo de una vez (o al menos a una velocidad que nos permite rápidamente saber qué hacemos), sin embargo solemos pagar el precio de no haber hecho comentarios cuando tenemos que revisarlo después de un tiempo (que puede ser un mes o menos incluso) y no nos acordamos de qué fue lo que hicimos o, peor aún, cómo demonios hicimos que funcionara.
    Sí, es cierto, debemos mantener los archivos lo menos pesados que podamos, cada línea cuenta y cada byte también pero -y para ello está los dos puntos siguientes- nuestros archivos deben ser reusables (no tiene ninguna gracia tener que escribir el mismo código una y otra vez) y en ello hacer comentarios es invaluable. Esto es doblemente importante si estamos hablando de un plugin, por ejemplo, que puede luego ser utilizado por otros. No es nada agradable tener que adivinar cómo lograste curar el cáncer por medio de javascript.
    No es tampoco que tengas que escribir un tratado sobre tu código. Pequeños y precisos comentarios serán suficientes. Recuerda: keep it simple.

  3. Descomprimido para desarrollo, comprimido para producción.

    En nuestra lucha de mantener nuestros archivos al mínimo, una gran herramienta es la posibilidad de comprimir nuestros archivos. Al hacer esto, eliminamos tanto los comentarios como los espacios en blanco innecesarios, reduciendo por suspuesto el tamaño del archivo.
    El inconveniente que tiene esto, sobre todo a la hora de volver a nuestro js para hacer cambios, adiciones y/o mejoras a nuestro código es que éste será -cuando menos- difícilmente comprensible por nosotros mismos, cuando no ilegible. Es por eso que prefiero mantener mis archivos originales intactos (con sus comentarios, saltos de línea y formato) y una versión comprimida que será la que irá al servidor de producción. De esta manera siempre puedo hacer los cambios que necesite sin comprometer mi (poca) salud mental ni mi maltratada vista.
    Para hacer esto hay cientos de herramientas: compresores online, scripts php (como el proyecto Minify) o add-ons de Firefox (como Page Speed). Excepto en el caso de Minify, que se encarga de hacer la compresión al vuelo haciendo innecesario crear archivos comprimidos aparte, puedes mantener tus archivos en una carpeta (en mi caso los pongo dentro de una carpeta llamada _development, dentro de la carpeta js) y subir sólo los archivos comprimidos, teniendo lo mejor de ambos mundos.
    Valga el comercial no pagado, si usas Firefox y no tienes Page Speed realmente te recomiendo que lo pruebes. Yo solía usar el add-on de Yahoo!, YSlow, pero Page Speed tiene varias mejoras respecto a éste que me hicieron cambiarme. Que se encargue de comprimir los js y css es una de ellas.

  4. Mantén tu código en un sólo archivo

    Sobre todo cuando trabajamos con algún framework e incluímos uno o más plugins, tenemos el problema de tener varios archivos, cada uno para cada cosa. Como decía antes, esto es muy bueno para el desarrollo, pero con un costo innecesario en archivos por descargar en producción. Nuevamente en este caso, Minify se encarga de unir todos los archivos por nosotros, pero si por alguna razón no podemos o no queremos usar esta herramienta (personalmente he tenido ciertos problemas cuando no tengo tiempo de sentarme a resolverlos, pero sé de gente -seguramente más lista e inteligente- que lo usa sin inconveniente alguno). En caso de hacerlo a mano, bien podemos crear un nuevo archivo donde colocaremos todo nuestro código comprimido, siendo éste el que subiremos al servidor. Recuerda que nuestro objetivo final no es sólo hacer que nuestros archivos pesen lo menos posible sino reducir también las llamadas al servidor, mientras menos llamadas, mejor.

  5. Javascript no es CSS, favor no confundir

    A medida que javascript se hace más sencillo de trabajar y en consecuencia más poderoso -entre otras cosas- para manipular el DOM, es muy fácil abusar de sus bondades sobre todo a la hora de manipular el contenido (por medio de AJAX, por ejemplo) o el aspecto visual (haciendo que javascript reemplace atributos CSS o usando algún método de reemplazo de fuentes, como Cufón).
    Volveré al viejo tema: Progressive Enhancement, añade no sustituyas, crea pensando en lo más básico y luego añade funcionalidad a medida que el browser cliente pueda aceptarla.
    Si la pereza o la emoción te hacen olvidar que es CSS y no a Javascript a quien le corresponde el aspecto visual le darás una pobre experiencia a los usuarios que por alguna razón no puedan activar javascript en sus browsers o simplemente estos no lo soporten.
    Si hablamos de contenido. Es claramente un error grave respecto a SEO y semántica. No olviden que los buscadores (y los exploradores para ciegos) no pueden leer javascript.
    ¿Cuál es la solución entonces? Lo que he dicho antes, trabaja en base a un buen CSS y luego utiliza javascript para mejorar la experiencia de usuario, tanto a nivel visual como de funcionalidad.
    Hay, sin embargo, una excepción a esto y es cuando por razones de seguridad deseas epecíficamente que ciertos elementos no se presenten si no está activado javascript, como por ejemplo, para permitir comentarios o mostrar una dirección de correo electrónico de la que no quieres que se enteren los bots de spam.

  6. Carga el javascript al final de tu (X)HTML

    Si bien lo normal es cargar el CSS dentro de la etiqueta head, en el caso de los archivos javscript se recomienda que sean cargados al final del archivo. La razón principal para hacer esto es que te permite cargar todo el contenido y los estilos antes de la funcionalidad, evitando que el usuario deba esperar a que el código también se cargue para comenzar a ver algo de tu sitio. Recuerda, el internauta es un ser impaciente, apenas tienes unos 5 segundos para evitar que tus usuarios abandonen tu sitio para navegar por otras tierras que no le hagan esperar una eternidad

  7. No todo requiere un plugin

    Ya que estamos con el tema de los frameworks (aquí debo decir que yo sólo conozco jQuery, así que soy completamente ignorante respecto a otros frameworks de javascript) hay que hablar de otro vicio: el uso indiscriminado de plugins.
    Es cierto que son geniales y que te ahorran mucho trabajo (sobre todo cuando los tiempos no te dan para mucho), pero precisamente su generalidad en algunos casos resulta un problema porque aumentan innecesariamente el peso de nuestro javascript. En muchos casos resulta mejor (y a veces incluso más fácil) escribir tu propio código. Sé que al principio puede resultar complicado y arduo, pero ciertamente ganarás en ahorro de código y aprendizaje. En caso que no sea posible (o no tengas ganas de arrancar desde cero) puedes hacer el camino contrario, adaptándolo a tus necesidades y eliminando el código que no necesites.

Y bueno, esto será todo esta vez. Si piensan que me dejé algo en el tintero (que seguro lo hice) o hay alguna cosa sobre la que quisieran que conversáramos, me encantaría leer sus comentarios.

, , , ,

6 pensamientos en “Consejos para Enfrentar un Proyecto Web – Javascript

  1. Pingback: Tweets that mention Consejos para Enfrentar un Proyecto Web – Javascript « El Aprendiz… -- Topsy.com

  2. Algunas acotaciones:
    Comprimir tus archivos es correcto, pero hay algunos navegadores que presentarán problemas con ellos.

    Y la mejor solución para que lleguen siempre compresos, es configurar Gzip en tu servidor web. Claro que comprimir tú mismo tus archivos es una solución si no tienes acceso al servidor, pero nunca está de más verificar como funciona. Un archivo .js compreso con Gzip y previamente minimizado (eliminando comentarios, espacios en blanco y demás) se puede reducir en casi 70%.

    Para reducir los HTTP Request mantener los archivos en uno sólo es lo idea. Una práctica relativamente común es tener un script php que retorne el MIME type correcto para CSS, uniendo todos los archivos de una carpeta, verificando su mdate para asignarle alguna cadena (para obtener digamos all.js?20091123) y almacenándolo como archivo estático para no tener que hacerlo una vez más (salvo que el mdate haya variado). Así no tienes que preocuparte de usar una herramienta que pueda presentar tal vez fallos.

    Finalmente, sobre el hecho de colocar los archivos js al final, totalmente de acuerdo. Incluso sería más directo y diría que si no lo haces, cometes un error. No es sólo que ponerlos abajo permite que el contenido aparezca antes. Ese es el resultado, sí, pero el problema es como los navegadores realizan los llamados cuando ven la etiqueta script.

    Primero que nada, olvídate de tus descargas en paralelo. Apenas lee un script, dejará de hacer otra cosa, por más hosts que hayas configurado o si también hay imágenes pesadas.

    Y lo peor, no continuará cargando el resto del contenido hasta que no haya realizado el parsing de tu archivo. Así, si incluso has minimizado el JS y lo tienes en un servidor rápido, si es un código complejo en estructura igual se penalizará.

    Siempre es mejor cargarlo de manera indirecta, y si necesitas asociar eventos, realizarlo con un late-binding que frameworks como jQuery manejan muy bien.

  3. Pingback: Consejos para Enfrentar un Proyecto Web – Javascript | SinapsysMx.Net

  4. Pingback: Consejos para Enfrentar un Proyecto Web – Javascript | GrupoHidalgo.com

Deja un comentario

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