JavaScript головного мозга. История одного фреймворка

1.

JavaScript головного мозга.
История одного фреймворка
Зуев Дмитрий / Ведущий инженер-программист

2.

СБИС – сеть деловых коммуникаций
более миллиона клиентов
10 центров разработки
более 1000 программистов
2

3.

online.sbis.ru
3

4.

online.sbis.ru
4

5.

online.sbis.ru
5

6.

online.sbis.ru
6

7.

online.sbis.ru
7

8.

online.sbis.ru
8

9.

online.sbis.ru
9

10.

Разделение ответственности

11.

Глобальная компонентизация

12.

Макет карточки аккаунта
в биллинге (2012 год)
12

13.

Макет. Апрель 2017
13

14.

Макет. Наши дни
14

15.

Спецификация
15

16.

Разделяй и властвуй
16

17.

Как 2 капли
17

18.

Но такие разные
18

19.

Мы строим интерфейс из
кубиков
19

20.

Нужны контракты
20

21.

Модно? Молодежно? Хайпово?
21

22.

Модно? Молодежно? Хайпово?
22

23.

Модно? Молодежно? Хайпово?
23

24.

Модно? Молодежно? Хайпово?
24

25.

Никто не знает
как собирать приложения
25

26.

Как сделать веб-приложение
из 5000 окон и 1000 программистов?
26

27.

No comment…
27

28.

Первые контролы
28

29.

10 отличий?
29

30.

Последствия
30

31.

Последствия
31

32.

Последствия
32

33.

Server render
33

34.

Корень зла!
34

35.

Светлое сегодня
35

36.

Все гениальное – просто (с)
36

37.

Аспекты
37

38.

10 отличий?
38

39.

Аспекты
39

40.

Аспекты
40

41.

Время интерфейсов и абстракций
41

42.

Время интерфейсов и абстракций
42

43.

TreeGrid
43

44.

TreeGrid
HTML
44

45.

TreeGrid
User data
HTML
45

46.

TreeGrid
User data
???
HTML
46

47.

Controller
работа с источником данных
Удаление, добавление, редактирование записей
по месту
47

48.

Controller
настройка порядка колонок
работа с источником данных: Удаление, добавление, редактирование записей по месту
48

49.

Controller
раскрытие узлов иерархии
работа с источником данных: удаление, добавление, редактирование записей по месту;
настройка порядка колонок
49

50.

Controller
бесконечная загрузка по скроллу
работа с источником данных: удаление, добавление, редактирование записей по месту;
настройка порядка колонок; раскрытие узлов иерархии;
50

51.

Controller
работа с выделением
работа с источником данных: удаление, добавление, редактирование записей по месту;
настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу;
51

52.

Controller
drag&drop
работа с источником данных: удаление, добавление, редактирование записей по месту;
настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу;
работа с выделением
52

53.

Controller
поддержка swipe
работа с источником данных: удаление, добавление, редактирование записей по месту;
настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу;
работа с выделением; drag&drop;
53

54.

Controller
группировка
работа с источником данных: удаление, добавление, редактирование записей по месту;
настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу;
работа с выделением; drag&drop; поддержка swipe;
54

55.

Controller
выгрузка, печать
работа с источником данных: удаление, добавление, редактирование записей по месту;
настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу;
работа с выделением; drag&drop; поддержка swipe; группировка;
55

56.

Это контроллер?!
56

57.

Делай солидно!
57

58.

Автотесты
58

59.

Оно всегда работает!
59

60.

Агрегация+композиция
60

61.

Пример разметки
61

62.

Базовые раскладки
62

63.

Сотни реестров
63

64.

Сотни документов
64

65.

Посмотрим в код Master.Detail
65

66.

А теперь код того, кто использует
66

67.

А теперь код того, кто использует
67

68.

Single Page Application
68

69.

Render на сервере
Render на клиенте
Изоморфный код
69

70.

И получили мы
изоморфность
интерфейсоориентированность
SOLIDность
70

71.

71

72.

Спасибо за внимание!
Зуев Дмитрий
e-mail: [email protected]
sbis.ru