Yahoo! Пользовательский интерфейс блог (YUIBlog)

Погрузчик использования в Quorus

24 марта 2011 в 9:49 Петром Абрахамсен | В Развития , YUI Реализации | 1 Комментарий

Сегодня я хотел бы поговорить о YUI Loader и как мы на Quorus, Inc , использовать ее для сторонних веб-сайтов с новыми возможностями по требованию.

Код мы пишем полномочия функций на страницах других народов, означает, что мы находимся в незавидном положении, не только не контролирует среды браузера, но жесткие ограничения в том, как мы используем самого документа. Наши клиенты положить Quorus сценария начальной загрузки на своих страницах, а все остальное необходимое для нашей функциональности загружаются динамически, и по требованию. Идем к героической длины, чтобы убедиться, что наши элементы, стили и скрипты не изменяют поведение ничего мы не ответственны.

Мы начали наше настоящее базу кода два года назад, когда YUI 3 был только формируются. Это было рискованное решение на время взять на себя обязательство коде, который не ударит по бета-версии в течение нескольких месяцев. Оглядываясь назад, я не могу себе представить, как бы мы добились того, что мы без него. Я не видел никакой другой основы, которая имеет компоненты приближается сила Loader, атрибутов и CustomEvent .

Сценарий Quorus загрузки мы предоставляем нашим клиентам практически ничего не делает. Его задача состоит как раз, чтобы загрузить ядро ​​нашей платформы, не блокируя остальные загрузке страницы, и стоять в очереди любых API вызовы, пока мы не сделали этого. Этот файл основной сценарий, называется stage2, инлайны yui , loader и oop , а также достаточно ум для загрузки дополнительных библиотек для ответа на вызовы API, пользователь щелкает, и другие условия в операционной среде. Большинство других ресурсов обслуживает собственный сервер комбо, который служит обычай Quorus и фондовых YUI модулей.

Bootstrap в очередь API вызовы в коде хост-сайта в период с при загрузке и когда мы готовы идти в массиве на наш глобальный объект, 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); }; 

Как только мы будем готовы начать процесс API вызовы, stage2 запускает их по одному в тайм-ауты. Это гарантирует нам выход контроля регулярно обратно в браузер, что делает работу пользователя более отзывчивыми. Поведение во многом напоминает Ю. AsyncQueue, но проще и не требует YUI для загрузки:

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

bootstrap файла, к этому времени, в основном неизменным: это то, что мы на руки от клиента, который может потребоваться месяц или больше, чтобы развернуть какой-либо новой версии мы дали им-невероятно много времени, гибкие компании запуске. stage2 файл, тем временем, небольшие, грузы из наших серверов, и имеет малое время жизни кэша. Это гарантирует, что ни конечный пользователь будет иметь старой версии для более чем несколько минут. Почти все другие ресурсы, мы должны постоянно находятся в кэшируемый библиотек JavaScript и CSS файлы.

Когда мы выпускаем новую версию нашего кода, stage2 автоматически направляет браузер, чтобы начать загрузку с новое место, гарантируя, что они используют только новейшие кода. Эта установка позволяет развернуть изменения быстро, не подавая активов чаще, чем это необходимо. Это не только сэкономить наши пропускной способности низкий, но он обеспечивает лучший пользовательский опыт: кэшированные ресурсы загружаются очень быстро, пока страница загружается.

Если мы начинали нашу кодовую базу сегодня, благо Галерея YUI , Есть целый ряд компонентов, которые мы могли бы использовать, чтобы сделать нашу жизнь легче. Одним из них является Эрик Ferraiuolo в компонентной базы менеджер , который помогает с проводкой до компонентов (как правило, Widgets) по требованию. Другой может быть хранения Lite , которые помогают нам сохранять состояние приложения по загрузке страницы.

Большое спасибо команде Юй за их большую работу, и того коллектива, за их вклад. Если вы хотите прочитать о наших подходах к песочницы или координации асинхронно загружаемых компонентов, пожалуйста, дайте мне знать в комментариях!

Об авторе: Питер Абрахамсен пишет Руби и JavaScript, управление серверной инфраструктурой, а также исследования, ориентированного на пользователя дизайна в Сиэтле, штат Вашингтон, США. Его можно найти на IRC как Rainhead.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!