Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen. Mal mit, mal ohne Gast begeben wir uns in die Tiefen von HTML, CSS, JavaScript oder auch Frameworks wie React, Vue und Angular. Wir diskutieren über gute UX, Web Performance und Barrierefreiheit, sowie ab und an auch über Browser und Webstandards. Supported uns bei Patreon: https://patreon.com/workingdraft

https://workingdraft.de

subscribe
share






Revision 499: Laravel Livewire


Hans, Stefan und Vanessa hatten nach langer Zeit wieder das Vergnügen mit Backend-Entwickler Christoph Rumpel (@christophrumpel), Autor von Laravel Core Adventures und Mastering PhpStorm, ein Larastreamer und Host des Podcasts Call it a day, sprechen zu dürfen, diesmal über Laravel Livewire.

Schaunotizen [00:00:59] Laravel Livewire Laravel Livewire ist ein PHP/Laravel Package von Caleb Poruio, der ebenfalls der Autor von Alpine.js ist. Dieses Package eignet sich v.a. für Fullstack oder stark backend-lastige Developer Teams. Es ermöglichst dynamische Interface Funktionen, ohne tatsächliches JavaScript geschrieben werden muss. Die Grunfunktion basiert auf server-side gerendertem HTML Partials, ähnlich wir PJAX von jQuery. Doch alle Frontend Entwickler:innen wissen: Heutzutage bleibt es selten bei „einfach nur JavaScript“. Bei einem Framework wie Laravel Livewire fällt auch der Aufbau und die Wartung von Bundlern und ähnlichem Tooling weg. Die Idee kommt vom Framework Phoenix von Elixir. Ein ähnliches Framework für C#, um client-side Webapplikationen zu bauen, ist Blazor. Vergleichbar in der Welt von Ruby on Rails ist Hotwire. Als Beispiel nimmt Christoph uns mit in eine server-side geladene Applikation mit den üblichen Page Reloads. Nun landet man auf einer Seite mit einer Tabelle, für die es sich anbieten würde, wenn man diese Daten nun auch sortieren oder filtern könnte – und statt einem Page Reload lieber einen kurzen Loading Spinner anzeigen möchte. Darüberhinaus eignet es sich für Echtzeit-Validierung, Auto-Saving, Suchen, Auto-completes, dynamischen Dropdowns, Datei Uploads und vielem mehr. Auch das Schreiben von Tests mit mit Livewire kein Problem. Es hat sogar noch den Vorteil, dass dadurch, dass die Logik nicht in ein JavaScript Framework ausgelagert wurde, es keine zusätzlichen Integrations- oder Ende-zu-Ende-Test zwischen Frontend und Backend benötigt. Christoph bringt uns zwei Beispiele mit (siehe Links). Abschließend gibt es noch zu beachten, dass Entwickler:innen auf die Performance achten müssen, da ja jede Aktion einen Request erzeugen wird. Anm. der Redaktion: Performance ist aber auch mit einer Single-Page Applikation o.ä. auch nicht einfach, v.a. wenn erst einmal ein 4k Video geladen wird. Darüberhinaus gilt es auch den Überblick über sensitive Daten zu behalten, da durch Livewire eine offene Schnittstelle zum Client entsteht. Links ChannelTest1 + ChannelTest2 Zwei Livewire Tests von Christoph Rumpel. Livewire Deep Dive How Livewire works (a deep dive) von Autor Caleb Porzio Inertia.js Das Pendant zu Livewire – eine server-side Webapplikation Larastreamers GitHub Repository Die Codebase von Larastreamers TALL Stack Tailwind, Alpine.js, Laravel und Livewire TEA Stack Tailwind, Eleventy und Alpine.js Verwandte Revisionen Revision 490 Verwandte Revision über Alpine.js and Petite Vue. Revision 127 Historische Revision über das INIT Boilerplatz und das Laravel PHP-Framework mit Christoph Rumpel aus 2013. Revision 283 Vue.js und Chatbots mit Christoph Rumpel aus 2016.


fyyd: Podcast Search Engine
share








 October 20, 2021  1h15m