24 Mejores prácticas para implementaciones AJAX

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

Dos veces al mes, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores a lo largo de la historia de Nettuts +.

La implementación de la tecnología AJAX puede ser algo acertado o perdido. Hazlo bien y tendrás a los usuarios delirar sobre la maña que proporciona a la experiencia general del usuario, mientras que si lo estropeas, estarás en el extremo receptor de su ira. Aquí hay 24 consejos para guiar a través del proceso de implementación de la tecnología AJAX dentro de su aplicación web.

1. Entender lo que significa todo

Primero, debes entender qué es AJAX, qué significa y cómo ha revolucionado partes de Internet. Tendrá que saber cuáles son sus ventajas antes de poder tomar una decisión informada

Aquí hay una lista de artículos que debe leer para que se ponga al día.

2. Verifique los Escenarios de Uso Apropiado

AJAX puede sonar muy bien pero solo hay muchos lugares donde puedes implementarlo sin que suene como otro punto. Realice las investigaciones y pruebas adecuadas para asegurarse de que está implementando AJAX por las razones correctas. Porque suena bien no es una razón válida.

Los escenarios de uso adecuados serían si usted tiene muchos datos en la parte de atrás y desea actualizar la UI cuando el usuario necesita acceder a esos datos o cuando desea emular una aplicación de escritorio adecuada y manejar todo de manera asincrónica. Un escenario extremadamente malo es cuando usted carga cada página de un sitio web estático a través de AJAX sin ninguna otra razón más que usted. Utiliza tu discreción aquí.

3. Aprender a implementarlo con código bruto

Antes de profundizar en la escritura de su código, entienda el código en bruto para hacerlo primero. Las bibliotecas son excelentes para reducir el tiempo que se tarda en crear un código de navegador independiente, pero cuando se rompe, sería mejor si usted sabe cómo hacerlo sin que las bibliotecas lo ayuden.

Recomiendo encarecidamente los tutoriales de Jeffrey sobre cómo realizar solicitudes AJAX con JavaScript sin procesar aquí y aquí.

4. Usa una biblioteca

Una vez que haya dominado el JS en bruto que maneja las implementaciones de AJAX, lo mejor es que cambie a una biblioteca de JavaScript que proporcione un sólido soporte para AJAX. Cualquiera de las principales bibliotecas como jQuery, Prototype o MooTools debería hacer.

Las bibliotecas no solo proporcionan un conjunto exhaustivo de funciones que puede utilizar, sino que también aseguran que su código sea compatible con todos los navegadores sin tener que hacer nada extra.

Estos son algunos de nuestros favoritos que abarcan la funcionalidad AJAX adecuada:

5. Domina la biblioteca

Una vez que se haya acostumbrado a realizar solicitudes AJAX con su biblioteca de su elección, es hora de llevarlo al siguiente nivel y dominarlo. Puede sonar un poco redundante, pero hay una gran diferencia entre los dos.

Con cada biblioteca cada vez más grande, con más funciones en cada lanzamiento, los desarrolladores esconden una gran cantidad de funcionalidades del desarrollador principiante. Por ejemplo, ¿sabías que hay múltiples métodos en jQuery para hacer llamadas AJAX? ¿O que una cantidad de métodos activados por eventos solo están disponibles con la llamada central AJAX? Mucha gente no sabe eso y, por lo tanto, no puede aprovechar el potencial no explotado de la biblioteca.

Aquí hay algunos recursos de elección para su lectura:

6. Proporcionar comentarios

Una de las principales razones por las que las personas estaban en contra de AJAX en el pasado era que realmente no podían decir cuándo la aplicación actualiza los datos que contiene. Esto también es una parte integral de la experiencia general del usuario que se vuelve aún más pertinente con AJAX.

Por lo tanto, incluso para la cosa más pequeña, recuerde proporcionar retroalimentación al usuario haciéndole saber que su acción ha sido registrada. El usuario ha hecho clic en un botón? ¡Hacerles saber!

7. Utilizar eventos apropiados y funciones de devolución de llamada

Si está utilizando JS sin procesar o una biblioteca para implementar esta funcionalidad, tendrá acceso al estado de la solicitud, es decir, si la solicitud fue exitosa; se encontró con un error y, finalmente, si se ha completado.

