Kontaktieren Sie uns.

mexan AG
info@mexan.ch

Luzern
Hirschmattstrasse 36
6003 Luzern

041 500 01 01

Bern
Bubenbergplatz 10
3011 Bern

032 588 59 10

Kontaktieren
Sie uns.

Luzern
041 500 01 01
Hirschmattstrasse 36
6003 Luzern

Bern
032 588 59 10
Bubenbergplatz 10
3011 Bern

Frontend Love/Vue.js Amsterdam 2018

von Christian Moser
28.06.2018

Konferenz Entwicklung

Mitte Februar drehte sich in Amsterdam an einer zweitägigen Konferenz alles um JavaScript.

Aus ganz Europa pilgerten am ersten Tag über 750 und am zweiten Tag sogar über 1000 Webentwickler in die holländische Hauptstadt um die neuesten Errungenschaften der JavaScript-Frameworks zu entdecken und erlernen, aber auch um mit der Community zu diskutieren, sich auszutauschen und zu verbinden. Auch Tanja und ich waren dabei. In den nächsten paar Absätzen nehmen wir euch mit auf eine Tour durch die zwei Tage, berichten über die vielen verschiedenen Talks und geben am Schluss eine kleine Empfehlung für den kommenden Event ab. 

Amsterdam

Dieser Event war natürlich auch bei Tanja und mir fett im Kalender vermerkt und ein Blick auf die Liste der Themen und Sprecher machte Lust auf zwei interessante Tage in Amsterdam. Amsterdam ist ja auch für seine Kultur berühmt, weswegen wir uns neben der Konferenz auch mit den Van-Gogh-Museum, dem Anne-Frank-Haus, der Kirchenvielfalt und mehr beschäftigt haben. 

Location & Organisation

Die Konferenz fand im «Amsterdam Theater» statt. Die Location war perfekt und der Vortragssaal war eine Mischung aus Kinosaal, Vorlesungssaal und Partytempel. Besonders beeindruckend war dabei die riesige 180° Leinwand. Auch die Organisation war bemerkenswert. Speditiv und ohne übertriebenes Schlange stehen wurden wir Teilnehmer mit «Geschenksäckchen» und Teilnehmerausweisen ausgestattet. Die Wartezeit bis zum Opening wurde mit Kaffee, Getränken und kleinen Snacks versüsst. Alle 3 Talks gab es eine kurze Kaffeepause, die auch dem Networking diente. Ausserdem gab es ein Inhouse-Catering zur Mittagszeit, das alle Bedürfnisse abdeckte und neben Salaten und DIY-Burgern auch typische holländische Pommes Frites im Angebot hatte.

Frontend Love

JavaScript-Frameworks, welche den Frontendend-Entwickler davor bewahren, das Rad ständig neu zu erfinden, gibt es heute wie Sand am Meer und als Webagentur hat man die Qual der Wahl, wenn man sich für eines entscheiden soll.

In dieser Menge an Frameworks kristallisieren sich die drei folgenden Hauptvertreter heraus:

Vue.js
React.js
Angular.js

Und so ist es nicht verwunderlich, dass am ersten Tag des Events der Schwerpunkt auf genau diese drei Frameworks gelegt wurde, ohne dass diese sich gegenseitig konkurrenziert hätten. So konnte man sich ein eigenes Bild von den jeweiligen Technologien machen und ggf. auf die individuellen Anwendungsfälle schliessen.

Talk 1 (Vue.js), Sarah Drasner: Animating Vue: How Capable and Elegant Is Vue.js In Terms of Animation

Sarah ist ein wahrer Animationsexperte und ausserdem ein Mitglied des Vue.js-core-Teams. In ihrem Vortrag stellte sie Best Practices vor, um Webapplikationen mit kleinen, fast unmerklichen Komponentenübergängen zu versehen, um dadurch die User Experience deutlich zu erhöhen.

Talk 2 (React.js), Michel Weststrate: React; It's Not A Framework for the Ui, But a Framework for the Mind.

