Einleitung

Die Geschwindigkeit, mit der sich Frontend Technologien weiterentwickeln, ist rasant. Die zwei großen Platzhirsche, Angular von Google und React von Facebook, veröffentlichen neue Versionen ihrer Frameworks in atemberaubender Geschwindigkeit. Abseits dieser beiden Open Source Projekte hat sich in den letzten drei bis vier Jahren aber ein weiteres Open Source Projekt als dritter Kandidat in die Auswahlliste der Frontend Frameworks eingereiht: Vue.js. Dieses Projekt wird, anders als die beiden erstgenannten Projekte, nicht durch ein großes Unternehmen vorangetrieben und unterstützt. Stattdessen treibt hier eine äußerst aktive Community die Entwicklung voran, allen voran der Entwickler Evan You, der dieses Projekt 2015 gestartet hat.

Die DAM United AG hat vor zwei Jahren diese drei Frameworks für den Einsatz evaluiert und VueJS als das Framework identifiziert, welches zukünftig für interne und Kundenprojekte eingesetzt wird.

Da wir im letzten Jahr aus terminlichen Gründen nicht an der Vue.js Amsterdam 2019 teilnehmen konnten haben wir uns sehr gefreut, dass wir – Tanja und ich (Andreas) – dieses Jahr nach Amsterdam fahren konnten.

Die Konferenz

Die Vue.js Amsterdam fand zum ersten Mal im Februar 2018 statt und entstand aus einem Javascript Community Meetup, organisiert von den Passionate People. Bei dem Treffen entstand der Wunsch der Teilnehmer nach einer Konferenz über das aufstrebende Framework VueJs. Im Jahr 2020 fand die Konferenz nun zum dritten Mal statt – über 1200 Entwickler und Interessierte aus der ganzen Welt trafen sich in Amsterdam, um von den Machern hinter dem Open Source Projekt Neuigkeiten aus erster Hand zu erhalten.

Das Hauptthema der Vue.js Amsterdam 2020 war die nächste Version Vue.js 3.

Die Qualität einer solchen Konferenz ist natürlich immer abhängig von den Vorträgen und den Vortragenden. Hier hat die Vue.js Amsterdam wirklich das Who is Who der Vue.hjs Community im Speaker Lineup: Neben Evan You höchstpersönlich, weiterer Vue.js Core Teammitglieder, Projektleitern der Top Vue.js Open Source Projekte bzw. bekannte Persönlichkeiten aus der Community. Für alle zukünftig interessierten möchten wir darauf hinweisen, dass die Konferenzsprache Englisch ist, daher sind alle Vorträge und Vortragsmaterialien auf Englisch.

Der Veranstaltungsort

Wie der Name der Konferenz schon sagt, findet die Veranstaltung in Amsterdam statt – für uns Essener also nur ein kurzer Trip mit dem Auto in die Niederlande. Der Veranstaltungsort selber ist das Theater Amsterdam im Hafen von Amsterdam. Die Hauptattraktion des Theaters ist wahrscheinlich das Auditorium mit seiner 50 x 10 Meter großen, halbkreisförmigen Leinwand und mit über 1100 Plätzen, in dem auch die Konferenz stattfand.

Tag 1

Die Vorträge des ersten Tages waren ein guter Mix von Vue.js/Vue.js 3 Themen, NonTech Themen, sowie angeschlossener Projekte. Der Eröffnungsvortrag wurde natürlich von Evan You persönlich gehalten. Im “State of the Vuenion 2020” hat Evan einen Überblick über das Wachstum von Vue und natürlich einen Status zu Vue 3 gegeben. Vue wächst weiterhin rasant – die Entwicklung von Vue 3 ist zum größten Teil abgeschlossen, die aktuellste Version ist im Moment die 3.0.0-alpha2, die erste Beta Version wird zum Ende des ersten Quartals 2020 erwartet. Der Vortrag wurde mit ein paar Code Beispielen zur neuen Composition API, die zusätzlich zur Options API in Vue.js 3 verfügbar sein wird, beendet. Wer sich schon einmal in die Composition API einarbeiten möchte, es gibt ein entsprechendes Vue.js 2 Plugin: https://github.com/vuejs/composition-api

Weitere spannende Vorträge waren Jessica Sachs’ Vortrag zu den Vue Test Utils und deren Weiterentwicklung, um das Testen von Vue Komponenten zu vereinfachen, sowie Gregg Pollacks “Introduction into the Composition API”, welcher auf seinem Vue Mastery Video https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api basiert.

