diff --git a/src/components/slides/javascript/10-external-alpinejs/alpine-attributes.astro b/src/components/slides/javascript/10-external-alpinejs/alpine-attributes.astro new file mode 100644 index 0000000..fac3b4b --- /dev/null +++ b/src/components/slides/javascript/10-external-alpinejs/alpine-attributes.astro @@ -0,0 +1,65 @@ +
+
+

Alpine Attribute

+
+ +
+

x-data

+

Um ein HTML-Element als Alpine-Komponente zu initialisieren und Daten Reaktiv zu halten

+
+ +
+

x-show

+

Um HTML-Elemente abhängig einer Variable anzuzeigen

+
+ +
+

x-on

+

Um auf Nutzer-Interaktionen mit anderen Elementen zu reagieren

+
+ +
+

x-text

+

Um Text anzuzeigen

+
+ +
+

x-html

+

Render HTML-Strings ohne diese zu escapen

+
+ +
+

x-bind

+

Um andere HTML-Element Attribute an eine Variable zu binden (um damit Attribute zu setzen)

+
+ +
+

x-model

+

Um eine Variable gegen ein Input-Element zu binden

+
+ +
+

x-for

+

Zum iterativen Rendern von Listen

+
+ +
+

x-transition

+

Um Übergänge zu definieren

+
+ +
+

x-effect

+

Um Reaktiv auf Änderungen von Variablen zu reagieren

+
+ +
+

x-ref

+

Um HTML-Elemente an eine Variable zu binden um schneller damit interagieren zu können

+
+ +
+

x-if

+

Um HTML-Elemente anhand bestimmter Bedingungen zu mounten/unmounten

+
+
diff --git a/src/components/slides/javascript/10-external-alpinejs/globals.astro b/src/components/slides/javascript/10-external-alpinejs/globals.astro new file mode 100644 index 0000000..34f462b --- /dev/null +++ b/src/components/slides/javascript/10-external-alpinejs/globals.astro @@ -0,0 +1,25 @@ +
+
+

Globale Funktionen

+
+ +
+

Globale Funktionen in Alpine dienen als eine Art Convencience Layer für bereits existierende Funktionalität (um z.B. ein Data-Objekt in JS zu definieren)

+
+ +
+

Alpine.data()

+

Um ein wiederverwendbares x-data Objekt zu erschaffen

+
+ +
+

Alpine.store()

+

Bietet die Möglichkeit um einen globalen State zu definieren

+
+ +
+

Alpine.bind()

+

Bietet eine bequeme Möglichkeit ein wiederverwendbares x-bind Objekt zu erstellen.