Haga un uso adecuado de estos eventos y sus respectivas devoluciones de llamada para manipular la interfaz de usuario para una mejor experiencia de usuario. Por ejemplo, si la solicitud no fue exitosa, querrá actualizar la interfaz de usuario para reflejar que sus cambios no tuvieron éxito, mientras que si fue exitosa, le gustaría que así sea. ¡No deje que el usuario espere!

Con jQuery, harías uso de las devoluciones de llamadas de éxito y error. También obtiene otras devoluciones de llamadas como complete y beforeSend para invocarlas para su uso correcto.

$.ajax({
        //Other code
           success: function(msg)
        {
            // Update the UI here to reflect that the request was successful.
            doSomethingClever();
        },
        error: function(msg)
        {
            // Update the UI here to reflect that the request was unsuccessful
            doSomethingMoreClever();
        },
        complete: function(msg)
        {
            // Update the UI here to reflect completion
            doSomethingEvenMoreClever();
        }
});

- Mostrar texto citado -

8. Elija el formato correcto para el trabajo

El hecho de que XML aparezca en la abreviatura no significa que esté limitado a XML para la carga útil. Usted es libre de elegir el formato que más le guste. JSON? Por supuesto XML? Naturalmente. HTML? Por supuesto. ¿Cuerdas sin procesar? Seguro

Entonces, esencialmente, lo que sea que flote su bote. Usted no está limitado a ningún formato. Puedes elegir el formato que te facilita el trabajo y tiene más sentido para esa instancia específica.

9. Leer extensamente

AJAX, aunque viejo en términos relativos, todavía está muy en flujo. Nuevas soluciones emocionantes se crean todos los días, mientras que a menudo se lanzan libros minuciosamente exhaustivos que cubren el tema. Ya sean blogs de desarrollo web (¡como este!) O libros, siga leyendo para mantenerse informado de los últimos avances.

Estos son mis blogs y libros más visitados y / o leídos:

10. Experimenta continuamente

Leer libro tras libro y artículo tras artículo es increíble, pero para comprender mejor el tema, tendrá que doblarse las mangas y escribir algunos códigos. Confía en mí, aprenderás mucho más rápido leyendo un poco y luego escribirás un código sobre eso que solo leer continuamente sin escribir ningún código para comprender mejor lo que has aprendido.

11. Utiliza Firebug

Firebug es discutible la herramienta más importante en el repertorio de cada desarrollador web. Junto con la depuración impresionante de JavaScript y otras características potentes, también le permite ver cada solicitud de AJAX, ya que está hecha junto con una miríada de otros detalles sobre la solicitud, incluyendo desde dónde se origina, cuál es su carga útil y mucho más. Puedes descargarlo aquí mismo.

Aquí hay algunos recursos más recomendados:

12. Ten en mente a los usuarios con navegadores antiguos

A menos que su aplicación web sea como Google Maps, siempre es una buena idea brindar a los usuarios una alternativa para que puedan seguir utilizando su aplicación. Un buen ejemplo serían las numerosas aplicaciones web que encaminan todas sus interacciones de usuario a través de AJAX si tienen la capacidad, mientras que de lo contrario caen de nuevo a una versión normal de HTML.

13. Bookmarkability

La tendencia a marcar es un hábito generalizado del usuario medio de la web y es imperativo que su aplicación respete eso. Con AJAX, la barra de direcciones del navegador no se actualiza, lo que significa que cuando un usuario desea marcar una página con contenido cargado dinámicamente con AJAX, marcará la página inicial y no la página actualizada. Esto presenta un gran problema.

Afortunadamente, hay algunas técnicas para solucionar este problema. Aquí hay una lista seleccionada de artículos destinados a ayudarlo con eso:

14. Usa las animaciones apropiadas

Este es otro de esos problemas de experiencia del usuario que pueden dañar una aplicación por lo demás espectacular. A menudo, con una aplicación AJAX, el usuario puede dejar de notar que se ha producido un cambio con un elemento de la interfaz de usuario o los datos que contiene. A la luz de este problema, es esencial que el desarrollador utilice animaciones no llamativas y de buen gusto para llamar la atención del usuario sobre el hecho de que la interfaz de usuario se ha actualizado para reflejar las acciones del usuario.

