WebDev Espresso - Die schnelle Dosis Frontendwissen

Der Angular Router bietet nicht nur Guards, um den Zugriff auf bestimmte Routen zu steuern, sondern auch Resolver, mit denen man Daten vor dem Anzeigen der Seite laden kann. Das Feature ist nicht neu, sondern schon dabei, seit ich Angular kenne, aber wir schauen uns heute mal an, auf welche Herausforderungen man stößt, wenn man diese einsetzen möchte. Der Artikel ist sehr technisch und eigentlich...

Jedes Jahr gibt es Umfragen zu verschiedenen "States of". JavaScript, CSS, HTML, ... In dieser Folge schauen wir uns einen kleinen Teil aus State of JS an und zwar den Frontend-Frameworks Part. Vielleicht überraschen euch ja auch die einen oder anderen Zahlen. Lasst es uns gerne wissen. Link zu den Ergebnissen: https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/

Kaum ist v18 von Angular erschienen, schon steht v19 in den Startlöchern. Eine durchaus wichtige Änderung steht uns bevor, über die im offiziellen Angular-Blog schon berichtet wurde. Wir greifen das Thema auf, reden ein wenig über Standalone Components und was wir uns für die Zukunft noch so wünschen. Link zum Artikel: https://blog.angular.dev/the-future-is-standalone-475d7edbc706

Mockups im Projekt? Macht das wirklich Sinn? Oder doch vielleicht lieber Wire-Frames? Was ist denn da jetzt auch der Unterschied und brauche ich dann beides? In dieser Folge reden wir ein wenig darüber, ob wir es für sinnig halten, Wire-Frames oder Mockups im Entwicklungszyklus einzusetzen und was es eventuell positive Auswirkungen haben könnte. Hier noch ein Link zu dem Einsteinrätsel: https://de...

TypeScript oder JavaScript muss nicht unbedingt Frontend bedeuten. Mit NestJS gibt es auch ein Backend-Framework, ähnlich wie Spring Boot. Wir besprechen ein wenig, was es kann und warum man es einsetzen sollte. Artikel: https://www.informatik-aktuell.de/entwicklung/programmiersprachen/nestjs-typescript-im-backend-geht-auch-clean.html#c43558 Umfrage: https://survey.stackoverflow.co/2023/#most-popu...

Heute beschäftigen wir uns mit einem Thema, was nicht direkt dem Frontend zugeortnet ist, aber trotzdem eine große Relevanz hat: Clean Code. Wir besprechen ein paar Beispiele und warum man an dieser Stelle auf Clean Code achten sollte und auch welche Ausreden es dann doch manchmal gibt. Links: https://blog.carlosrojas.dev/best-practices-for-writing-clean-and-maintainable-javascript-code-0dc701462b...

Angular hat ein Minor Update (18.1) herausgebracht und die neue @let-Syntax eingeführt, mit welcher man Variablen im Template erstellen und zuweisen kann. Wir finden es etwas eigenartig... warum, das erzählen wir euch in der nächsten viertel Stunde. Blogpost: https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f

Heute beschäftigen wir uns mit einem Thema, was nicht direkt dem Frontend zugeortnet ist, aber trotzdem eine große Relevanz hat: Clean Code. Wir besprechen ein paar Beispiele und warum man an dieser Stelle auf Clean Code achten sollte und auch welche Ausreden es dann doch manchmal gibt. Links: https://blog.carlosrojas.dev/best-practices-for-writing-clean-and-maintainable-javascript-code-0dc701462b...

Reaktive Programmierung leicht gemacht? Von manchen gehasst, von anderen geliebt. Manche wissen nichtmal, dass es nur eine Lib in Angular ist, sondern denken es "ist" Angular. Doch bald ist es optional. Für uns der passende Augenblick einmal genauer hinzuschauen. Warum sollte man es einsetzen, warum vielleicht nicht. Ein wenig technisch ist das ganze natürlich, wir hoffen trotzdem, dass man folgen...

Pocketbase.io ist ein Backend in Go geschrieben, was nur eine Datei groß ist. Es verfügt über eine Datenbank mit Echtzeit-Support, Authentifizierungssysteme und einen Datei-Speicher. Außerdem kann man es um eigene Funktionen erweitern. Das ganze ist kostenlos und kann selbst gehostet werden. Eine Alternative zu Googles Firebase oder Supabase? Link: https://pocketbase.io

Im Browser ist mit JavaScript immer mehr möglich. Gerade die Differenz zu nativen Apps auf Smartphones wird immer kleiner. Wir haben dies zum Anlass genommen, um über (noch) recht unbekannte Web APIs zu sprechen. Im Verlauf wird aber auch schnell klar, warum diese eventuell so unbekannt sind, da die Unterstützung der Browser meist sehr gering ist. Blogartikel: https://www.smashingmagazine.com/2024...

