스크립트
00:00:00Das ist Asterix, Metas eigene Version von ShadCN, aufgebaut auf unserer Styling-Lösung StyleX.
00:00:05Es ist vollständig thematisierbar, MIT-lizenziert und Meta gibt an, es intern bereits
00:00:09seit 8 Jahren in über 13.000 Anwendungen verfeinert zu haben. Falls Sie Tailwind oder ShadCN nicht mögen,
00:00:15sollte Sie das hier definitiv interessieren, und selbst wenn Sie ShadCN mögen,
00:00:18lassen Sie uns schauen, ob es einen Grund zum Wechseln gibt.
00:00:24Ich bin ehrlich gesagt wirklich beeindruckt von der Anzahl der Komponenten und Funktionen, mit denen dies gestartet ist,
00:00:29es zeigt wirklich, dass sie es schon seit Jahren intern verwenden.
00:00:32Es gibt über 150 zugängliche Komponenten, die auf React basieren, aber statt diese Liste durchzugehen,
00:00:37zeige ich es Ihnen am besten anhand unserer Vorlagen, da man dort alle zusammen in Verwendung sieht.
00:00:41Wir haben hier eine Gruppentabelle mit Statusabschnitten und Dropdown-Menüs.
00:00:44Wir haben ein Zahlungsformular, in dem man alle einzelnen Formularelemente sieht, die man benötigen wird,
00:00:48zusammen mit Formularstatus für Dinge wie Fehlermeldungen.
00:00:50Sie können damit ein Drag-and-Drop-Kanban-Board oder eine IDE mit Tabs und Seitenleisten erstellen.
00:00:56E-Commerce-Seiten, auch das ist damit abgedeckt.
00:00:58Und sogar eine KI-Chat-Seite, auch das geht, komplett mit einer Markdown-Komponente, um die Antwort anzuzeigen, die Sie zurückerhalten.
00:01:03Es gibt auch einen Abonnieren-Button.
00:01:05Moment mal, das ist YouTube, aber klicken Sie ruhig auf Abonnieren, wenn Ihnen gefällt, was wir hier tun, das hilft wirklich sehr.
00:01:10Wie Sie sehen können, sollte Asterix Ihre Anforderungen an Komponenten so ziemlich vollständig abdecken,
00:01:14und all diese Komponenten stammen tatsächlich aus dieser Kernbibliothek.
00:01:16Die Verwendung ist also genau wie bei jeder anderen Komponente, und Sie können in der Dokumentation alle Optionen nachlesen, die eine Komponente bietet.
00:01:23Zum Beispiel kann ein Button ein Icon haben, Endinhalte, Größen, Varianten, wieder so ziemlich alles, was Sie benötigen.
00:01:30Aber lassen Sie uns jetzt dazu kommen, warum Sie das tatsächlich verwenden sollten.
00:01:32Metas Argument ist, dass Designsysteme einen bisher immer zu zwei schlechten Optionen zwangen.
00:01:36Option eins: Sie übernehmen ein System großer Firmen wie Material UI, und nun sehen alle Ihre Apps wie ein Google-Produkt aus, mit begrenzter Anpassbarkeit.
00:01:44Option zwei: Sie nehmen etwas wie ShadCN, kopieren die Komponenten in Ihr Projekt, aber besitzen nun den Code,
00:01:50sodass jedes Projekt seinen eigenen Fork jeder Komponente hat, und Upstream-Korrekturen schwer zu verfolgen sind, weil es nun Ihre Aufgabe ist, all diese zu aktualisieren.
00:01:57Manche Leute mögen es nicht, für all diesen Komponentencode verantwortlich zu sein, also behauptet Asterix, diesen Kompromiss zu beenden.
00:02:03Mit Asterix steuert das System das Verhalten, die Barrierefreiheit und die Qualität, und Themes steuern das Aussehen,
00:02:08angepasst auf Token-Ebene für Dinge wie Farbe, Typografie, Radius, Bewegung, alles was man brauchen könnte, ohne jemals eine Komponente umschreiben zu müssen.
00:02:14Hier habe ich eine Anwendung, die ich mit einigen der Vorlagen von der Asterix-Website erstellt habe,
00:02:18und das ist tatsächlich das Standardaussehen aller Komponenten, wenn Sie ihnen kein Theme geben; es kommt also mit einem Basis-Theme.
00:02:24Um unser eigenes Theme zu erstellen, können wir die „define theme“-Funktion verwenden,
00:02:27und diese kommt tatsächlich mit einigen coolen Funktionen.
00:02:29Die erste ist die Farboption.
00:02:31Manchmal weiß man, was die eigene Hauptmarkenfarbe sein sollte, in meinem Fall ist es ein helles Grün,
00:02:35aber man möchte nicht die Hintergrundfarbe oder die Akzentfarbe selbst generieren, man möchte nicht über all diese individuellen Werte nachdenken.
00:02:40Also bei Asterix hier: Wenn ich einfach auf Speichern klicke, sieht man, dass es diese für mich generiert,
00:02:44ich bekomme also einen wirklich guten Ausgangspunkt, basierend auf nur einer Hex-Farbe.
00:02:48Nach der Farbe haben wir dann auch die Typografie-Optionen.
00:02:50Das ist ziemlich selbsterklärend, wir verwenden hier „into“, aber wir haben auch eine Skalierung.
00:02:54Die Basisgröße für meinen Text wird also 14 sein,
00:02:57aber sie wird ein Verhältnis von 1,2 haben.
00:02:59Das bedeutet, bei jedem Schritt nach oben in der Textgröße, also wenn ich mich für „text size large“ entschieden hätte,
00:03:03nimmt es die Basis und multipliziert sie mit 1,2, und das werden unsere individuellen Textgrößen sein,
00:03:08es generiert also all diese Tokens für uns.
00:03:10Danach können wir dann den Radius steuern.
00:03:12Das ist ziemlich selbsterklärend.
00:03:14Wenn ich wollte, dass unsere Buttons abgerundet sind, könnte ich dies auf eine hohe Zahl setzen,
00:03:17und wenn ich wollte, dass alles scharfe Ecken hat, könnte ich dies auf Null setzen.
00:03:21Danach haben wir die letzte Hilfsoption, die Bewegung,
00:03:23und diese steuert im Wesentlichen die Animationsgeschwindigkeit für Dinge wie Hovern und Klicken.
00:03:27Sie kommen also schon sehr weit mit dem benutzerdefinierten Theme, indem Sie einfach ein paar Variablen hier oben definieren,
00:03:31und das generiert all die Tokens für Sie.
00:03:34Aber was, wenn Ihnen einige der Tokens nicht gefallen, die es ausgewählt hat?
00:03:36Zum Beispiel, wenn ich die Farbe ändern wollte, die es für meinen sekundären Button hier ausgewählt hat,
00:03:40können wir in den Token-Bereich hier gehen,
00:03:42und eine wirklich coole Sache an diesem Theme und auch diesem Token-Bereich ist, dass alles typsicher ist,
00:03:47es weiß also, welche Tokens wir tatsächlich definieren können,
00:03:49und deshalb ist es besser, dies in einer JavaScript- oder TypeScript-Datei zu tun, anstatt in CSS,
00:03:53da wir diese Typsicherheit erhalten können.
00:03:55Die Hintergrundfarbe dieses sekundären Buttons ist durch das Token „color neutral“ definiert,
00:03:58alles, was ich also tun muss, ist, dies auf ein Array zu setzen, bei dem einer der Werte für den Light-Modus und der andere für den Dark-Modus ist.
00:04:03Für mich wird das einfach dieselbe Farbe sein.
00:04:05Wenn ich jetzt auf Speichern klicke, sieht man, dass sich die Farbe meines sekundären Buttons geändert hat,
00:04:08aber wir haben ein Problem, da dieser Text jetzt eigentlich nicht richtig aussieht,
00:04:11da ich jetzt die Farbe geändert habe.
00:04:12Also möchte ich diese Textfarbe in Schwarz ändern,
00:04:15aber das Problem ist, dass dies eigentlich durch die Variable „color text primary“ definiert ist,
00:04:18wenn ich also hingehe und das speichere,
00:04:19sehen Sie, dass es eine Menge des Textes auf meinem Bildschirm schwarz ändert,
00:04:22anstatt nur den einen im Button, wie ich es wollte.
00:04:24Also anstatt dieses Token global zu ändern,
00:04:26kann ich es stattdessen einfach für die Komponente ändern.
00:04:28Das ist der Punkt, an dem wir den Komponentenbereich verwenden können.
00:04:30Ich sage, wir wollen unseren Button hier ändern.
00:04:32Ich gebe an, was die Variante ist, in meinem Fall „secondary“,
00:04:35dann kann ich hier beliebige CSS-Variablen einfügen, die ich möchte.
00:04:37Ich möchte also einfach, dass die Farbe Schwarz ist.
00:04:39Wenn ich das jetzt speichere,
00:04:40können wir sehen, dass unser sekundärer Button diese schwarze Textfarbe hat,
00:04:42aber nichts anderes hat sich geändert.
00:04:44Es ist nur auf diese Komponente beschränkt.
00:04:46Die andere coole Sache an diesem Komponentenbereich
00:04:47ist, dass man dann auch seine eigenen benutzerdefinierten Varianten definieren kann.
00:04:50Angenommen, ich möchte eine Variante eines Buttons namens „my button“.
00:04:52Ich kann dies hier mit einer Farbe von Schwarz und einer Hintergrundfarbe von Rot einrichten,
00:04:56und wenn ich dann meinen Button verwende,
00:04:57ist alles typsicher,
00:04:58und es weiß, dass „my button“ eine gültige Variante ist.
00:05:00Sie sehen hier drüben,
00:05:01haben wir jetzt einen Abonnieren-Button.
00:05:02Man kann also wirklich viel allein mit dieser Theme-Konfiguration erreichen,
00:05:05indem man jeden Teil jeder Komponente komplett anpasst,
00:05:07oder einfach den allgemeinen Stil Ihrer App.
00:05:09Und es gibt sogar einige vorgefertigte Themes,
00:05:10wenn Sie mit einer guten Basis starten möchten.
00:05:12Sie sehen, dass es in diesen Dateien jede Menge Anpassungen gibt,
00:05:15und man kann sogar Themes erweitern,
00:05:16man kann also auf einem bestehenden aufbauen,
00:05:18anstatt jedes Mal ein komplett neues zu erstellen.
00:05:20All diese Themes können dann auch für die Produktion erstellt werden.
00:05:23Es funktioniert also in serverseitig gerenderten Apps wie Next.js.
00:05:26Es wird statisch das gesamte benötigte CSS und JavaScript generieren.
00:05:28Einer der großen Vorteile, einen einzigen Ort wie diesen für Ihre Themes zu haben,
00:05:31ist, dass es hilft, Ihre Markenkonsistenz durchzusetzen.
00:05:34Das ist eigentlich ein Argument, das ich gegen Tailwind gesehen habe,
00:05:36wo, weil ein Entwickler jede Klasse schreiben kann,
00:05:38oder eine KI jede schreiben kann,
00:05:40man manchmal bei Komponenten landet, die ein wenig Stildrift aufweisen,
00:05:42da jemand beschlossen hat, seine eigene Tailwind-Klasse zu verwenden.
00:05:45Wenn Sie ein festes Theme wie dieses haben,
00:05:46ist es einfach leichter im Auge zu behalten, da alles an einem Ort geschieht.
00:05:49Man kann leicht die Ansichten unterscheiden, wenn man sehen möchte, was sich im Theme geändert hat,
00:05:53und eine KI muss nicht über die Tailwind-Klassen nachdenken, die sie verwenden könnte,
00:05:56sie verwendet einfach die bereitgestellten Tokens und Komponenten.
00:05:58Obwohl ich sagen werde, dass man etwas ganz Ähnliches
00:06:00mit Tailwind und ShadCN erreichen kann,
00:06:01wo man alles als Token definiert,
00:06:03obwohl es nicht typsicher ist,
00:06:05es wird also viel schwieriger sein, es durchzusetzen.
00:06:06Nun, neben Themes,
00:06:07kann man eine Komponente auch einfach direkt stylen,
00:06:09wenn man eine Änderung vornehmen möchte,
00:06:10und es gibt tatsächlich einige Möglichkeiten, dies zu tun.
00:06:12Die empfohlene Art ist wahrscheinlich die Verwendung von X-Style,
00:06:14weil das StyleX verwendet,
00:06:16worauf dies aufgebaut wurde,
00:06:17und was Meta offensichtlich gemacht hat.
00:06:19Sie können auch andere Bibliotheken wie Tailwind,
00:06:21Panda und verschiedene Dinge dieser Art verwenden,
00:06:22oder einfach Plain CSS mit dem Klassennamen.
00:06:24Sie sehen also hier,
00:06:25dass ich in StyleX Overrides definiert habe.
00:06:27Ich habe einige Stile namens „Primary button“,
00:06:29wo ich möchte, dass eine Farbe Weiß ist,
00:06:30und die Hintergrundfarbe Rot.
00:06:32Wenn ich jetzt einfach einen einzelnen Button auf dieser Seite ändern möchte,
00:06:34muss ich ihm nur den X-Style-Prop geben,
00:06:36und ihm meine StyleX-Stile übergeben,
00:06:38und wenn ich das speichere,
00:06:39können Sie sehen, dass sich mein Primary-Button nun an diese Stile anpasst.
00:06:42Das ist also, wie man etwas styled,
00:06:43wenn man möchte, dass es eine einmalige Sache ist,
00:06:45und man diese Änderung nicht für alle
00:06:46Primary-Buttons vornehmen möchte.
00:06:47Sie können in der Dokumentation
00:06:48alle verschiedenen Möglichkeiten sehen, die Sie zum Stylen einer Komponente haben.
00:06:51Es ist super flexibel,
00:06:52aber die wirklich coole Sache, auf die ich hinweisen möchte,
00:06:53ist diese Tailwind-Unterstützung.
00:06:55Sie haben dies tatsächlich getan
00:06:56mit dem, was sie eine Tailwind-Brücke nennen.
00:06:58Das lässt Sie weiterhin Tailwind verwenden,
00:07:00aber es ordnet alle Design-Tokens
00:07:01aus Ihrem Theme, das Sie in Asterix eingerichtet haben,
00:07:03diesen Tailwind-Utility-Klassen zu.
00:07:06Dinge wie Ihre Farben,
00:07:07Radius,
00:07:07Schriftgröße,
00:07:08werden alle durch das Theme von Asterix definiert,
00:07:10aber Tailwind kann diese dann
00:07:11mit den Tailwind-Klassennamen verwenden.
00:07:13Für mich persönlich
00:07:13würde ich wahrscheinlich weiterhin StyleX verwenden,
00:07:15da es das ist, worum Asterix aufgebaut wurde,
00:07:17und ich denke einfach, das Mischen dieser Bibliotheken
00:07:18wird mehr Verwirrung stiften, als es wert ist.
00:07:20Abgesehen vom Styling jedoch,
00:07:21ein weiteres großartiges Feature von Asterix
00:07:22ist einfach, wie gut es mit KI zusammenarbeitet.
00:07:24Es gibt tatsächlich eine Asterix-CLI,
00:07:26aber sie ist größtenteils nicht für den menschlichen Gebrauch gedacht,
00:07:28sondern eigentlich für KI.
00:07:29Sie enthält Dinge wie Befehle,
00:07:30um die gesamte Dokumentation
00:07:31zu jeder Komponente abzurufen,
00:07:33in den Kontext zu laden,
00:07:34nur um Ihren Agenten bei der Arbeit mit dieser Komponente zu helfen,
00:07:36und sie kann sogar Ihre agents.md ausfüllen,
00:07:38nur um etwas mehr Anleitung zu geben.
00:07:40Ich habe tatsächlich festgestellt, als ich dies
00:07:41in all meinen Demos verwendet habe,
00:07:42dass sie dabei einen extrem guten Job gemacht hat,
00:07:43und ich fand, Modelle wie Fable,
00:07:45GPT,
00:07:45alle konnten mit Asterix arbeiten,
00:07:47obwohl es eine relativ neue Bibliothek ist.
00:07:49Insgesamt
00:07:49können Sie sehen, dass Asterix einfach ein ernsthaft
00:07:51funktionsgeladenes Designsystem ist,
00:07:52und ich bin nur auf die Grundlagen eingegangen.
00:07:54Ich empfehle dringend, die Dokumentation anzusehen,
00:07:55da sie wirklich gut geschrieben ist,
00:07:57und die meisten dieser Komponenten
00:07:58haben sogar Best-Practice-Abschnitte,
00:08:00was für ein LLM wirklich hilfreich sein wird,
00:08:02und es gibt auch einen Playground,
00:08:03wenn Sie dies einfach ausprobieren möchten,
00:08:04ohne tatsächlich ein Projekt zu haben.
00:08:06Würden Sie so etwas verwenden?
00:08:07Lassen Sie es mich unten in den Kommentaren wissen,
00:08:08warten Sie, abonnieren,
00:08:09und wie immer,
00:08:10wir sehen uns im nächsten.