Puede leer sobre cómo usar jQuery para crear animaciones cruzadas de buen gusto aquí.

15. Respeta el botón Atrás

El botón Atrás es otra acción que se ha convertido en parte de los hábitos de un usuario web normal. Asegúrese de que su aplicación cumpla con este paradigma respetado para evitar enojar a los usuarios. Créanme, lo harán, si de repente su botón de retroceso no funciona como se esperaba.

Aquí hay una lista de artículos que deberían ayudarlo con el asunto.

16. Cambiar el DOM de forma inteligente

Imagínese esto: su solicitud ha tenido éxito y ha devuelto una gran cantidad de datos con los que espera actualizar su interfaz de usuario. Si este trozo de datos tiene pocos fragmentos individuales, puede continuar como de costumbre. Si, por el contrario, tiene, por ejemplo, 15 elementos contiguos para actualizar, es mejor crear los elementos, modificar sus datos en la memoria y reemplazarlos en el DOM de una sola vez en vez de acceder a cada elemento y actualizar el DOM cada vez por separado. .

La modificación del DOM por separado conduce a un peor rendimiento a medida que aumenta la cantidad de ediciones que se realizarán.

Entonces, para un pedazo de HTML como ese:

1	<div id="container">
2	<span id="elem1"></span>
3	<span id="elem2"></span>
4	</div>

en lugar de hacer esto:

1	$("#elem1").html("Value 1");
2	$("#elem2").html("Value 2");

Hacer esto:

1	var updatedText = "<span id=\"elem1\">Value1</span>
2	<span id=\"elem2\">Value2</span>";
3	$("#container").html(updatedText);

Puede parecer mucho trabajo para solo dos elementos, pero una vez que lo extrapolamos a más, el rendimiento solo valdrá la pena. Será más rápido ya que actualizará el DOM una sola vez independientemente de la cantidad de elementos que tenga dentro del HTML actualizado. Sin embargo, con el método habitual, el número de ediciones requeridas para el DOM se escala linealmente a la cantidad de elementos que a su vez degrada el rendimiento.

17. Comenta tu código

Esto es obvio, pero comenten su código correctamente. Lo más probable es que algunos cientos de personas vayan a mirar su código, al menos, queriendo aprender de usted y comentar definitivamente ganará sus puntos adicionales de representación y sus cookies de paragón.

No necesariamente necesita comentar cada pedacito de su código; comentar solo los bits importantes es suficiente.

¡Esto es demasiado!

$.ajax({
    // Switch off caching
    cache: false,
       
        //Set the type of request
       type: "GET",
       
        // Set the timeout
    timeout: 5000,
       
        // Specify the proper handler
       url: "handler.php",
       success: function(msg)
        {
           // Update the UI here to reflect that the request was successful.
           doSomethingClever();
        },
        error: function(msg)
        {
           // Update the UI here to reflect that the request was unsuccessful
           doSomethingMoreClever();
        }
});

Una manera mucho mejor de agregar comentarios ya que muchos de ellos se explican por sí mismos.


// Make an AJAX call to handler.php and update the UI
$.ajax({
    cache: false,
       type: "GET",
    timeout: 5000,
       url: "handler.php",
       success: function(msg)
        {
           doSomethingClever();
        },
        error: function(msg)
        {
              doSomethingMoreClever();
        }
});

18. Tome una decisión informada sobre el tipo de solicitud

Esto es estrictamente un consejo general de la aplicación web que específicamente un consejo de AJAX, pero tome nota especial del tipo de solicitud que está realizando: GET o POST. El objeto XMLHttpRequest es capaz de realizar ambos tipos de solicitudes, pero depende de usted decidir qué tipo de solicitudes realizar.

Como sus nombres significan, una solicitud GET se utiliza para obtener datos de una fuente, mientras que una solicitud POST se utiliza para enviar datos a procesar. Con una solicitud AJAX GET, como con una solicitud GET normal, tendrá que pasar los datos de la consulta como parte de la misma URL de forma manual en lugar de una solicitud POST donde los datos se envían automáticamente. También tenga en cuenta que las solicitudes GET se almacenan en caché automáticamente mientras que una solicitud POST no.

19. Use un IDE apropiado

