![Page 1: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/1.jpg)
Коктейль Skydive или как мы делали
2ГИС-ОнлайнИлья Таратухин
2ГИСКонстантин Лихтер2ГИС
![Page 2: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/2.jpg)
Что такое Skydive?
![Page 3: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/3.jpg)
Что такое 2ГИС-Онлайн?
![Page 4: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/4.jpg)
Что такое 2ГИС-Онлайн?
![Page 5: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/5.jpg)
Что такое 2ГИС-Онлайн?
![Page 6: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/6.jpg)
Что такое 2ГИС-Онлайн?
... миллионы пользователей в месяц
![Page 7: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/7.jpg)
Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц ... сотни тысяч пользователей в день
![Page 8: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/8.jpg)
Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц— ... сотни тысяч пользователей в день
... миллионы поисковых запросов в день
![Page 9: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/9.jpg)
Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц— ... сотни тысяч пользоваталей в день— ... миллионы поисковых запросов в день
![Page 10: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/10.jpg)
Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц— ... сотни тысяч пользоваталей в день— ... миллионы поисковых запросов в день
![Page 11: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/11.jpg)
...монолитное приложение
Как выглядел 2ГИС Онлайн раньше
![Page 12: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/12.jpg)
— монолитное приложение
...проксирование запросов к API
Как выглядел 2ГИС Онлайн раньше
![Page 13: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/13.jpg)
— монолитное приложение— проксирование запросов к API ...рендеринг шаблонов на сервере
Как выглядел 2ГИС Онлайн раньше
![Page 14: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/14.jpg)
— монолитное приложение— проксирование запросов к API— рендеринг шаблонов на сервере
...никакой масштабируемости
Как выглядел 2ГИС Онлайн раньше
![Page 15: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/15.jpg)
— монолитное приложение— проксирование запросов к API— рендеринг шаблонов на сервере— никакой масштабируемости
Как выглядел 2ГИС Онлайн раньше
![Page 16: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/16.jpg)
Что такое 2ГИС-Онлайн?
client-side
![Page 17: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/17.jpg)
Что такое 2ГИС-Онлайн?
— client-side
3 API
![Page 18: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/18.jpg)
Что такое 2ГИС-Онлайн?
— client-side— 3 API
видимый результат на лету
![Page 19: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/19.jpg)
Что такое 2ГИС-Онлайн?
— client-side— 3 API— видимый результат на лету площадка для исследований API 2ГИС
![Page 20: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/20.jpg)
Что такое 2ГИС-Онлайн?
— client-side— 3 API— видимый результат на лету— площадка для исследований API 2ГИС
low end server
![Page 21: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/21.jpg)
Что такое 2ГИС-Онлайн?
— client-side— 3 API— видимый результат на лету— площадка для исследований API 2ГИС— low end server
горизонтальное масштабирование
![Page 22: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/22.jpg)
Как выглядит 2ГИС Онлайн сегодня
![Page 23: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/23.jpg)
Ингридиенты: слой данных
API 2ГИС
Слой пробок
![Page 24: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/24.jpg)
Ингридиенты: front-end
API карт
![Page 25: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/25.jpg)
Ингридиенты: front-end
API карт
150+ городов России
![Page 26: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/26.jpg)
Ингридиенты: front-end
API карт
— 150+ городов России
тысячи маркеров на карте
![Page 27: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/27.jpg)
Ингридиенты: front-end
API карт
— 150+ городов России— тысячи маркеров на карте
простой и понятный интерфейс
![Page 28: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/28.jpg)
Ингридиенты: front-end
API карт
— 150+ городов России— тысячи маркеров на карте— простой и понятный интерфейс
инициализация карты в три строчки
![Page 29: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/29.jpg)
Ингридиенты: front-end
API карт
— 150+ городов России— тысячи маркеров на карте— простой и понятный интерфейс— инициализация карты в три строчки
модульная система
![Page 30: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/30.jpg)
Ингридиенты: front-end
API карт
knockout.js
![Page 31: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/31.jpg)
Ингридиенты: front-end: knockout.js
MVVM
![Page 32: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/32.jpg)
Ингридиенты: front-end: knockout.js— MVVM
автоматическое обновление представления при обновлении
данных
![Page 33: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/33.jpg)
Ингридиенты: front-end: knockout.js— MVVM— автоматическое обновление представления при обновлении данных— декларативные биндинги: <div id=”firmsList”
data-bind=”visible: firmsLoaded,foreach: {
data: loadedFirms,template: ‘firmCard’
}”>
</div>
![Page 34: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/34.jpg)
Ингридиенты: front-end: knockout.js— MVVM— автоматическое обновление представления при обновлении данных— декларативные биндинги— разделение представления и логики:
![Page 35: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/35.jpg)
Ингридиенты: front-end: knockout.js— MVVM— автоматическое обновление представления при обновлении данных— декларативные биндинги— разделение представления и логики поддержка jQuery шаблонов
![Page 36: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/36.jpg)
Ингридиенты: front-end: knockout.js— MVVM— автоматическое обновление представления при обновлении данных— декларативные биндинги— разделение представления и логики— поддержка jQuery шаблонов низкий уровень вхождения
![Page 37: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/37.jpg)
Ингридиенты: front-end: knockout.js— MVVM— автоматическое обновление представления при обновлении данных— декларативные биндинги— разделение представления и логики— поддержка jQuery шаблонов— низкий уровень вхождения активное интернет-сообщество
![Page 38: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/38.jpg)
Ингридиенты: back-end
nginx
memcached
![Page 39: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/39.jpg)
Инструменты
phing
— YUI Compressor— Google CС
Yii
![Page 40: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/40.jpg)
Инструменты
phing
— YUI Compressor— Google CС
— CSS: в 2 раза— JS: в 1.5 раза
![Page 41: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/41.jpg)
Инструменты
phing
- YUI Compressor- Google Closure Compiler
Yii
![Page 42: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/42.jpg)
Инструменты: локализация gettext
великое множество инструментов для работы с .po
![Page 43: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/43.jpg)
Инструменты: локализация gettext
— великое множество инструментов для работы с .po нативная реализация для PHP
![Page 44: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/44.jpg)
Инструменты: локализация gettext
— великое множество инструментов для работы с .po— нативная реализация для PHP собственная реализация для JS
![Page 45: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/45.jpg)
Процесс разработки: git flow
master
develop
Tag 1.0Tag 1.1
Tag 2.0
![Page 46: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/46.jpg)
Процесс разработки: git flow
master
develop
Tag 1.0Tag 1.1
Tag 2.0
feature*
![Page 47: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/47.jpg)
Процесс разработки: git flow
master
develop
Tag 1.0Tag 1.1
Tag 2.0
release*
![Page 48: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/48.jpg)
Процесс разработки: git flow
master
develop
Tag 1.0Tag 2.0
hotfix*
![Page 49: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/49.jpg)
Команда разработки
![Page 50: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/50.jpg)
Планы
поиск проезда общественного транспорта
![Page 51: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/51.jpg)
Планы
— поиск проезда общественного транспорта
переход к глобальной карте
![Page 52: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/52.jpg)
Планы
— поиск проезда общественного транспорта— переход к глобальной карте
совершенствование и совершествование поиска :)
![Page 53: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/53.jpg)
Заключение
— client-side приложения — да!— экспериментируйте!— вы знаете, где взять свежие данные. — ходить на — круто! :)
![Page 54: Коктейль Skydive или как мы мы делали 2ГИС-Онлайн](https://reader031.vdocuments.site/reader031/viewer/2022012312/557d6c0bd8b42a30708b496a/html5/thumbnails/54.jpg)
Вопросы?
Константин Лихтер[email protected]
Илья Таратухин[email protected]
Изображения алкогольной продукции и прочих штук — www.inshaker.ru