МРТ для данных, avito spa meetup #2
TRANSCRIPT
МРТ для данных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
Подробнее про инспектор шаблонов1. Доклад Романа Дворнова (февраль 2015)
2. Слайды slideshare.net/basisjs/spa-45289195
3. Видео youtu.be/IUtbbN9aevU
4. Адаптация для backbone и react github.com/lahmatiy/component-inspector
10
Погружение
в технические детали
12
13
Трансформация значений-скаляров
В результате создается такой же реактивный скаляр:
будет изменяется при изменении породивших его значений
14
Вычисление значения по набору – индексыПримеры: сумма, количество элементов
Значение-результат знает про изменением набора, а именно...
...отслеживается 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
ВопросыНастя Горячева, почта [email protected], твиттер @tyanasgo
43