Краткое введение в Solid JS. Узнайте о Solid JS и его функциях, а также создавайте современные веб-приложения.

Ресурсы

Пройти курс Solid JS (приложение Twitter Like): https://academy.eincode.com/courses/solid-js-firebase-the-complete-guide-twitter-clone-app

Что такое Solid JS?

Solid JS — это современная библиотека Javascript для создания пользовательских интерфейсов, которые в основном полагаются на компоненты. Это звонит в колокол? Да, это похоже на React JS, и на это есть причина.

Solid JS использует JSX, компонентную архитектуру и однонаправленный поток данных.

Основные особенности

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

Вот метрики, опубликованные на официальном сайте Solid JS.

Компоненты

Код в Solid JS организован в виде компонентов. Компонент обычно должен представлять одну часть пользовательского интерфейса.

Компонент возвращает JSX (представление для рендеринга). Он также может содержать код для регистрации функций жизненного цикла и эффектов и может содержать реактивные данные. Компонент вызывается только один раз (в отличие от React JS, где компоненты повторно выполняются столько раз, сколько изменяется состояние).

Вы можете думать об этом как о функции-конструкторе.

В приведенном ниже примере вы можете увидеть простое приложение Solid JS.

// A Simple Component
const CounterComponent = () => {
  // creates a reactive value, which is updated on UI
  // returns getter/setter pair
  const [count, setCount] = createSignal(0)

  onMount(() => {
    // Runs once when component is init
  })

  onCleanup(() => {
    // Runs once when component is destroyed
  })

  createEffect(() => {
    // called when count value is changed
    console.log(count());
  })

  // mutates count + 1
  const increase = () => setCount(count() + 1);
  // mutates count -1
  const decrease = () => setCount(count() - 1);

  return (
    <div>
      {/* Displays count value */}
      <div>Counter: {count()}</div>
      {/* Calls increase on button click */}
      <Button 
        onClick={increase}>Increase
      </Button>
      {/* Calls decrease on button click */}
      <Button 
        onClick={decrease}>Decrease
      </Button>
    </div>
  )
}

JSX

В Solid JS мы можем написать следующий синтаксис:

const element = <h1>Hello, world!</h1>;

Можно ли написать такой код на обычном JS? Конечно, нет.

Это называется JSX, что позволяет нам писать JS-код, отображаемый в браузере как HTML.

Подробнее о JSX читайте здесь: https://reactjs.org/docs/introduction-jsx.html.

Функции жизненного цикла

На момент написания Solid JS имел три функции жизненного цикла. Они очень понятны.

onMount(() => {
  // Run once when component is initialized. After the view is mounted.
})

onCleanup(() => {
  // Run once when component is destroyed/recalculated
})

onError(() => {
  // Run when children scope errors
})

Сигналы, Магазины — Реактивные данные

создать сигнал

Основным способом создания реактивных данных является использование функции createSignal.

const [count, setCount] = createSignal(0)

В приведенном выше примере createSignal(0) возвращает массив из двух элементов. Первый элемент — это функция геттер, которая возвращает значение. Она сложнее, чем геттер, но пока вы можете думать о ней так.

Если мы вызываем count, да, вы должны вызывать, потому что это функция.

// gets the value 0
count();

Вы получите значение 0, которое мы предоставили в качестве значения по умолчанию.

Второй элемент массива — это функция setter. Чтобы изменить значение, вы вызываете:

// sets the count to 100
setCount(100);
// returns 100
count();

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

<div>
  Current Count: {count()}
</div>

создать магазин

Альтернативой createSignal является createStore, который больше подходит для обработки объектов и вложенных данных.

Примером этого может быть:

const [count, setCount] = createStore({value: 0, lastAction: "none"})
// count holds object -> {value: 0, lastAction: "none"}

На этот раз вы получите обратно пару функций value и setter.

Чтобы получить значение

// gets the value 0
count.value;
// gets the value 'none'
count.lastAction;

чтобы изменить количество, укажите в качестве первого параметра ключ объекта, который вы хотите изменить. Второй параметр - фактическое значение.

// sets the count value to 100
setCount("value", 100);
// returns 100
count.value;

// sets the count lastAction to 'increment'
setCount("lastAction", "increment");
// returns 'increment'
count.lastAction;

Точно так же пользовательский интерфейс обновляется немедленно.

<div>
  Current Count: {count.value}
  Last Action: {count.lastAction}
</div>

С чего начать изучение Solid JS?

Официальный сайт Solid JS — лучший источник информации для изучения. Начните просматривать и пробовать разные вещи, и вы быстро улучшитесь.



SolidJS
Solid — это чисто реактивная библиотека. Он был разработан с нуля с реактивным ядром. На него повлиял…www.solidjs.com.



Веб-сайт содержит базовые учебные пособия с практическими примерами. В нем также перечислены полные документы API для получения информации обо всех функциях Solid JS.

Если вы хотите учиться, создавая настоящее приложение (Twitter Clone), курс Eincode указан в ресурсах.

Заключение

Solid JS — отличная библиотека. Я бы поставил его на один уровень с React JS — с точки зрения опыта программирования. Он прост в использовании, интуитивно понятен и предлагает большую свободу для разработчиков.

Если вам нравятся более структурированные полнофункциональные фреймворки, такие как Angular JS, то эта библиотека отличается от того, что вы ищете.

Кроме того, сообщество не такое большое, поэтому найти информацию о Solid JS в Интернете может быть сложнее, но на все нужно время…

Если вам нравится JSX с комбинацией чего-то нового, попробуйте. Вы не будете сожалеть об этом.

Ваше здоровье,

Филип