import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Сравнение с другими библиотеками",
  "children": [{
    "depth": 2,
    "value": "React",
    "children": [{
      "depth": 4,
      "value": "Совет по адаптации:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Vue",
    "children": [{
      "depth": 4,
      "value": "Совет по адаптации:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Svelte",
    "children": [{
      "depth": 4,
      "value": "Совет по адаптации:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Knockout.js",
    "children": [{
      "depth": 4,
      "value": "Совет по адаптации:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Lit и LighterHTML",
    "children": [{
      "depth": 4,
      "value": "Совет по адаптации:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "S.js",
    "children": []
  }, {
    "depth": 2,
    "value": "RxJS",
    "children": []
  }, {
    "depth": 2,
    "value": "Другие",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    h4: "h4",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "сравнение-с-другими-библиотеками",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#сравнение-с-другими-библиотеками",
        children: "#"
      }), "Сравнение с другими библиотеками"]
    }), "\n", jsxs(_components.p, {
      children: ["Этот раздел не может избежать некоторой предвзятости, но мы думаем, что вам важно понимать, где находится Solid по сравнению с другими библиотеками. В данном разделе мы не будет рассматривать производительность. Если вам хочется получить получить более полное представление о производительности, посмотрите ", jsx(_components.a, {
        href: "https://github.com/krausest/js-framework-benchmark",
        children: "JS Framework Benchmark"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "react",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#react",
        children: "#"
      }), "React"]
    }), "\n", jsx(_components.p, {
      children: "React оказал большое влияние на Solid. Его однонаправленный поток данных и явное разделение чтения и записи в реализации хуков дали основу интерфейсам Solid. Нам так же близка идея быть просто «библиотекой рендеринга», а не фреймворком.  В архитектуре Solid имеет строгое мнение о том, как подходить к управлению данными при разработке приложений, но не стремится ограничивать их выполнение."
    }), "\n", jsxs(_components.p, {
      children: ["Однако, несмотря на то, что во многих вещах Solid соответствует философии дизайна React, внутри он работает принципиально иначе. React использует ", jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/faq-internals.html",
        children: "Virtual DOM"
      }), ", а Solid - нет. Абстракция React - это раздел компонентов сверху вниз, где методы рендеринга вызываются повторно и различаются. Вместо этого Solid визуализирует каждый темплейт один раз, строит его реактивный граф (вычисляет его зависимости) и только после этого выполняет инструкции, связанные с мелкими изменениями."]
    }), "\n", jsxs(_components.h4, {
      id: "совет-по-адаптации",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#совет-по-адаптации",
        children: "#"
      }), "Совет по адаптации:"]
    }), "\n", jsxs(_components.p, {
      children: ["Модель обновления Solid не похожа на React или даже React + MobX. Вместо того чтобы думать о функциональных компонентах как о функции рендеринга, думайте о них как о деталях в конструкторе. Остерегайтесь деструктуризации или преждевременного доступа к ресурсам, теряющего реактивность. Примитивы Solid не имеют ограничений, таких как правила хуков, поэтому вы можете использовать их в любом месте на свое усмотрение. Для отрисовки списков вам не нужны ", jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/lists-and-keys.html#keys",
        children: "явные ключи"
      }), " в строках списка. Наконец, в Solid нет Virtual DOM, поэтому императивные API VDOM, такие как ", jsx(_components.code, {
        children: "React.Children"
      }), " и", jsx(_components.code, {
        children: " React.cloneElement"
      }), ", не имеют смысла. Мы рекомендуем находить различные способы решения проблем, используя их декларативно."]
    }), "\n", jsxs(_components.h2, {
      id: "vue",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#vue",
        children: "#"
      }), "Vue"]
    }), "\n", jsxs(_components.p, {
      children: ["Несмотря на то, что на дизайн Solid Vue не оказал особого влияния, эти фреймворки сравнимы по подходу. Оба фреймворка используют ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Proxy",
        children: "прокси"
      }), " в своей реактивной системе с автоматическим отслеживанием на основе чтения. Но на этом сходство заканчивается. Детализированное обнаружение зависимостей Vue просто передается в менее детализированную систему Virtual DOM и Component, тогда как Solid сохраняет свою детализацию вплоть до обновлений DOM."]
    }), "\n", jsx(_components.p, {
      children: "Vue ценит легкость, а Solid - прозрачность. Хотя новое направление Vue с Vue 3 больше соответствует подходу Solid. Эти библиотеки могут со временем выровняться, в зависимости от того, как они будут развиваться."
    }), "\n", jsxs(_components.h4, {
      id: "совет-по-адаптации-1",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#совет-по-адаптации-1",
        children: "#"
      }), "Совет по адаптации:"]
    }), "\n", jsxs(_components.p, {
      children: ["Как еще одна современная реактивная библиотека, миграция с Vue 3 должна показаться вам знакомой. Компоненты Solid очень похожи на ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Template_literals#%D1%82%D0%B5%D0%B3%D0%BE%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B_%D0%B8_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D0%BE%D0%B2",
        children: "теговые шаблона"
      }), " в конце функции Vue ", jsx(_components.code, {
        children: "setup"
      }), ". Вместо оборачивания ваших данных в ", jsx(_components.a, {
        href: "https://v3.ru.vuejs.org/ru/guide/reactivity-computed-watchers.html#%D0%B2%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D1%8F%D0%B5%D0%BC%D1%8B%D0%B5-%D1%81%D0%B2%D0%BE%D0%B8%D1%81%D1%82%D0%B2%D0%B0",
        children: "computed"
      }), ", в Solid вы можете использовать просто функции, так как реактивность в Solid повсеместна. Прокси в Solid намеренно доступны только для чтения. И, да, не судите Solid, ни разу не попробовав."]
    }), "\n", jsxs(_components.h2, {
      id: "svelte",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#svelte",
        children: "#"
      }), "Svelte"]
    }), "\n", jsxs(_components.p, {
      children: ["Svelte является пионером предварительно скомпилированного \"исчезающего фреймворка\". Solid в определенной степени использует эти подходы. Обе библиотеки действительно реактивны и могут создавать действительно небольшие бандлы (", jsx(_components.code, {
        children: "bundles"
      }), ") исполняемого кода, хотя Svelte является здесь победителем для небольших приложений. Solid требует немного большей прозрачности в своих объявлениях, меньше полагаясь на неявный анализ со стороны компилятора, но это главная причина, которая дает Solid превосходную производительность. Solid также сохраняет больше данных во время выполнения, что лучше масштабируется в более крупных приложениях. Демонстрационная реализация RealWorld от Solid на 25% меньше, чем у Svelte."]
    }), "\n", jsx(_components.p, {
      children: "Обе библиотеки призваны помочь своим разработчикам писать меньше кода, но подходят к нему совершенно по-разному. Svelte 3 фокусируется на оптимизации простоты работы с локализованными изменениями, уделяя особое внимание взаимодействию простых объектов и двусторонней привязке. Напротив, Solid фокусируется на потоке данных, сознательно используя CQRS и неизменяемый интерфейс. С функциональной композицией шаблонов, во многих случаях Solid позволяет разработчикам писать даже меньше кода, чем Svelte, хотя синтаксис шаблонов Svelte определенно лаконичнее."
    }), "\n", jsxs(_components.h4, {
      id: "совет-по-адаптации-2",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#совет-по-адаптации-2",
        children: "#"
      }), "Совет по адаптации:"]
    }), "\n", jsx(_components.p, {
      children: "Опыт разработчиков достаточно отличается, так что, хотя некоторые вещи аналогичны, это совсем другой опыт. Делить код на больше компонентов фактически не имеет цены в Solid, поэтому не бойтесь создавать их настолько много, насколько это необходимо!"
    }), "\n", jsxs(_components.h2, {
      id: "knockoutjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#knockoutjs",
        children: "#"
      }), "Knockout.js"]
    }), "\n", jsx(_components.p, {
      children: "Solid обязан своим существованием Knockout. Мотивом для этого проекта была модернизация модели для детального обнаружения зависимостей. Knockout был выпущен в 2010 году и поддерживает Microsoft Explorer, в то время как большая часть Solid не поддерживает IE вообще."
    }), "\n", jsx(_components.p, {
      children: "Привязки Knockout - это просто строки в HTML, которые просматриваются во время выполнения. Они зависят от контекста клонирования ($ parent и т.д.). В то время как Solid использует JSX или теговые шаблонные литералы для создания шаблонов, выбирая JavaScript API."
    }), "\n", jsx(_components.p, {
      children: "Самая большая разница может заключаться в подходе Solid к пакетной обработке изменений, который обеспечивает синхронность, тогда как в Knockout есть deferUpdates, который использует отложенную очередь микрозадач."
    }), "\n", jsxs(_components.h4, {
      id: "совет-по-адаптации-3",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#совет-по-адаптации-3",
        children: "#"
      }), "Совет по адаптации:"]
    }), "\n", jsx(_components.p, {
      children: "Если вы привыкли к Knockout, примитивы Solid могут показаться вам странными. Разделение чтения и записи сделано намеренно и вовсе не для того, чтобы усложнить жизнь. Постарайтесь принять ментальную модель состояние/действие/поток. Хотя библиотеки и выглядят похожими, продвигают они разные передовые практики."
    }), "\n", jsxs(_components.h2, {
      id: "lit-и-lighterhtml",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#lit-и-lighterhtml",
        children: "#"
      }), "Lit и LighterHTML"]
    }), "\n", jsx(_components.p, {
      children: "Эти библиотеки невероятно похожи и оказали некоторое влияние на Solid. В основном это заключается в том, что скомпилированный код Solid использует очень похожий метод для первоначального рендеринга DOM. Клонирование элементов шаблона и использование комментариев для указания инъекций компонентов - это то, что объединяет Solid и эти библиотеки."
    }), "\n", jsx(_components.p, {
      children: "Самая большая разница заключается в том, что, хотя эти библиотеки не используют виртуальную модель DOM, они обрабатывают рендеринг одинаково, сверху вниз, требуя разбиения компонентов. В отличие от этого Solid использует точный реактивный график для обновления только тех данные, которые были изменены. Вкупе с техникой клонирования элементов шаблона для первоначального рендеринга этот подход сохраняет прекрасный изначальный рендеринг, в то же время оптимизируя обновления."
    }), "\n", jsxs(_components.h4, {
      id: "совет-по-адаптации-4",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#совет-по-адаптации-4",
        children: "#"
      }), "Совет по адаптации:"]
    }), "\n", jsxs(_components.p, {
      children: ["Эти библиотеки довольно минимальны, и с их помощью легко создавать приложения. Однако имейте в виду, что ", " - это не просто HTMLElement (массив или функция). Пользуйтесь JSX. Хойстинг работает по большей части, но лучше всего мысленно думать o Solid, как о библиотеке рендеринга, а не о фабрике HTMLElement."]
    }), "\n", jsxs(_components.h2, {
      id: "sjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#sjs",
        children: "#"
      }), "S.js"]
    }), "\n", jsx(_components.p, {
      children: "Эта библиотека оказала наибольшее влияние на реактивный дизайн Solid. Solid использовал S.js в течение нескольких лет, пока набор функций соответствовал дизайну Solid. S.js - одна из самых эффективных реактивных библиотек на сегодняшний день. Он моделирует все с синхронными временными шагами, как цифровая схема, и обеспечивает согласованность без необходимости выполнять многие из более сложных механизмов, имеющихся в таких библиотеках, как MobX. Реакционная способность Solid - это своего рода гибрид между S и MobX. Это дает ему большую производительность, чем у большинства реактивных библиотек (Knockout, MobX, Vue), сохраняя при этом простоту ментальной модели для разработчика. В конечном счете, S.js по-прежнему является более производительной реактивной библиотекой, хотя разница едва заметна во всех, кроме самых изнурительных синтетических тестов."
    }), "\n", jsxs(_components.h2, {
      id: "rxjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rxjs",
        children: "#"
      }), "RxJS"]
    }), "\n", jsxs(_components.p, {
      children: ["RxJS - это реактивная библиотека. Хотя Solid имеет аналогичное представление о наблюдаемых (", jsx(_components.code, {
        children: "Observable"
      }), ") данных, он использует совершенно иное применение паттерна наблюдателя (", jsx(_components.code, {
        children: "observer"
      }), "). В то время как ", jsx(_components.code, {
        children: "Сигналы"
      }), " похожи на простую версию ", jsx(_components.code, {
        children: "Observable"
      }), " (только новую), шаблон автоматического обнаружения зависимостей заменяет около сотни операторов RxJS. Solid мог бы использовать этот подход, и действительно, более ранние версии библиотеки включали аналогичные операторы, но в большинстве случаев проще написать собственную логику преобразования в вычислениях. Observable ассоциируется с холодным запуском (", jsx(_components.code, {
        children: "cold start"
      }), "), одиночными подписками (", jsx(_components.code, {
        children: "unicast"
      }), ") и пуш-моделью (", jsx(_components.code, {
        children: "push-based"
      }), "). Эти характеристики часто противоположны тому поведению, которое мы хотим на клиенте. Solid понимает требования клиентских приложений вроде горячего запуска (", jsx(_components.code, {
        children: "hot startup"
      }), ") и множественной подписки (", jsx(_components.code, {
        children: "multicast"
      }), ") и использует их по умолчанию."]
    }), "\n", jsxs(_components.h2, {
      id: "другие",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#другие",
        children: "#"
      }), "Другие"]
    }), "\n", jsx(_components.p, {
      children: "Как вы могли заметить Angular и несколько других популярных библиотек отсутствуют в этом сравнении. Отсутствие опыта работы с ними не позволяет проводить адекватные сравнения. Как правило, Solid не имеет ничего общего с более крупными фреймворками, и их намного сложнее сравнивать."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=comparison-cc163b26.js.map