+
+ +
diff --git a/src/components/slides/javascript/10-external-alpinejs/index.astro b/src/components/slides/javascript/10-external-alpinejs/index.astro new file mode 100644 index 0000000..6a71e09 --- /dev/null +++ b/src/components/slides/javascript/10-external-alpinejs/index.astro @@ -0,0 +1,18 @@ +--- +import Title from './title.astro'; +import Introduction from './introduction.astro'; +import SetupAndInstall from './setup-and-installation.astro'; +import Attribute from './alpine-attributes.astro'; +import Globals from './globals.astro'; +import Magics from './magics.astro'; +--- + +
+ + <Introduction /> + <SetupAndInstall /> + <Attribute /> + <Globals /> + <Magics /> +</div> + diff --git a/src/components/slides/javascript/10-external-alpinejs/introduction.astro b/src/components/slides/javascript/10-external-alpinejs/introduction.astro new file mode 100644 index 0000000..2a687a8 --- /dev/null +++ b/src/components/slides/javascript/10-external-alpinejs/introduction.astro @@ -0,0 +1,17 @@ +<section> + <section> + <p>Es wird nun Zeit, auf das nächste "Level" zu steigen, wenn es um die Web-Entwicklung geht</p> + <p>Wir haben nun alle notwendigen API's angesehen, um mit einer Website auf rudimentäre Art und Weise zu interagieren. Nun haben natürlich viele Leute viele Ideen gehabt, die sich in Bibliotheken und Frameworks manifestiert haben.</p> + <p>Das heißt für uns: Wir müssen das Rad nicht zum 100sten mal neu Erfinden.</p> + </section> + + <section> + <p>Wir werden <strong>nicht</strong> jQuery verwenden. Dafür gibt es aber aus meiner Sicht eine gute und moderne Alternative ohne gleich mit einem Monster-Framework um die Ecke zu kommen: AlpineJS</p> + <p>AlpineJS ist <em>robustes und minimales tool um Verhalten direkt ins HTML zu stricken.</em> (laut eigener Aussage von AlpineJS)</p> + <p>Insgesamt gibt es 15 Attribute, 6 Eigenschaften und 2 globale Methoden die ALpine nach außen liefert.</p> + </section> + + <section> + <p>Sehen wir uns das doch einfach mal genauer an</p> + </section> +</section> diff --git a/src/components/slides/javascript/10-external-alpinejs/magics.astro b/src/components/slides/javascript/10-external-alpinejs/magics.astro new file mode 100644 index 0000000..406eb5c --- /dev/null +++ b/src/components/slides/javascript/10-external-alpinejs/magics.astro @@ -0,0 +1,34 @@ +<section> + <section> + <h2>"Magics" / Properties</h2> + </section> + + <section> + <p>AlpineJS hat ein paar Variablen die man zu bestimmten Zeitpunkten nutzen kann. Diese sind generel mit einem "$" prefixed.</p> + </section> + + <section> + <h3>$el</h3> + <p>Mit dieser Variable können wir auf das aktuelle Element zugreifen (und es modifizieren wenn wir wollen)</p> + </section> + + <section> + <h3>$refs</h3> + <p>Mit der Variable <code>$refs</code> können wir auf alle Referenzen die mit <code>x-ref</code> angelegt worden sind, zugreifen.</p> + </section> + + <section> + <h3>$store</h3> + <p><code>$store</code> gibt uns die Möglichkeit, auf alle globalen Stores (mithilfe deren Namens) zuzugreifen</p> + </section> + + <section> + <h3>$watch</h3> + <p><code>$watch</code> ist eine Funktion die wir innerhalb von Alpine-Komponenten verwenden können um auf reaktiven State und dessen Änderung zu reagieren</p> + </section> + + <section> + <h3>$dispatch</h3> + <p>Mithilfe von <code>$dispatch</code> können wir Custom Events versenden, die dann wiederum von Parent-Komponenten verarbeitet werden können</p> + </section> +</section> diff --git a/src/components/slides/javascript/10-external-alpinejs/setup-and-installation.astro b/src/components/slides/javascript/10-external-alpinejs/setup-and-installation.astro new file mode 100644 index 0000000..7041569 --- /dev/null +++ b/src/components/slides/javascript/10-external-alpinejs/setup-and-installation.astro @@ -0,0 +1,23 @@ +<section> + <section> + <h2>Setup und Installation des neuen Projektes</h2> + </section> + + <section> + <p>Da wir uns hier mit etwas komplett neuem befassen, legen wir auch ein neues Projekt auf.</p> + <p>Wir verwenden Vite, um das Grundprojekt zu initialisieren, und verwenden dann npm um AlpineJS zu installieren</p> + </section> + + <section> + <pre class="sh"><code data-trim data-line-numbers> + mkdir alpine-test + cd alpine-test + npm init -y + npm install --save-dev alpinejs + </code></pre> + </section> + + <section> + <p>Alpine importieren und starten</p> + </section> +</section> diff --git a/src/components/slides/javascript/10-external-alpinejs/title.astro b/src/components/slides/javascript/10-external-alpinejs/title.astro new file mode 100644 index 0000000..571af42 --- /dev/null +++ b/src/components/slides/javascript/10-external-alpinejs/title.astro @@ -0,0 +1,3 @@ +<section> + <h1>Externe Bibliotheken in JavaScript</h1> +</section> diff --git a/src/pages/slides/javascript/10-external-packages.astro b/src/pages/slides/javascript/10-external-packages.astro new file mode 100644 index 0000000..bacdac7 --- /dev/null +++ b/src/pages/slides/javascript/10-external-packages.astro @@ -0,0 +1,8 @@ +--- +import Reveal from '../../../layouts/Reveal.astro'; +import Slides from '../../../components/slides/javascript/10-external-alpinejs/index.astro'; +--- + +<Reveal title="Externe Pakete in JavaScript verwenden"> + <Slides /> +</Reveal>