Асинхронная модульность в API Яндекс.Карт — Александр Зинчук
1 like898 views
Документ обсуждает асинхронную модульность в API Яндекс.Карт, включая выбор между различными модульными системами, такими как CommonJS, AMD и собственная система ym. Рассматриваются требования к асинхронной загрузке модулей, использование заглушек и оптимизация процессов сборки JavaScript и CSS. Также упоминаются инструменты, такие как ym-builder, для упрощения сборки и управления модулями.
![14
〉Модульная система / Что выбрать?
!
—
CommonJS
!
— AMD
!
define([
'http', 'express', 'config'
], function (http, express, config) {
/* ... module goes here ... */
!
return server;
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-14-320.jpg)
![16
〉Модульная система / Что выбрать?
!
—
CommonJS
!
— AMD
!
— YM
modules.define('server', [
'http', 'express', 'config'
], function (provide, http, express, config) {
/* ... module goes here ... */
!
setTimeout(function () {
/* ... and then here ... */
!
provide(server);
}, 3000);
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-16-320.jpg)
![17
〉Модульная система / Что выбрать?
!
—
CommonJS
!
— AMD
!
— YM
modules.define('server', [
'http', 'express', 'config'
], function (provide, http, express, config) {
/* ... module goes here ... */
https://github.com/ymaps/modules
!
setTimeout(function () {
/* ... and then here ... */
!
provide(server);
}, 3000);
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-17-320.jpg)
![21
〉Модульная система YM / Зачем?
modules.define('jquery', [
Зависимости от не-модулей
'loader'
], function (provide, loader) {
loader(
'//yandex.st/jquery/2.1.0/jquery.min.js',
function () { provide(jQuery.noConflict(true)); }
);
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-21-320.jpg)
![23
〉Модульная система YM / Зачем?
modules.define('ymaps', [
'loader', 'config'
], function (provide, loader, config) {
loader(config.hosts.ymaps_api, function () {
ymaps.ready(function () {
provide(ymaps);
});
Зависимости от асинхронных процессов
});
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-23-320.jpg)
![24
〉Модульная система YM / Зачем?
modules.define('DomEventManager', [
'browser'
], function (provide, browser) {
var implementation = browser.oldIE ?
'domEventManager/OldIE' :
'domEventManager/Standard';
Зависимости от среды исполнения
!
modules.require(implementation, provide);
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-24-320.jpg)
![25
〉Модульная система YM / Зачем?
/* Balloon.js */
// ...
getOverlay: function () {
return this._overlayPromise ||
modules.require(this.options.get('overlay'))
.then(this._createOverlay, this);
Загрузка кода по требованию
}
/* BalloonOverlay.js */
modules.define('BalloonOverlay', [
'moduleLoader'
], function (provide, moduleLoader) {
moduleLoader.load('BalloonOverlay', provide);
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-25-320.jpg)
![37
〉Сборка / ym-builder
> ym-builder [build] [DIR=.]
> ym-builder watch [DIR=.]
> ym-builder configure [DIR=.] [=build.json] [gulpfile] [-f]
> ym-builder help](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-37-320.jpg)
![Отложенная инициализация: использование заглушки
41
〉Modules Plus / Асинхоронная загрузка
/* Balloon.js */
// ...
getOverlay: function () {
return this._overlayPromise ||
modules.require(this.options.get('overlay'))
.then(this._createOverlay, this);
}
/* BalloonOverlay.js */
modules.define('BalloonOverlay', [
'moduleLoader'
], function (provide, moduleLoader) {
moduleLoader.load('BalloonOverlay', provide);
});](https://image.slidesharecdn.com/kiev2014zinchuk-141121161047-conversion-gate01/85/API-41-320.jpg)
Асинхронная модульность в API Яндекс.Карт — Александр Зинчук
- 2. Асинхронная модульность в API Яндекс.Карт Александр Зинчук ! Я.Субботник, Киев, 22.11.2014
- 4. 1815
- 5. 〉1815
- 6. 〉1815
- 8. 1815 ?
- 10. 10 〉Модульная система / Что это?
- 11. 11 〉Модульная система / Что это?
- 12. Что выбрать?
- 13. 13 〉Модульная система / Что выбрать? ! — CommonJS ! ! var http = require('http'), express = require('express'), config = require('./config'); ! module.exports = setupServer(); ! function setupServer () { /* ... module goes here ... */ }
- 14. 14 〉Модульная система / Что выбрать? ! — CommonJS ! — AMD ! define([ 'http', 'express', 'config' ], function (http, express, config) { /* ... module goes here ... */ ! return server; });
- 15. 15 〉Модульная система / Что выбрать? / Требования 1. Асинхронный require ! 2. Асинхронный provide ! 3. Возможность расширить или заменить модуль
- 16. 16 〉Модульная система / Что выбрать? ! — CommonJS ! — AMD ! — YM modules.define('server', [ 'http', 'express', 'config' ], function (provide, http, express, config) { /* ... module goes here ... */ ! setTimeout(function () { /* ... and then here ... */ ! provide(server); }, 3000); });
- 17. 17 〉Модульная система / Что выбрать? ! — CommonJS ! — AMD ! — YM modules.define('server', [ 'http', 'express', 'config' ], function (provide, http, express, config) { /* ... module goes here ... */ https://github.com/ymaps/modules ! setTimeout(function () { /* ... and then here ... */ ! provide(server); }, 3000); });
- 18. 18 〉Модульная система / Что выбрать? EcmaScript 6 Modules http://www.2ality.com/2014/09/es6-modules-final.html
- 19. Зачем?
- 20. 20 〉Модульная система YM / Зачем? Зависимости от не-модулей
- 21. 21 〉Модульная система YM / Зачем? modules.define('jquery', [ Зависимости от не-модулей 'loader' ], function (provide, loader) { loader( '//yandex.st/jquery/2.1.0/jquery.min.js', function () { provide(jQuery.noConflict(true)); } ); });
- 22. 22 〉Модульная система YM / Зачем? Зависимости от асинхронных процессов
- 23. 23 〉Модульная система YM / Зачем? modules.define('ymaps', [ 'loader', 'config' ], function (provide, loader, config) { loader(config.hosts.ymaps_api, function () { ymaps.ready(function () { provide(ymaps); }); Зависимости от асинхронных процессов }); });
- 24. 24 〉Модульная система YM / Зачем? modules.define('DomEventManager', [ 'browser' ], function (provide, browser) { var implementation = browser.oldIE ? 'domEventManager/OldIE' : 'domEventManager/Standard'; Зависимости от среды исполнения ! modules.require(implementation, provide); });
- 25. 25 〉Модульная система YM / Зачем? /* Balloon.js */ // ... getOverlay: function () { return this._overlayPromise || modules.require(this.options.get('overlay')) .then(this._createOverlay, this); Загрузка кода по требованию } /* BalloonOverlay.js */ modules.define('BalloonOverlay', [ 'moduleLoader' ], function (provide, moduleLoader) { moduleLoader.load('BalloonOverlay', provide); });
- 26. Сборка
- 27. 〉Сборка
- 28. 28 〉Сборка •JS ! •CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI ! •Шаблоны — Прекомпиляция — Оборачивание в модуль •Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs) ! !
- 29. 29 〉Сборка •JS ! •CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI ! •Шаблоны — Прекомпиляция — Оборачивание в модуль •Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs) ! !
- 30. 30 〉Сборка •JS ! •CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI ! •Шаблоны — Прекомпиляция — Оборачивание в модуль •Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs) ! !
- 31. 31 〉Сборка •JS ! •CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI ! •Шаблоны — Прекомпиляция — Оборачивание в модуль •Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs) ! !
- 32. 32 〉Сборка •JS ! •CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI ! •Шаблоны — Прекомпиляция — Оборачивание в модуль •Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs) ! !
- 33. Что выбрать?
- 34. 34 〉Сборка / Что выбрать?
- 35. 35 〉Сборка / ym-builder + плагины + gulpfile + build.json = ym-builder http://github.com/yandex/ym-builder http://npmjs.org/package/ym-builder
- 36. 36 〉Сборка / ym-builder > ym-builder .
- 37. 37 〉Сборка / ym-builder > ym-builder [build] [DIR=.] > ym-builder watch [DIR=.] > ym-builder configure [DIR=.] [=build.json] [gulpfile] [-f] > ym-builder help
- 39. Modules Plus ! YM + Promises + Загрузчик модулей https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/modules-docpage/ https://tech.yandex.ru/maps/jsbox/2.1/module_request
- 40. 40 〉Модульная система / Что выбрать? / Требования 1. Асинхронный require ! 2. Асинхронный provide ! 3. Возможность расширить или заменить модуль
- 41. Отложенная инициализация: использование заглушки 41 〉Modules Plus / Асинхоронная загрузка /* Balloon.js */ // ... getOverlay: function () { return this._overlayPromise || modules.require(this.options.get('overlay')) .then(this._createOverlay, this); } /* BalloonOverlay.js */ modules.define('BalloonOverlay', [ 'moduleLoader' ], function (provide, moduleLoader) { moduleLoader.load('BalloonOverlay', provide); });
- 42. 42 〉Modules Plus / Асинхоронная загрузка •На сервере — Формирование списка модулей ! •На клиенте — Создание заглушек, вызывающих загрузчик — Первый запрос к combine.xml: загрузка содержимого load — Последующая загрузка по запросу
- 43. Контакты Александр Зинчук Разработчик интерфейсов @ajaxy_ru zinchuk@yandex- alx.zinchuk