Yahoo! Blog User Interface (YUIBlog)

Uso carregador em Quorus

Hoje, eu gostaria de falar sobre YUI carregador e como estamos em Quorus, Inc. , usá-lo para fornecer sites de terceiros com novos recursos sob demanda.

O código que escrevemos características poderes nas páginas de outras pessoas, o que significa que estamos na posição de ter não só nenhum controle sobre o ambiente do navegador, mas pesadas restrições na forma como usamos o próprio documento. Nossos clientes colocar um script de inicialização Quorus em suas páginas, tudo o mais necessário para a nossa funcionalidade é carregado de forma dinâmica e on demand. Nós não medimos heróicos para se certificar de que os nossos elementos, estilos e scripts não alteram o comportamento de qualquer coisa que nós não somos responsáveis.

Começamos nossa base de código atual há dois anos, quando YUI 3 foi apenas a tomar forma. Foi uma decisão arriscada no momento de se comprometer com uma base de código que não iria bater beta por vários meses. Em retrospecto, eu não posso imaginar como teríamos feito o que temos sem ele. Eu não tenho visto qualquer outra estrutura que tem componentes que se aproximam do poder de Loader, atributo , e CustomEvent .

O script bootstrap Quorus que prestamos aos nossos clientes não faz quase nada. Seu trabalho é apenas para carregar o núcleo da nossa plataforma, sem bloquear o resto do carregamento da página, e para a fila de qualquer API chama até que tenhamos feito. Esse arquivo de script principal, chamado stage2, inlines yui , loader , e oop , bem como inteligência suficiente para carregar bibliotecas adicionais para responder às chamadas de API, cliques do usuário, e outras condições no ambiente operacional. A maioria dos recursos outros são servidos por um servidor de combinação personalizada que serve personalizado Quorus e módulos de ações YUI.

Bootstrap filas de até API chamadas feitas no código do local de acolhimento, entre quando ele carrega e quando estamos prontos para ir em uma matriz em nosso 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); }; 

Uma vez que estamos prontos para processar chamadas de API, stage2 executa-los um a um em timeouts. Isso garante que produzem regularmente controle volta para o navegador, o que torna a experiência do usuário mais ágil. O comportamento é muito parecido com Y.AsyncQueue, mas mais simples e não requer YUI a ser carregado:

 // 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(); 

O bootstrap arquivo é, por este ponto, principalmente imutável: é algo que a mão para um cliente, que pode exigir um mês ou mais para implantar qualquer nova versão que lhes deu-um tempo muito longo para uma empresa startup ágil. O stage2 arquivo, entretanto, é pequena, as cargas de nossos próprios servidores, e tem uma vida útil curta de cache. Isto assegura que nenhuma utilizador final terá uma versão de idade por mais de alguns minutos. Quase todos os outros recursos de que precisamos estão em bibliotecas permanentemente cacheable JavaScript e CSS.

Quando nós liberamos uma nova versão do nosso código, stage2 direciona automaticamente navegadores para iniciar o download de um novo local, garantindo que eles usam apenas o mais recente código. Esta configuração permite implementar mudanças rapidamente, sem servir-se ativos com mais freqüência do que o necessário. Isso não só manter os nossos custos de largura de banda baixa, mas oferece uma melhor experiência de usuário: os recursos armazenados em cache carregar muito rapidamente, enquanto a página é carregada.

Se nós estávamos começando a nossa base de código hoje, com o benefício da Galeria YUI , há uma série de componentes que podem usar para tornar nossas vidas mais fáceis. Um deles é Eric Ferraiuolo do Component Manager Base de Dados , que auxilia com a fiação dos componentes (tipicamente Widgets) sob demanda. Outro pode ser Armazenamento Lite , para nos ajudar a manter o estado do aplicativo em cargas página.

Muito obrigado à equipe do YUI para sua grande obra, e para a comunidade por suas contribuições. Se você gostaria de ler sobre nossas abordagens para sandboxing ou de coordenar os componentes de forma assíncrona carregados, por favor, deixe-me saber nos comentários!

Sobre o autor: Peter Abrahamsen escreve Ruby e JavaScript, gerencia infraestrutura de servidores, e estudos de design centrado no usuário, em Seattle, Washington, EUA. Ele pode ser encontrado no IRC como Rainhead.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!