Первое приложение на SolidJS

[finnish]

Библиотека привлекается меня несколькими критериями: малый вес, скорость работы, встроенный State Manager. Кстати, MobX может работать с SolidJS, но надо ли?..

Для работы с ней нужно лишь слегка изменить мышление из React-парадигмы "ререндеры + деструктуризация" в сторону "один рендер + чтение пропсов из объекта". Да, немаловажным является то, что компоненты SolidJS рендерятся только один раз - сразу отпадает необходимость в useMemo, useCallback, useRef. Несмотря на отсутствие хуков, жизненный цикл в каком-то виде присутствует, есть onMount и onCleanup (aka onUnmount). Эффекты тоже достаточно просто реализованы.

Хоть библиотек для него и мало, мне их оказалось достаточно, чтобы сделать несколько небольших проектов.

[impwx]

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

В демке приложения есть баг: клик на название любой задачи почему-то переключает статус первой из них.

[Tatiana_Polonskaia]

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

За баг - спасибо, исправимся!

[DmitryKazakov8]

Согласен, главный минус - малое коммьюнити и количество библиотек. В реальных проектах нужен очень большой выбор библиотек, потому что все с нуля писать - не только занимает много времени (даже для селектов библиотеки пишутся годами из-за совместимости с большим количеством браузеров), но и требует намного более тщательной поддержки, что усложняет проекты. То есть упрощение написания функционала в SolidJS по сравнению с React становится незначительным по сравнению с тем, что нужно самостоятельно реализовывать на порядки больше компонентов.

Но библиотека хорошая, спасибо за статью.

[Kergan88]

>Да, вы правы, очевидный плюс SolidJS - это отсутствие виртуального DOM, поэтому более шустрый и тратит меньше памяти

Вообщето виртуал дом - это оптимизация. То есть с ним заведомо быстрее чем без него, иначе он и не нужен.

[Tatiana_Polonskaia]

Согласна, виртуальный DOM позволяет проводить манипуляции быстрее, чем с настоящим DOM. В SolidJS просто используется другая технология - локальная/мелко-зернистая и т.д. реактивность для обновления DOM, подробнее об этом можно узнать в документации. Результат по сравнению SolidJS с React находится здесь (js-framework-benchmark)

[OldVitus]

Вообще-то виртуал дом это оптимизация innerHTML и с ним заведомо медленнее чем с натуральным DOM

[mobilz]

иначе он и не нужен.

где-то поперхнулся react-native

[mr-quokka]

Можете кратко описать преимущества перед обычным Vue 3?

[HomoLuden]

В комментариях выше упомянуто, что отказ от Virtual DOM приводит к ускорению. Хотя каким образом отказ от технологии ускорения работы с DOM приводит к ускорению мне лично не понятно.

[zede]

vue сейчас, кстати, тоже активно ведет разработку над no-vdom решением на основе реактивности как в Solid: vue vapor mode. Это будет опциональный режим для работы компонентов

[Tatiana_Polonskaia]

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

[pvlbgtrv]

Мне solidjs больше понрпвился, чем реакт. rust+tauri+solidjs = быстрый desktop app

[finnish]

Библиотека привлекается меня несколькими критериями: малый вес, скорость работы, встроенный State Manager. Кстати, MobX может работать с SolidJS, но надо ли?..

Для работы с ней нужно лишь слегка изменить мышление из React-парадигмы "ререндеры + деструктуризация" в сторону "один рендер + чтение пропсов из объекта". Да, немаловажным является то, что компоненты SolidJS рендерятся только один раз - сразу отпадает необходимость в useMemo, useCallback, useRef. Несмотря на отсутствие хуков, жизненный цикл в каком-то виде присутствует, есть onMount и onCleanup (aka onUnmount). Эффекты тоже достаточно просто реализованы.

Хоть библиотек для него и мало, мне их оказалось достаточно, чтобы сделать несколько небольших проектов.

[Lazytech]

"btn-succes": props.type === "add",

Опечатка: btn-succes вместо btn-success.

[Lazytech]

По идее, для некоторых значений, особенно если они повторяются, иногда может быть полезно использовать константы.

const BTN_SUCCESS = "btn-success";
const BTN_DANGER = "btn-danger";

export default function Button(props: Props) {
  return (
    <button
      type="button"
      class=`btn ${BTN_SUCCESS}`
      classList={{
        [BTN_SUCCESS]: props.type === "add",
        [BTN_DANGER]: props.type === "delete",
      }}
      onClick={props.onClick}
    >
      {props.name}
    </button>
  );
}

Не проверял корректность измененного кода.

[winkyBrain]

Подскажите, дефолтные экспорты компонентов - это необходимость в SolidJS? Как например отсутствие деструктуризации пропсов

[finnish]

Нет, библиотека этого не требует.