RSS Angular Blog - Medium Notiz

RSS Angular Blog - Medium

Die Webseite scheint das offizielle Blog von Angular zu sein, einem Webanwendungs-Framework. Die Startseite zeigt eine Liste der neuesten Blog-Artikel mit Titeln wie "10. Geburtstag des Angular-Projekts". Häufige Themen sind Technologie, Entwicklung und Angular selbst. Es gibt eine Suchleiste, Kategorien, Tags und eine Über-uns-Seite. Es bietet Ressourcen, Updates und Tutorials zum Angular-Framework.

Notizfaden

CdXz5zHNQW_efWO6p8BJv.png
Das Angular-Team hat das Web Codegen Scorer-Tool eingeführt, um die KI-gestützte Webcode-Generierung zu verbessern. Dieses Tool hilft bei der Optimierung von LLMs für den aktuellen Framework-Zustand von Angular und unterstützt die Integration sich entwickelnder Anwendungsfunktionen. Es hilft bei der Analyse und Fehlerbehebung gängiger LLM-Fehler und ermöglicht eine schnellere Iteration von Verbesserungen. Der Web Codegen Scorer wurde in Zusammenarbeit mit KI-, Sicherheits- und Barrierefreiheits-Experten für eine robuste Evaluierung entwickelt. Angular hat auch mit dem SolidJS-Team zusammengearbeitet, was das Potenzial des Tools zur Verbesserung der Code-Generierung für andere Frameworks zeigt. Das Tool ist Open Source, um Community-Beiträge und eine breitere Framework-Adaption zu fördern. Angular v20.2 enthält den Angular MCP Server, der Coding-Agenten mit integrierten Tools für Entwicklungssitzungen zur Verfügung stellt. Zukünftige MCP-Server-Funktionen umfassen Modernisierungstools für die Syntaxmigration und eine lokale RAG-Engine für aktuelle KI-Informationen. Angular-Unterstützung wurde in Googles KI-Produkte Gemini Canvas und Google AI Studio integriert. Das Team erforscht auch ein KI-first-Framework, das sich auf Agentenfunktionen für große Codebasen konzentriert und gängige LLM-Probleme minimiert. Sie experimentieren mit Autorenschaftsformaten und Anwendungsstrukturen und versprechen Transparenz bei zukünftigen Angular-Entwicklungen. Das Angular-Team engagiert sich dafür, Entwickler beim Erstellen skalierbarer, KI-gestützter Anwendungen zu unterstützen.
CdXz5zHNQW_J8s9Nu3Qbl.png
Angular hat Minor-Updates v20.1 und v20.2 veröffentlicht, die sich auf die Produktivität der Entwickler und KI-Verbesserungen konzentrieren. Ein wichtiges Highlight ist die Produktionsreife von zoneless Angular, die Vorteile wie kleinere Bundle-Größen und verbesserte Debugging-Funktionen bietet. Neue Animationsprimitiven, animate.enter und animate.leave, ermöglichen eine einfachere Integration nativer CSS-Animationen und veraltet das alte @angular/animations-Paket. Das Team erweitert sein KI-Angebot mit Leitfäden zum Erstellen KI-gestützter Apps und zur Verbesserung von KI-gestützten Codierungswerkzeugen.Sie arbeiten auch an einem experimentellen MCP-Server zur Unterstützung von KI-Anforderungen wie Dokumentationssuche und Best Practices für LLMs. Angular DevTools enthält jetzt Routenvisualisierung und Signaldiagramme für besseres Debugging. Komponententests wurden durch die Unterstützung der Übergabe von Binding-Objekten an TestBed.createComponent vereinfacht.Die Mat Menu-Komponente kann jetzt als Kontextmenü fungieren, und NgComponentOutlet unterstützt benutzerdefinierte EnvironmentInjectors für dynamische Komponenten. Weitere Verbesserungen umfassen einen überarbeiteten Routing-Leitfaden, ein neues currentNavigation-Signal, eine destroyed-Eigenschaft auf DestroyRef und eine bessere Unterstützung für Template-Operatoren und ARIA-Attribute. Angular unterstützt nun TypeScript 5.9 und hat Verbesserungen an httpResource und httpClient vorgenommen. Die Community hat erhebliches Feedback für das neue Angular-Maskottchen gegeben, dessen endgültiges Design später in diesem Jahr bekannt gegeben wird.
CdXz5zHNQW_bylcGSZJTi.png
Die Angular- und Chrome-Teams haben zusammengearbeitet, um Angular-spezifische Daten und Erkenntnisse direkt in das Leistungs-Panel der Chrome-Entwickler-Tools zu integrieren, was eine einheitliche Profilerfahrung für Entwickler schafft. Diese Integration ermöglicht es Entwicklern, die Vorteile beider Tools zu kombinieren und bietet eine synchronisierte und umfassendere Ansicht der Leistung ihrer Anwendung. Die neue benutzerdefinierte Spur für Angular in Chrome-Entwickler-Tools bietet Leistungsdaten unter Verwendung von Angular-Konzepten wie Anwendungs-Bootstrap, Komponenten, UI-Synchronisation und Lebenszyklus-Hooks. Die benutzerdefinierte Spur gruppiert Funktionsaufrufe zusammen unter entsprechenden Komponenten und anderen Angular-Konzepten, damit Entwickler bis zu einzelnen Funktionen herunterzoomen können, um eine feinere Ansicht zu erhalten. Die Einträge in der Flammen-Diagramm sind farbcodiert, um Entwicklern zu helfen, schnell zu erkennen, was in ihrer Anwendung passiert, und zwischen Anwendungscode, anderen Skripten oder Browser-Aktivitäten zu unterscheiden. Die Farben repräsentieren verschiedene Aspekte der Anwendung, wie Abhängigkeits-Injektion-Dienste, von Angular kompilierte Vorlagen und Einstiegspunkte. Die benutzerdefinierte Spur ist interaktiv, so dass Entwickler auf einen Eintrag in der Flammen-Diagramm klicken können, um weitere detaillierte Informationen über einen bestimmten Eintrag zu erhalten. Um loszulegen, müssen Entwickler sicherstellen, dass sie die neueste Version von Angular und eine aktuelle Version von Chrome verwenden, ihre Angular-Anwendung im Entwickler-Modus ausführen und die benutzerdefinierte Spur durch Eingabe von ng.enableProfiling() in der Konsole aktivieren. Diese Integration demonstriert das laufende Engagement für die Verbesserung der Entwicklererfahrung innerhalb des Angular-Ökosystems, indem Entwicklern geholfen wird, schnellere, effizientere Anwendungen zu bauen.
CdXz5zHNQW_arec9d2R1S.png
Angular hat in den letzten Jahren bedeutende Fortschritte gemacht, darunter Reaktivität mit Signals und zonelose Anwendungen. Die neueste Version, Angular v20, konzentriert sich auf die Optimierung von Funktionen, die sich noch in der Entwicklung befinden, um eine solide Entwicklererfahrung zu bieten. Die Veröffentlichung stabilisiert APIs wie effect, linkedSignal und toSignal und führt zoneless als Developer Preview ein. Außerdem verbessert sie das Debugging mit den Angular DevTools und arbeitet mit Chrome zusammen, um benutzerdefinierte Angular-Berichte direkt in den Chrome DevTools zu erstellen. Die Version verbessert die Entwicklererfahrung durch Aktualisierungen der Styleguides, Typenprüfung und Unterstützung für den Language Service. Darüber hinaus fördert sie die Entwicklung von GenAI und startet eine Anfrage nach Kommentaren für ein offizielles Maskottchen für Angular. Die Veröffentlichung befördert Reaktivitäts-Funktionen in den stabilen Zustand, einschließlich Signal, computed, input und view queries APIs. Sie führt auch experimentelle APIs ein, darunter die resource API und httpResource, um die Verwaltung von asynchronem Zustand mit Angular anzugehen. Des Weiteren wird zoneless zur Developer Preview befördert und Angular auf dem Server mit inkrementeller Hydratisierung und Konfiguration des Render-Modus auf Routen-Ebene gefestigt. Schließlich wird die Entwicklererfahrung mit Performance-Einblicken in den Chrome DevTools und durch Framework-Ergänzungen und -Verbesserungen optimiert.
CdXz5zHNQW_t5gWIMi5Tb.png
CdXz5zHNQW_4lkhfMb8Ye.jpeg
CdXz5zHNQW_JLU0SNkg19.png
Unternehmensweite Software-Systeme werden oft von mehreren cross-funktionalen Teams implementiert, und um diese Teams zu ermöglichen, neue Funktionen effizient bereitzustellen, ist es wünschenswert, die Notwendigkeit der Koordination zwischen ihnen zu minimieren. Dies erfordert eine Modularisierung, die das System in niedrig gekoppelte Bereiche aufteilt, die von einzelnen Teams betreut werden können. Micro Frontends ist ein architektonischer Stil, der mehrere Vorteile verspricht, wie z.B. eine hohe Autonomie der Teams, aber auch mit zahlreichen Herausforderungen einhergeht.Micro Frontends ergeben separate Build-Prozesse, die mit inkrementellen Builds kombiniert werden können, um die Build-Zeit zu verbessern. Diese Funktion kann auch ohne die Anwendung anderer Aspekte wie der Ausrichtung von Teams auf individuelle Anwendungen oder separaten Bereitstellungen verwendet werden. Jedoch können individuell entwickelte Micro Frontends in der Benutzeroberfläche/Benutzererfahrung (UI/UX) divergieren, was zu einem inkonsistenten Aussehen führt, und das Laden mehrerer Anwendungen erhöht die Anzahl der zu ladenden Bundles, was die Ladezeiten beeinträchtigt und den Speicherdruck erhöht.Das Aufteilen einer Anwendung in niedrig gekoppelte Teile mag ein Best Practice im Allgemeinen sein, aber es ist oft schwierig, die Grenzen zwischen den Vertikalen klar genug zu definieren, um sie als separate Anwendungen zu implementieren. Die Integration in eine umfassende Lösung bringt zusätzliche Komplexität mit sich, und der Wechsel von einer Compile-Zeit-Integration zu einer Laufzeit-Integration hat schwerwiegende Folgen.Das Angular-Team empfiehlt, zu überprüfen, ob Alternativen wie die Implementierung der einzelnen Vertikalen in Monorepos geeignet sind. Es gibt jedoch auch Möglichkeiten, die Nachteile von Micro Frontends zu kompensieren, wie z.B. die Etablierung eines Design-Systems, um eine konsistente UI/UX zu unterstützen, oder das lazy loading einzelner Systemteile.Native Federation ist ein Community-Projekt, das eine enge Integration mit dem Angular CLI bietet und ermöglicht, Micro Frontends mit Angular zu implementieren. Es ermöglicht einer Anwendung, Teile anderer separat gebauter und bereitgestellter Anwendungen lazy zu laden und kann Abhängigkeiten wie Angular oder RxJS zwischen dem Host und den Remotes teilen.Um Native Federation einzurichten, wird ein Schematic bereitgestellt, das die Native Federation-Builder-Delegation an den ApplicationBuilder konfiguriert und eine Konfigurationsdatei federation.config.js erstellt. Die Konfiguration weist einem Remote oder Host einen eindeutigen Namen zu und definiert, welche Abhängigkeiten geteilt werden sollen. Remotes definieren auch exponierte EcmaScript-Module, die in die Shell geladen werden können.Das Schematic fügt auch Code hinzu, um Native Federation in der main.ts zu initialisieren, und um eine Komponente oder Routing-Konfiguration, die von einem Remote exponiert wird, zu laden, wird traditionelles lazy loading mit der loadRemoteModule-Funktion von Native Federation kombiniert.
CdXz5zHNQW_NpT7gwgsMy.png
Das Angular-Team hat sich in den letzten zweieinhalb Jahren auf die Verbesserung der Entwicklererfahrung und der Leistung konzentriert. Aufgrund der schnelllebigen Technologiebranche definiert das Team eine langfristige Vision und plant die Arbeit auf jährlicher, quartaler und veröffentlichter Basis, um sich an wechselnde Anforderungen anpassen zu können. Das Team verwendet eine jährliche Entwicklerumfrage, um Annahmen über die Bedürfnisse der Entwickler zu überprüfen, bei der 2024 über 10.000 Antworten erhalten wurden. Die Umfrageergebnisse zeigen, dass 79% der Entwickler die letzten beiden Hauptversionen von Angular verwenden und 90% standalone-Komponenten, Direktiven und Pipes nutzen.Die Ergebnisse deuten auch auf eine Verbesserung der allgemeinen Entwicklerzufriedenheit hin, bei der fast 90% der Entwickler mit dem Framework zufrieden sind. Das Team identifizierte Verbesserungen wie standalone-Komponenten, integrierte Steuerungsfluss und aufschiebbare Ansichten als Beiträge zur Zufriedenheitssteigerung. Komponenten-Autoring-Format und Testing bleiben jedoch wichtige Bereiche für Verbesserungen.Im Jahr 2025 wird das Team sich auf Investitionen in Schlüsselbereiche konzentrieren, um Angular-Entwicklern zu helfen, erfolgreich zu sein, einschließlich der Verbesserung der Entwicklererfahrung, der Ermöglichung der Übernahme der neuesten Verbesserungen und der Optimierung für Leistung. Beachtenswerte Projekte für 2025 umfassen die Förderung von zoneless zu einer Entwickler-Vorschau, die Einführung von signalbasierten Formularen und den Austausch von Karma durch einen neuen Standard-Test-Runner. Das Team wird auch die Angular-Dokumentation weiterentwickeln, um die neuesten Best Practices widerzuspiegeln und die Sichtbarkeit von Funktionen zu erhöhen, die Web-Entwicklern helfen, ihre Ziele zu erreichen.
CdXz5zHNQW_Q8whPTKrhS.png