Bild zeigt Lithium, Red und Stack an der Frontend Conference Zürich

Frontend Conference Zürich 2013: neue Technologie und Innovationen

02.09.13

Die Frontend Conference Zürich 2013 bot viele Tipps, Tricks und Techniken zu neuen und älteren Frontend-Technologien. Eine Übersicht der interessantesten Technologie-Talks der Veranstaltung.

Innovative neue Technologien und Ansätze

Zum dritten Mal fand die Frontend Conference Zürich statt, und überzeugte erneut mit innovativen, inspirierten Vorträgen zum Thema Frontend. Die Präsentationen waren in zwei Gruppen eingeteilt: eine mit Fokus auf Design, die andere mit Fokus auf Technologie.

Die Highlights im Technologie-Stream waren Kim Joar Bekkelunds Lektion darüber, wie wir unseren Gebrauch von JavaScript verbessern können, Roger Dudlers Vision über die Zukunft des Webdesigns, Rodney Rehms Vortrag über den Umgang mit der Inkonsistenz des Webs und Chris Mills‘ Erläuterung darüber, wie CSS3 den Umgang mit Bildern verbessert.

Kim Joar Bekkelund - Patterns of Large-Scale Javascript Apps

Wenn wir JavaScript verwenden, so beginnen wir zwar oft mit einem kleinen Feature, erweitern dieses jedoch immer weiter und sehen uns schliesslich mit unübersichtlich viel Code und einem undurchsichtigen jQuery-Chaos konfrontiert. Wollen wir nun Änderungen am HTML vornehmen, so tangieren diese automatisch das JavaScript. Um diese Situation zu verhindern, müssen vor allem eins tun: Unseren DOM-zentrischen Ansatz verabschieden.

Mit der zunehmenden Komplexität von Websites und Applikationen wurden immer mehr Aufgaben vom Backend ins Frontend verschoben, sodass wir nun immer komplexeren Code schaffen, der schwerer zu unterhalten ist. Damit wir diese Herausforderung meistern können, müssen wir uns zwingend unseren DOM-zentrischen Ansatz abgewöhnen, jQuery anders einsetzen und unsere Daten vom DOM trennen.

JavaScript sollte testbar, skalierbar und unterhaltbar sein. Um dies zu erreichen, können wir einiges vom Backend lernen, und unseren Code besser strukturieren. Durch gute Organisation lässt sich die Unterhaltbarkeit des Codes erheblich erleichtern. Wir brauchen mehr Dateien, die weniger Code beinhalten. Dazu müssen wir unsere Applikationen entsprechend der einzelnen Features in separate Module einteilen, die unabhängig voneinander ausgeführt werden können und vom Gesamtsystem losgekoppelt sind. So können die Module einzeln getestet und eingesetzt werden. Zu beachten ist dabei, dass nicht ausserhalb der Module auf das DOM zugegriffen wird, keine globalen, nicht-native Objekte verwenden werden und keine globalen Variablen eingesetzt werden.

JavaScript Frameworks wie Angular, Ember und Knockout unterstützen Two-Way Datenbindungen, sodass bei Änderungen am Modell die Ansicht aktualisiert wird und umgekehrt. Dies erlaubt uns, Templates zu erstellen, die mit den Daten verknüpft sind ohne dass jQuery eingesetzt werden muss. Wir können Frontends bauen, die mit der Logik verknüpft sind aber dennoch nicht durch Änderungen im Markup beeinträchtigt werden.

Weitere nützliche Werkzeuge sind Require, womit Abhängigkeiten automatisch in der richtigen Reihenfolge geladen werden können, sowie Component oder Bower, die dabei helfen, third-party Libraries zu aktualisieren.

Um stets über die besten JavaScript-Praktiken informiert zu sein, ist Superhero.JS zu empfehlen, wo sich eine gute Auswahl an Artikel, Videos und Präsentationen dazu finden lassen.

Roger Dudler - Building the Web in 2018

Roger Dudler hielt einen visionären Vortrag über die Zukunft des Webs und versuchte zu ergründen, wie unsere Arbeit in fünf Jahren aussehen könnte. „Heute erwartet jeder, dass alles immer und überall auf dem topaktuellsten Stand ist.“ Wohin führt uns dies?

In-Browser Design ist bereits heute aktuell. Webflow oder Divshot ermutigen Designer, sich von Photoshop abzuwenden und neue Ansätze zu erkunden. Dies lässt sich zwar noch nicht auf grosse, komplexe Projekte anwenden, ist aber vielversprechend und interessant bei kleineren Websites. Doch nicht nur Design bewegt sich in Richtung Browser, in Zukunft könnte auch In-Browser Development, direkt im Browser stattfindendes Entwickeln, Realität sein. Beispiele wie Trivid, womit 3D-Modelle direkt im Browser gestaltet werden können, zeigen, dass wir bereits heute sehr umfassende Applikationen im Browser entwickeln können, und es ist sehr wahrscheinlich, dass diese Möglichkeiten in die Zukunft weiter ausgeweitet werden.

Bei Backends lässt sich ein Trend in Richtung Abstraktion des Backends beobachten. Firebase bietet skalierbare Echtzeit-Backends, ebenso bietet Parse eine ähnliche Dienstleistung, die auf mobile Geräte ausgerichtet ist. Beide ermöglichen, dass wir uns komplett auf die Frontend-Aspekte konzentrieren können, die Infrastruktur ausser Acht lassend. Dies zeigt, dass Backends in Zukunft möglicherweise primär als Dienstleistung von Drittparteien existieren werden.

