Выступление на конференции DUMP-2017

1. Ярослав Лызлов, банк «Точка»
Как мы переезжаем,
и Точка!

2. 2

3. AngularJS
• Слабая производительность
• Монолитный
• Неочевидное поведение
• Отсутствие серверного рендеринга
3

4. Требования к новому
решению
• Производительный
• Гибкий
• Понятное поведение
• Серверный рендеринг
4

5. Подходят
5

6. 6

7. Angular
• Понятная миграция с AngularJS
• TypeScript
• Производительный
• Гибкий
• Понятное поведение
• Серверный рендеринг
7

8. Производительностьна нашем примере
8

9. 9
AngularJS
Angular
Производительностьна нашем примере
~700ms
~280ms

10. Гибкость
10

11. Гибкость
11

12. Понятное поведение
12

13. Серверный рендеринг
13

14. Понятная
миграция
с AngularJS
14

15. TypeScript
• Типизация
• Интерфейсы
• Enum
• Модификаторы доступа
• Декораторы
15
• Больше кода
• Меньше ошибок

16. Испытать
Angular
в реальном
приложении
16

17. Стратегии
переезда
17

18. Переписать всё
с нуля
18

19. Плюсы: Всё понятно
Минусы: Простой бизнес-задач
Переписать всё
с нуля
19

20. Использовать
ng-metadata
20

21. Использовать
ng-metadata
Плюсы: Простая интеграция
Минусы: Пишем в контексте AngularJS
21

22. Гибридное
приложение
22

23. Гибридное
приложение
Плюсы: Часть приложения работает в контексте Angular
Минусы: Неочевидная интеграция
23

24. 24

25. Подготовка к переезду
• Создать каркас гибридного приложения
• Подготовить AngularJS приложение к переезду
25

26. Сделать каркас
гибридного приложения
26

27. Гибридное приложение
AngularJS
Angular AngularJS
AngularJS Angular Angular
27

28. Обновить ui-router
Angular AngularJS
Точка входа
ui-router
C C C
C C C
28

29. Angular Router
Angular AngularJS
Router
C C C
C C C
U
U
U
Точка входа
29

30. Гибридное приложение
AngularJS
Angular Angular
AngularJS AngularJS AngularJS
30

31. Все просто
31

32. AngularJS Angular
32

33. AngularJS Angular
33

34. AngularJSAngular
34

35. AngularJSAngular
35

36. AngularJSAngular
36

37. Проблемы
• Не работает Augury (Расширение Chrome для отладки)
• Морально тяжело иметь дело с AngularJS
• Мало информации в интернете
37

38. Итоги
• Всё просто
• Компоненты Angular быстрее (x3+)
• Переезд без простоя для бизнес-задачи
• Реже смотрим в документацию
• Допускаем меньше глупых ошибок
38

39. yaroslavlyzlov@gmail.com
Ярослав Лызлов, банк «Точка»