Как масштабировать сложный Single Page Application / Алексей Катаев (Skyeng)
Download as PPTX, PDF0 likes356 views
Документ описывает методы масштабирования сложных одностраничных приложений (SPA) на примере системы Vimbox. Основное внимание уделяется проблемам интеграции, модулям, роутингу, а также процессам онбординга и код-ревью в команде разработки. В итоге предлагаются рекомендации по улучшению документации и упрощению развертывания проектов.
Как масштабировать сложный Single Page Application / Алексей Катаев (Skyeng)
- 1. Как масштабировать сложный Single Page Application 1 Алексей Катаев
- 2. Что такое Vimbox? ● Уроки / групповые уроки / домашнее задание / тесты ● Видеосвязь ● Синхронизация интерактивных упражнений ● SPA + 14 API 2
- 4. 2015 4
- 5. 2016 5
- 6. 2017 6
- 7. 7 ● Комната ● Материал ● Слайд
- 9. Проблемы ● долгий onboarding ● нужно разбираться во всем проекте ● PR конфликты 9
- 11. Модули в Vimbox ● Структура модуля − Компоненты, директивы − Сервисы (+ API) − Фильтры − Роутинг − Readme.MD 11
- 12. Компонент 12
- 13. Сервис 13 ● Сервис — singleton ● Сервис часто содержит модель ● Примеры сервисов: - RoomsService — текущая комната - StepsService — слайды - ContentService — контент слайдов
- 15. Pub/sub 15
- 16. Pub/sub в компонентах 16 ● Компонент отображения контента − onStepChanged — отображать лоадер − onContentReady — скомпилировать контент − onStepModeChanged — режим превью − onTestFinished — отключить редактирование − ...
- 17. Проблемы ● Сложное дерево зависимостей ● Обработка событий в компонентах ● Огромное число состояний ● Синхронизация ● Browser history: https://vimbox.skyeng.ru/lesson 17
- 19. Роутер ● resolve — async data перед входом в состояние ● onEnter — инициализация моделей ● onExit — возврат моделей в прежнее состояние ● redirectTo — ветвление 19
- 20. Роутер 20
- 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 Алексей Катаев