Видео доклада https://youtu.be/1QtPtvi72SI Человеческий мозг устроен сложно. Если с ним что-то не так, то для диагностики используют магнитно-резонансный томограф. Большие одностраничные приложения тоже устроены сложно. Чтобы их починить или обвесить новым функционалом, требуется вникнуть в их устройство. Для этого нередко приходится засучивать рукава и с головой погружаться в самую глубь проекта. И немалая часть проблем связана именно с бизнес логикой и потоками данных. Но что если у нас будет возможность проникнуть в структуру данных, способ увидеть связи между ними и отслеживать то, как они влияют друг на друга? Такой способ, чтобы не требовалось вскрытия черепной коробки - все как с МРТ. В докладе речь пойдет о собственных разработках в этой области.

1. МРТ для данных
Specs, drafts and ngrok-n-scroll
1

2. Данные Много данных
2

3. Работаю в Avito
3

4. Работаю в Avito
Делаем SPA
4

5. Профессиональные инструменты
5

6. twitter.com/JavaScriptDaily/status/718471086246072320
6

7. Всё сложно
1. Пользователи то и дело что-то меняют
2. Разнообразные сценарии использования
3. У приложения множество состояний
4. Для описания требуются сотни сущностей
5. Тесные и обширные связи между сущностями и действиями
6. Разросшаяся кодовая база
7

8. В медицине работает МРТ-диагностика
8

9. Диагностика шаблонов
Видео
9

10. Подробнее про инспектор шаблонов
1. Доклад Романа Дворнова (февраль 2015)
2. Слайды slideshare.net/basisjs/spa-45289195
3. Видео youtu.be/IUtbbN9aevU
4. Адаптация для backbone и react github.com/lahmatiy/component-inspector
10

11. Локализация.МРТ для словарей
Видео
11

12. Погружение
в технические детали
12

13. 13

14. Трансформация значений-скаляров
В результате создается такой же реактивный скаляр:
будет изменяется при изменении породивших его значений
14

15. Трансформация наборов
Видео
15

16. Трансформация нескольких наборов в новый
набор
Видео
16

17. Вычисление значения по набору–индексы
Примеры: сумма, количество элементов
Значение-результат знает про изменением набора, а именно...
...отслеживается insert/ removeэлементов в наборе
...и updateсамих элементов (не проиллюстрировано)
Видео
17

18. 18

19. Пример
Активировать кнопку для добавления на площадки и/или в XML выгрузки
19

20. Пример
Активировать кнопку для добавления на площадки и/или в XML выгрузки
Два набора → filter selected → count → число → true/false
20

21. Пример (продолжение)
Два набора → filter selected → count → число → true/false
21

22. Смотрим на результат
Почему сейчас disabled: trueили disabled: false?
22

23. Инспектор данных
Видео
Видео 2
Картотека
23

24. В чём же магия?
24

25. Инструментирование
github.com/restrry/babel-plugin-source-wrapper
25

26. Подробнее про инструментирование
• Доклад Романа Дворнова (ноябрь 2015, FrontTalks в Минске)
• Слайды slideshare.net/basisjs/ss-52963081
• Видео youtu.be/watch?v=UPtDcAbg6EI, начиная с 2:41:12
26

27. Интересует не только локация
Добавляем мета-данные вручную
27

28. Что нам даёт devinfo?
Исходный объект остается без изменений (WeakMap: объект → dev-данные)
Объединяет результаты инструментирования и ручные мета-данные
28

29. Распаковка devinfo –строим дерево
29

30. Распаковка devinfo –строим дерево
30

31. Сложности
31

32. №1 Локации для фабрик
• фабрика обещает создать значение, когда придут данные
• Место создание результата
• Место создания фабрики
• Нужно второе
32

33. №2 Кэш (для фабрик)
• Значение создается один раз и кладется в кэш
• Если значение уже создано, переиспользуем его
• К значению привяжется локация первого обращения
• Для второго использования значения эта информация будет бесполезна
• Это нам не подходит
33

34. Решение –PROXY
• Значения по-прежнему считаются идентичными
• ...кроме момента, когда хотим узнать локацию создания
Добавляется только в dev-режиме
34

35. Итоги
35

36. Есть ли жизнь без basis.js?
36

37. Главное – идея
• Подход не завязан на фреймворк
• Но
• Требуется глубокая интеграция
• Специфика там, где происходит преобразование данных
37

38. Точки трансформации данных
38

39. Точки трансформации данных
39

40. Точки трансформации данных
40

41. Точки трансформации данных
41

42. Сложно, но можно
42

43. Вопросы
Настя Горячева, почта agoryacheva@avito.ru, твиттер @tyanasgo
43