Автор оригинала: FreeCodeCamp Community Member.
SUSHRUT SHIVASWAMY
Архитектура потока набрала популярность после того, как Facebook принял его. Это способ управлять состоянием компонентов реагирования, так что поток данных через приложение является однонаправленным.
Преимуществами такого подхода заключаются в том, что приложение состоит из немногих известных компонентов, которые передают состояние до вложенных дочерних компонентов. Особенностью реагирования, которая действительно дополняет этот подход к государственному управлению, заключается в том, что реагирование позволяет нам писать пользовательский интерфейс как функцию состояния. Это означает, что, поскольку состояние перколирует иерархию компонентов приложения, компоненты автоматически меняют представление, чтобы отразить изменения в состоянии.
JSX, система шаблонов, используемая реакцией, позволяет создавать многоразовые одноизовые компоненты.
Он также очень хорошо подходит для создания разграничения между структурой дома и поведением, связанным с ним.
- JSX дает чистый вид на структуру DOM, которая более интуитивно понятна, чем несколько строк JavaScript, необходимых для создания той же структуры DOM.
- Поведение, связанное с структурой DOM – EventHandlers, таких как OnClick, Onhever – обрабатываются как функции членов компонента.
- Любые изменения в структуру DOM требуют, чтобы пользователь звонил Установите для изменения состояния компонента вместо непосредственно мутирующего DOM Отказ Это облегчает отладку приложения, и он также гарантирует, что приложение всегда находится в определенном состоянии.
Однако, как сложность приложения выросло, подход потока также стал показывать свои ограничения.
Немногие компоненты условных компонентов, передавающих состояние дочерних компонентов, кажутся в порядке для небольших приложений. Но, поскольку сложность иерархии компонентов увеличивается, государственные компоненты должны делиться государством друг с другом.
Хотя можно поделиться состоянием между различными компонентами/классами в JavaScript через общие переменные или, предпочтительно, узор наблюдателя, поскольку количество компонентов увеличивается, становится сложнее для поддержания применения.
Простота компонентов, реагирующих на изменения в состоянии, запутана сложностями объектно-ориентированного дизайна.
Диаграммы – почему они трудно сделать?
Достижения о том, что веб-приложения получили выгоду от не изменили способ создания библиотек Charting. График также является презентационным компонентом, и технически можно назвать UI. Диаграмма также состоит из элементов DOM, которые контролируют его визуальный внешний вид.
Однако диаграммы различаются в одном ключевом аспекте: разработчики не относятся к SVG в качестве дома. Технически,
Также теги, используемые для создания изображения SVG, как >, & l t; rect />, а
Даже те, кто связан с приложениями, которые прилагают тяжелое использование SVG, обычно не знают о своей внутренней работе. Они используют другие библиотеки, такие как Snap Или D3, чтобы избежать хлопот понимания того, что происходит под капотом.
Предопустив основную сложность тега SVG, ощущается простым модельным комплексным конструкциям SVG.
Геометрия
Например, рассмотрим диаграмму бар.
Мы традиционно принимаем подход к файлам Cookie и разделите диаграмму на части:
- ось x
- ось Y
- бары
Приправленный разработчик заметит, что ось слова была написана дважды в указанном выше списке. Так что давайте создадим слой абстракции под названием Ось что подклассы могут наследовать от.
Чтобы сделать бары, мы можем создать отдельный класс под названием Бар это использует Шкала, предоставленная Ось Класс Отказ Как графики приходят в различных формах, это имеет больше смысла иметь созвучный слой абстракции Геометрия что другие классы могут наследовать, а именно Бар , Точка , Линия и Область Отказ В качестве более сложных диаграмм могут быть добавлены несколько новых типов геометрии для отображения различных видов диаграмм.
После вышеуказанной методологии диаграмма содержит три или более компонентов состояний, которые используют свойства друг друга, чтобы сделать значимый график.
Чтобы обновить или улучшить график, ожидается разработчик для знать состояние, чтобы мутировать в каждом из этих компонентов Отказ Поскольку состояние разбросано по различным компонентам, даже простые изменения занимают много времени для новых разработчиков. Обращение изменений состояния также становится актуальным.
В приведенном выше примере геометрия использует масштаб осей. Для изменения диаграммы, который должен быть изменен, диапазон каждой оси должен быть обновлен до Обновление Геометрия Отказ
Не следуя этому заказу приведет к визуальным артефактам – потому что геометрия будет искажена из-за недействительной масштабы. В худшем случае неспособность выполнять это Заказанная последовательность операций может покинуть график в неопределенном состоянии.
Наличие перекрестной связи между диаграммами дополнительных соединений этой проблемы. Оркестровка состояния изменяет охватывает несколько графиков/взаимодействующих компонентов.
Так много взаимодействующих компонентов с направленными отношениями также могут привести к циклическим зависимостям между компонентами.
Это было проблемой, которая стимулировала рамки развития UI, до тех пор, пока разработка веб-приложений с одним источником истины стала стандартом. Наиболее влиятельная библиотека по направлению переключения к одному источнику истины WebApps была Redux.
Примечание : Следующий раздел объясняет, как использование Redux облегчает разработку веб-приложения. Не стесняйтесь пропустить его, если вы уже знаете о Redux.
Redux.
Redux это библиотека, разработанная Дэном Абрамовым. Это помогает облегчить бремя разработчиков, обеспечивая простой способ сохранить состояние заявления.
Redux представил концепцию государственного магазина, который действовал как единственный источник правды для всего приложения. Вместо компонентов непосредственно мутируют состояние, каждый компонент отправлял бы действие, которое будет совершать изменения в единый государственный магазин.
Каждое действие было идентифицировано Уникальный Enum, который был бы зарегистрирован каждый раз, когда изменение было привержено государственному магазину. Это было легко отслеживать, как был мутирован Государственный магазин.
После того, как изменение было привержено государственному магазину, новое состояние будет перколировать иерархию компонентов. Компоненты будут повторно отображать или игнорировать изменения в зависимости от того, была ли часть состояния, которая изменилась для них. Компоненты больше не могли мутировать состояния в изоляции. Это должно было быть на глобальном уровне.
Основная цель состоит в том, чтобы изолировать государственное управление от побочных эффектов, таких как рендеринг и получение данных с сервера. Всегда оставляйте приложение в определенном состоянии.
Это закладывает основу для детерминированного взгляда визуализации. Учитывая последовательность изменений состояния, вы всегда будете в конечном итоге с тем же представлением.
Этот уровень детерминированной рендеринга зрения особенно полезен для вне форума. Здесь последовательность государственных мутаций, которые случаются, когда пользователь не входят в автономный режим, могут быть сохранены и воспроизведены, когда подключение подключения, чтобы вернуть одно и то же представление.
Успех модели React-Redux породила ряд других библиотек, таких как Vue и Цикл , а также несколько других реализаций Государственного магазина, как MobX и Vuex Отказ
Ближе взгляда на SVG
SVG обозначает масштабируемую векторную графику. SVG Тег может необязательно дом различных видов геометрии, которая подвергает ряд атрибутов DOM.
Круг :
Атрибуты:
- CX : x Смещение круга в просмотре
- CY : y Смещение круга в видоме
- R : радиус круга
Polyline :
Атрибуты:
- Очки: Массив очков (X, Y), через которые A линия нарисован.
Полигон :
Атрибуты:
- очки : массив точек (x, y) для построения многоугольника.
Текст : <Текст />
Атрибуты:
- х : x смещение текста в просмотре
- y : y смещение текста в просмотре
- Innerntext : Текст, чтобы показать.
Многие больше типов геометрии доступны в стандарте SVG, но для целей графиков приведено вышеупомянутое. Эти геометрические элементы также могут быть созданы с нормальными CSS.
Найти мост
Это руководящие принципы современного разработки веб-приложений и разработки библиотек Charting. Попробуем изолировать, где разрабатывающие библиотеки Charting отличаются от веб-приложений:
- Веб-приложения состоят из узлов DOM. Графики состоят из геометрии SVG.
- Веб-приложения можно разбиться в многоразовые разделы DOM, которые могут быть смоделированы как компоненты. Графики не смоделированы как многоразовый набор геометрий.
- Веб-приложение Каркасы всегда соединяются с помощью шаблонного двигателя, так что структура DOM может быть смоделирована в разметке, а поведение можно отделить от него и записать в JavaScript. Графики нет таких структур.
- Веб-приложение Frameworks позволяют ввести государственный магазин, чтобы включить через использование плагина. Графики Обычно моделируются в виде состоятельных компонентов.
Сложность диаграммы реконструкции
График представляет собой визуальный инструмент, который демонстрирует вариацию по полям в данных с использованием геометрии.
Так как это работает?
Глядя на диаграмму выше, что мы видим? Смещение кругов в поле зрения на основе поля, присутствующих в данных.
Что еще?
- Смещение клещей вдоль дна на основе поля в данных.
- Текстовые этикетки смещены вдоль дна на основе поля в данных.
- Так же, как указано выше вдоль левой стороны графика.
Давайте сломаемся до уровня геометрии.
Как мы визуализируем круги в ScatterPlot?
Как насчет осей? Ось х: текст + галочки
Существует подобная структура SVG для оси Y, за исключением того, что изменение функции масштаба и поля X, Y инвертированы.
Общая тема выше состоит в том, что График рассматривается как осмысленное расположение геометрии:
- Каждая геометрия в пространстве имен SVG подвергает визуальные атрибуты
- Значение этих атрибутов связано с расчетным значением
- Рассчитанное значение зависит от масштаба
- Масштаб зависит от поля в данных и диапазоне
Что такое масштаб?
Шкала – это функция, которая отображает данные в положение в просмотре.
Что такое вход в масштаб?
- Домен поля
- длина viewport для отображения
Пусть R быть длиной просмотра и D быть доменом данных.
- Тогда мы можем определить функцию масштабирования S в виде:
- S (D, R) + B
где B является постоянным.
Сколько масштабов нужно иметь диаграмму?
Если вы думаете два, то вы не правы.
Масштаб не существует только вдоль осей X- и Y. Сами оси присутствуют только в диаграмме, как Визуальные анкеры так что Пользователи могут выстроить вариации данных вдоль нескольких измерений.
Осью является просто геометрия, которая отображается с использованием масштаба.
Сколько там измерений?
Это не два. Просмотр просмотра двумерной, но не имеет ничего общего с размером диаграммы. Размерность диаграммы определяется количеством используемых функций масштабирования.
Общесторонняя концепция состоит из двух простых терминов: Геометрия и Масштаб Отказ
Каждая геометрия подвергает визуальные атрибуты, которые контролируют его внешний вид.
Значение этих атрибутов можно подключить к масштабированию функций. Функция масштабирования привязана к конкретной области в данных.
Это поддается идее, что каждый визуальный атрибут в графике может быть привязан только к одному полю в таблице данных.
Учитывая это разложение диаграмм, мы можем моделировать график разброса выше следующим образом:
Поле Лошадиные силы используется для создания функции масштабирования под названием HorsePowerscale () Отказ
Поле Ускорение используется для создания функции масштабирования под названием УскорениеКале () Отказ
Поскольку мы не различаем размер кругов, требуются только два функции масштабирования.
Любой круг Я В рассеянии можно представить как
где Ti это Я TH TUPLE в DataTable.
Учитывая, что только два функция масштабирования использовались, размерность вышеуказанного графика становится двоих.
Если мы также модулировали размер каждого круга, используя функцию масштабирования, связанной с другим полем, то размерность будет три.
Это приведет к тому, что известно как «пузырь-диаграмма».
Грамматика графики
Это похоже на Грамматика графики (GOG) Подход, где каждый график определяется меткой (геометрией) и визуальными кодировками, используемыми отметкой.
В Gog подход к рассеянию будет представлен как:
{mark: 'circle',
encoding: {x: 'horsepower',
y: 'acceleration'
}
}
Обратите внимание, что между кодированием геометрии Gog и визуальных атрибутов вознаграждается однозначное отображение. Отказ
Ось также может быть представлена так же:
- Оси X – это геометрия галочки с его атрибутом X-смещения, связанного с
HorsePowerscale ()и его y-офсетное установлено на 0. - Оси Y – это геометрия галочки с его атрибутом y-офсетного привязанного к
УскорениеКале ()и его смещение X-смещения на 0.
Чтобы сделать разброс со всеми его элементами, следующий фрагмент кода будет достаточно:
Разложение диаграмм в ассоциацию между визуальными атрибутами и функцией масштабирования позволяет нам просматривать диаграмму в виде веб-приложения.
Web Application Frameworks Модель UI как функция состояния.
Каркасы диаграмм должны моделировать геометрию как функцию масштаба.
Таким образом, идея, которая облегчает разработку веб-приложений, может быть легко расширена для создания диаграмм:
- Изначально табличные данные поставляются в качестве ввода.
- Для каждого поля в массиве данных создается функция масштабирования. Функция масштабирования выборочно воссматривает значения, когда поле в столбце привязана к изменениям. Тот же функция масштабирования проводится во всем приложении.
- Каждая геометрия смоделина как компонент, который подвергает визуальные атрибуты.
- Значение этих визуальных атрибутов привязано к функции масштабирования, которая реагирует на изменения данных.
- Коллекции геометрии могут быть представлены в разметке с использованием шаблонного двигателя выбора, такого как HyperHTML, усы или руль. В идеале, шаблонный двигатель должен быть введен в качестве плагина, чтобы мы могли избежать писать привязки для разных библиотек, таких как реагирование и угловые.
- Государственный магазин, который избирательно вычисляет масштабы, также следует также представить плагин.
Давайте посмотрим, что наносят график вместе с использованием приведенных выше принципов:
Мы используем реакцию в качестве механизма шаблонов и Redux в качестве состояния в приведенном выше примере.
Приведенный выше подход – это просто грубая реализация, какую структуру, которая может бы моделировать диаграммы, как WebApps, хотели бы хотелось бы.
Обратите внимание на отделение механизма шаблонов и состояния состояния из фактической логики рендеринга.
Окончательные точки
В идеале геометрии/диаграммы, которые мы создаем, должны быть доступны в качестве компонентов в рамках выбора пользователя вместе с их государственным магазином. Если кажется немыслимым, что что-то вроде этого можно даже сделать, оставайся спокойным. Это было сделано раньше.
Skatejs это компилятор, который создает веб-компоненты, но позволяет пользователю переключать внутренние двигатели рендеринга.
Пользователи могут выбирать между React, PreaCT, LIT-HTML или расширить интерфейс рендерера для написания собственного. Рендерер по умолчанию просто мутирует DOM напрямую.
Мы можем быть еще более амбициозными с тем, что мы выбираем, как только у нас синхронный рендеринг в сочетании с государственным управлением.
Представьте себе TickProvider Компонент, который позволяет рендурировать только небольшие кластеры геометрии в данной анимационной кадре, а также позволяя нам определить узкие места в нашем конвейере рендеринга.
Учитывая, что график представляет собой значимое расположение геометрии, следует, что значимые кластеры геометрии должны сделать вместе.
В приведении сюжета рассеяния для каждой группы кругов, которые рендерируют, соответствующие разделы геометрии оси X/Y должны также одновременно рендерировать.
Если мы нарушим рендурирование в куски, где каждый чан состоит из одного значимого кластера геометрии, как смоделировано выше, мы можем поддерживать красивые переходы, которые добавляют к визуальной привлекательности графика.
Еще одно преимущество TickProvider Это то, что мы можем профилировать и убедиться, что каждый кластер геометрии полностью отображается во времени, отведенные на галочку. Это поможет избежать замораживания пользовательского интерфейса, когда считается подсчетом геометрии, очень большой. Вместо того, чтобы запустить петлю рендеринга по всей геометрической коллекции, мы могли бы получить вызовы рендеринга в синхронизации с кадрами анимации.
Мы также можем сломать расчет значений визуальных атрибутов.
Рассмотрим таблицу данных, которая имеет N Поля используются для рерантива панелей с приведенным выше подходом.
Поскольку мы используем централизованный государственный магазин, мы можем рассчитать значения N Функция масштабирования и запомнить их. Им нужно только пересчитать, когда соответствующие изменения поля таблицы данных.
Также рассмотрим уравнение ниже, которое вычисляет значение м Визуальные атрибуты на основе функций масштабирования.
0-е значение для визуального атрибута V , это связано с полем 0 из N , может быть рассчитан следующим образом:
V (0) (D0, R) + B0
- где D0 – 0-й кортеж данных из таблицы данных
- R – это диапазон, поставляемый как опоры для компонента
- B0 постоянна
Если мы пишем ряд таких уравнений вместе, мы видим это:
V (0) (D0, R) + B0
V (1) (D1, R) + B1
V (2) (D2, R) + B2
..
V (m) (dm, r) + bm
Сама функция масштабирования может быть выражена как линейное уравнение. У нас есть набор линейных уравнений, которые могут быть вычислены для расчета значения для визуальных атрибутов.
Как?
Вышеуказанное расположение выглядит подозрительно, как матрица.
Вычисления в браузере медленные, но матричные вычисления могут быть включены, используя ускорение GPU.
Поэтому моделирование диаграммы в виде геометрии как функция масштаба может помочь нам намного быстрее представить диаграммы, а также обрабатывать большие объемы данных с быстрым первым видом.
Визуализация данных – это то, что помогает нам Glean Insights от больших количеств данных. Влияние о том, что оно о принятии решений постепенно побуждается с несколькими организациями, которые стремятся принимать решения о приводях данных.
Безопасно сказать, нам нужен более надежный, доступный и поддерживаемый способ разработки визуализации.
Как вы думаете?