Neues Release bietet hohe Performance und mehr
Nach einer Entwicklungszeit von mehr als einem halben Jahr hat das große Update Vue.js 2.0 den Beta-Status verlassen und wurde als Stable Release für den produktiven Einsatz veröffentlicht. Zu den Änderungen gehören umfangreiche Änderungen in der API Programmierschnittstelle, die Beseitigung zahlreicherer kleinerer Bugs, eine umfangreiche Dokumentation, die TypeScripts Typings und die Einführung einer Redone-Rendering-Schicht. Diese soll in Verbindung mit einer optimierten Bibliothek zu einer deutlichen Steigerung der Performance führen. Noch stärker als sein Vorgänger konzentriert sich Vue.js zudem auf die Entwicklung mobiler Applikationen.
Performance wird um bis zu 80 % gesteigert
Ein großer Teil der Steigerung in der Rechenverarbeitung lässt sich auf die Einführung eines virtuellen Data Object Mangements (DOM) zurückführen, das als Zwischenebene dient. Ein weiterer Vorteil entsteht durch neue Algorithmen, mit denen Vue.js 2.0 während der Kompilierung den Code auf intelligente Weise optimiert und beispielsweise statisch untergeordnete Sub Trees analysiert und anordnet, um ein aufwendiges Re-rendering zu vermeiden. Bei einer Änderung kennt Vue.js die betroffenen Elemente und muss deshalb nur die Childs neu berechnen, die tatsächlich notwendig sind anstatt den gesamten Tree neu zu rendern. Das JS Framework selbst wurde gleichzeitig verschlankt, was dem Ruf als sehr leichte und zugleich umfangreiche Schnittstelle entspricht. Als Kompression kommt wie im Vorgänger GZIP zum Einsatz, allerdings nehmen die Runtime-only Builds inzwischen nur noch 16 Kb Speicherplatz in Anspruch. Erst mit den Erweiterungen Vue-Router und Vuex 2.0 kommt die neue Version auf die Größe von 26 Kb, die in dem letzten Stable Release bereits alleine von dem Kernframework benötigt wurde. Die Änderungen scheinen sich in der Tat auszuzahlen: In unabhängigen Benchmarks erweist sich Vue.js 2.0 als deutlicher effizienter als seine Gegenspieler und nähert sich der Geschwindigkeit eines Vanilla Javascripts an. Die Performance liegt um fast ein Drittel vor der der bekannten Konkurrenten React 15.3.1 und Angular 2.0.0 und rund 80 % höher als die letzte Stable Version Vue.js 1.0.26.
Schnelleres Rendering mit virtuellen DOM
Als Basis des neuen Render-Designs dient ein Fork des beliebten Open Source Projekts Snabbdoms, das besonderen Wert auf Performance, modularen Aufbau und Einfachheit legt. Der virtuelle DOM trennt die häufig veränderten Objekte von den statischen und verwaltet diese selbstständig, ohne das der Anwender sich um Optimierungen kümmern muss. Es besteht jedoch auch weiterhin die Möglichkeit, direkt auf das DOM zuzugreifen und manuell Rendering-Funktionen zu manipulieren. Auf diese Weise bleibt die Funktionalität und Flexibilität von Javascript erhalten, falls sie für eine spezielle Aufgabe benötigt wird, während gleichzeitig der Rahmen weitgehend und vollständig optimiert wird und bleibt. Templates werden versteckt in Virtual DOM Render Funktionen umgewandelt. Anhänger von JSX können außerdem optional eine Unterstützung integrieren. Bislang konnte ein solches komplexes Prinzip lediglich auf Umwegen über Plug-ins für Babel umgesetzt werden, aber Vue.js bietet es jetzt einfach und unkompliziert Out-of-the-Box sogar mit Unterstützung für In-Browser Compiler. Vue.js 2.0 bietet zudem auch Server-Side-Rendering (SSR) mit Streaming und Component-Level-Caching, um den Client von der Kompilierung zu befreien und HTML direkt an den Browser zu senden. Vorteile des SSR liegen dabei in der extrem schnellen Reaktionszeit, da das massenhafte Erstellen temporärer leerer Templates bei Aufruf einer Seite verhindert wird. Nachteilig wirkt sich allerdings die etwas längere Wartezeit bei Interaktionen aus, da diese erst zum Server übertragen werden müssen.
Bibliotheken erfahren ebenfalls ein Update
Für eine optimale Unterstützung aller Funktionen wurden gemeinsam mit dem Framework auch die Bibliotheken überarbeitet und integrieren sich als erweiterte Schnittstelle nahtlos in das neue Design. Offiziell werden vier Bibliotheken und Tools unterstützt: vue-router, vuex, vueloader und vueify. Die meisten Änderungen und neuen Funktionen wurden in die beiden Bibliotheken vue-router und vuex implementiert. So unterstützt vue-router jetzt auch mehrfache Namen für router-view und eine erweiterte Navigation über router-link. Das Scrollverhalten kann außerdem individuelle angepasst und verändert werden. Eine neue API für die Navigation Hooks erleichtert die Anbindung an weitere externe Skripte und dient als einfach zu nutzende Schnittstelle nach außen. Auch bei vuex wurde die API vereinfacht und erweitert. Insbesondere Module können nun komfortabel angesprochen werden, um den Code simpler und übersichtlicher gestalten zu können. Die Verwendung interner Komponenten ist jetzt einfacher möglich und hilft bei direkten Aufrufen. Ergänzt wurde vuex auch um eine erweiterte Funktion für Composable Async Actions.
Einfache Migration ist in den meisten Fällen möglich
Trotz der hohen Zahl der Änderungen im Design und des Umfangs an neuen Funktionen soll die Migration von Vue.js 1.0 auf 2.0 weitgehend problemlos möglich sein. 90 % der API ist laut Aussagen der Entwickler identisch und auch der Syntax der Templates ist nahezu vollständig mit der Version 1.0 kompatibel. Lediglich einige, wenige Ausdrücke gelten jetzt als veraltet. Zudem haben die Entwickler als Hilfe ein eigenes Migrationstool mit Namen "migration helper" zur Verfügung gestellt, das den Nutzer durch den Prozess leitet. Es kann auf ein Projekt gerichtet werden und analysiert den Code nach veralteten Ausdrücken. Wird es fündig, schlägt es automatisch Alternativen vor. Ist der Code entsprechend angepasst, sollten alle ausstehenden Test - sofern vorhanden - durchlaufen werden. Anschließend kann das Projekt im Browser geöffnet und untersucht werden. Bei eventuell nicht erfassten Inkompatibilitäten werden entsprechende Warnungen oder Fehlermeldungen angezeigt, auf die sich die folgende Analyse stützen kann. Ist dies nicht der Fall, gilt die Migration als abgeschlossen und das Projekt kann in Zukunft ohne Einschränkungen auf Vue.js 2.0 fortgeführt werden. Ein Upgrade der Bibliotheken ist lediglich für vue-router vorgeschrieben, so dass dem Pfad ebenfalls gefolgt werden muss. Andere Libraries inklusive vuex sind sogar mit noch älteren Versionen wie 0.8 kompatibel. Es wird allerdings aud Gründen der Kongruenz und der zukünftigen Updatefähigkeit dringend empfohlen, auch diese mit dem Projekt zu migrieren.
Das Update vor dem Update: Wie geht es weiter?
Vue.js hat nicht weniger als acht Alpha-, acht Beta- und acht RC-Versionen benötigt, bis es als Stable freigegeben wurde. Auch der nächste Schritt wird entsprechend sorgfältig vorbereitet werden, um Bugs vor dem Release zu beseitigen und den Komfort und die Kompatibilität des Frameworks in Zukunft weiter zu gewährleisten. Die schnelle und hohe Verbreitung geben dem Konzept Recht: 88 % aller Nutzer geben an, das Framework auch in Zukunft verwenden zu wollen. Damit hat sich Vue.js in kurzer Zeit gegen große Konkurrenten wie Facebooks React bewiesen und bei vielen Programmierern durchgesetzt. Es ist deshalb anzunehmen, dass es mit der Version 2.0 noch einmal einen bedeutsamen Sprung in der Popularität und Verbreitung machen wird.
Sie interessieren für die Möglichkeiten der Web-Entwicklung mit vue.js und benötigen weiter Informationen zum vue.js Framework? Sprechen Sie uns an. Gemeinsam mit mindtwo in Bonn finden Sie eine Lösung.
