Представляем Тетрахром

Соавторы: Риса Очиай , Терри Парк , Марко Сюй

Почему мы построили Tetrachrome

Мы часто видим инструменты разработчика, которые визуализируют фронтенд, но не хватает инструментов, которые визуализируют бэкэнд или полный стек, от фронтенда до бэкенда и того, что происходит между ними. Как опытные разработчики, мы считаем, что сохранение целостной перспективы является ключом к прочной основе, а также оказывается чрезвычайно полезным для разработчиков, изучающих новую экосистему или кодовую базу. Мы решили построить Tetrachrome, используя React — самый популярный интерфейсный фреймворк — и Node.js/Express — самую популярную среду выполнения вместе с фреймворком, наиболее часто используемым с Node.js. Просмотрите наш инструмент ниже и продолжайте читать, чтобы узнать, как использовать Tetrachrome!

React был создан разработчиками Facebook в 2013 году, а затем в 2015 году он был представлен сообществу открытого исходного кода. React использует однонаправленный поток данных сверху вниз и обеспечивает модульность благодаря своей компонентной архитектуре. Как? С помощью виртуального DOM и React Fiber. Виртуальный DOM React позволяет фреймворку повторно отображать только те компоненты, которые требуют обновления, с помощью React Fiber, который был представлен в React v16.0. React Fiber — это объект, состоящий из односвязного списка узлов, которые переплетаются как родственные отношения и отношения родитель-потомок — Tetrachrome обертывает пользовательское приложение и отображает отношения этих компонентов.

Часто идущие рука об руку с React на внешнем интерфейсе, Node.js и/или Express.js реализуются на бэкэнде по множеству причин. Node.js — это неблокирующая среда выполнения на стороне сервера, управляемая событиями, построенная на движке Chrome JavaScript V8. Express — это облегченная веб-инфраструктура Node.js, использующая шаблон проектирования промежуточного программного обеспечения, который обеспечивает масштабируемость приложений и широко поддерживается в сообществе с открытым исходным кодом, что обеспечивает широкий спектр совместимости с другими технологиями. Tetrachrome извлекает все маршруты и сетевые журналы через Express и выводит их в проанализированном табличном формате, который передается через библиотеку WebSocket.

Наше видение и ключевые особенности

Наше видение Tetrachrome — быть продуктом с открытым исходным кодом для разработчиков при изучении нового приложения, будь то переход на новую роль или изучение другого приложения просто так! Мы создали этот продукт с открытым исходным кодом, используя React, Node.js, Express в качестве простой отправной точки, и мы воодушевлены перспективой расширения нашего продукта с открытым исходным кодом на большее количество интерфейсных и серверных фреймворков и языков.

Ключевые особенности нашего приложения включают в себя:

• синтаксический анализ дерева React Fiber Tree пользовательского приложения и создание визуализации дерева компонентов, включая отношения родитель-потомок и одноуровневые отношения, с использованием D3.js
• анализ объекта Express пользовательского приложения и создание таблицы всех маршрутов и связанных методов
• захват HTTP-запросов от взаимодействия клиента с пользовательским приложением и создание таблицы методов, конечных точек, статусов, длины контента, времени ответа и временных меток.

Предполагая, что вы уже установили Node.js и NPM, установите пакет Tetrachrome, выполнив в терминале следующую команду:

npm i tetrachrome

Добавьте Tetrachrome в серверную часть (часто в файл server.js) вашего приложения:

const { tetrachrome, routeStack } = require('tetrachrome');

app.use(tetrachrome);
routeStack(app);

proxy: {
  '/tetrachrome': {
    target: 'http://localhost:3000/',
    secure: false,
  },
}

• Интерфейс — отображение компонентов вашего пользовательского приложения с использованием нашего алгоритма парсинга через ваше дерево React Fiber.
• Backend — отображение доступных путей и связанных с ними методов
• Журналы — табличное отображение всех HTTP-запросов, поступающих на ваш пользовательский сервер.

‍ Как вы можете помочь

Спасибо за чтение! Мы открыты для отзывов о нашем продукте, и мы были бы более чем счастливы, если бы вы захотели разветвить наш репозиторий и отправить запрос на вытягивание с любым потенциальным вкладом или связаться с командой.

Отметьте нас на GitHub: github.com/oslabs-beta/tetrachrome

Подпишитесь на нас в LinkedIn: linkedin.com/company/tetrachrome-open-source/

Загрузите наш инструмент на NPM: npmjs.com/package/tetrachrome

Тетрахром вам предлагает:

‍ Риса Очиай | Линкедин | GitHub
‍ Терри Парк | Линкедин | GitHub
‍ Джуди Ву | Линкедин | GitHub
‍ Марко Сюй | Линкедин | Гитхаб