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