МРТ для данных, avito spa meetup #2

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

1

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

Работаю в Avito

3

Работаю в Avito

Делаем SPA

4

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

twitter.com/JavaScriptDaily/status/718471086246072320

6

Всё сложно1. Пользователи то и дело что-то меняют

2. Разнообразные сценарии использования

3. У приложения множество состояний

4. Для описания требуются сотни сущностей

5. Тесные и обширные связи между сущностями и действиями

6. Разросшаяся кодовая база

7

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

Диагностика шаблонов

Видео

9

Подробнее про инспектор шаблонов1. Доклад Романа Дворнова (февраль 2015)

2. Слайды slideshare.net/basisjs/spa-45289195

3. Видео youtu.be/IUtbbN9aevU

4. Адаптация для backbone и react github.com/lahmatiy/component-inspector

10

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

Видео

11

Погружение

в технические детали

12

13

Трансформация значений-скаляров

В результате создается такой же реактивный скаляр:

будет изменяется при изменении породивших его значений

14

Трансформация наборов

Видео

15

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

Видео

16

Вычисление значения по набору – индексыПримеры: сумма, количество элементов

Значение-результат знает про изменением набора, а именно...

...отслеживается insert/remove элементов в наборе

...и update самих элементов (не проиллюстрировано)

Видео

17

18

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

19

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

Два набора → filter selected → count → число → true/false

20

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

21

Смотрим на результат

Почему сейчас disabled: true или disabled: false ?

22

Инспектор данных

Видео

Видео 2

Картотека

23

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

24

Инструментирование

github.com/restrry/babel-plugin-source-wrapper

25

Подробнее про инструментирование• Доклад Романа Дворнова (ноябрь 2015, FrontTalks в Минске)

• Слайды slideshare.net/basisjs/ss-52963081

• Видео youtu.be/watch?v=UPtDcAbg6EI, начиная с 2:41:12

26

Интересует не только локация

Добавляем мета-данные вручную

27

Что нам даёт devinfo?Исходный объект остается без изменений (WeakMap: объект → dev-данные)

Объединяет результаты инструментирования и ручные мета-данные

28

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

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

Сложности31

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

• Место создание результата

• Место создания фабрики

• Нужно второе

32

№2 Кэш (для фабрик)• Значение создается один раз и кладется в кэш

• Если значение уже создано, переиспользуем его

• К значению привяжется локация первого обращения

• Для второго использования значения эта информация будет бесполезна

• Это нам не подходит

33

Решение – PROXY

• Значения по-прежнему считаются идентичными

• ...кроме момента, когда хотим узнать локацию создания

Добавляется только в dev-режиме

34

Итоги

35

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

Главное – идея• Подход не завязан на фреймворк

• Но

• Требуется глубокая интеграция

• Специфика там, где происходит преобразование данных

37

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

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

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

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

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

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

43