Архитектура API 2.0

Александр Чупахин,руководитель группы разработки интерфейсов API Яндекс.Карт

APIшник Яндекс.Карт, Москва, 26 апреля 2012

Я расскажу вам

— какие архитектурные задачи стояли перед

нами в рамках API 2.0

— каким образом мы эти задачи решали

— об архитектуре карты и геообъектов

— о подсистемах событий и опций

1

Что такое хорошая архитектура?

2

Хорошая архитектура — это

удачный компромисс между

потребностями и ограничениями

3

— большое монолитное

ядро

— большие сложные

интерфейсы, сильная

связанность объектов

— сложность отладки

Проблемы 1.x

— модульность

— простые интерфейсы

с понятной

ответственностью

— режим для упрощенной

отладки

— многоязычность

Требования к 2.0

4

— модуль

— пакет

— сборщик

— загрузчик

Модульная система

Состоит из следующих логических единиц:

5

Модуль— атомарная единица функциональности

с уникальным именем

— модули делятся на 2 типа: js, css

— js модуль это javascript замыкание,

предоставляющее в публичную область 1 объект

или класс

— может использовать для работы другие модули

— модулей много (≈ 600 в API)

6

{ "name": "Placemark", "type": "js", "src": ["placemark-helper.js"], "depends": [ "util.augment", "GeoObject" ]}

Файл описания модуля

7

Пакет

— именованый набор модулей

— может включать другие пакеты

— все содержимое пакета и его дочерних

пакетов доступно в публичной области

8

Видимость функционала

Package Package ModuleModule Module

ModuleModuleModule

Module

Private

Public

9

Файл описания пакета

{ "name": "package.mapHint.core", "description": "Хинт на карте.", "depends": [ "map.addon.hint", "package.layouts" ]}

10

Сборщик

— работает с файлами описания модулей и пакетов

— поддерживает несколько режимов сборки: release, debug, dev

— позволяет отслеживать неправильные (не используемые, циклические) зависимости

— написан на node.js

11

Загрузчик

— поддерживает два способа загрузки:

1. указание имен пакетов в параметре load

2. постзагрузка с помощью функции ymaps.load

— загрузка осуществляется асинхронно

12

Подключение

/?lang=ru-RU&mode=debug&coordorder=longlat&load=package.map&ns=YM

Язык интерфейса *

Режим работы (release)

Порядок координат (latlong) Пространство имен (ymaps)

Загружаемые пакеты

* обязательный параметр() значение по умолчанию

13

Параметр — суслик

14

Параметр — суслик

/?onload=onLoadCallback

