Сайт: https://www.solidstructure.io

Гитхаб: https://github.com/oslabs-beta/Solid-Structure

Цель была проста. Стоя на плечах гигантов (React), SolidJS, библиотека Javascript с реактивным интерфейсом, разработанная в 2019 году, стремилась создать действительно реактивную библиотеку интерфейса с однонаправленным потоком данных, разделением чтения и записи и неизменяемыми интерфейсами. С его тестами JS Framework и Isomorphic UI, 1,05 и 17 110 соответственно, кажется, что он хорошо стоит на этих плечах. (Чем ниже производительность браузера и выше скорость рендеринга необработанных данных на сервере, тем лучше.)

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

  • Рендеринг в DOM, а не в VDOM (виртуальный DOM)
  • Исходное состояние и функциональность магазина
  • Ориентация на производительность на основе детальной реактивности

Подобно традиционному ванильному JavaScript, SolidJS выполняет рендеринг непосредственно в DOM, что позволяет создать чрезвычайно производительную и молниеносно быструю библиотеку, которая очень мало требует от компилятора. SolidJS полностью ориентирован на реактивность и использует многие аналогичные функции, в частности компоненты и примитивы, хотя в SolidJS компоненты запускаются только один раз и используют обновление значений примитивов Solid, а именно сигналов, для регистрации изменений DOM. Есть много сходств и различий с React, которые мы рекомендуем вам изучить на их веб-сайте (SolidJS), поскольку это не является предметом статьи.

Будучи относительно новой, простой и производительной средой пользовательского интерфейса, ориентированной на реактивность, SolidJS не имеет инструмента разработки, помогающего разработчикам в отладке и оптимизации производительности. Из-за того, что большая часть реактивности твердого тела построена с помощью накопителей и сигналов, наличие набора инструментов, нацеленного на эти аспекты, несомненно, было бы полезным. На данный момент, без нашего инструментария, невозможно увидеть текущее состояние без консоли, регистрирующей каждый сигнал и компонент, и даже тогда нельзя было увидеть, как сигналы взаимодействуют и зависят друг от друга с какой-либо легкостью. Здесь мы вступаем.

Solid Structure – это инструмент разработчика внешнего интерфейса, предназначенный для визуализации зависимостей и структурных графов в реальном времени, а также монитор журнала, который отслеживает обновления от Signals для отображения всей реакции в приложении SolidJS. В результате присущей SolidJS реактивности Solid Structure фокусируется на отображении того, как сигналы могут запускать вычисления и изменять форму структурного графа, предоставляя разработчикам доступ к визуальной визуализации того, как сигналы взаимодействуют с компонентами и друг с другом. Помимо сосредоточения внимания на сигналах, Solid Structure дает разработчикам доступ к пониманию всех изменений в состоянии (начальное, текущее и предыдущее).

Solid Structure фокусируется на предоставлении визуальной обратной связи для всей реакции путем доступа к данным из сигналов и компонентов и рендеринга в графики и мониторы журналов с использованием библиотеки D3.JS. Это позволяет полностью погрузиться в живое представление вашего приложения SolidJS. Ниже приведены примеры того, что следует ожидать при запуске Dev Tool.

Установка:

Клонируйте репозиторий git clone https://github.com/oslabs-beta/Solid-Structure.git

Установите пакеты NPM:

установка нпм

Запустить среду разработки:

запуск нпм

Создано с помощью:

  • Solid.JS
  • Машинопись
  • СКСС
  • D3.JS
  • Вите
  • Инструмент разработчика API Chrome

Содействие:

Вклады — это то, что делает сообщество с открытым исходным кодом таким замечательным местом для обучения, вдохновения и творчества. Мы очень ценим любой ваш вклад.

  • Разветвите проект Создайте свою ветвь функций (git checkout -b feature/NewFeature)
  • Зафиксируйте свои изменения (git commit -m ‘Добавить новую функцию’)
  • Отправить в ветку (функция git push origin/NewFeature) Открыть запрос на извлечение

Познакомьтесь с нашей командой:

Мы хотели бы выразить особую благодарность Codesmith и OS-Labs за возможность работать с талантливыми инженерами в некоммерческом технологическом ускорителе.