Wir kommen beide ursprünglich aus der React.js-Ecke, bevor wir uns in der mexan AG mit Vue.js auseinandergesetzt haben. Daher war es für uns besonders spannend, über den aktuellen Stand dieses Frameworks informiert zu werden, seitdem wir uns das letzte Mal damit auseinandergesetzt haben. Dieser Talk war jedoch eher eine generelle Einführungsvorlesung und ging auch nicht wirklich auf den Slogan «Framework for the mind» ein.

Talk 3 (Angular.js), Simona Cotin: Build Progressive Web Apps with Angular.

Auch wenn wir (v.a. Tanja) überhaupt keine Angular Fans sind, konnten wir viel aus diesem Talk mitnehmen. Zum einen, weil Simone eine mitreissende, kompetente Rednerin war, zum anderen, weil des Thema «Progressive Web Apps» gut abstrahiert wurde und dadurch viele Inputs für andere Frameworks gegeben wurden.

Talk 4 (React.js), Luca Mezzalira: Mobx State Tree + React: Pure Reactivity

Dieser Talk gehörte zur etwas langatmigeren Sorte, zumal der Redner nicht ganz so mitreissend war wie andere. Auch das Thema «Mobx» liess die Abgrenzung zu den ähnlichen State-Management-Systemen «Flux» und «Redux» vermissen.

Talk 5 (Vue.js), Alexandre & Sébastien Chopin, Start Using Vue.js Like jQuery

Ein sehr interessanter Vortrag der beiden Chopin Brüder, mit dem Ziel Vue.js als ernstzunehmende Alternative zu jQuery vorzustellen, was ihnen auch definitiv gelungen ist. Auch die mexan AG ist dabei jQuery durch Vue.js abzulösen um Technologieüberschneidungen innerhalb einer Applikation zu vermeiden.

Talk 6 (Angular), Manfred Steyer: Automating Boring Programming Tasks with The Angular CLI And Schematics

Unserer Meinung nach zeigte vor allem dieser (stark mit Eigenwerbung gespickte) Talk die teilweise unnötige Komplexität von Angular und bestärkte uns klar darin, für unsere Anwendungsfälle weiterhin mit Vue.js zu arbeiten.

Talk 7 (React.js), Kitze Ristovski: The Exciting Future of React

Ein weiterer React-Talk: dieser war wirklich sehr interessant und gab einen hervorragenden Überblick über die deutlich vorangeschrittene Weiterentwicklung des Frameworks. Beim Ausblick auf den bevorstehenden grossen Versionssprung bekamen wir direkt Lust darauf, mal wieder ein Projekt mit React.js zu realisieren.

Talk 8 (Vue.js), Eduardo San Martin Morote: Vue, Simple Yet Scalable

Mit dem Ziel aufzuzeigen, dass Vue.js auch für grosse Applikationen geeignet ist, beschäftigte sich dieser Vortrag vor allem mit dem «Öko-System» um das Framework herum und betrachtete Lösungen wie «vue-router» und «vuex». Da wir selbst schon lange auf diese Lösungen setzen führte der einführende Charakter des Talks zu nicht vielen neuen Erkenntnissen, bestätigte uns aber, dass unsere Vorgehensweisen «State of the Art» sind.

Talk 9 (Angular.js): Gerard Sans, Why Nobody Told Me About Ngrx/Entity?

Ein weiterer Angular Talk, welcher aufgrund des speziellen Themas nicht heruntergebrochen werden konnte. Dennoch nett zu hören, wie sich Angular mit State-Management beschäftigte.

Da die Themen der folgenden Talks nicht zu unseren Hauptschwerpunkten gehörten und wir für den darauffolgenden Event Tag möglichst fit sein wollten, beschlossen wir uns zu verabschieden und noch etwas von der Amsterdam-Stimmung mitzunehmen, um den Kopf wieder etwas frei zu kriegen.

