1. yandex maps
Upcoming SlideShare
Loading in...5
×
 

1. yandex maps

on

  • 274 views

 

Statistics

Views

Total Views
274
Views on SlideShare
273
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

1. yandex maps 1. yandex maps Presentation Transcript

  • JS API Яндекс.Карт 2.1 Почему и зачем мы меняем API? Сергей Константинов руководитель службы разработки API Яндекс.Карт
  • Обратная совместимость • Экономит деньги • Держит карму в чистоте • Клиенториентировано!
  • API 2.1 Встречайте: JS API 2.1: • Мы сломали обратную совместимость*
  • API 2.1 *На самом деле, нет
  • API 2.1 *На самом деле, нет • Мы продолжаем поддерживать предыдущие мажорные версии • Мы не озвучиваем сроки прекращения поддержки, потому что их нет
  • API 2.1
  • Зачем? • Новые технологии • Новые тренды в дизайне • Новые времена • Нам надоело поддерживать старый код, мы хотим писать новый • Прост))
  • Зачем? Правильный ответ: • Чтобы решать задачи пользователя
  • Задачи По большому счёту, есть два типа задач: • поддержка "железа" • поддержка кейсов
  • Задачи С поддержкой кейсов всё сложнее, чем кажется. Кейсы есть: • у нас • у вебмастеров • у пользователей
  • Задачи Давайте лучше на конкретных примерах
  • Элементы управления В API 2.0 у нас есть прекрасный набор элементов управления
  • Проблема
  • Проблема
  • Что делать? • Добавить fullscreen • Заодно чуть лучше станет на мобильных
  • Что делать? • Адаптивные контролы
  • Что делать? • Добавить стандартные наборы элементов управления • Лучший программный интерфейс – хорошо подобранный default
  • Что делать? • История успеха: http://tech.yandex.ru/events/yac/2013/talks/1113/
  • Вывод? • Иногда разработчику нужно дать свободу так, чтобы он ей не пользовался
  • Ещё проблема • Объём кода в API давно вышел за пределы разумного • Долго грузится, долго парсится, долго исполняется • 800+ различных сущностей
  • Решение 1.0 • Грузим всё сразу: • Не айс
  • Решение 1.1 • Выделяем дополнительную функциональность в подгружаемые модули:
  • Решение 1.1 • Однако за время пути базовая функциональность успела подрасти • Гигантский файл с данными • Лишние запросы за CSS и картинками
  • Решение 2.0 • Режем по живому: – делим функциональность на пакеты – самый "маленький" пакет (package.map) содержит самый минимум – только карту
  • Решение 2.0 • Грузим по требованию: – данные по масштабам и копирайтам теперь не грузятся, а запрашиваются при смене центра – пользователь может подгружать функциональность, когда она ему реально потребовалась
  • Решение 2.0 • Экономим запросы: – CSS теперь отдаётся вместе с JS – Картинки кодируем прямо в CSS
  • Решение 2.0 • У нас получилось? – минимальная сборка: – максимальная сборка:
  • Решение 2.0 • Отгадайте, сколько пользователей грузит минимальную сборку?
  • Решение 2.0 • На самом деле, так не работает • Не нужно надеяться на то, что пользователь решит проблему, которую вы сами решить не смогли
  • Решение 2.1 • Один package.full • Модели грузим сразу, отображения – по требованию
  • Решение 2.1 • Например, пользователь включил линейку: • Ушёл запрос за графикой:
  • Решение 2.1 • Для этого нам пришлось очень существенно изменить интерфейсы – getOverlay() -> Promise – balloon.open() -> Promise
  • Решение 2.1 • Под капотом: новая модульность https://github.com/ymaps/modules • Асинхронный require • Асинхронный provide • Работает на клиенте и на сервере
  • Ещё проблема • Мы стараемся держаться плотного графика, выпуская релиз раз в 3-4 недели • Но мы не хотим при этом что- нибудь сломать пользователям
  • Решение 1.0 • Можно подключать API с указанием мажорной (1.0) или полной (1.0.8) версии • Мало функциональности – мало багов
  • Решение 1.1 • А что, схема времён 1.0 по- прежнему работает! • А если что, мы выпустим релиз 1.1.5-а, никто же и не заметит
  • Решение 2.0 • Теперь у нас три версии: – 2.0 – последняя выпущенная – 2.0-stable – последняя "стабильная" – 2.0.xx – прямая ссылка на конкретную версию
  • Решение 2.0 Да, но… • Откуда у нас возьмётся "стабильная" версия? • В каждой версии мы правим баги и выкатываем фичи
  • Решение 2.0-с-половиной Мы разделяем релизы • За фичовым релизом обязательно следует дебажный • stable переключается только на дебажный
  • Решение 2.0-с-половиной Теперь у нас всё просто • stable – это тот же 2.0, только без последних фич • Отгадайте, какой ответ на вопросы в техподдержку стал самым популярным
  • Решение 2.0-с-половиной Тогда мы стали делать RC • Версия-релиз кандидат доступна только по прямому URL-у и тестируется несколько дней • Потом переключается 2.0
  • Решение 2.0-с-половиной Отгадайте, сколько багов нам зарепортили в версиях-релиз кандидатах?
  • Решение 2.1 Мы держим два алиаса: • 2.1-dev: релиз-кандидат, последняя выпущенная версия • 2.1: если в RC не найдено ошибок, 2.1 переключается на него
  • Решение 2.1 Будет ли оно работать? Да кто же его знает. Практика – критерий истины.
  • Теория vs. Практика В отличие от задач пользователей, проблемы "с окружающим миром" имеют свойство случаться ВНЕЗАПНО.
  • Например • Экраны с device pixel ratio > 1 победоносно шествуют по планете
  • Решение • Каждую картинку, каждый фончик, каждый источник тайлов отрисовываем в нескольких разрешениях • Каждый программный интерфейс принимает ImageSet
  • Решение Сколько существует разных DPR? • 1x (спасибо, кэп) • 2x
  • DPR Сколько существует разных DPR? • 1.5x (старые Андроиды) • 3x (новые Андроиды)
  • DPR Сколько существует разных DPR? • 1.7 (LG Optimus) • 1.8 (Samsung Galaxy Mega 6.3) • 2.25 (Opera Mobile)
  • DPR Сколько существует разных DPR? • 1.325 (Asus Nexus 7) • 5:3, 15:9 (Nokia)
  • DPR (здесь должна быть картинка "да, мы упоролись", но всё понятно и так)
  • DPR • Мы переписали всё на SVG и <canvas> • Для IE < 9 осталась старая вёрстка • (/me с ужасом ждёт того дня, когда кто-нибудь запустит старый IE на ретиновом мониторе)
  • SVG метки Игла в яйце, яйцо в утке… • Берём шаблон SVG • Подставляем нужные цвета • Формируем CSS-класс, которому в background выставлен этот SVG • … • PROFIT!
  • SVG метки
  • SVG метки Пробуем на практике: • Берём шаблон SVG • Подставляем нужные цвета • Формируем CSS-класс, которому в background выставлен этот SVG • … • Слайдшоу!
  • SVG метки Добавляем пару шагов: • Берём канвас • Делаем drawImage, передавая закодированный SVG как data:uri • Преобразуем в закодированный PNG • … • Вот теперь PROFIT!
  • SVG метки К сожалению, обратная совместимость пала смертью храбрых 
  • Или вот ещё проблема • В версии 2.0 мы используем промисы https://github.com/dfilatov/vow • В ECMAScript6 включены промисы как примитив языка
  • Или вот ещё проблема • Промисы "по стандарту" не совпадают ни с одной из существующих реализаций, включая нашу • (какая ирония)
  • Это, конечно, не всё Конечно же, мы заодно очень хотели полечить и свои косяки внедрить решения, время которых ещё не пришло на момент выпуска 2.0.
  • Это, конечно, не всё • Рисовать все метки на одном канвасе • Управлять видимостью объектов в кластеризаторе • Решить проблемы с производительностью
  • 2.1 Причины изменений в API: Сделать хорошо пользователю Сделать хорошо разработчику Идти в ногу со временем Уныние и отчаяние
  • Мораль Ты, как разработчик API, должен: • Следить за юз-кейсами • Следить за практикой внедрений • Читать техподдержку
  • Мораль Ты, как разработчик API, должен: • Периодически выпускать новые версии
  • Всем спасибо! Вопросы? • clubs.ya.ru/mapsapi • (facebook|vk).com/ymapsapi В крайнем случае: • Сергей Константинов twirl@yandex-team.ru