Dass Vue.js mittlerweile auch im eCommerce Bereich angekommen ist, hat der Vortrag von Filip Rakowski gezeigt. Filip ist Co-Founder des Vue Storefront Projekts und sein Vortrag “Making eCommerce sexy again with Vue Storefront and Composition API” hat uns gezeigt, dass Vue Storefront im Moment das größte Open Source eCommerce Projekt ist. Das Projekt ist auf Grund seiner Architektur in der Lage, mit jedem eCommerce Backend zu arbeiten; durch die Verwendung von Vue.js ist aber die Developer Experience auf einem ganz anderen Level als bei vergleichbaren Lösungen. Filip verspricht, dass mit den neuen Möglichkeiten der Composition API die Developer Experience weiter erhöht wird. Das, was er in seinem Vortrag gezeigt hat, konnte dies nur bestätigen. Wir denken, einige unserer Kunden könnten von diesem Projekt profitieren.

Ein weiterer interessanter, aber nicht technischer Vortrag kam von Callum Macrae – der junge Brite ist Autor des Buchs “VueJs Up and Running”. In seinem Vortrag hat Callum auf die Notwendigkeit und Verantwortung der Community hingewiesen, dem Klimawandel entgegen zu wirken. Er hat aber nicht nur den warnenden Finger gehoben, sondern praktische Tipps gegeben, die jeder, der an entsprechenden Projekten arbeitet, umsetzen kann. Insgesamt ein Vortrag, der zum Nachdenken angeregt hat – dafür danke Callum.

Zum Ende des Tages bekam noch ein weiteres Projekt aus der Vue Ecosphere die Bühne: Nuxt. Der erste Vortrag zu Nuxt von Sébastien Chopin, Co-Autor von “What is Nuxt 2020?!”, beschrieb die steigende Popularität von Nuxt sowie die Weiterentwicklung. In die Tiefen von Nuxt sind wir dann im letzten Vortrag von Pooya Parsa abgestiegen. Dieser Vortrag hat die technischen Änderungen, die das Update aus Vue 3 mit sich bringen wird, thematisiert – unter anderem das neue static target, welches voraussichtlich ab Nuxt 2.12 verfügbar sein wird.

Abendveranstaltung Tag 1: Premiere “Official Vue.js: The Documentary”

Die Abendveranstaltung startete direkt nach dem letzten Vortrag im Auditorium. Es gab Drinks, Snacks und Popcorn, und pünktlich um 18:30 Uhr startete die Uraufführung der “Vue.js: The Documentary”. Da die Dokumentation mittlerweile auf Youtube veröffentlicht wurde, möchten wir gar nicht mehr viele Worte verlieren und direkt auf die Dokumentation verweisen: https://www.youtube.com/watch?v=OrxmtDw4pVI

Tag 2

Der zweite Tag begann mit einem Vortrag von Sarah Drasner, einem weiteren Vue.js Core Team Member. Sarahs Vortrag “An Animated Guide to Vue 3 Reactivity and Internals” hat sehr anschaulich erklärt, wie die Reactivity in Vue 3 funktioniert, dies war eine gute Basis für unseren Workshop am Samstag.

Der nächste Speaker war, Damian Dulisz, der Autor von Vuelidate und ebenfalls Vue.js Core Team Member. Vuelidate ist eine modelbasierte Validierungs Bibliothek für Vue.js 2.0. Damian hat in seinem Vortrag die neue Version von Vuelidate für Vue 3 vorgestellt, welche ein komplette Neuentwicklung darstellt und einige Unzulänglichkeiten der alten Version behebt. Mit der neuen Version ist es nun endlich möglich, das Validierungsmodell dynamisch zu erstellen – dies konnte er sehr anschaulich anhand eines kleinen Demo Projekts zeigen.

Ein sehr beliebtes Open Source UI Framework, welches auf dem Material Design von Google basiert, ist Vuetify. Der Author des Frameworks John Leider stellte in seinem Vortrag die neuen Features und die weitere Entwicklung der Version 2 vor. Hervorzuheben ist, dass John und das Vuetify Team das Ziel haben, an dem Tag, an dem Vue 3 veröffentlicht wird, Vuetify 3.0 (Titan) zu veröffentlichen. Vuetify 3 wird das ganze Framework auf die bereits oben erwähnte Composition API migrieren.

Jacob Müller stellte ein weiteres sehr beliebtes Open Source UI Framework vor: BootstrapVue. Sein Vortrag “BootstrapVue – The road to 2.0 and Beyond” beschrieb mehr oder weniger den Weg des Projekts von der Entstehung über die Weiterentwicklung. Sehr interessant war der Weg, den er in das Projekt genommen hat, indem er über Pull Requests immer größere Änderungen zum Projekt beigesteuert hat, bis er selber zum festen Projektmitglied wurde. So funktioniert Open Source!

Yoav Yanovski präsentierte seinen Vortrag “Micro Frontends: Composing a Greater Whole” gekonnt amüsant. Das grundsätzliche Thema seines Vortrags war: es gibt Microservices, mit denen man auf der Serverseite Dienste zusammen stellen kann – wieso gibt es keine Micro Frontends, die wir auf Client Seite ähnlich nutzen können, um Oberflächen aus vielen verschiedene Teilen dynamisch zusammen zu bauen? Das Ergebnis soll demnächst als Open Source veröffentlicht werden. Package: @vonage/micro-frontends

