Verslag Fronteers Conference 2013

Verslag Fronteers Conference 2013

  •  24 oktober 2013

Op 10 oktober was het weer tijd voor het jaarlijkse Fronteers congres, georganiseerd door de gelijknamige vakvereniging voor front-end ontwikkelaars. Tijdens twee intensieve dagen vol met uiteenlopende sessies van aansprekende webprofessionals, word je bijgepraat over de laatste ontwikkelingen op het gebied van front-end.

Net als de afgelopen twee jaren, was er ook dit jaar een vertegenwoordiging van De Nieuwe Zaak aanwezig bij Fronteers 13, in de persoon van Darius Rosendahl en Arnoud Huberts. Het programma werd dit jaar aan elkaar gepraat door Paul Irish (Google), geen onbekende onder front-end developers.

Photo is cropped and edited. Original by Robert Sedovšek - http://www.flickr.com/photos/seddy/

Dag 1

Op donderdag 10 oktober trapte Steve Souders af met een interessante sessie over ‘Pre-Browsing’. Dit is een techniek die het o.a. mogelijk maakt om op de voorgaande pagina al bronnen in te laden die pas nodig zijn op de pagina erna.

Dit gebeurt door middel van link-tags in de head van de pagina, waarbij attributen als ‘dns-prefetch’, ‘prefetch’ en ‘prerender’ gebruikt kunnen worden. Erg handig op bijvoorbeeld een zoekpagina of een loginpagina, waarbij al aangenomen kan worden wat de volgende pagina zal zijn. Dit is een veelbelovende techniek die een enorme boost kan geven in de laadtijd van pagina’s. Helaas is de browser support op dit moment nog beperkt, maar dit zal groeien.
Bekijk hier de slides van Steve.

Putting flexbox into practice Zoe Mickley GillenwaterDe tweede sessie ging over het gebruik van ‘flexbox’, een CSS layout module waar front-enders al jaren met veel smart op wachten. Zoe Mickley Gillenwater liet de flexibiliteit en vele mogelijkheden zien van deze techniek. Met flexbox wordt het mogelijk om de layout van HTML blokken met CSS te controleren, waarbij hoogte, breedte, volgorde en aantal blokken per rij flexibel in te stellen is, zonder gebruik van media queries of dat de HTML hiervoor aangepast hoeft te worden. De browser support neemt snel toe en het duurt dan ook niet lang meer voordat deze techniek breed ingezet kan gaan worden.
Bekijk hier de slides van Zoe.

Robert Jan Verkade is vervolgens aan de beurt en heeft een inspirerende talk over de veelzijdigheid van de front-end discipline, genaamd ‘On Power & Responsibility’. Met aansprekende quotes schetst hij de functie van front-end developer en alle verantwoordelijkheden en uitdagingen die daarbij horen.

“Stop whining about visual designers, adapt to your surroundings.”

– Robert Jan Verkade

Hij geeft tips voor een betere samenwerking met designers, ontwikkelaars en iedereen die betrokken is in het proces. Een front-end ontwikkelaar heeft een belangrijke rol in een project en moet daarom op de juiste manier kunnen communiceren met alle betrokken disciplines.

Voor elk probleem moet een passende oplossing gevonden worden, waarbij empathie een belangrijke rol speelt. Verder moeten we niet klagen over ons werk, want we hebben toch maar een prachtige baan, niet waar?!

Enkele treffende quotes:

  • “Do not only build adaptive and responsive, BE adaptive and responsive.”
  • “Knowledge will give you power, but character will give you respect” – Bruce Lee
  • “With great powers comes great responsibility” – Spiderman

Bekijk hier de slides van Robert Jan.

Een terugkerend onderwerp tijdens Fronteers is ‘performance’. Alex MacCaw geeft tips om je JavaScript aangedreven site sneller te maken tijdens zijn sessie over ‘Faster JavaScript Web apps’.

Snelheid is erg belangrijk op het internet, want bij elke seconde die een gebruiker moet wachten stijgt het percentage afhakers met 0,65%. Het advies is zelfs om je pagina binnen 300ms geladen te hebben. De reactietijd van de server is daarbij een groter probleem dan de bandbreedte. Zorg daarom dat je stylesheets eerst geladen worden. Laadt JavaScripts, die niet direct nodig zijn, later (asynchroon laden of gebruik defer).

Aanpassingen in de pagina door CSS of JavaScript (zoals DOM manipulatie) kunnen ervoor zorgen dat (een deel van) de pagina opnieuw gerenderd wordt, dit zorgt voor een ongewenste flikkering en extra wachttijd. Gebruik tools als Google PageSpeed Insights om inzicht te krijgen in de laadtijd van je pagina.

Een sessie die hier naadloos op aansluit is die van Paul Lewis, ‘A Developers Guide to Rendering Performance’. Hij focust vooral op het omzeilen van het re-paint / re-rendering verschijnsel.