Wenngleich die Talks meist spannend und unterhaltsam waren, muss der hohe Informationsgehalt erstmal verdaut werden, vor allem an einem Konferenztag, der so viele unterschiedliche Bereiche behandelt hat.

Vue.js

Unser eigentliches Highlight fand am zweiten Tag statt, wo wir uns ausschliesslich mit Vue.js und dessen Ökosystem beschäftigten. Da die mexan AG dieses Framework als Kerntechnologie einsetzt, versprachen wir uns vor allem von diesen Talks zahlreiche Tipps, Tricks und Inputs für unsere zukünftigen Arbeitsweisen.

Auch hier möchten wir die sehr gute Organisation zum Einlass loben. Die Organisatoren hatten sowohl Timing wie auch Teilnehmeransturm wieder gut im Griff.

Talk 1, Evan You: Keynote Speech on The Past, Present and Future of Vue.js

Eingeleitet wurde der Tag vom Erfinder des Frameworks selber. Evan You erzählte in seiner Rede über die Vergangenheit, die Gegenwart und die Zukunft von Vue.js und stellte uns die Vue CLI in der Version 3.0 vor, die soeben den Beta-Status erreicht hat.

Talk 2, Roman Kuba: Scaling Vue In an Existing Stack

Erfahrungsgemäss werden im Arbeitsalltag selten Projekte von Grund auf neu realisiert, stattdessen wird die Optimierung eines vorhandenen Stacks gewünscht. Roman zeigte Best Practices, um Vue.js in vorhandene Applikationen und Umgebungen zu integrieren und thematisierte ausserdem die Realisierung als reine Single-Page-App (SPA) oder und den Aufbau als Multipage-App (MPA).

Talk 3, Guillaume Chau: Apollo, GraphQL And Vue: The Ultimate Stack

Auch wenn die mexan AG hauptsächlich eigene und dadurch hochkonfigurierbare Backends/APIs via Laravel entwickelt, war dieser Blick über den Tellerrand für uns sehr interessant. Mittels GraphQL-Server und dem Client Apollo können API-Zugriffe bis ins kleinste Detail standardisiert und validiert werden.

Talk 4, Alexandre Chopin: Speed Up Your Vue.js Development Time with Nuxt.js

Für Entwicklungsgeschwindigkeit, User Experience, vor allem aber für die Suchmaschinenfreundlichkeit ist das Meta-Framework Nuxt.js von grosser Bedeutung. Neben einer hervorragenden Struktur und zahlreichen Hilfen bietet es vor allem die Möglichkeit zum «server-side-rendering» oder der Auslieferung von statischen Seiten, damit auch asynchrone Inhalte für die Suchmaschinen verfügbar werden.

Talk 5, Eduardo San Martin Morote: State Animations: Getting Them Right

Eduardo löste sich in seinem Animationsvortrag von den klassischen CSS-basierten Animationen und beschäftigte sich mit «dos and don’ts» bei State basierten Vue-Animationen. Zahlreiche Demoprogramme sorgten für einen unterhaltsamen und eindrücklichen Talk.

Talk 6, Plamen Zdravkov: Building Reusable Ui Components in Vue. What Have We Learned from Building Them for KendoUI

Wir sind überzeugt, hier eine Werbeveranstaltung eines Sponsors gehört zu haben. Es ging hier weniger darum, Best Practices für wiederverwendbare Komponenten zu liefern, sondern eher um die Darstellung des eigenen Frameworks, das Kendo-Komponenten vue konform ausliefert. Wie sinnvoll es ist, ein Komponentenframework in ein komponentenbasiertes Framework zu integrieren, muss jeder selbst für sich entscheiden.

Talk 7, Edd Yerburgh: Unit Testing Vue Components: Why Test, What to Test, And How to Test Vue Components