<script>function onloadCallback () { // получаем доступ к package.map ymaps.load("package.geoObjects", function () { // получаем доступ к package.geoObjects })}</script><script src="http://api-maps.yandex.ru/2.0/?lang=ru-RU&load=package.map&onload=onloadCallback"></script>

15

Загрузка

http://api-maps.yandex.ru/2.0/combine.xml?modules=...

/index.xml?lang=ru-RU&load=...

1. загрузчик + информация о всех модулях и пакетах

2. код запрошенных модулей включая зависимости

16

Profit

17

— за основу взята Document Object Model (DOM)

— карта является корневым элементом модели

— система опций выполняет роль CSS стилей

— система событий работает поверх системы событий браузера и никак ее не затрагивает

Объектная модель

18

Объектная модель карты

Map

.geoObjects

.cursors

.controls

.layers

.behaviors

.panes

.events

.balloon .hint

.action .zoomRange

.converter .container

.options

19

Корневые коллекции карты

Map

.geoObjects

.cursors

.controls

.layers

.behaviors

.panes

.events

.balloon .hint

.action .zoomRange

.converter .container

.options

20

Коллекции элементов карты

— определяют добавленные в них элементы

как дочерние

— выстраивают с дочерними элементами

иерархию наследования опций и иерархию

распространения событий

— бывают двух видов: на основе массива и на

основе двусвязного списка21

Интерфейсы для создания иерархий

<<interface>>IParentOnMap

getMap(): Map

@mapchange

<<interface>>IChildOnMap

setParent(IParentOnMap)getParent(): IParentOnMap

@parentchange

22

Иерархия элементов

map2.rootCollection

node1

node2

node3

map2.rootCollection

node4collection1

23

map2.rootCollection

node1

node2node3

map2.rootCollection

node4

collection1

Иерархия элементов

24

Менеджеры опций и событий

Map

.geoObjects

.cursors

.controls

.layers

.behaviors

.panes

.events

.balloon .hint

.action .zoomRange

.converter .container

.options

25

— должна позволять выстраивать иерархии

наследования опций

— должна позволять использовать

предустановленые наборы опций

— должна позволять разрешать коллизии имен

опций на разных уровнях иерархии

— должна работать быстро

Требования к системе опций

26

Пример работы системы опций

map.options

map.geoObjects.options

geoObject.options

balloon.options layout

balloonLayout

geoObjectBalloonLayout balloonLayout

balloonLayout

hint.options

27

Менеджер опций .options

— методы setParent, getParent

— имя, которое сообщает родителю при запросе

вверх по иерархии

— механизм настройки маппинга имен опций при

запросе с нижних уровней иерархии

— механизм кеширования значений опций

— опцию preset отрабатывает особенным образом

28

Опция preset

— представляет собой объект вида

{имя опции: значение}

— может задаваться как объектом, так и ключем в

хранилище option.presetStorage

— хэш также может содержать preset

29

Опция preset

layout

balloonLayout

balloonLayout

...

preset preset

preset

30

Интерфейс IOptionManager

<<interface>>IOptionManager

setParent(IOptionManager)getParent(): IOptionManager

setName(name: String)getName(): String

get(key: String): ObjectgetNative(key: String): Objectresolve(key, name): Object

@change

31

— должна позволять строить иерархии

распространения событий

— не должна затрагивать систему событий

браузера

— должна позволять управлять распространением

событий по аналогии с браузером (методы

stopPropagation, preventDefault)

— должна быть удобной и работать быстро

Требования к системе событий

32

Менеджер событий .events

— имеет методы setParent, getParent

— принимает контекст, который устанавливается в

target событиям, генерируемым на нем

— останавливает пропагирование по иерархии,

если у события был вызван stopPropagation()

— после распространения события вверх по

иерархии генерирует “defaultaction” событие,

если у события не был вызван preventDefault()

33

Распространений событий

map.geoObjects.events

geoObjectArray.events

geoObject.events

iconOverlay.events

clickclickdefaultaction (4)

click (1)

click (2)

click (3)

34

Классы системы событий

event.Manager

setParent(IEventManager)getParent(): IEventManager

add(type: String, callback, context)remove(type: String, callback, context)

fire(type: String, eventObject: IEvent)group(): IEventGroup

Event

get(name: String): ObjectcallMethod(name: String): Object

stopPropagation()isPropagationStopped(): Boolean

stopImmediatePropagation()isImmediatePropagationStopped(): Boolean

preventDefault()isDefaultPrevented(): Boolean

35

Менеджер контейнеров карты

Map

.geoObjects

.cursors

.controls

.layers

.behaviors

.panes

.events

.balloon .hint

.action .zoomRange

.converter .container

.options

36

— реализует интерфес IPane

— позволяет объектам карты отображаться внутри

своего HTML элемента

— позволяет реагировать на движения карты

— контейнеры бывают двух видов: двигающиеся и

статичные

Контейнер объектов карты

37

Контейнеры объектов карты— outers - контейнер внешних элементов

— controls - контейнер элементов управлениия

— floats - статичный контейнер html оверлеев

— overlays - двигающийся контейнер html оверлеев

— events - контейнер событий карты и активных областей

— shadows - контейнер для размещения теней

— graphics - контейнер графики

— layers - контейнер слоев

38

Геообъекты

— вначале был GeoJson http://www.geojson.org/

— один геообъект, много геометрий

— но GeoJson подошел не полностью

— коллекции геообъектов это тоже геообъекты

(композиция)

39

Объектная модель геообъекта

GeoObject.options.events.state

geometry

overlay

properties

40

Геометрия— это геометрические данные + идентификатор

типа данных

— предоставляет различный математический

функционал для работы со своими данными

— геометрии делятся на 3 вида:

— базовые

— основные

— пиксельные

41

Интерфейсы геометрий

<<interface>>IBaseGeometry

events: IEventManager

getType(): StringgetBounds(): Number[][]

<<interface>>IPixelGeometry

getMetaData(): Objectscale(): IPixelGeometryshift(): IPixelGeometry

<<interface>>IGeometry

options: IOptionManager

getPixelGeometry(): IPixelGeometrysetMap(map: Map)getMap(): Map@pixelgeometrychange

42

Взаимодействие геометрии и геообъекта

geoObject

.options

.events

.state

geometry

.options

.events pixelGeometry

map.events

событие pixelgeometrychange

событие boundschange

43

Оверлеи— отображают пиксельную геометрию

определенного типа с учетом переданных

данных и опций

— оверлеи бывают разные

— html

— графические

— активные области

— геообъект создает оверлеи не напрямую,

а через фабрику оверлеев44

Фабрики оверлеев

— interactive (по умолчанию) — интерактивные графические оверлеи и html оверлей для геометрии Point

— interactiveGraphics — интерактивные графические оверлеи в том числе и для геометрии Point

— staticGraphics — неинтерактивные графические

оверлеи (без активных областей)

— hotspot — оверлеи активных областей45

Profit1.1 2.0

— Placemark

— Polyline

— Polygon

— GeoObject

Вспомогательные классы

— Placemark

— Polyline

— Polygon

— Circle

— Rectangle

46

Profit

1.1 2.0

Map 5 полей59 методов

14 полей12 методов

GeoObject 4 поля44 метода

8 полей4 метода

47

Необязательные поля карты

Map

.geoObjects

.cursors

.controls

.layers

.behaviors

.panes

.events

.balloon .hint

.action .zoomRange

.converter .container

.options

48

Механизм создания аддона

Map map.addon.balloon

map

событие создания экземпляра

создание .balloon

49

Аддоны карты и геообъекта

.hint

.balloon

.editor

GeoObject

.hint

.balloon

.controls

.geoObjectsMap

50

Вопросы?

Александр Чупахин

netmac@yandex-team.ru