Ein weiterer Trend sind Web Components, die den Umgang mit Modulen und Components im Web vereinfachen und grössere Freiheit bezüglich visueller Ausgestaltung und Interaktivität versprechen. Roger erwähnte das Polymer Project, eine auf Web Components aufgebaute Library, sowie Brick, eine Sammlung wiederverwendbarer UI Components, die den raschen und flexiblen Bau von HTML5-Applikationen ermöglichen.

Roger visionierte zudem über die Zukunft von Bildschirmen. Möglicherweise werden viele Geräte in einigen Jahren bereits mit mehr als einem einzigen Bildschirm ausgestattet sein. Die Randflächen von Smartphones beispielsweise könnten zu Zweitbildschirmen entwickelt werden, auf denen zusätzliche, sekundäre Information präsentiert wird. Ebenfalls wahrscheinlich ist, dass mehrere Bildschirme automatisch miteinander verknüpft sein werden und ergänzend Zusatzinformationen anzeigen, so dass beispielsweise beim Fernsehen auf dem Smartphone zugleich Hintergrundinfos zum laufenden Programm angezeigt würden.

Unsere Herausforderung besteht darin, dass wir uns für die kommenden Trends wappnen. Im Moment bedeutet dies, dass wir mit einer stetig ansteigenden Vielfalt an Geräten zurecht kommen müssen. Glücklicherweise gibt es vielversprechende Werkzeuge und Techniken, die uns zur Verfügung stehen. Zudem können wir stets nach Trends und Innovationen Ausschau halten. Kickstarter, die weltweit grösste Finanzierungs-Plattform für kreative Projekte, ist eine gute Inspirationsquelle. Web and Mobile TRENDS 2013 ist eine weitere Ressource, die über aktuelle Trends informiert. Ebenfalls wichtig ist, dass wir stets weiter blicken als nur auf unser Produkt und beobachten, was ringsherum geschieht. Lesen, lernen, experimentieren, anwenden, lehren - es sind unsere Ideen und Aktionen, die die Zukunft gestalten!

Rodney Rehm – Coping With The Broken Web

Mit der rasanten Ausdehnung des Webs sehen wir uns immer wieder mit neuen Änderungen, Spezifikationen und Implementationen konfrontiert. Unterschiede zwischen Browsern wachsten stetig und schnell, ebenso wie die Inkonsistenz zwischen verschiedenen Browsern. Wir stellen Vermutungen auf, doch gerade wenn wir mit neuen Spezifikationen konfrontiert werden, ist es wichtig, dass wir unsere Annahmen gründlich und im Voraus überprüfen.

Um herauszufinden, ob unsere Lösungen wirklich funktionieren, gibt es ein Mittel: Tests. Es kann praktisch jedes Testing-Framework eingesetzt werden, Rodney selbst empfiehlt testharness.js, W3Cs Framework. Um die Test-Daten zu sammeln, schlägt er Firebase vor. Beim Testing ist es natürlich stets von Vorteil, echte Geräte zu verwenden, doch auch virtuelle Maschinen wie BrowserStack können bei Bedarf eingesetzt werden.

Das heutige Web hält zwar viele Probleme und Herausforderungen bereit, aber es gibt auch Hoffnung: Wir sind nicht alleine! WebPlatform.org ist eine offene Community, die Ressourcen für ein besseres Web aufbaut. Auch Sauce Labs’ Angebot an Cloud-basierten Testing Tools ist interessant. Ebenfalls vielversprechend ist die Initiative Test the Web Forward, deren Ziel es ist, das Web zu verbessern indem die Community bei der Entwicklung von Web Standards miteinbezogen wird. Test the Web Forward will das Web mit Tests verbessern, indem diese von W3C und Browser-Anbietern betrachtet werden. Das Web mag sich nicht immer so verhalten, wie wir es wollen, aber wir können mithelfen, Test schreiben, und das Web entsprechend verbessern!

Chris Mills - Getting rid of Images using CSS3

Bilder sind hübsch, doch leider auch relativ unflexibel und HTTP-lastig. Früher waren sie unsere einzige Option, um Schatten, runde Ecken oder Farbverläufe zu realisieren. Auch bei speziellen Schriftarten mussten wir auf Bild-Ersatz-Techniken wie SiFR und Cufòn zurückgreifen. Glücklicherweise stehen uns heute neue Optionen und Werkzeuge zur Verfügung, die den Umgang mit grafischen Assets vereinfacht haben.

Dank SVG, Web Fonts und CSS3 können wir uns von Bilder weg zum Browser hin bewegen, sodass wir flexible und skalierbare Assets erstellen können. Dank Web Fonts können wir jede beliebige Schriftart einsetzen, und SVG ermöglicht uns, mit Hilfe von Markup Vektor-Bilder zu erstellen. Farbverläufe, Schatten und dergleichen sind weitere Dinge, die nicht mehr mühselig mit Bildern umgesetzt werden müssen. Und um dem Ganzen das Sahnehäubchen aufzusetzen, können diese neuen Lösungen meist mit guter Cross-Browser Unterstützung überzeugen.

CSS3 bietet weitere Möglichkeiten, mit Bildern umzugehen. Filter und Blend-Modi können über Bilder gelegt werden, Fragmente ausgeschnitten - alles ohne das Ursprungsbild verändern zu müssen. Wir können zwar noch nicht all unsere Visionen realisieren, aber es ist sehr wahrscheinlich, dass in Zukunft sogar Masks mit einem einer simplen CSS-Deklaration angewendet werden können. Anders als Bilder bietet dies die Möglichkeit, responsive Lösungen zu gestalten, die entsprechend skaliert werden können, sodass unabhängig vom Gerät stets ein überzeugendes Erlebnis geboten werden kann.