1
0
Fork 0
mirror of https://github.com/TheTaz25/denis.ergin.git synced 2025-07-07 16:08:50 +00:00

feat(slides): add external package related slides

This commit is contained in:
Denis Ergin 2025-02-08 15:25:43 +01:00
parent 906ff998f6
commit 054a8f67e6
8 changed files with 193 additions and 0 deletions

View file

@ -0,0 +1,65 @@
<section>
<section>
<h2>Alpine Attribute</h2>
</section>
<section>
<h3>x-data</h3>
<p>Um ein HTML-Element als Alpine-Komponente zu initialisieren und Daten Reaktiv zu halten</p>
</section>
<section>
<h3>x-show</h3>
<p>Um HTML-Elemente abhängig einer Variable anzuzeigen</p>
</section>
<section>
<h3>x-on</h3>
<p>Um auf Nutzer-Interaktionen mit anderen Elementen zu reagieren</p>
</section>
<section>
<h3>x-text</h3>
<p>Um Text anzuzeigen</p>
</section>
<section>
<h3>x-html</h3>
<p>Render HTML-Strings ohne diese zu escapen</p>
</section>
<section>
<h3>x-bind</h3>
<p>Um andere HTML-Element Attribute an eine Variable zu binden (um damit Attribute zu setzen)</p>
</section>
<section>
<h3>x-model</h3>
<p>Um eine Variable gegen ein Input-Element zu binden</p>
</section>
<section>
<h3>x-for</h3>
<p>Zum iterativen Rendern von Listen</p>
</section>
<section>
<h3>x-transition</h3>
<p>Um Übergänge zu definieren</p>
</section>
<section>
<h3>x-effect</h3>
<p>Um Reaktiv auf Änderungen von Variablen zu reagieren</p>
</section>
<section>
<h3>x-ref</h3>
<p>Um HTML-Elemente an eine Variable zu binden um schneller damit interagieren zu können</p>
</section>
<section>
<h3>x-if</h3>
<p>Um HTML-Elemente anhand bestimmter Bedingungen zu mounten/unmounten</p>
</section>
</section>

View file

@ -0,0 +1,25 @@
<section>
<section>
<h2>Globale Funktionen</h2>
</section>
<section>
<p>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)</p>
</section>
<section>
<h3>Alpine.data()</h3>
<p>Um ein wiederverwendbares x-data Objekt zu erschaffen</p>
</section>
<section>
<h3>Alpine.store()</h3>
<p>Bietet die Möglichkeit um einen globalen State zu definieren</p>
</section>
<section>
<h3>Alpine.bind()</h3>
<p>Bietet eine bequeme Möglichkeit ein wiederverwendbares x-bind Objekt zu erstellen.</p>
</section>
</section>

View file

@ -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';
---
<div class="slides">
<Title />
<Introduction />
<SetupAndInstall />
<Attribute />
<Globals />
<Magics />
</div>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -0,0 +1,3 @@
<section>
<h1>Externe Bibliotheken in JavaScript</h1>
</section>

View file

@ -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>