Die letzten beiden Vorträge des Tages haben das statische Vorrendern von Seiteninhalten thematisiert (Static pre-rendering). Diese Technik erlaubt es, Webseiten und Applikationen als vorgerechnete Dateien zu erstellen, die direkt von CDNs ausgeliefert werden. Dies macht die Seiten zum einen sicher, da kein Appserver da ist, der kompromittiert werden könnte, zum anderen aber auch wirklich schnell.

Zunächst zeigte Jake Dohm in ”Building Blazing Fast Sites with Gridsome” wie man mit Gridsome entwickelt. Gridsome ist ein statischer Seiten Generator, der die Daten aus Backends (CMS oder andere Datenquellen) zusammen stellt und die zur Entwicklungszeit per GraphQL abgefragt werden können. Die so entwickelten Seiten werden dann im Build Prozess erzeugt. Gridsome baut auf dem PRPL Pattern auf und ist in der Lage, JAMStack Webseiten und Applikationen zu erstellen. Wie sich das im Entwicklungsprozess anfühlt, zeigte er in einer Live Coding Session. Das kleine Demo Projekt, das er innerhalb von 20 Minuten entwickelt hat, war pfeilschnell, der Prozess der statischen Seitengenerierung transparent im Build Prozess integriert.

Dass das, was Jake gezeigt hat, auch mit Nuxt funktioniert, hat uns Debbie O´Brien gezeigt: “Full Static with Nuxt”. Ihr Vortrag hat zusätzlich noch weitere Techniken aufgezeigt, die mit Nuxt möglich sind, um eine umfassende User Experience in einer Static Sites zu liefern. Zum Beispiel die Integration einer Single Page Application (SPA) in einer Static Site. Debbie wies nochmals eindringlich darauf hin, dass Static Sites neben Geschwindigkeit und Sicherheit auch wesentlich weniger Ressourcen benötigen und somit schlussendlich die Umwelt schonen, und griff damit nochmals den Vortrag von Callum vom Vortag auf. Nach ihrem Vortrag musste Debbie noch auf der Bühne tanzen, um ihre Aufnahme als Core Member im Nuxt Team zu besiegeln.

Als kleine Überraschung zum Ende der Konferenz hatten wir noch das Vergnügen, Evan You live auf der Bühne rappen zu sehen – davon gibt es sogar ein Video: https://www.youtube.com/watch?v=eXnHUr8VhMc

Abendveranstaltung Tag 2: Große Afterparty

Zum Abschluss der Konferenz wurde nochmal so richtig aufgefahren: asiatisches Essen, Bier vom Fass und ein DJ verwöhnten die verbliebenen Gäste ab 18:30 Uhr. Da es aber unter den Gästen und Veranstaltern einige Hobby DJs gab, war der DJ sehr früh arbeitslos. Dem Entertainment hat es nicht geschadet, auch diese Jungs heizten dem Publikum kräftig ein. Die DJs wurden gegen 21:30 Uhr von einem improvisierten Karaoke Setup abgelöst, bevor sich die Party vor Mitternacht auflöste und wir geschafft aber glücklich zu unserem Hotel gelaufen sind.

Workshop

Der Workshop “Deep Dive with Vue 3” am Samstag startete um 9:00 Uhr in den Räumlichkeiten der Passionate People. Geschätzte 60 Entwickler hatten sich eingefunden, um von Evan You in die neuen Programmier Paradigmen von Vue 3 eingeführt zu werden.

Evan entwickelte mit uns im Laufe des Tages ein MiniVue, um die interne Arbeitsweise von Vue 3 zu zeigen und die Unterschiede zu Vue 2 zu aufzuzeigen. Nachdem jeder ein lauffähiges MiniVue auf seinem Rechner hatte, sind wir mit der 3.0.0.alpha-2 von Vue 3 und der Composition API gestartet. Evan konnte hier einige Use Cases zeigen, die einfacher und eleganter mit der Composition API umsetzbar sind. Sehr interessant war auch die Arbeitsweise des neuen Template Renderers, der anschaulich demonstriert wurde. Während des kompletten Workshops wurde live entwickelt und Zeit gegeben, eigene Lösungen zu entwickeln, bevor Evan seine Umsetzung gezeigt hat. Abschließend gab es für alle Teilnehmer ein Zertifikat über die Teilnahme.

Fazit

Die Vue.js Amsterdam hat Spaß gemacht, und zwar in allen Belangen. Von der Organisation über den Ablauf, dem Catering und dem ganzen drumherum fühlte es sich insgesamt an wie eine sehr persönliche Konferenz für die Community. Das hochkarätige Speaker Lineup und die Location am Hafen machen dieses Event wirklich zu einem Pflichttermin für alle Vue.js Entwickler. Abschließend sei noch gesagt, dass wir leider nicht alle Vorträge im Artikel thematisieren konnten, obwohl es jeder einzelne verdient hätte.