Reactrix: аналитический прототип для React

Введение

Когда команда разработчиков приступает к разработке нового приложения React, они должны тщательно продумать, как будут структурированы их компоненты. Это важный шаг, потому что он определит, насколько хорошо работает их продукт и как команда будет продолжать работу над своим приложением. Производительность — это важный аспект, о котором разработчики всегда должны помнить, потому что это напрямую влияет на то, как пользователи будут работать с их приложениями.

Познакомьтесь с Реактрикс

Reactrix — это инструмент аналитического прототипирования, позволяющий разработчикам React быстро создавать компоненты и определять, какие иерархии дерева компонентов более эффективны, чем другие. Существует много инструментов для быстрого прототипирования компонентов React, но ни один из них не позволяет вам быстро оценить производительность продукта и принять важные решения, которые могли бы предотвратить дорогостоящую задачу реструктуризации кода на более поздних этапах цикла разработки. Reactrix предоставляет набор инструментов не только для быстрого создания деревьев компонентов React, но также для сравнения и сопоставления производительности каждой древовидной структуры путем сохранения и анализа их показателей времени рендеринга с помощью снимков.

Прототипирование

Начните создавать структуру приложения, перетаскивая компоненты в дерево компонентов. Дерево компонентов позволяет вам просматривать и переупорядочивать отношения родитель/близнец/потомок. Вы также можете создавать повторно используемые компоненты в области сведений о компонентах и ​​снова обращаться к ним в библиотеке компонентов между сеансами. Когда структура приложения будет завершена, просмотрите свое приложение в представленной демонстрации с полным взаимодействием. В будущем мы хотели бы создавать экспортируемые и настраиваемые компоненты React на основе дерева иерархии компонентов и ввода сведений о компонентах.

Профилирование

Когда визуализируется предварительный просмотр вашего приложения, Reactrix профилирует начальную производительность рендеринга и отображает данные на гистограмме показателей производительности. Вы можете сохранить данные профилирования вместе с текущей структурой приложения, сделав моментальный снимок. Снова получите доступ к данным о производительности, переключив нужный снимок на панели снимков. Используйте это, чтобы сравнить профили производительности между моментальными снимками и оптимизировать структуру приложения. В будущем мы хотели бы профилировать больше взаимодействий помимо первоначального рендеринга и сохранять снимки между сеансами.

Начиная

• Просто клонируйте репозиторий на свой локальный компьютер.

git clone https://github.com/oslabs-beta/Reactrix.git

npm install

node dev.js

Под капотом интерфейс перетаскивания построен поверх React DnD и пакета npm Родриго Ансельмо . Мы модифицировали метод onDrop, чтобы он распознавал внешние узлы, и внедрили хук, который считывает объект дерева иерархии, чтобы доставлять полезную нагрузку сведений о конфигурации компонента всякий раз, когда дерево изменяется пользователем.

Для профилирования компонентов мы изначально пытались подключиться к __REACT_DEVTOOLS_GLOBAL_HOOK__ с помощью исправлений обезьян. Однако мы обнаружили, что связь была хрупкой и непоследовательной. Наше решение состояло в том, чтобы обернуть наше демонстрационное приложение компонентами Profiler, которые обновляют состояние в хранилище профилировщика при рендеринге каждого компонента. Компонент показателей производительности подписан на хранилище профилировщика и получает данные для отображения на гистограмме.

Как внести свой вклад

Reactrix — это продукт с открытым исходным кодом, который постоянно обновляется. Если вы заинтересованы в том, чтобы внести свой вклад в продукт, разветвите репозиторий и поработайте над веткой, чтобы реализовать функцию. Четко определите, к чему работает ветка, с помощью описательных коммитов и отправьте код в свою ветку. Наконец, создайте запрос на извлечение.

Авторы

Кевин Чанг @ LinkedIn | Гитхаб

Джей Хо @ LinkedIn | Гитхаб

Тайхикус Ли @ LinkedIn | Гитхаб

Джонатан Тэм @ LinkedIn | Гитхаб