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

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

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

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