En lo que respecta a JavaScript, no seas elitista y limitate al bloc de notas normal antiguo. Su productividad aumentará drásticamente con el uso de un IDE apropiado, especialmente uno con soporte para su biblioteca de JavaScript de su elección.

Para los leales de PC

Para mis hermanos con sabor a fruta

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4

20. Participa en la Comunidad

Llegar a ser parte de comunidades de desarrollo web increíbles, como este, no solo te expondrá a una gama más amplia de ideas, sino que también te llevará al camino de escribir un mejor código. Al escribir y comentar artículos similares a estos, no solo enseñará a las personas menos conocedoras que usted sobre el tema, sino que también podrá aprender más de las personas más experimentadas que comentan sobre su código.

Como dice Jeff, realmente solo entiendes algo cuando se lo enseñaste a otra persona.

21. Ajuste sus tiempos de respuesta

Por tiempo de respuesta solo quiero decir una cosa: el tiempo antes de que un usuario active una solicitud AJAX. Considere esto, está escribiendo en un cuadro de entrada que utiliza AJAX para recuperar sugerencias de búsqueda del servidor. El tiempo de respuesta sería el tiempo que transcurre entre la pulsación de la tecla y la llamada AJAX. Too fast and you'd have to do multiple requests for each letter of the search phrase. Demasiado lento y tendrás al usuario moviendo los pulgares preguntándose cómo rompió la aplicación.

Esto no se limita al escenario indicado anteriormente. Esto se aplica a todas y cada una de las acciones de usuario no definidas (clic). Pruebe rigurosamente con sus usuarios para encontrar la latencia óptima.

22. Usa indicadores de estado

Esta es una extensión de un punto señalado anteriormente pero igual de importante. Los usuarios que provienen de la aplicación de escritorio o de un paradigma general de aplicaciones web quedarán desconcertados cuando utilicen una aplicación web habilitada para AJAX. Si bien notificar al usuario cuando se ha realizado un cambio es bueno, también deberá asegurarse de informarles que se ha iniciado una solicitud en primer lugar.

Aquí es donde entran los indicadores de estado. Estos son los pequeños GIF giratorios o rebotes que se ven en las aplicaciones. En la función, estos son similares al cursor de reloj de arena que se usa en los sistemas operativos de escritorio.

Aquí hay una pequeña herramienta maravillosa que le permite crear un indicador de su elección.

23. Apreciar la Awesomeness de JSON-P

A menudo, como parte del mashup cross site que estás creando, necesitarás acceder a datos de otros sitios a través de solicitudes AJAX. Esto vuela directamente en vista de la restricción de dominio cruzado que la mayoría de los navegadores imponen. En este caso, en lugar de ir con soluciones exóticas como el enmascaramiento y el proxy, puedes usar JSON-P.

JSON-P, JSON con Padding, esencialmente nos permite eludir esta restricción y nos permite obtener datos de dominios de terceros. Aquí hay una lista de artículos para comenzar:

24. Haga preguntas libremente

No seas tímido para hacer preguntas. Cada uno de nosotros comenzó como un novato completo y comenzó haciendo preguntas. Hay muchos lugares para aclarar sus dudas, incluida la sección de comentarios de Nettuts +. Nunca, nunca tengas miedo de hacer preguntas. ¡Solo trata de ser un poco educado! Siempre ayuda.

Eso es todo amigos

Y terminamos. Veinticuatro puntos para tener en cuenta al implementar AJAX en su sitio o aplicación web. Afortunadamente, esto ha sido útil para ti y lo has encontrado interesante. Estaré observando de cerca la sección de comentarios para que suene allí si tiene argumentos en contra o diferentes perspectivas sobre el asunto.

¿Preguntas? Cosas buenas para decir? Criticas? Ve a la sección de comentarios y déjame un comentario. Feliz codificación!

Escribir un Tutorial Plus

¿Sabía que puede ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros? Estamos buscando tutoriales en profundidad y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tiene la capacidad, comuníquese con Jeffrey en nettuts@tutsplus.com.

Tenga en cuenta que la compensación real dependerá de la calidad del tutorial final y el screencast.

Síganos en Twitter o suscríbase a la fuente RSS de Nettuts para obtener los mejores tutoriales de desarrollo web en la web.