JavaScript: So sieht Version 7 von Angular aus
CLI Prompts, Virtual Scroll, Drag-und-Drop: Das sind die großen Neuerungen im JavaScript-Framework Angular.
(Bild: Miguel Á. Padriñán, Pexel)
- Björn Bohn
Die siebte Hauptversion des JavaScript-Frameworks Angular ist erschienen. Den Versionssprung vollziehen ebenfalls die Bestandteile Angular Material und CDK (Component Development Kit) und das Command-line Interface (CLI). Das Release konzentriert sich vor allem auf drei Features: CLI Prompts, Virtual Scroll und Drag-und-Drop-Funktionen im CDK.
In Version 7 liefert das Command-line Interface Nutzern weitere Informationen, wenn sie häufig vorkommende Befehle wie ng newe oder ng add @angular/material einsetzen. Dadurch sollen sie bereits eingebaute Features wie Routing oder Support für SCSS (eine CSS-Syntax-Erweiterung für Sass-Nutzer) entdecken können. Die CLI Prompts sind jetzt ebenfalls Bestandteil von Angular Schematics, einem Workflow-Werkzeug für zeitgemäße Webanwendungen. Mit dem Hinzufügen eines x-prompt-Schlüssels zu einer Schematics-Sammlung kann jedes Paket das Feature nutzen.
Neu im CDK: Virtual Scrolling und Drag-und-Drop
Das Angular CDK verfügt über eine neue Virtual-Scrolling-Funktion. Sie lädt und entfernt Elemente aus dem Document Object Model (DOM) auf Basis des sichtbaren Teils einer Liste. Das soll das Nutzererlebnis mit großen, scrollbaren Listen beschleunigen. Virtual Scrolling simuliert das Rendern aller Elemente, indem es die Höhe des Scroll-Elements an die Höhe aller Elemente anpasst, rendert aber nur die sichtbaren Teile der Liste. Damit unterscheidet es sich von anderen Methoden wie Infinite Scrolling, das eine festgelegte Zahl von Komponenten rendert und den Rest nachlädt, sobald das Seitenende erreicht ist.
Ebenfalls neu ist ein Drag-und-Drop-Modul, das es Entwicklern ermöglicht, Elemente zu erstellen, in denen Nutzer Bausteine verschieben, innerhalb einer Liste sortieren und zwischen verschiedenen Listen austauschen können. Dazu müssen Angular-Entwickler zunächst das DragDropModule in ngModule importieren. Das Hinzufügen der cdkDrag-Eigenschaft macht Elemente verschiebbar.
Angular auf der enterJS
Das Framework Angular ist immer ein beliebtes Thema auf der von heise Developer, iX und dpunkt.verlag veranstalteten JavaScript-Konferenz. Zurzeit läuft der Call for Proposals der Veranstaltung: Sprecher können sich bis zum 14. Januar mit ihrer Vortragsidee bewerben.
Neues Release, verbesserte Performance
Wie beim Erscheinen von neuen Versionen üblich, hatte das Angular-Team auch für Version 7 die Performance des Frameworks im Blick. Offenbar haben Entwickler bisher häufig den reflect-metadata-Polyfill in Produktion eingesetzt, obwohl er nur für die Entwicklung notwendig ist. Version 7 entfernt den Polyfill jetzt automatisch aus der polyfills.ts-Datei und fügt sie als Build-Schritt hinzu, wenn Entwickler die Applikation im JIT-Modus (Just-in-Time) bauen. Außerdem gibt Angular jetzt automatisch Warnungen aus, wenn das Bundle einer Applikation größer als 2 MByte ist – und einen Fehler bei einer Größe von über 5 MByte. Die Grenzen sind aber in der angular.json konfigurierbar.
Darüber hinaus haben sich auch die Abhängigkeiten für Drittanbieterprojekte geändert. Angular setzt jetzt auf TypeScript 3.1, RxJS 6.3 und Node 10. Das Framework unterstützt aber weiterhin Node 8. Eine vollständige Liste der Neuerungen findet sich in der offiziellen Ankündigung. (bbo)
