Асинхронная модульность в 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-