РИТ++ 2017, Frontend Сonf Зал Дели + Калькутта, 6 июня, 15:00 Тезисы: http://frontendconf.ru/2017/abstracts/2644.html В своем докладе я расскажу, как мы преодолели рубеж в 100 тысяч строк в нашей платформе Vimbox (SPA для интерактивного взаимодействия учитель/ученик) без потери качества. Сейчас нам удается работать командой из 10 человек над одним приложением, улучшая код и проводя рефакторинг с небольшими накладными расходами на конфликты, коммуникацию и подключение новых разработчиков к проекту. Я расскажу, с какими проблемами мы столкнулись при увеличении сложности / размера нашего приложения и при увеличении команды. ...

1. Как масштабировать сложный
Single Page Application
1
Алексей Катаев

2. Что такое Vimbox?
● Уроки / групповые уроки / домашнее задание / тесты
● Видеосвязь
● Синхронизация интерактивных упражнений
● SPA + 14 API
2

3. Синхронизация упражнений
3

4. 2015
4

5. 2016
5

6. 2017
6

7. 7
● Комната
● Материал
● Слайд

8. Структура проекта
8

9. Проблемы
● долгий onboarding
● нужно разбираться во всем проекте
● PR конфликты
9

10. Модульность
27 атомарных модулей
10

11. Модули в Vimbox
● Структура модуля
− Компоненты, директивы
− Сервисы (+ API)
− Фильтры
− Роутинг
− Readme.MD
11

12. Компонент
12

13. Сервис
13
● Сервис — singleton
● Сервис часто содержит модель
● Примеры сервисов:
- RoomsService — текущая комната
- StepsService — слайды
- ContentService — контент слайдов

14. Роутинг
● Интуитивное решение:
14

15. Pub/sub
15

16. Pub/sub в компонентах
16
● Компонент отображения контента
− onStepChanged — отображать лоадер
− onContentReady — скомпилировать контент
− onStepModeChanged — режим превью
− onTestFinished — отключить редактирование
− ...

17. Проблемы
● Сложное дерево зависимостей
● Обработка событий в компонентах
● Огромное число состояний
● Синхронизация
● Browser history: https://vimbox.skyeng.ru/lesson
17

18. Иерархия состояний
18

19. Роутер
● resolve — async data перед входом в состояние
● onEnter — инициализация моделей
● onExit — возврат моделей в прежнее состояние
● redirectTo — ветвление
19

20. Роутер
20

21. Состояние: урок
21

22. Состояние: материал
22

23. Состояние: слайд
23

24. Состояние: контент слайда
24

25. Простые компоненты
25

26. Параметры и синхронизация
26
https://vimbox.skyeng.ru/workbook/tutiloba/0/materials?tool=homework

27. Transition hooks
27

28. Transition hooks
28
Авторизация и статистика

29. Особенности решения
● Простая иерархия состояний
● Инициализация моделей в роутере
● Простые компоненты
● Синхронизация
● Transition hooks
29

30. Onboarding
● Много сотрудников, “текучка”
− долгий onboarding (наставник, устаревшие инструкции)
● Быстрый onboarding
− Первая задача
− Обучающие видео (UX + архитектура)
− Актуальная документация
30

31. Code-review
● Проблема
− долгие code-review: много замечаний в PR
● Конвенции
− Styleguide + линтеры
− Базовые классы и интерфейсы + АПИ
− Голосование
31

32. Окружение и CI
32
● Проблемы:
− Установка окружения 3 дня
− Не хватает нужных проектов

33. 33
● Vagrant + provision with
● Регулярные релизы боксов
● Локальные e2e + unit
● CI (project-scoped config)
Окружение и CI

34. Наши планы
● 10+ человек в команде
● Npm-пакеты
− Core
− GUI
− Video
− Blocks
34

35. Summary
35
● Live документация
● Конвенции и линтеры
● Обучающие видео
● Быстрое развертывание проектов

36. Спасибо за внимание
36
Алексей Катаев