YUI 3 - модульная архитектура и динамическая загрузка приложения от Yahoo! Пётр Мязин

YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.

YUI 2 jQuery ExtJS 3 YUI 3 AngularJS Веб-решения для управления логистикой и цепями поставок в международной компании экспедиторе Panalpina. Представительства в 80 странах мира. Мы делаем динамические интерфесы с большим количеством виджетов и интерактива. Основные JS виджеты – это различные калькуляторы тарифов перевозок, быстрый поиск и ввод информации о грузах.

История развития Основные возможности Поддерживаемые платформы Статическая загрузка vs динамическая загрузка Динамическая загрузка самого фреймворка Создание своих модулей в стиле YUI Описание зависимостей между модулями Динамическая загрузка сторонних библиотек

2005 – внутренняя разработка Yahoo! 2006 февраль – первый публичный релиз YUI сентябрь - релиз переписанного с нуля YUI 3.0

2006 – yui-ext как дополнительный набор виджетов к YUI 2006 осень – библиотека приобретает популярность и начинает называться просто Ext 2007 – ExtJS 1.0

Кроссбраузерная работа с DOM и событиями Анимации Утилиты (Handelbars, History, Uploader, Pjax, Promise, …) Виджеты (Autocomplete, Charts, DataTable, Panel, TabView, …) App Framework MVC Routing Y.Test – более тестов Сборка с использованием Grunt, минификация Uglifyjs Открытая модель разработки через github Yahoo! CDN Лицензия BSD Основные возможности

Поддержка браузеров

WidgetA.js Core.js Library.js Core.css WidgetB.js B1.jsB2.js WidgetA.css

Статическая загрузка или или

Динамическая загрузка Хотим загружать js и css по событиям от пользователя Все зависимости должны разрешаться автоматически Если какой-то из модулей уже загружен, повторно не загружаем Асинхронная загрузка

Динамическая загрузка – вручную var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "/js/myfile.js"; var head = document.getElementsByTagName("head")[0]; head.appendChild(s);

Динамическая загрузка в YUI Библиотека разделена на ~250 модулей Каждый модуль – это отдельный js или css файл Между модулями существуют зависимости yui-min.js – базовый файл, который знает всю карту зависимостей и умеет загружать модули динамически По умолчанию файлы модулей загружаются из Yahoo! CDN Загрузчик отправляет ОДИН http запрос к CDN с указанием всех требуемых модулей, получает минифицированную сборку

// Create a YUI sandbox on your page. YUI().use('node', 'event', function (Y) { // The Node and Event modules are loaded and ready to use. // Your code goes here! }); // Put the YUI seed file on your page. Динамическая загрузка – с помощью YUI

YUI().use('transition', function (Y) { // Fade away. Y.one('#fademe').transition({ duration: 1, // seconds opacity : 0 }); // Shrink to nothing. Y.one('#shrinkme').transition({ duration: 1, // seconds width : 0, height : 0 }); // Put the YUI seed file on your page.

1. yui-base (34.78 KB) 2. oop (2.14 KB) 3. features (4.90 KB) 4. dom-core (2.58 KB) 5. dom-base (6.16 KB) 6. color-base (2.98 KB) 7. dom-style (2.27 KB) 8. event-custom-base (11.95 KB) 9. selector-native (3.37 KB) 10. selector (0.08 KB) 11. node-core (9.52 KB) 12. node-base (6.11 KB) 13. event-base (7.17 KB) 14. node-style (0.48 KB) 15. transition (7.15 KB)

YUI.add('my-module', function (Y) { // Write your module code here, and make your module available on the Y // object if desired. Y.MyModule = { sayHello: function () { console.log('Hello!'); } }; }, '0.0.1', { requires: ['node', 'event'] }); YUI().use('my-module', function (Y) { // The Y instance here is the same Y instance that was passed into // my-module's add() callback, so the Y.MyModule object that was created // there is now available here as well. Y.MyModule.sayHello(); }); Опишем модуль в отдельном файле Используем его на основной странице

YUI.applyConfig({ "groups":{ "mylibs":{ "base": "path/to/jsfiles/", "modules":{ "my-module":{ "path":"MyModuleFile.js", "requires":["node", "event"] } }); Чтобы загрузчик знал откуда загружать наши собственные модули, нужно описать карту зависимостей и путей

WidgetA.js Core.js Library.js Core.css WidgetB.js B1.jsB2.js WidgetA.css

"my-app-css": { base: "path/to/css/", modules: { "core-css": { path: "Core.css" }, "widget-a-css": { path: "WidgetA.css" } "my-app": { base: "path/to/js/", modules: { "core": { path: "Core.js", requires:["core-css"] }, "library": { path: "Library.js", requires:["core"] }, "widget-a": { path: "WidgetA.js", requires:["library", "widget-a-css"] }, "b1": { path: "B1.js", requires:["library"] }, "b2": { path: "B2.js", requires:["library"] }, "widget-b": { path: "WidgetB.js", requires:["b1", "b2"] }

YUI.add('widget-b', function (Y) { //Этот код не будет запущен //пока все зависимости не будут удовлетворены }, '0.0.1', { requires: ['b1', 'b2'] }); Файл WidgetB.js

Описывая карту зависимостей, можно: Загружать файлы по одному или через комбо- загрузчик (одинм http запросом) Загружать raw, min или debug версии (к файлам будут добавлены суффиксы) Загружать или нет на основе теста фич браузера (разные версии модуля под разные браузеры) Разбить модули на группы и к каждой группе применить свой комплекс настроек

Динамическая загрузка сторонних библиотек YUI.applyConfig({ "groups":{ "select2": { async: false, modules: { "select2": { path: "select2.min.js", requires: ["select2-css"] }, "select2-css": { path: "select2.css", type: "css" } });

YUI Gallery – хостинг своих модулей в Yahoo! CDN Инструменты shifter и yogi (node.js) помогают создать и покрыть тестами собственный YUI модуль Можно опубликовать свой модуль в YUI Gallery Любой разработчик может использовать модуль из YUI Gallery YUI().use("gallery-myawesomemodule", function(Y) { Y.MyAwesomeModule.sayHallo(); });

История развития Основные возможности Поддерживаемые платформы Статическая загрузка vs динамическая загрузка Динамическая загрузка самого фреймворка Создание своих модулей в стиле YUI Описание зависимостей между модулями Динамическая загрузка сторонних библиотек