Voor frontenders: De 4 headliners van Frontend United

Jeremy Keith trapte de conferentie af met zijn talk “Going offline”, tevens dezelfde titel als zijn nieuwe boek. Hij liet ons zien hoe we assets en pagina’s in de cache opslaan en tonen aan gebruikers zonder internetverbinding en dus een hele offline ervaring voor elkaar konden krijgen, via een service worker. Wat is een service worker? Het is een script dat op de achtergrond wordt uitgevoerd en geïnstalleerd op het apparaat door je browser, los van de webpagina’s. Het werkt asynchroon en vertraagt daarmee de performance van je website niet.

Daarnaast werken service workers alleen met een https-verbinding en haken ze in op netwerk requests. Tijdens Keith’s presentatie gaf hij voorbeelden van logica en code waarbij hij de volgende tip gaf: logica is altijd veel belangrijker dan de code. Hij liet zien hoe je een service worker registreert, installeert, activeert en update. Ook liet hij zien hoe we assets en hele pagina’s pre-cachen en cachen via de Cache API. Met pre-cachen plaats je bestanden die je gebruiker naar verwachting nodig gaat hebben alvast in de cache. Cache werkt als volgt:

• Controleer of een bestand in de cache zit. Als dit het geval is, gebruik dit bestand.

• Zo niet, maak een netwerk request, gebruik dit response en plaats een kopie van dit bestand in de cache.

• De volgende keer als het bestand request wordt, ga naar stap 1.

Una Kravets gaf een kleurrijke presentatie over CSS Houdini. Houdini is een nieuwe techniek waarmee we met CSS in combinatie met JavaScript inhaken op de browser’s CSS engines. Houdini is in opkomst en wordt nog lang niet gesteund door alle browsers. Op ishoudinireadyyet.com houd je de status hiervan bij.

Una gaf ons een live demo over wat we allemaal met Houdini kunnen oplossen en hoe dit technisch in elkaar steekt en wat we met hedendaags CSS niet kunnen. Via nieuwe technieken zoals Properties & Values API, Paint Worklet, Layout Worklet en Animation Worklet kunnen we o.a. onderstaande problemen oplossen:

• CSS custom properties dynamisch maken met JavaScript

• Animeren van gradients

• Afwijkende borders

• Masonry Layout via CSS

Stephen Hay, werkzaam als Creative Director bij de Rabobank, had het in zijn presentatie over conventies. Bijna iedereen vertrouwt op conventies met de reden dat iedereen het al gebruikt. Dit zien we bijvoorbeeld met het bekende hamburger menu; we gebruiken dit standaard in onze designs in plaats van dat erover na te denken waarom we dit gebruiken.

Niets is origineel en alle moderne websites lijken op elkaar. Dit komt doordat bepaalde trends ontstaan doordat een website ermee begint en een ander het overneemt. Dit zie je niet alleen bij webdesign maar ook bij kleding en muziek. We geloven vaak blindelings in conventies gebruiken. Maar het is een misverstand dat ze daadwerkelijk altijd werken. En, misschien nog wel belangrijker, we leren er niets van als we ze blindelings overnemen. We moeten ons altijd het volgende afvragen bij de keuzes die we maken:

• Hoe weet ik dat?

• Hoe weet jij dat?

• Hoe weten zij dat?

Wat Stephen Hay in zijn presentatie duidelijk maakt is dat hij niets tegen Airbnb heeft en dat Airbnb het goed doet, maar dat we niet altijd alles blindelings moeten overnemen. We moeten blijven nadenken wáárom we iets doen. Daarnaast maak je iets voor andere gebruikers met verschillende redenen. Daarom is een focus op het probleem soms nog belangrijker dan een focus op de oplossing, waar vaak onze voorkeur naar uitgaat.

Ignacio (ook wel Nacho) is helemaal uit Argentinië overgevlogen om de talk te geven over Progressive Web Apps (PWA’s) en de zogeheten “subway dilemma”. Het probleem dat wanneer je de metro, een vliegtuig of andere plaats instapt waar je niet over internetverbinding beschikt, je de website niet meer kunt gebruiken en daarmee de lelijke “offline” pagina van je browser ziet. Met de komst van PWA’s komt hier een einde aan. Een PWA is een set van tools, standaarden en best practices. Nacho legt PWA uit als Web Based Application waarbij je dezelfde ervaring hebt als een native app, ofwel een “app” die je via de browser kunt gebruiken. Hij legt uit dat maar liefst 87% van de gebruikers native apps gebruiken en maar 13% op het mobile web zit. Dit komt doordat native apps over extra’s beschikken zoals background sync, push notifications en offline functionaliteit. Inmiddels kan dit ook met de web! Functionaliteiten die het web vandaag al gebruikt vind je op whatwebcando.today.

VueJS is een moderne JavaScript framework dat de laatste tijd in populariteit stijgt. Nacho liet ons kennismaken met een PWA plugin voor VueJS dat een boilerplate bevat waarin alles staat wat een PWA nodig heeft.

Wanneer zijn Progressive Web apps een slimme keuze?

Het was een leuke en leerzame dag. Als developer is het belangrijk om jezelf te blijven ontwikkelen en aandacht te besteden aan trends en nieuwe technologieën. Bij Bluebird Day hechten we hier veel waarde aan en daarom bezoeken we meerdere keren per jaar congressen, talks en workshops. Welke trend wij op dit moment zien? Frontend beweegt zich steeds meer richting Progressive Web Apps, waardoor een hoge performance en betere user experience steeds vaker gewaarborgd kan worden.

Op zoek naar een baan in front- of backend development? Bekijk dan de openstaande vacatures. Of neem contact met ons op! Wie weet nodigen we je uit voor een kennismakingsgesprek om te zien of er een klik is.