12.3.16 JS Lab. Upcoming events: goo.gl/I2gJ4H На примере внедрения режима одновременной работы на базе ShareJS в существующий большой проект, поговорим о подводных камнях, сложностях и путях их решения.

1. Denis Kuzin
denis_kuzin@epam.com
Интеграция режима одновременной работы
в действующий проект (ShareJS, Op transform)

2. ‹#›
Обзор
Теория ShareJS Знания Решения Q&AПроблемы

3. Часть 1. Теоретическая

4. ‹#›
• Производительность
• Креативность
• Командный дух
• Удобство
• Скорость

5. ‹#›
Добро пожаловать в реальность!

6. ‹#›
Коля и Петя редактируют один и тот же файл
И они решили отредактировать строку: “abc”
O1 = Ins [0, "x"] (вставить символ "x" в позицию 0)
O2 = Del [2, "c"] (удалить символ "c" из позиции 2)
С точки зрения проводимых операций:

7. ‹#›

8. ‹#›
С 1989 года было написано много строк
Много строк текста и кода
Идеально работающего решения до сих пор нет
Впервые концепцию Операционального Преобразования разработали С. Эллис, С. Гиббс [1] в системе
GROVE (GRoup Outtie Viewing Edit) в 1989 году (c) Wikipedia

9. ShareJS

10. ‹#›
Готовое решение из коробки
Написано бывшим инженером Гугла
На базе наработок Google Wave

11. ‹#›
Сервер
Подключение очень простое
Транспорт можно выбрать на свой вкус

12. ‹#›
Клиент

13. ‹#›
Создаем транспорт
Создаем соединение на базе транспорта
Создаем документ или конектится
к уже существующему
Подписываем его на изменения
Указываем тип документа
Если операция успешна создаем контекст
Передаем контекст собственно в класс

14. ‹#›
Все интересное закончилось
Подписываемся на типы операций
Апдейтим текущий стейт
Все работает

15. ‹#›
Теоретически на файле из 1й коллекции

16. ‹#›
А теперь получаем задачу:
Рабочее приложение
100+ компонентов
React + Flux
Технический долг
Много кастомных компонентов
c нестандартным поведением

17. Источники опыта

18. ‹#›
Опыт внедрения
Небольшие проблемы
Решили по ходу
Говорили они:

19. ‹#›
Документация
Документация!
Документация!!!
Есть от версии 0.6
Которая имеет ссылки на 0.7
Текущая версия 0.9
Но есть куски из 0.7
Которые из 0.6
Которые уже деприкейтед
Но новых еще нет

20. ‹#›
Все примеры лгут!

21. ‹#›
#Ойвсе

22. Проблемы

23. ‹#›
Циклические
обновления

24. ‹#›
Сериализация даты
или
назад в прошлое
UTC

25. ‹#›
Best practice от Facebook
Много Store
States
Props
Непрозрачные зависимости

26. ‹#›
Синхронизация самого себя

27. Решения

28. ‹#›
Who is
#Id

29. ‹#›
Digest

30. ‹#›
throttling
debounce

31. ‹#›
Observer Factory
StateSyncActions.registerItem({ name: 'someElement', callback: syncCallback(
() => { return this.refs.someElement.state.text },
(value) => { this.refs.someElement.state.text = value }
)});

32. Идеальное решение

33. ‹#›
Redux

34. The end

35. ‹#›
WHAT WHY WHERE WHEN WHO HOW
Any Question ???