Interfaz de usuario de Yahoo! Blog (YUIBlog)

Cargador de Uso en el Quorus

Hoy en día, me gustaría hablar de YUI Loader y cómo nosotros, en Quorus, Inc. , lo utilizan para ofrecer sitios web de terceros con las nuevas características de la demanda.

El código se escribe en las páginas de las características poderes de otras personas, lo que significa que estamos en la posición poco envidiable de tener no sólo no tiene control sobre el entorno del navegador, pero las fuertes restricciones en la manera de utilizar el propio documento. Nuestros clientes poner un script de arranque Quorus en sus páginas, todo lo necesario para nuestra funcionalidad se carga de forma dinámica y bajo demanda. Hacemos todo lo heroico para asegurarse de que nuestros elementos, estilos y secuencias de comandos no modifican el comportamiento de cualquier cosa que no somos responsables.

Comenzamos nuestra base de código actual hace dos años, cuando YUI 3 estaba tomando forma. Fue una decisión arriesgada en el momento en que se comprometan a una base de código que no golpearía beta durante varios meses. En retrospectiva, no puedo imaginar cómo habría logrado lo que tenemos sin ella. No he visto ningún otro marco que tiene componentes que se acercan al poder de Loader, atributos , y CustomEvent .

El script de arranque Quorus que ofrecemos a nuestros clientes no hace casi nada. Su trabajo es sólo para cargar el núcleo de nuestra plataforma sin bloquear el resto de la carga de la página, y la cola de cualquier llamadas a la API hasta que hayamos hecho. Este archivo de script básico, llamado stage2, inline yui , loader , y oop , así como la inteligencia suficiente para cargar bibliotecas adicionales para responder a las llamadas a la API, los clics de los usuarios, y otras condiciones en el entorno operativo. Recursos mayoría de los otros son servidos por un servidor combo personalizado que sirve Quorus personalizado y los módulos de valores YUI.

Bootstrap colas de hasta llamadas API realizadas en el código de la página de acogida entre el momento en que se carga y cuando está listo para ir en una matriz de nuestro objeto global, QUORUS:

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

Una vez que esté listo para procesar llamadas a la API, stage2 los ejecuta uno por uno en los tiempos de espera. Esto asegura que ceder el control regular de vuelta al navegador, lo que hace que la experiencia del usuario más sensible. El comportamiento es muy parecido a Y.AsyncQueue, pero más simple y no requiere de YUI que se cargue:

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

El bootstrap archivo es, en este punto, sobre todo inmutable: es algo que a la mano de un cliente, que puede requerir un mes o más para desplegar una nueva versión que les dio-un tiempo increíblemente largo para una compañía de puesta en marcha ágil. El stage2 archivo, por su parte, es pequeña, las cargas de nuestros propios servidores, y tiene una vida corta caché. Esto asegura que ningún usuario final tiene una versión antigua de más de unos minutos. Casi todos los otros recursos que necesitamos están en las bibliotecas de JavaScript permanentemente cacheable y archivos CSS.

Cuando lanzamos una nueva versión de nuestro código, stage2 dirige automáticamente los navegadores para iniciar la descarga desde una nueva ubicación, asegurando que sólo utilizan la más nueva de código. Esta configuración nos permite implementar los cambios rápidamente sin dar servicio a los activos con más frecuencia de lo necesario. Esto no sólo mantener nuestros costes de ancho de banda bajo, pero ofrece una mejor experiencia de usuario: los recursos almacenados en caché cargan muy rápidamente, mientras que la página se está cargando.

Si empezábamos nuestra base de código de hoy, con el beneficio de la Galería de YUI , hay una serie de componentes que podemos utilizar para hacer nuestras vidas más fáciles. Uno de ellos es Eric Ferraiuolo del Administrador de la Base de componentes , que ayuda con los cables de componentes (por lo general Widgets) en la demanda. Otra podría ser de almacenamiento Lite , que nos ayude a mantener el estado de aplicación a través de la página se carga.

Muchas gracias al equipo de YUI por su gran trabajo, y para la comunidad por sus contribuciones. Si a usted le gusta leer acerca de nuestros enfoques de la caja de arena o para la coordinación de los componentes de forma asíncrona cargados, por favor hágamelo saber en los comentarios!

Sobre el autor: Peter Abrahamsen escribe Ruby y JavaScript, gestiona la infraestructura de servidores, y los estudios de diseño centrado en el usuario, en Seattle, Washington, EE.UU.. Se puede encontrar en el IRC como Rainhead.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar página con del.icio.us | Digg It! | reddit!