Сайт: 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) Открыть запрос на извлечение
Познакомьтесь с нашей командой:
- Брэндон Бриги: Github, LinkedIn
- Мэтью Йен: Github, LinkedIn
- Марк Ермолов: Github, LinkedIn
- Таннер Лайон: Github, LinkedIn
Мы хотели бы выразить особую благодарность Codesmith и OS-Labs за возможность работать с талантливыми инженерами в некоммерческом технологическом ускорителе.