Practical sessions

Voor het eerst zijn er op Fronteers een drietal ‘Practical Sessions’ waarbij de uitdagingen en oplossingen van enkele aansprekende projecten worden belicht.

Elaine Oliver van Q42 heeft meegewerkt aan de ontwikkeling van de nieuwe website van het Rijksmuseum. Hierbij was het belangrijkste uitgangspunt“Don’t bring the people to the art, bring art to the people”. En dat is aardig gelukt als je bedenkt dat er 1 terrabyte aan kunst op de website bekeken kan worden. Hierbij is er gebruik gemaakt van leafletJS om alle onderdelen van schilderijen in detail te kunnen bekijken via een zoomfunctie. De site is ontworpen volgens een ‘Tablet First’ benadering met o.a. grote knoppen voor touch optimalisatie en een focus op afbeeldingen en kleuren.

“Don’t bring the people to the art, bring art to the people”

– Rijksmuseum Amsterdam

De volgende case is 9292.nl, toegelicht door Anton Verhoucke van Fabrique. De uitdaging was hier vooral om de site, die zich gedroeg als een robot, te transformeren naar die van een reisgenoot. Er is voor een veel persoonlijker benadering gekozen met meer sfeer afbeeldingen en een veel gebruiksvriendelijker reisplanner.

Tenslotte komt Edd Sowden uitleggen hoe ze het voor elkaar hebben gekregen om alle overheidswebsites van het Verenigd Koninkrijk samen te voegen onder één GOV.UK.

Edd Sowden - Gov.uk (Fronteers 13)Een sterk vereenvoudigde lay-out is vooral gericht op gebruikersgemak en toegankelijkheid. Met 150 redacteuren en meer dan 63.000 documenten is het een flinke uitdaging geweest om dit controleerbaar op één site te laten gebeuren. Alle sites van de departementen zien er dus hetzelfde uit, behalve die van de Premier. Ze kunnen alleen de content beheren, niet de layout. Er was intern wel wat strijd omdat mensen hun eigen plannetjes geschrapt zagen worden. Persoonlijk vind ik het een erg geslaagde site, zeker voor een overheidswebsite. Een zeer eenvoudige user interface puur gericht op informatievoorziening en goed te gebruiken op elk apparaat.
Bekijk hier de slides van Edd.

Dag 2

Op de tweede dag van Fronteers komt Javascript wederom volop aan bod. Garann Means gaat in op het her-structureren en herschrijven van een complex project zodat het weer werkbaar en overzichtelijk wordt. Wie heeft het niet meegemaakt dat een groot project uiteindelijk zo complex is geworden dat het geoptimaliseerd en opgeschoond moet worden en misschien zelfs deels herschreven. Ook geeft Garann tips om dit te voorkomen in haar sessie ‘How to rewrite your Javascript apps (at least) 10 times’. Bekijk hier de slides van Garann.
Tijdens Fronteers komen er twee font designers aan het woord. Lucas de Groot (ontwerper van o.a. de Calibri en Consolas fonts die geleverd worden bij Microsoft Office) en Oliver Reichenstein. Ik vond het erg interessant om de ontwikkeling van fonts op het web te zien en het dwingt veel respect af als je ziet hoeveel tijd en vakmanschap het kost om een goed font te ontwerpen dat op alle schermen goed wordt weergegeven.
Tijdens de sessie ‘The Importance of Firefox OS’ legt Sergi Mansilla uit dat dit besturingssysteem vele voordelen heeft voor ontwikkelaars omdat het gebouwd is op HTML5. Hierdoor heb je alle mogelijkheden van HTML5, veel beschikbare frameworks, beschikbaarheid van standaard API’s, open source technologie, herbruikbaarheid en geen app store restricties.

Er worden zelfs vijf Firefox OS smartphones weggegeven!
Bekijk hier de slides van Sergi.


