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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "FAQ",
  "children": [{
    "depth": 3,
    "value": "1. JSX ohne ein VDOM? Ist das Vapourware? Ich habe prominente Stimmen wie die der Autoren anderer Frameworks sagen gehört, dies sei nicht möglich.",
    "children": []
  }, {
    "depth": 3,
    "value": "2. Wie ist Solid so performant?",
    "children": []
  }, {
    "depth": 3,
    "value": "3. Gibt es React-Compat?",
    "children": []
  }, {
    "depth": 3,
    "value": "4. Warum funktioniert Destructuring nicht? Ich habe festgestellt, dass ich das beheben kann, indem ich meine ganze Komponente in eine Funktion verpacke.",
    "children": []
  }, {
    "depth": 3,
    "value": "5. Kannst du Unterstützung für Komponentenklassen hinzufügen? Ich finde die Lifecycles einfacher zu verstehen.",
    "children": []
  }, {
    "depth": 3,
    "value": "6. I hasse JSX wirklich, gibt es vielleicht eine Template-DSL? Oh, ich sehe, du hast Tagged Template Literals/Hyperscript. Vielleicht nehme ich einfach die...",
    "children": []
  }, {
    "depth": 3,
    "value": "7. Wann benutze ich ein Signal und wann einen Store? Warum sind diese unterschiedlich?",
    "children": []
  }, {
    "depth": 3,
    "value": "8. Warum kann ich nicht einfach einen Wert in Solids Store zuweisen, wie ich es in Vue, Svelte oder MobX kann? Wo ist das bidirektionale Data-Binding?",
    "children": []
  }, {
    "depth": 3,
    "value": "9. Kann ich nur die Reaktivität von Solid ohne den Rest verwenden?",
    "children": []
  }, {
    "depth": 3,
    "value": "10. Hat Solid eine Next.js oder Material-Komponenten-artige Library, die ich benutzen kann?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "faq",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#faq",
        children: "#"
      }), "FAQ"]
    }), "\n", jsxs(_components.h3, {
      id: "1-jsx-ohne-ein-vdom-ist-das-vapourware-ich-habe-prominente-stimmen-wie-die-der-autoren-anderer-frameworks-sagen-gehört-dies-sei-nicht-möglich",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-jsx-ohne-ein-vdom-ist-das-vapourware-ich-habe-prominente-stimmen-wie-die-der-autoren-anderer-frameworks-sagen-gehört-dies-sei-nicht-möglich",
        children: "#"
      }), "1. JSX ohne ein VDOM? Ist das Vapourware? Ich habe prominente Stimmen wie die der Autoren anderer Frameworks sagen gehört, dies sei nicht möglich."]
    }), "\n", jsx(_components.p, {
      children: "Es ist möglich, wenn man nicht das Aktualisierungsmodell von React hat. JSX ist eine Template-Domain-spezifische-Sprache wie jede andere. Nur eine, die gewisser Weise flexibler ist. Willkürlichen JavaScript-Code einzufügen kann teilweise eine Herausforderung sein, was aber nicht anders ist als etwa die Unterstützung von Spread-Operatoren. Also nein, das ist keine Vapourware, sondern ein Ansatz, der erwiesenermaßen der Performanteste ist."
    }), "\n", jsx(_components.p, {
      children: "Der wahre Vorteil kommt aus der Erweiterbarkeit. Der Compiler arbeitet für einen, indem er optimale native DOM-Aktualisierungen gibt, man aber die Freiheit von Libraries wie React hat, Komponenten mit Techniken wie Render Props und Komponenten höherer Ordnung an der Seite reaktiver \"Hooks\" zu schreiben. Magst du nicht, wie der Kontrollfluss von Solid arbeitet? Schreib' deinen eigenen."
    }), "\n", jsxs(_components.h3, {
      id: "2-wie-ist-solid-so-performant",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-wie-ist-solid-so-performant",
        children: "#"
      }), "2. Wie ist Solid so performant?"]
    }), "\n", jsx(_components.p, {
      children: "Wir wünschten, wir könnten es an einer einzelnen Sache festmachen, aber es ist wirklich die Kombination mehrerer wichtiger Designentscheidungen:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "Explizite Reaktivität, so dass nur die Dinge, die auch reaktiv sind, verfolgt werden."
      }), "\n", jsx(_components.li, {
        children: "Kompilierung mit Fokus auf die initiale Erstellung. Solid verwendet Heuristiken, um die Granularität zu lockern, damit die Zahl der Berechnungen reduziert werden kann, aber Aktualisierungen granular und performant durchgeführt werden."
      }), "\n", jsx(_components.li, {
        children: "Reaktive Ausdrücke sind nur Funktionen. Das ermöglicht \"verschwindende Komponenten\" mit verzögerter Prop-Auswertung ohne unnötige Wrapper und Synchronisationsaufwände."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Dies sind derzeit einzigartige Techniken in einer Kombination, die Solid einen Vorteil gegenüber der Konkurrenz gibt."
    }), "\n", jsxs(_components.h3, {
      id: "3-gibt-es-react-compat",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-gibt-es-react-compat",
        children: "#"
      }), "3. Gibt es React-Compat?"]
    }), "\n", jsx(_components.p, {
      children: "Nein, und wahrscheinlich wird es das nie geben. Während die APIs ähnlich sind und man Komponenten oft mit wenigen Änderungen übertragen kann, ist das Aktualisierungs-Modell fundamental unterschiedlich. React-Komponenten werden wieder und wieder gerendert, so dass Code außerhalb der Hooks sehr anders funktioniert. Die Closures- und Hook-Regeln sind in Solid unnötig, erlauben aber auch Anwendungsweisen, die hier nicht funktionieren."
    }), "\n", jsx(_components.p, {
      children: "Vue-compat wäre andererseits machbar. Allerdings gibt es derzeit noch keine Pläne zur Umsetzung."
    }), "\n", jsxs(_components.h3, {
      id: "4-warum-funktioniert-destructuring-nicht-ich-habe-festgestellt-dass-ich-das-beheben-kann-indem-ich-meine-ganze-komponente-in-eine-funktion-verpacke",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-warum-funktioniert-destructuring-nicht-ich-habe-festgestellt-dass-ich-das-beheben-kann-indem-ich-meine-ganze-komponente-in-eine-funktion-verpacke",
        children: "#"
      }), "4. Warum funktioniert Destructuring nicht? Ich habe festgestellt, dass ich das beheben kann, indem ich meine ganze Komponente in eine Funktion verpacke."]
    }), "\n", jsx(_components.p, {
      children: "Reaktivität findet beim Zugriff auf props und Store-Objekteigenschaften statt. Auf diese von außerhalb einer Verbindung oder reaktiven Komponente zuzugreifen, wird nicht verfolgt. Darinnen ist Destructuring jedoch in Ordnung."
    }), "\n", jsx(_components.p, {
      children: "Allerdings sollte man nicht so verantwortungslos sein, seine Komponenten unnötig in Funktionen zu schachteln. Solid hat kein VDOM. Daher lassen alle verfolgten Änderungen die Funktion noch einmal neu laufen, was es zu vermeiden gilt."
    }), "\n", jsxs(_components.h3, {
      id: "5-kannst-du-unterstützung-für-komponentenklassen-hinzufügen-ich-finde-die-lifecycles-einfacher-zu-verstehen",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#5-kannst-du-unterstützung-für-komponentenklassen-hinzufügen-ich-finde-die-lifecycles-einfacher-zu-verstehen",
        children: "#"
      }), "5. Kannst du Unterstützung für Komponentenklassen hinzufügen? Ich finde die Lifecycles einfacher zu verstehen."]
    }), "\n", jsx(_components.p, {
      children: "Ich habe nicht die Absicht, Komponentenklassen zu unterstützen. Die Lifecycles von Solid sind an das Timing des reaktiven Systems gebunden und sind künstlich. Man hätte vermutlich eine Klasse daraus machen können, aber aller Code, der keine Event-Handler betrifft, läuft ohnehin im Constructor, einschließlich der Render-Funktion. Es wäre nur mehr Syntax für eine Entschuldigung, die Daten weniger granular zu behandeln."
    }), "\n", jsx(_components.p, {
      children: "Man sollte Daten eher anhand deren Verhalten zusammenfassen als anhand der Lifecycles der Komponente. Diese empfohlene Herangehensweise für reaktive Programmierung hat sich seit Jahrzehnten bewährt."
    }), "\n", jsxs(_components.h3, {
      id: "6-i-hasse-jsx-wirklich-gibt-es-vielleicht-eine-template-dsl-oh-ich-sehe-du-hast-tagged-template-literalshyperscript-vielleicht-nehme-ich-einfach-die",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#6-i-hasse-jsx-wirklich-gibt-es-vielleicht-eine-template-dsl-oh-ich-sehe-du-hast-tagged-template-literalshyperscript-vielleicht-nehme-ich-einfach-die",
        children: "#"
      }), "6. I hasse JSX wirklich, gibt es vielleicht eine Template-DSL? Oh, ich sehe, du hast Tagged Template Literals/Hyperscript. Vielleicht nehme ich einfach die..."]
    }), "\n", jsx(_components.p, {
      children: "Nein. Keinen Schritt weiter. Wir nutzen JSX auf die gleiche Art wie Svelte seine Templates benutzt, um optimierte DOM-Instruktionen zu erstellen. Die Tagged Template Literal und HyperScript-Lösungen sind auf ihre eigene Art beeindruckend, aber solange es keinen guten Grund gibt wie etwa die Anforderung, dass nicht kompiliert werden darf, sind sie in jeder Hinsicht schlechter. Größere Bundles, langsamere Performance und die Notwendigkeit, Werte manuell zu schachteln."
    }), "\n", jsx(_components.p, {
      children: "Es ist gut, Optionen zu haben, aber Solid's JSX ist wirklich die beste Lösung hier. Eine Template-DSK könnte auch toll sein, obwohl sie restriktiver wäre, aber JSX gibt uns so viel kostenlos. TypeScript, existierende Parser, Syntax Highlighting, TypeScript, Prettier, Autovervollständigung und nicht zuletzt TypeScript."
    }), "\n", jsx(_components.p, {
      children: "Andere Libraries haben Unterstützung für diese Features anderweitig hinzugefügt, aber das war ein enormer Aufwand und ist immer noch unperfekt und ein konstanter Wartungsaufwand. Hier nehme ich einen pragmatischen Standpunkt ein."
    }), "\n", jsxs(_components.h3, {
      id: "7-wann-benutze-ich-ein-signal-und-wann-einen-store-warum-sind-diese-unterschiedlich",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#7-wann-benutze-ich-ein-signal-und-wann-einen-store-warum-sind-diese-unterschiedlich",
        children: "#"
      }), "7. Wann benutze ich ein Signal und wann einen Store? Warum sind diese unterschiedlich?"]
    }), "\n", jsx(_components.p, {
      children: "Stores verwalten verschachtelte Datenstrukturen, was sie ideal für Objekte und Modelle macht. Für die meisten anderen Anwendungsfälle sind Signals eine leichtgewichtige und effektive Lösung."
    }), "\n", jsxs(_components.p, {
      children: ["So gern wir die beiden auch in eine einzelne API verschmelzen würden, kann man Primitiven nicht in einen Proxy stecken. Funktionen sind das einfachste Interface und jeder reaktive Ausdruck (einschließlich Zugriff auf den Zustand) kann einfach in eine gesteckt werden, so dass eine universale API zur Verfügung gestellt werden kann. Man kann seine Signale und States benennen, wie man möchte und der Aufwand bleibt minimal. Das Letzte, was wir wollen, ist, dich zu zwingen, ", jsx(_components.code, {
        children: ".get()"
      }), " oder ", jsx(_components.code, {
        children: ".set()"
      }), " zu tippen oder noch schlimmer, ", jsx(_components.code, {
        children: ".value"
      }), ". Immerhin kann das erste in einem Alias gekürzt werden, während das letzte die am wenigsten prägnante Methode ist, eine Funktion aufzurufen."]
    }), "\n", jsxs(_components.h3, {
      id: "8-warum-kann-ich-nicht-einfach-einen-wert-in-solids-store-zuweisen-wie-ich-es-in-vue-svelte-oder-mobx-kann-wo-ist-das-bidirektionale-data-binding",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#8-warum-kann-ich-nicht-einfach-einen-wert-in-solids-store-zuweisen-wie-ich-es-in-vue-svelte-oder-mobx-kann-wo-ist-das-bidirektionale-data-binding",
        children: "#"
      }), "8. Warum kann ich nicht einfach einen Wert in Solids Store zuweisen, wie ich es in Vue, Svelte oder MobX kann? Wo ist das bidirektionale Data-Binding?"]
    }), "\n", jsx(_components.p, {
      children: "Reaktivität ist ein machtvolles Werkzeug, aber auch ein gefährliches. MobX weiß das und hat den strikten Modus und Actions eingeführt, um zu beschränken, wann und wo Aktualisierungen passieren. In Solid, welches mit ganzen Komponentenstrukturen voll Daten arbeitet, wurde es klar, dass wir etwas von React lernen können. Man muss nicht unbedingt unveränderlich sein, solange man die gleichen Vereinbarungen trifft."
    }), "\n", jsx(_components.p, {
      children: "In der Lage zu sein, den State zu aktualisieren ist wohl weit weniger wichtig als die Entscheidung, den State weiterzugeben. Die Möglichkeit, ihn zu unterteilen, ist wichtig und nur möglich, wenn Lesezugriffe unveränderlich sind. Wir müssen auch nicht die Kosten der Unveränderlichkeit aufbringen, wenn wir trotzdem granular aktualisieren können. Glücklicherweise gibt es reichlich Beispiele, wie man das macht, wie ImmutableJS und Immer. Ironischerweise agiert Solid meistens wie ein umgekehrtes Immer mit seinen veränderbaren Interna und unveränderbaren Schnittstellen."
    }), "\n", jsxs(_components.h3, {
      id: "9-kann-ich-nur-die-reaktivität-von-solid-ohne-den-rest-verwenden",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#9-kann-ich-nur-die-reaktivität-von-solid-ohne-den-rest-verwenden",
        children: "#"
      }), "9. Kann ich nur die Reaktivität von Solid ohne den Rest verwenden?"]
    }), "\n", jsxs(_components.p, {
      children: ["Natürlich. Obwohl es noch kein einzelnes Paket gibt, ist es einfach, Solid ohne den Compiler zu installieren und nur die reaktiven Primitiven zu verwenden. Eine der Vorteile der granularen Reaktivität ist, dass sie Library-agnostisch ist. In dieser Hinsicht funktioniert nahezu jede reaktive Library auf die gleiche Weise. Das ist die ursprüngliche Inspiration hinter ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), " und der darunterliegenden ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "DOM Expressions library"
      }), ", um einen Renderer direkt aus dem reaktiven System zu machen."]
    }), "\n", jsxs(_components.p, {
      children: ["Um ein paar Libraries zum Probieren aufzulisten: ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/knockout/knockout",
        children: "Knockout"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelte"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/Riim/cellx",
        children: "CellX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), ", und neuerdings sogar ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue"
      }), ". Es gehört mehr zu einer reaktiven Library als sie an einen Renderer zu hängen wie zum Beispiel ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), ", aber dies ist trotzdem eine gute Möglichkeit, sich eine Vorstellung zu verschaffen."]
    }), "\n", jsxs(_components.h3, {
      id: "10-hat-solid-eine-nextjs-oder-material-komponenten-artige-library-die-ich-benutzen-kann",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#10-hat-solid-eine-nextjs-oder-material-komponenten-artige-library-die-ich-benutzen-kann",
        children: "#"
      }), "10. Hat Solid eine Next.js oder Material-Komponenten-artige Library, die ich benutzen kann?"]
    }), "\n", jsxs(_components.p, {
      children: ["Unseres Wissens nach nicht. Wenn du Interesse daran haben solltest, eine zu bauen, kannst du uns gern auf unserem ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), " um Hilfe fragen. Wir haben die Grundlagen, auf die du nur noch aufbauen musst."]
    })]
  });
}
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=faq-d320c461.js.map
