Презентация с Codefest 2012 (31.03-01.04) Константин Лихтер (@likhter) Илья Таратухин (@darkilfa)

1. Коктейль Skydive
или как мы делали
2ГИС-Онлайн
Константин Лихтер Илья Таратухин
2ГИС 2ГИС

2. Что такое Skydive?

3. Что такое 2ГИС-Онлайн?

4. Что такое 2ГИС-Онлайн?

5. Что такое 2ГИС-Онлайн?

6. Что такое 2ГИС-Онлайн?
... миллионы пользователей в месяц

7. Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц
... сотни тысяч пользователей в день

8. Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц
— ... сотни тысяч пользователей в день
... миллионы поисковых запросов в день

9. Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц
— ... сотни тысяч пользоваталей в день
— ... миллионы поисковых запросов в день

10. Что такое 2ГИС-Онлайн?
— ... миллионы пользователей в месяц
— ... сотни тысяч пользоваталей в день
— ... миллионы поисковых запросов в день

11. Как выглядел 2ГИС Онлайн раньше
...монолитное приложение

12. Как выглядел 2ГИС Онлайн раньше
— монолитное приложение
...проксирование запросов к API

13. Как выглядел 2ГИС Онлайн раньше
— монолитное приложение
— проксирование запросов к API
...рендеринг шаблонов на сервере

14. Как выглядел 2ГИС Онлайн раньше
— монолитное приложение
— проксирование запросов к API
— рендеринг шаблонов на сервере
...никакой масштабируемости

15. Как выглядел 2ГИС Онлайн раньше
— монолитное приложение
— проксирование запросов к API
— рендеринг шаблонов на сервере
— никакой масштабируемости

16. Что такое 2ГИС-Онлайн?
client-side

17. Что такое 2ГИС-Онлайн?
— client-side
3 API

18. Что такое 2ГИС-Онлайн?
— client-side
— 3 API
видимый результат на лету

19. Что такое 2ГИС-Онлайн?
— client-side
— 3 API
— видимый результат на лету
площадка для исследований API 2ГИС

20. Что такое 2ГИС-Онлайн?
— client-side
— 3 API
— видимый результат на лету
— площадка для исследований API 2ГИС
low end server

21. Что такое 2ГИС-Онлайн?
— client-side
— 3 API
— видимый результат на лету
— площадка для исследований API 2ГИС
— low end server
горизонтальное масштабирование

22. Как выглядит 2ГИС Онлайн сегодня

23. Ингридиенты: слой данных
API 2ГИС
Слой
пробок

24. Ингридиенты: front-end
API карт

25. Ингридиенты: front-end
API карт
150+ городов России

26. Ингридиенты: front-end
API карт
— 150+ городов России
тысячи маркеров на карте

27. Ингридиенты: front-end
API карт
— 150+ городов России
— тысячи маркеров на карте
простой и понятный интерфейс

28. Ингридиенты: front-end
API карт
— 150+ городов России
— тысячи маркеров на карте
— простой и понятный интерфейс
инициализация карты в три строчки

29. Ингридиенты: front-end
API карт
— 150+ городов России
— тысячи маркеров на карте
— простой и понятный интерфейс
— инициализация карты в три строчки
модульная система

30. Ингридиенты: front-end
API карт
knockout.js

31. Ингридиенты: front-end: knockout.js
MVVM

32. Ингридиенты: front-end: knockout.js
— MVVM
автоматическое обновление
представления при обновлении
данных

33. Ингридиенты: front-end: knockout.js
— MVVM
— автоматическое обновление
представления при обновлении данных
— декларативные биндинги:
<div id=”firmsList”
data-bind=”
visible: firmsLoaded,
foreach: {
data: loadedFirms,
template: ‘firmCard’
}
”>
</div>

34. Ингридиенты: front-end: knockout.js
— MVVM
— автоматическое обновление
представления при обновлении данных
— декларативные биндинги
— разделение представления и логики:

35. Ингридиенты: front-end: knockout.js
— MVVM
— автоматическое обновление
представления при обновлении данных
— декларативные биндинги
— разделение представления и логики
поддержка jQuery шаблонов

36. Ингридиенты: front-end: knockout.js
— MVVM
— автоматическое обновление
представления при обновлении данных
— декларативные биндинги
— разделение представления и логики
— поддержка jQuery шаблонов
низкий уровень вхождения

37. Ингридиенты: front-end: knockout.js
— MVVM
— автоматическое обновление
представления при обновлении данных
— декларативные биндинги
— разделение представления и логики
— поддержка jQuery шаблонов
— низкий уровень вхождения
активное интернет-сообщество

38. Ингридиенты: back-end
nginx
memcached

39. Инструменты
phing
— YUI Compressor
— Google CС
Yii

40. Инструменты
phing
— YUI Compressor
— Google CС
— CSS: в 2 раза
— JS: в 1.5 раза

41. Инструменты
phing
- YUI Compressor
- Google Closure
Compiler
Yii

42. Инструменты: локализация gettext
великое множество
инструментов для работы с .po

43. Инструменты: локализация gettext
— великое множество инструментов для
работы с .po
нативная реализация для PHP

44. Инструменты: локализация gettext
— великое множество инструментов для
работы с .po
— нативная реализация для PHP
собственная реализация для JS

45. Процесс разработки: git flow
g 1.0 g 1.1 g 2.0
master Ta Ta Ta
develop

46. Процесс разработки: git flow
g 1.0 g 1.1 g 2.0
master Ta Ta Ta
develop
feature*

47. Процесс разработки: git flow
g 1.0 g 1.1 g 2.0
master Ta Ta Ta
release*
develop

48. Процесс разработки: git flow
g 1.0 g 2.0
master Ta Ta
hotfix*
develop

49. Команда разработки

50. Планы
поиск проезда общественного
транспорта

51. Планы
— поиск проезда общественного транспорта
переход к глобальной карте

52. Планы
— поиск проезда общественного транспорта
— переход к глобальной карте
совершенствование и
совершествование поиска :)

53. Заключение
— client-side приложения — да!
— экспериментируйте!
— вы знаете, где взять свежие данные.
— ходить на — круто! :)

54. Вопросы?
Константин Лихтер Илья Таратухин
k.likhter@2gis.ru i.taratuhin@2gis.ru
Изображения алкогольной продукции и прочих штук — www.inshaker.ru