Mit Firebase hat Google ein leicht zu nutzendes Cloud-Paket geschaffen, welches es ermöglicht, super schnell ein Webprojekt (oder Mobileprojekt) auf- und umzusetzen. Es bedient sich natürlich der Google Cloud selbst und bietet auch die Möglichkeit, diese vollumfänglich mit einzubinden und zu nutzen. Wir schauen uns ein paar Dienste von Firebase an und diskutieren deren Einsatzzwecke. https://fireb...

Ein Blogartikel von Google Watch Blog macht scheinbar gerade die Runde und uns erreichten ein paar mal die Frage: Wird Google Material eingestellt? Wir haben das zum Anlass genommen, eine Folge einzuschieben und das Thema genauer zu beleuchten. Aber eins vorweg, eingestellt wird nichts. Der Blogbost: https://www.googlewatchblog.de/2024/06/material-design-google-entwicklung/ Der verlinkte englische...

Die "großen" Browserhersteller haben sich zusammen getan und bringen seit 2023 in der Baseline ihre Features zusammen raus, damit man auf diesen Aufbauen kann und sicher weiß, was man bald überall nutzen kann und was nicht. Wir schauen uns die Highlights aus dem Jahr 2023 zusammen an. Artikel: https://web.dev/blog/new-in-the-web-io2024?hl=en

Die "großen" Browserhersteller haben sich zusammen getan und bringen seit 2023 in der Baseline ihre Features zusammen raus, damit man auf diesen Aufbauen kann und sicher weiß, was man bald überall nutzen kann und was nicht. Wir schauen uns die Highlights aus dem Jahr 2023 zusammen an. Artikel: https://web.dev/blog/new-in-the-web-io2024?hl=en

Ganze neun Folgen haben wir jetzt geschafft. Zeit, dass wir uns überhaupt mal vorstellen, damit Ihr wisst, mit wem Ihr es zu tun habt und warum wir das ganze machen. Wir stellen auch unsere Idee hinter und eine kleine Änderung am Konzept vor. Vielen Dank für Euer Feedback bisher, lasst gerne noch mehr da. Linked In: Andre https://www.linkedin.com/in/andre-rauer-9965b9159/ Kevin https://www.linkedi...

Der Darkmode ist für viele schon eine Selbstverständlichkeit bei Webseiten oder Apps. Wir haben uns einmal angeschaut, wie man diesen denn technisch gut umsetzen kann und worauf man ein wenig achten sollte.

Wieder ist ein halbes Jahr rum, wieder beschenkt uns Google mit einem neuen Update für Angular. Viele Neuerungen gibt es in der Version 18, die wir uns in dieser längeren Folge einmal anschauen. Lasst gerne Feedback da, wie euch das längere und weniger gescriptete Format gefällt.

Meta Frameworks sind schon etwas länger auf dem Vormarsch. Gerade für ReactJs scheint es recht viele zu geben. Mit AnalogJs ist nun das erste für Angular in Version 1 erschienen. Wir schauen es uns in dieser Folge an.

Angular ist bekanntlich ein Client Side Rendering Framework, bietet mittlerweile aber auch schon Server Side Rendering und mit Prerendering sowas wie Static Site Generation. Warum es all diese Technologien gibt und warum man was einsetzt, erfahrt Ihr in der neuen Folge 6 des WebDev Espressos.

Googles Library für die Erstellung von WebComponents: Lit Element. Was bietet sie für Vorteile, was für Nachteile oder anders, warum sollte ich sie nutzen, wenn ich WebComponents erstellen möchte. Lit: https://lit.dev/ Blog-Artikel WebComponents mit Angular: https://blog.viadee.de/angular-vs-litelement

Wir entfliehen dem Googleuniversum und kehren zu den Wurzeln eines Standards, dem der WebComponents, zurück. Aber nur, um in weiteren Folgen weiter auszuholen, versprochen. Hier ein paar Links als Quelle: Kommentar bezüglich "is"-Attribute: https://github.com/WICG/webcomponents/issues/509#issuecomment-222860736 und der passende Eintrag bei WebKit: https://bugs.webkit.org/show_bug.cgi?id=182671 Lis...

In Angular v17 im Developerpreview - die neue Control Flow Syntax für Templates. Wir vermuten, dass dies ein heiß ersehntes Feature ist, welches die Developer-Herzen höher schlägen lässt. Gerade das neue If-Else sorgt für Begeisterung. Was es sonst noch neues gibt und wo genau die Unterschiede sind, erfahrt Ihr in der neuen Folge von WebDev Espresso.

Das Angular Material Team hat uns mit Version 17.2 experimental Support für Material 3 aka You zum Ausprobieren gegeben. Wir haben reingeschaut und geprüft, was ist neu, anders, besser oder vielleicht schlechter. Seid gespannt.

Im Angular Universium in aller Munde, die neuen Signals. Doch was bringen sie uns für Vorteile, warum sollte ich sie nutzen oder warum vielleicht auch nicht? Soll ich jetzt migrieren oder lieber noch warten? All diese Fragen wollen wir in der ersten Folge des Podasts besprechen und unsere Einschätzung teilen.