Ein ungeliebtes, aber sehr wichtiges Thema ist das Testen einer Applikation, und hierbei unterscheidet sich die Frontendentwicklung stark von der Backendentwicklung, die weitestgehend linear durchgetestet werden kann. Aus dem Vue-Umfeld wurden die «vue-test-utils» vorgestellt, die mittels Testumgebung und zahlreichen Helferfunktionen das einfache Testen von Frontenddarstellungen ermöglichen.

Talk 8, Sebastien Chopin: How to Server-Render an Application with Vue.js

Dieser Talk vom Entwickler des «Nuxt.js»-Meta-Frameworks behandelte die rein technische Sicht des «server-side-rendering» und war vermutlich der anspruchsvollste Vortrag des gesamten Events. Der gemeine Entwickler wird vermutlich immer ein vorgefertigtes Hilfsmittel dazu verwenden, dennoch war es sehr spannend und informativ, diesen Blick hinter die Kulissen zu erhalten.

Talk 9, Gerard Sans: Moving from Angular (V5+) To Vue

Gerard – ein absoluter Angular Anhänger – wurde vom Veranstalter «genötigt», ein erstes Vue-Projekt zu realisieren, und der Community seine Erfahrungen mitzuteilen. Trotz wenig brauchbarem Informationsgehalt, war der Talk unterhaltsam und bestätigte uns erneut, die richtige Wahl mit unserer aktuellen Kerntechnologie getroffen zu haben.

Talk 10, Ives van Hoorne: Vue Development in Codesandbox

Einer der unterhaltsamsten Vorträge des Events des enorm talentierten Ives van Hoorne, der seiner Online Entwicklungsumgebung «Codesandbox» präsentierte. Codesandbox unterstützt die Entwicklung u.a. mit React.js, Angular und Vue.js und berücksichtigt dabei Technologien wie npm, unterschiedliche Bundleprogramme, Babel, jest, uvm. Eine Lösung also, um immer und überall entwickeln zu können.

Talk 11, Jen Looper: Create an Engaging Native Mobile App with Vue and NativeScript

Mobile Development gehört nicht zu unserem alltäglichen Kernprogramm, vielleicht aber schon bald: Jen Looper führte aus, wie sich Vue.js zur Entwicklung mobiler Applikationen einsetzen lässt und berücksichtigte dabei auch die Unterschiede zur Web-Version der Applikation.

Talk 12, Sarah Drasner: Serverless Functions and Vue.js: Focus on Vue Application Development by Deploying and Operating Serverless Architectures

Sarah verliess für einmal ihr gewohntes Animationsumfeld und stellte uns die Arbeitsweise im serverlosen Umfeld vor, wobei «serverlos» eher mit «ohne einen Server betreuen zu müssen» übersetzt werden muss. Wie bereits erwähnt, bauen wir in der mexan AG die Backends meist selbst, aber mit den geballten Einsatzinformationen aus diesem Talk kann das Applikationsangebot doch deutlich weiterentwickelt werden.

Fazit

Auch wenn sich der erste Event Tag nur einführend mit unserer Kerntechnologie Vue.js beschäftigte, war der Blick auf die anderen Möglichkeiten sehr wichtig. Zum einen währt keine Technologie ewig, zum anderen kann aus dem Ökosystem wie auch von den Stärken und Schwächen der anderen Frameworks viel gelernt werden. Der zweite Tag zeigte uns, dass sowohl die mexan AG wie auch die Arbeitsweise von uns Webentwicklern zeitgemäss und auf dem richtigen Weg ist. Allerdings gab er uns aber auch viele Inputs mit, die unseren Umgang mit dem Framework stark optimieren werden und den Vue-Horizont um ein Vielfaches erweitert haben. Die Teilnahme am Event ist von unserer Seite eine klare Empfehlung: Die Vielschichtigkeit der Redner und Themen, die tolle Location, die geniale Organisation und auch die grossartige Stadt Amsterdam haben die zwei Tage zu einem einzigartigen Erlebnis gemacht.
Alles in allem zwei sehr interessante und herausfordernde Tage mit vielen neuen Inputs und schönen Eindrücken aus Amsterdam.