Die Fronteers Konferenz steht bereits seit einigen Jahren auf meiner Konferenz-Wunschliste, doch leider hatte sich diese in den letzten Jahren regelmäßig mit der TYPO3 Konferenz T3CON überschnitten. Als aktives Mitglied der TYPO3 Community und Mitarbeiterin einer TYPO3 Agentur hatte ich mich daher immer gegen die Fronteers entschieden. Dieses Jahr passte der Termin aber endlich und Christopher Hlubek und ich konnten die Konferenz zum ersten Mal besuchen.
Die Fronteers ist eine englisch-sprachige Konferenz fokussiert auf Frontend-Entwicklung und Web-Technologien, organisiert von dem gleichnamigen holländischen Verein. Bereits zum sechsten Mal fand sie dieses Jahr statt und wie immer im Pathé Tuschinsky, einem historischen Theater mitten in Amsterdam. Die Konferenz zeichnet sich nicht nur durch namhafte internationale Speaker aus, sondern ebenso durch ein ausgereiftes Konzept. Über beide Konferenztage werden die Teilnehmer (dieses Jahr ca. 550) durch den Ceremony Master durch die Veranstaltung geleitet. In diesem Jahr wurde diese Aufgabe von Paul Irish (Google Chrome Developer Advocate) übernommen. Neben der Begrüßung hat er jeden Speaker mit kurzer Beschreibung angekündigt und während der Vorträge alle auftretenden Fragen gesammelt (die Teilnehmer sollten über Twitter Fragen zum Talk posten). Als Abschluss jedes Talks gab es eine kurze Q&A Session in welcher Paul Irish die aufgekommenen Fragen zusammengefasst an den jeweiligen Speaker gerichtet hat. Ein aus meiner Sicht sehr gelungenes Konzept, bei welchem zum einen gesammelt alle relevanten Fragen geklärt werden und zum anderen die kurze Überbrückungszeit beim Wechsel der Speaker sinnvoll genutzt wird.
Im Folgenden gebe ich einen kurzen Überblick über einige Themen und Talks.
Performance
Eines der großen Themen der Konferenz war die Performance von Webseiten aus Frontend-Sicht. Paul Lewis (Google Chrome Developer Relations Team) hat hierzu einen Überblick gegeben, indem er gezeigt hat wie genau der Browser jeden Pixel einer Webseite rendert. So wurde zum Beispiel klar, dass das Ändern einer Klasse auf dem body-Tag ein komplettes Neu-Zeichnen der Webseite zur Folge hat, weil sich theoretisch jedes Element verändert haben könnte. Klassen sollten also immer möglichst dicht am zu verändernden Element gesetzt werden.
Auch bei Steve Souders‘ (Google Head Performance Engineer) Talk „Pre-Browsing“ ging es um das Thema Performance, allerdings von einem völlig anderen Gesichtspunkt ausgehend. Auf Basis der Rendering-Abfolge des Browsers (1.Prerender und Prefetch, 2. Transitions, 3. Preloading) ist er auf die verschiedenen Möglichkeiten eingegangen, wie ein Browser die Ressourcen einer Website möglichst schnell laden kann. Dazu gehört zum Beispiel das asynchrone Ausliefern von JavaScript, damit nicht das Laden der Webseite von den Skripten verzögert wird. In diesem Fall entfällt dann auch der Umweg Skripte im Footer einzubinden, anstatt im Header „Scripts in the bottom are so 2007 ;)“. Eine weitere Möglichkeit besteht darin neue Techniken wie Prerender und Prefetch zu nutzen. Darüber kann man den Browser zum Beispiel dazu bringen auf Seite X bereits Seite Y vorzuladen, wenn diese Seite zum Beispiel in den meisten Fällen als Folgeseite der Benutzer aufgerufen wird oder der Benutzer mit der Maus über einen Link hovert.
Frontend-Techniken der Zukunft
Natürlich ist ein Ziel einer Konferenz wie der Fronteers auch der Blick in die Zukunft. Hierzu hat Zoe Mickley Gillenwater (Web accessibility specialist at AT&T) einen Einblick in die aktualisierte Version der Flexbox-Eigenschaftgegeben. Mit Flexbox können Layouts weitaus flexibler umgesetzt werden als mit Floatings. Das Besondere daran ist, dass darüber auch Einheiten gemischt werden können und Definitionen im Verhältnis zur Gesamtbreite möglich sind. Beispielsweise kann man ein Label neben einem Input-Feld ausrichten und dem Input-Feld über eine einfache Anweisung die Regel mitgeben, dass es die volle Restbreite neben dem Label einnehmen soll. Eine weitere Einsatzmöglichkeit betrifft die Ausrichtung der Höhe von nebeneinander positionierten Elementen. Bislang war es nur über JavaScript möglich zwei nebeneinander dargestellte Elemente, abhängig von deren Inhalten, in derselben Höhe darzustellen. Die Flexbox-Eigenschaft wird leider noch nicht von allen Browsern unterstützt, aber es ist denkbar dieses Feature als Optimierung für alle modernen Browser einzusetzen und für ältere Browser auf das verbesserte Layout zu verzichten (Progressive enhancement) oder per JavaScript nachzubilden.
Angelina Fabbro (Mozilla Firefox OS) hat einen Überblick über den aktuellen Status von Web Components gegeben. Mit der neuen HTML5 Technik ist es möglich HTML Elemente flexibel selber zu definieren und auszugeben.Die Spezifikation befindet sich derzeit noch in Entwicklung, einige Features lassen sich aber jetzt bereits über Polyfills nutzen (z.B.Google Polymer oder Mozilla X-Tag). In der Zukunft ergeben sich mit den Decorators von Templates neue Einsatzmöglichkeiten: für responsive Webseiten ist es häufig erforderlich, dass Elemente in der mobilen Ansicht in einer anderen Reihenfolge dargestellt werden sollen als in der Desktop-Ansicht. Nicht immer ist dies einfach per CSS möglich, sondern erfordert JavaScript-Manipulationen des DOM. Über Web Components könnte die Darstellung ohne umfangreiche DOM-Manipulation durch CSS und Media Queries gelöst werden.
Responsive Images
Die Anforderung Bilder für responsive Webseiten zu optimieren ist gar nicht mehr so neu, aber dennoch gibt es bislang keine ideale Lösung. Marcos Caceres (Mozilla API designer) ist unter anderem Lead Editor der <picture> Spezifikationinnerhalb der „Responsive Images Community Group“ und hat einen Einblick in die bisherigen Lösungswege gegeben. Zusammenfassend kann gesagt werden, dass bisher keine Lösung alle Anforderung abdeckt und eine Standardisierung in Browsern dringend benötigt wird. Aus unserer Sicht ist der Vorschlag „src-N“ ein guter Ansatz im Vergleich zu den bisherigen Entwürfen und Spezifikationen.
Typeface Design
Es gab gleich zwei gute Vorträge mit ausführlichem Einblick in das Thema Font Erstellung. Lucas de Groot (LucasFonts) ist wohl einer der bekanntesten Font-Designer. Er hat in seinem Talk eindrucksvoll gezeigt wie komplex das Erstellen eines guten Webfonts ist, der für alle Betriebssysteme und Bildschirmgrößen optimiert ist. Oliver Reichenstein (Founder of Information Architects) war als einer der Ersten davon überzeugt, dass eine Webseite mit Schriftgrößen um 12 Pixel nicht für das Lesen im Web geeignet ist und 16 Pixel völlig in Ordnung sind. Indem er den Leseabstand eines Buchs mit dem Abstand am Monitor verglichen hat, wurde klar, dass für die vergleichbar gute Lesequalität Schriftgrößen von 16 Pixel sehr passend sind. Zudem hat er gezeigt wie unterschiedlich ein Buchstaben in verschiedenen Schriftgrößen wirkt und worauf ein Font-Designer hier achten muss, damit die Schriftwirkung in verschiedenen Größen vergleichbar bleibt.
Fazit
Dies war nur ein kleiner Einblick in einen Teil der Fronteers Talks. Viele der Themen werden wir uns in der nächsten Zeit genauer anschauen und überall wo möglich in unsere tägliche Arbeit einfließen lassen. Es hat sich demnach definitiv gelohnt nach Amsterdam zu fahren und ich bin nächstes Jahr gerne wieder mit dabei.