Harry Roberts
legt in zijn sessie over ‘Rationalising designs for better quality CSS’ uit waarom designers hem haten (#designershatehim) en verdedigt de noodzaak om soms consessies te moeten op design. Harry is vooral bekend geworden met zijn site CSSwizardry en Inuit.css.

Volgens Harry worden ontwerpen te vaak als heilig beschouwd, terwijl we de klanten uiteindelijk geen design leveren maar een website. Als iets onredelijk moeilijk lijkt om te bouwen, dan moet je het niet bouwen. Als je 80% van het design kunt realiseren met 20% van de code, dan moet je dat doen. Iets maar bouwen omdat het kan, is geen reden om het dan ook maar te doen.

“A PSD is a clue, not a contract”

– Harry Roberts

Het komt erop neer dat je proactief moet samenwerken met designers en goed moet kunnen uitleggen waarom er soms van het design afgeweken moet worden, om het eindproduct beter te maken. Vervolgens geeft Harry nog tips om je CSS beter gestructureerd en meer consistent te krijgen. Speur designs af naar overeenkomsten en combineer deze.
Bekijk hier de slides van Harry.

Van de sessie “Responsive Images: ain’t we there yet?” had ik eigenlijk meer verwacht, maar Marcos Caceres laat wel uitgebreid zien dat de ontwikkelingen voor een goede oplossing voor Responsive Images nog in volle gang zijn. Hij behandelt ‘the good, the bad and the ugly’ van de verschillende voorstellen, maar een echt goede oplossing zonder Javascript (zoals bijvoorbeeld picturefill) is er op dit moment dus helaas nog niet. Waarschijnlijk gaat de uiteindelijke oplossing een <img>-tag worden met een set aan ‘src’ attributen die beïnvloed kunnen worden met een media query, zoals we al gewend zijn in CSS. To be continued…
Bekijk hier de slides van Marcos.

Het toenemende belang en de onbegrensde mogelijkheden van JavaScript worden nog eens onderstreept door Domenic Denicola in zijn presentatie over ‘The state of JavaScript’.

Hij neemt ons mee door de geschiedenis van JavaScript, van DHTML voor IE4 in 1995, Ajax in 2005, jQuery in 2006, serverJS, node.js, phoneGAP in 2009 tot Ember, Angular en Polymer in 2013. Volgens Domenic gaat JavaScript alles opslokken en hij laat zien wat er in de nieuweste versie, ES6, zoal mogelijk is. Hij blikt zelfs al ever vooruit naar mogelijke features van ES7.

Fronteers 13 wordt afgesloten door de altijd grappige en zeer uitgesproken Bruce Lawson (Opera) over de toekomst van HTML, “HTML.future – What the web needs next”. Hij gaat in op het verschijnsel dat gebruikers liever apps gebruiken dan sites. Er worden vijf keer meer artikelen gelezen via apps dan via desktop sites. Een reden hiervoor is o.a. de mogelijkheid tot offline gebruik bij apps.

Bruce Lawson - HTML.future – What the web needs next (Fronteers 13)Ook brandt hij zijn vingers aan de zeer gevoelige DRM discussie. Bruce denkt dat DRM nodig is ‘to win the bigger war’. Zonder DRM op het web zullen content producenten voor native apps kiezen, waar ze wèl controle hebben over wie wat te zien krijgt. Hij benadrukt nog eens hier dat hij spreekt op persoonlijke titel en niet namens zijn werkgever Opera. Hij biedt bezoekers zelfs nog de mogelijkheid om hem na de presentatie in elkaar te slaan.

Volgens Bruce is de toekomst van het web native, met het kunnen aanspreken van de API’s van het apparaat, gebruiksvriendelijkheid. Bruce denkt dat bookmarken of een app installeren feitelijk hetzelfde is. Verder meldt hij nog dat er een aantal interessante HTML features onderweg zijn, zoals ‘Lazy Block Layout’, waarbij alleen objecten gerenderd worden zodra ze zichtbaar worden in de viewport. Een andere is het ‘postpone’ attribuut op een image, waarbij de bron alleen geladen wordt wanneer deze zichtbaar is. Ook neemt de support voor ‘position: sticky’ toe. Hierbij kunnen bepaalde elementen, zoals bijvoorbeeld headers, in beeld blijven plakken terwijl de content uit beeld scrollt.

Bruce Lawson - The Extensible Web Manifesto (Fronteers 13)Bruce benadrukt nog eens het belang van standaardisatie en snellere implementatie van nieuwe features, niet voor het eerst tijdens dit congres wordt The Extensible Web Manifesto onder de aandacht gebracht. Hij wil dat browser ontwikkelaars beter samenwerken en standaarden ontwikkelen om samen met de ontwikkelaar de krachtige basis van het web overeind te houden.
Bekijk hier de slides van Bruce.

Fronteers 13 was weer erg leerzaam en inspirerend. De hoeveelheid aandacht voor JavaScript en performance was opvallend en ook tekenend voor het toenemende belang hiervan. De komst van nieuwe CSS features en script libraries is veelbelovend. Ondanks het soms frustrerende wachten op browser ondersteuning, houdt het ons werk interessant, afwisselend en uitdagend. Kortom, genoeg ingrediënten om weer volop mee aan de slag te gaan om nog mooiere, betere en snellere producten te maken voor het web.

Auteur

Mirle is marketing & communicatie medewerker bij De Nieuwe Zaak. Binnen De Nieuwe zaak houdt zij zich bezig met de ontwikkeling van corporate marketing en communicatie uitingen, leadgeneratie en events.
Blijf op de hoogte

Meld je aan voor onze 2-wekelijkse nieuwsbrief en blijf op de hoogte van het laatste commerce nieuws!

© 2020 De Nieuwe Zaak