Willkommen in der zauberhaften Welt der Webtechnologie, in der wir die Geheimnisse von Connect lüften werden! In diesem Blogbeitrag begeben wir uns auf eine Reise durch das faszinierende Universum von Angular, der treibenden Kraft hinter dem Erfolg von Connect. In diesem Artikel stellen wir Ihnen die neuesten Updates von Angular vor, die Ihnen ein reibungsloseres, schnelleres und angenehmeres Online-Erlebnis bieten.
Was ist Angular?
Stellen Sie sich das Web als eine riesige Stadt voller beeindruckender Gebäude vor, und Angular ist wie ein Meisterarchitekt, der dabei hilft, diese unglaublichen digitalen Strukturen zu schaffen. Angular, das von Google und einer Gemeinschaft von Entwicklern entwickelt und gepflegt wird, ist ein spezielles Tool, mit dem talentierte Bauherren (Entwickler) Websites und Webanwendungen erstellen, so wie Architekten Baupläne verwenden, um Gebäude zu entwerfen.
Angular macht Webseiten interaktiv und ermöglicht es Ihnen, auf Schaltflächen zu klicken, Formulare auszufüllen und dynamische Inhalte nahtlos anzuzeigen. Es ist sozusagen die Zauberei hinter den Kulissen, die das Web so funktionieren lässt, wie es funktioniert.
Angular v10
Beginnen wir mit Angular v10 und schauen wir uns an, was sich in den einzelnen Versionen geändert und verbessert hat, damit Sie einen Eindruck von den spannenden Verbesserungen bekommen, die Connect geprägt haben.
Neuer Datumsbereichspicker
In dieser Version wurde mit Angular Material eine neue Komponente zur Auswahl von Datumsbereichen eingeführt. Wir haben diese Funktion in Connect gut genutzt. Sie ermöglicht es den Benutzern, auf einfache Weise ein Start- und Enddatum für ihre Abwesenheit vom Büro auszuwählen.
Aber das ist noch nicht alles, wir verwenden sie auch in anderen Bereichen von Connect. Wir verwenden sie zum Beispiel, um Daten zu filtern und bestimmte Datensätze innerhalb eines bestimmten Zeitrahmens zu finden.
Angular v11
Eines der herausragenden Merkmale von Angular v11 ist die Verbesserung der Routerleistung.
Unterstützt Lazy Loading mit benannten Ausgängen
Lassen Sie sich von dem Titel nicht schocken, es geht einfach darum, Webseiten effizienter zu machen! Wenn wir in älteren Versionen von Angular bestimmte Inhalte an verschiedenen Stellen auf einer Webseite anzeigen wollten, konnten wir diesen Stellen Namen geben. Diese benannten Stellen luden jedoch immer alles sofort, auch wenn man es nicht brauchte. Ab dieser Version, Angular 11, können wir nun dafür sorgen, dass diese Spots nur dann Inhalte laden, wenn Sie sie tatsächlich sehen wollen, was uns helfen kann, die Website zu beschleunigen.
Angular v12
Angular 12 hat mit der Einführung von Nullish Coalescing für HTML-Templates einige großartige Neuigkeiten für Entwickler gebracht, die für Nicht-Techniker vielleicht nicht aufregend klingen, aber in Connect ist das ein echter Grund zum Feiern!
Nullish Coalescing
Seit einiger Zeit erleichtert der Nullish Coalescing-Operator (??) Entwicklern, sauberen Code in TypeScript-Klassen zu schreiben. Jetzt gibt es aufregende Neuigkeiten vom Angular-Team: In Version 12 können Entwickler dieses hilfreiche Feature nun auch in Angular-Templates nutzen!
In Templates können Entwickler jetzt die neue Syntax verwenden, um komplexe Conditionals zu vereinfachen. Zum Beispiel:
{{ age !== null && age !== undefined ? age : calculateAge() }}
Wird zu:
{{ age ?? calculateAge() }}
Vereinfacht ausgedrückt, mussten wir als Entwickler im Code bisher prüfen, ob die Variable ‚age‘ Werte wie 11 oder 22 hat, bevor wir damit Berechnungen durchführen konnten. Aber mit dieser neuen Funktion müssen wir uns nicht mehr darum kümmern, sowohl auf „null“ als auch auf „undefiniert“ zu prüfen. Wir können den neuen (??)-Operator verwenden, um sicherzustellen, dass ‚age‘ einen Wert hat, und es funktioniert auf die gleiche Weise.
Angular v13
IE11 wird nicht mehr unterstützt! Man könnte meinen, dass dies eine schlechte Nachricht ist, aber eigentlich ist es das nicht.
Tatsächlich hat Connect den Support für den IE11 bereits im Januar 2022 eingestellt.
Ende der IE11-Unterstützung
Angular 13 hat beschlossen, den Internet Explorer 11 nicht mehr zu unterstützen, und das ist eigentlich eine gute Sache. Durch diese Änderung wird unsere Webanwendung schneller geladen und verbraucht weniger Daten. Außerdem kann Angular 13 nun all die coolen neuen Funktionen nutzen, die moderne Webbrowser bieten, wie bessere Animationen und ausgefallenes Styling.
Durch den Verzicht auf den speziellen Code, der nur für den Internet Explorer benötigt wird, ist Connect einfacher zu warten. Wir brauchen weniger Zeit für das Entwerfen komplizierter Lösungen und müssen keine zusätzlichen Schritte unternehmen, damit es in älteren Browsern funktioniert, was für uns Entwickler sehr angenehm ist. Dadurch haben wir auch mehr Zeit, um noch mehr tolle Funktionen für unsere App-Benutzer zu implementieren, die unsere App mit beeindruckenden Funktionen und verbesserter Leistung erleben werden. Eine Win-Win-Situation!
Angular v14
Das herausragende Merkmal von Angular 14 ist die „Sicherheit“. Dies zeigt sich in der Einführung von typisierten Angular-Formularen, die Connect eine zusätzliche Schutzschicht verleihen.
Typisierte Angular-Formulare
Formulare ohne Typisierung, was das Debugging erschwert.
Die Verwendung von getippten Formularen ist jedoch wie ein intelligenter Assistent, der nicht nur sicherstellt, dass Sie die richtigen Informationen in Connect eingeben, z. B. beim Erstellen/Planen eines News-Posts, Stream-Posts, Ausfüllen eines Umfrageformulars usw.
Er hilft auch den Entwicklern, den Prozess der Fehlersuche und -behebung zu beschleunigen. Es ist wie ein praktisches Tool, das nicht nur die Dinge vereinfacht, sondern auch als Superhelden-Sidekick für uns Entwickler fungiert und unsere Arbeit schneller und effizienter macht.
Angular v15
Wichtige Neuigkeiten: Upgrade für eine bessere Benutzeroberfläche, einfacheren Zugang, was zu einer reibungsloseren Entwicklungserfahrung führt!
Migrieren Sie zu MDC-basierten Komponenten
In Angular 15 wurden einige bedeutende Änderungen vorgenommen, indem viele Komponenten umstrukturiert wurden, um sie an die Material Design Components for the Web (MDC) anzupassen. Diese MDC-basierten Komponenten sehen nicht nur besser aus, sondern verbessern auch die Barrierefreiheit für alle. Und da sie jetzt Teil des Material Design-Standards sind, der auch als Richtlinie bekannt ist und wichtige Prinzipien erläutert, die jeder Designer beim Design für iOS oder Android befolgen sollte, können Entwickler mühelos mit dem neuesten und genauesten Styling auf dem Laufenden bleiben.
Zum Beispiel hat der Schieberegler in unserer App einen Daumen hinzugefügt, der ein Positionsindikator ist, um den ausgewählten Wert seiner Position besser darzustellen, und eine dickere Spur des Schiebereglers könnte dazu beitragen, die Benutzererfahrung zu verbessern, indem sie die Interaktion mit dem Schieberegler erleichtert und es für die Benutzer visuell auffälliger macht, den Wert anzupassen.
Neben dem Schieberegler haben wir auch andere Komponenten auf MDC-basierte Komponenten umgestellt, wie z. B. Kontrollkästchen und Optionsfelder, deren Touch-Target-Größen (Interaktionsbereich) für die Benutzer benutzerfreundlicher und zugänglicher sind.
Zusammenfassung
Zusammenfassend lässt sich sagen, dass Angular kontinuierlich weiterentwickelt und verbessert wurde. Mit jeder neuen Version wurden Verbesserungen eingeführt, die auf die Bedürfnisse der Entwickler und die Anforderungen der modernen Webentwicklung zugeschnitten sind. Zu den wichtigsten Highlights der letzten Angular-Versionen gehören Leistungsverbesserungen, ein sauberer Code-Zugang für Entwickler, verbesserte Sicherheit, die Einführung neuer Komponenten und die Abschaffung des Legacy-Supports für Internet Explorer 11.
Entwickler haben nun Zugang zu einem effizienteren und entwicklerfreundlichen Framework, das moderne Browserfunktionen nutzt und die Erstellung schneller, reaktionsschneller und funktionsreicher Webanwendungen erleichtert. Angular entwickelt sich weiter und bleibt ein leistungsfähiges und vielseitiges Werkzeug, um robuste Webanwendungen zu erstellen und an der Spitze der Webentwicklungstrends zu bleiben.
