Асинхронная модульность в api Яндекс.Карт — Александр...
DESCRIPTION
Я расскажу о том, как мы выбирали модульную систему для API и почему возникла такая необходимость, а также о способах эффективно подгружать и инициализировать модули по запросу. Ещё мы обсудим, что такое предиктор и как использовать все эти наработки при написании плагинов к API Карт и в собственных проектах.TRANSCRIPT
![Page 1: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/1.jpg)
![Page 2: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/2.jpg)
Асинхронная модульность в API Яндекс.Карт
Александр Зинчук !Я.Субботник, Киев, 22.11.2014
![Page 3: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/3.jpg)
![Page 4: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/4.jpg)
1815
![Page 5: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/5.jpg)
〉1815
![Page 6: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/6.jpg)
〉1815
![Page 7: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/7.jpg)
Ада Лавлейс
〉1815
![Page 8: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/8.jpg)
1815 ?
![Page 9: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/9.jpg)
Модульная система
![Page 10: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/10.jpg)
10
〉Модульная система / Что это?
![Page 11: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/11.jpg)
11
〉Модульная система / Что это?
![Page 12: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/12.jpg)
Что выбрать?
![Page 13: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/13.jpg)
13
〉Модульная система / Что выбрать?
!
— CommonJS !
!
var http = require('http'), express = require('express'), config = require('./config'); !module.exports = setupServer(); !function setupServer () { /* ... module goes here ... */ }
![Page 14: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/14.jpg)
14
〉Модульная система / Что выбрать?
!
— CommonJS !
— AMD !
define([ 'http', 'express', 'config' ], function (http, express, config) { /* ... module goes here ... */ ! return server; });
![Page 15: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/15.jpg)
15
〉Модульная система / Что выбрать? / Требования
1. Асинхронный require !
2. Асинхронный provide !
3. Возможность расширить или заменить модуль
![Page 16: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/16.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); });
![Page 17: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/17.jpg)
17
〉Модульная система / Что выбрать?
!
— CommonJS !
— AMD !
— YM
https://github.com/ymaps/modules
modules.define('server', [ 'http', 'express', 'config' ], function (provide, http, express, config) { /* ... module goes here ... */ ! setTimeout(function () { /* ... and then here ... */ ! provide(server); }, 3000); });
![Page 18: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/18.jpg)
18
〉Модульная система / Что выбрать?
http://www.2ality.com/2014/09/es6-modules-final.html
EcmaScript 6 Modules
![Page 19: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/19.jpg)
Зачем?
![Page 20: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/20.jpg)
20
〉Модульная система YM / Зачем?
Зависимости от не-модулей
![Page 21: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/21.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)); } ); });
![Page 22: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/22.jpg)
22
〉Модульная система YM / Зачем?
Зависимости от асинхронных процессов
![Page 23: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/23.jpg)
23
〉Модульная система YM / Зачем?
Зависимости от асинхронных процессов
modules.define('ymaps', [ 'loader', 'config' ], function (provide, loader, config) { loader(config.hosts.ymaps_api, function () { ymaps.ready(function () { provide(ymaps); }); }); });
![Page 24: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/24.jpg)
24
〉Модульная система YM / Зачем?
Зависимости от среды исполнения
modules.define('DomEventManager', [ 'browser' ], function (provide, browser) { var implementation = browser.oldIE ? 'domEventManager/OldIE' : 'domEventManager/Standard'; ! modules.require(implementation, provide); });
![Page 25: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/25.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); });
![Page 26: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/26.jpg)
Сборка
![Page 27: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/27.jpg)
〉Сборка
![Page 28: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/28.jpg)
28
〉Сборка
•JS !
•CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI
!
•Шаблоны — Прекомпиляция — Оборачивание в модуль
•Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs)
!!
![Page 29: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/29.jpg)
29
〉Сборка
•JS !
•CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI
!
•Шаблоны — Прекомпиляция — Оборачивание в модуль
•Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs)
!!
![Page 30: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/30.jpg)
30
〉Сборка
•JS !
•CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI
!
•Шаблоны — Прекомпиляция — Оборачивание в модуль
•Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs)
!!
![Page 31: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/31.jpg)
31
〉Сборка
•JS !
•CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI
!
•Шаблоны — Прекомпиляция — Оборачивание в модуль
•Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs)
!!
![Page 32: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/32.jpg)
32
〉Сборка
•JS !
•CSS — Оптимизация (csso) — Оборачивание в модуль (provideCss()) — url(…) → DataURI
!
•Шаблоны — Прекомпиляция — Оборачивание в модуль
•Модули — Модульная система — Загрузчик модулей — Хелперы — Оборачивание в замыкания — Сборка пакетов — Сжатие (uglifyjs)
!!
![Page 33: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/33.jpg)
Что выбрать?
![Page 34: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/34.jpg)
34
〉Сборка / Что выбрать?
![Page 35: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/35.jpg)
35
〉Сборка / ym-builder
+ плагины + gulpfile + build.json
ym-builder
=
http://github.com/yandex/ym-builderhttp://npmjs.org/package/ym-builder
![Page 36: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/36.jpg)
36
〉Сборка / ym-builder
> ym-builder .
![Page 37: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/37.jpg)
37
〉Сборка / ym-builder
> ym-builder [build] [DIR=.]
> ym-builder watch [DIR=.]
> ym-builder configure [DIR=.] [=build.json] [gulpfile] [-f]
> ym-builder help
![Page 38: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/38.jpg)
Ещё больше модульности
![Page 39: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/39.jpg)
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
![Page 40: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/40.jpg)
40
〉Модульная система / Что выбрать? / Требования
1. Асинхронный require !
2. Асинхронный provide !
3. Возможность расширить или заменить модуль
![Page 41: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/41.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); });
![Page 42: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/42.jpg)
42
〉Modules Plus / Асинхоронная загрузка
•На сервере — Формирование списка модулей
!
•На клиенте — Создание заглушек, вызывающих загрузчик
— Первый запрос к combine.xml: загрузка содержимого load
— Последующая загрузка по запросу
![Page 43: Асинхронная модульность в API Яндекс.Карт — Александр Зинчук](https://reader030.vdocuments.site/reader030/viewer/2022013108/55937c071a28abf63a8b4722/html5/thumbnails/43.jpg)
Александр Зинчук
Разработчик интерфейсов
Контакты
@ajaxy_ru
alx.zinchukzinchuk@yandex-