36
Как Мы Делали Гуя поучительная история о том как мы 2,5 раза переписали наш веб-интерфейс на ExtJS и не сошли с ума Алексей Гуськов Ареал

Yarfrontend #2. Как мы делали гуя

Embed Size (px)

Citation preview

Page 1: Yarfrontend #2. Как мы делали гуя

Как Мы Делали Гуяпоучительная история о том как мы 2,5 раза переписали

наш веб-интерфейс на ExtJS и не сошли с ума

Алексей ГуськовАреал

Page 2: Yarfrontend #2. Как мы делали гуя

● продукт для автоматизации работы сисадминов● контроль трафика, почта, телефония, вот это всё● 10 лет разработки● 300+ функций● много боли и страданий

2

Page 3: Yarfrontend #2. Как мы делали гуя

3

Page 4: Yarfrontend #2. Как мы делали гуя

4

Page 5: Yarfrontend #2. Как мы делали гуя

Надо всё переписать!

5

шаблоны

Java

jquery

да чо, давайте сами движок напишем

C#

нативное быстрее инфа 100%

хватит думать пошли пиво пить

PHP

Flash и экшон скрипт жы

Page 6: Yarfrontend #2. Как мы делали гуя

ExtJS

6

Page 7: Yarfrontend #2. Как мы делали гуя

Первые попытки

7

+ = ?

Ёж Уж

Page 8: Yarfrontend #2. Как мы делали гуя

8

Page 9: Yarfrontend #2. Как мы делали гуя

Нужно немного допилить

9

Page 10: Yarfrontend #2. Как мы делали гуя

Нужно немного допилить

10

Page 11: Yarfrontend #2. Как мы делали гуя

Нужно немного допилить

11

Page 12: Yarfrontend #2. Как мы делали гуя

Нужно немного допилить

12

Page 13: Yarfrontend #2. Как мы делали гуя

Понеслась!

13

Page 14: Yarfrontend #2. Как мы делали гуя

ListView

14

Page 15: Yarfrontend #2. Как мы делали гуя

TreeView

15

Page 16: Yarfrontend #2. Как мы делали гуя

Суперкомбо

16

Page 17: Yarfrontend #2. Как мы делали гуя

Надстройка над моделью, которая знает, как объект рендерится и что с ним можно сделать● локаль● выключабельность● иконки● вот это вот всё

icon: /icons/user.pngdesc: Пользовательdocs: /users/

Врапперы

17

type: Username: Димаlogin: Nagibator9000role: admin

Page 18: Yarfrontend #2. Как мы делали гуя

Нужно больше компонентов!

18

Page 19: Yarfrontend #2. Как мы делали гуя

Кнопка аплоада

19

Page 20: Yarfrontend #2. Как мы делали гуя

Графики

20

Page 21: Yarfrontend #2. Как мы делали гуя

Объединялка файлов

21

Page 22: Yarfrontend #2. Как мы делали гуя

Прогрессбары

● делаются через фоновые HTTP-запросы● глючат и тормозят

22

Page 23: Yarfrontend #2. Как мы делали гуя

Вебсокеты жы!!!11

● sockjs● свой прокси-сервер на nodejs● бонус: отладка через debug()

23

Page 24: Yarfrontend #2. Как мы делали гуя

Всё хорошо!

24

Page 25: Yarfrontend #2. Как мы делали гуя

25

Всё плохо =(

Page 26: Yarfrontend #2. Как мы делали гуя

Надо всё переписать!

26

Page 27: Yarfrontend #2. Как мы делали гуя

Совместимость курильщика

27

● Меняется API● Меняются принципы работы● Меняется вёрстка и CSS

find . -name ‘*.js’ | xargs sed -i s/isVisible/isHidden/

Page 28: Yarfrontend #2. Как мы делали гуя

Переписали

28

Page 29: Yarfrontend #2. Как мы делали гуя

Где мы сейчас?

29

Page 30: Yarfrontend #2. Как мы делали гуя

Мораль

30

● ExtJS - торт● мощный● навороченный● не слишком сложный

Page 31: Yarfrontend #2. Как мы делали гуя

Мораль

31

● Java головного мозга● плохая

совместимость● бажки● тормоза

Page 32: Yarfrontend #2. Как мы делали гуя

Наши косяки

32

● нет review● нет опыта● всё переписать - плохая

плохая плохая плохая плохая плохая плохая плохая плохая плохая идея

Page 33: Yarfrontend #2. Как мы делали гуя

Наши косяки

33

● нет review● нет опыта● всё переписать - плохая

плохая плохая плохая плохая плохая плохая плохая плохая плохая идея

Page 34: Yarfrontend #2. Как мы делали гуя

Наши косяки

34

● нет review● нет опыта

●всё переписать - плохая плохая плохая плохая плохая плохая плохая плохая плохая плохая идея

Page 35: Yarfrontend #2. Как мы делали гуя

35

плохая идея

Page 36: Yarfrontend #2. Как мы делали гуя

Такие дела

36