Fronteers Conference 2017 – Dag 2 – Ochtend

Op dag 2 van de Fronteers Conference in Amsterdam zijn er weer interessante sprekers met onderwerpen binnen het vakgebied van de Front-end developer. Alicia Sedlock, met haar presentatie over het testen van front-end. Stephan Hay, over het verleden, heden en toekomst van CSS. Ruben van der Leun geeft in zijn interessante presentatie een demo met WebVR (Web Virtual Reality).

The Landscape of Front-End Testing – Alicia Sedlock

Alicia, een front-end developer die focust op webstandaarden en toegankelijkheid en heeft al vele artikelen geschreven op web magazines zoals CSS-Tricks en 24 Ways. In haar presentatie vertelt ze over het testen van Front-end en hoe je Front-end kunt testen.

Er bestaan verschillende manieren van Front-end testen. Zo heb je unit testing, integration testing, acceptance testing, visual regression testing, performance en accessibility testing. Aan het einde van de talk liet ze ook nog een nieuwe leuke manier van testen zien, Monkey testing en had ze het over linting.

“Front-end testing: A collection of techniques to hold developers accountable for writing and maintaining code and delivering functional experience.”

Unit testing

Unit testing is een methode om enkele functies, kleine stukken code of “units” te testen. Hierbij hebben we de mogelijkheid om te verifiëren of de code datgene doet wat wij verwachten. Voor elke functie kunnen we dus de input bepalen en kunnen we de uitkomst bepalen. Op deze manier kunnen we de verwachte uitkomst sturen en alle foute uitkomst op de juiste manier afhandelen. Tot nu toe heb ik unit testing alleen maar gezien voor back-end code, met name PHP unit testing. Maar er zijn ook diverse tools om unit testing toe te passen voor Javascript. Alicia noemde een aantal van deze tools: Mocha, Chai, Jest, Qunit, Unit.js.

Integration testing

Integration testing is het testen van hoe alles samen functioneert. Integration tests zijn gelijkmatig aan unit tests alleen test je bij unit test een component afzonderlijk en geïsoleerd terwijl je bij integration testing alles samen test. Als unit testing alleen niet genoeg is, dan kun je de test afmaken met integration testing. Soms wil je bijvoorbeeld twee onafhankelijke systemen met elkaar testen. Zo boots je bij unit testing input uit de database na, terwijl je bij integration testing de werkelijke database gebruikt. Met als resultaat is dat je bij integration testing dichter bij de werkelijkheid zit. Hierbij is het implementeren van integration testing een stuk gecompliceerder en kost het meer tijd. Gebruik integration testing daarom ook alleen als het echt nodig is. Integration tests kunnen geschreven worden met dezelfde tools als unit testing.

Acceptance testing

Acceptance test (acceptatietest) is een vorm van testen waarmee je geautomatiseerd de functionaliteiten en eventuele interacties van de software test. Zo hoef je niet meer handmatig bijvoorbeeld de checkout van een webshop te testen maar zou je dat kunnen automatiseren met een acceptatietest. Een tool voor Acceptance testing die Alicia noemt en gebruikt in haar voorbeelden is Webdriver.io.

Visual regression testing

Er zijn verschillende tools om visual regression te testen op je website. Met visual regression testing test je wat er visueel is aangepast. Zo kun je de verschillen vergelijken van vóór de aanpassing én na de aanpassing. Maar je kunt bijvoorbeeld ook testen wat er visueel gebeurt zodra je een interactie doet. Zo kun je een screenshot nemen van vóór de actie die je op de website doet en een screenshot nemen na de actie. Er zijn tools voor die dit automatiseren, maar je kunt met bijvoorbeeld PhantomCSS dit zelf programmeren. Ze noemde een aantal van deze tools op PhantomCSS/PhantomFlow, BackstopJS, Wraith, Percy.io.

Performance testing

Grunt-perfbudget, gulp size, perf.js zijn tools om de performance te benchmarken van een website. Zo kun je de groottes, snelheden en andere statistieken van de bestanden met elkaar vergelijken en controleren.

Accessibility testing

Met accessibility testing test je hoe toegankelijk je website is en of je website volgens de accessibility standaarden is. A11y en Pa11y zijn beide tools om accessibility via de command line of via javascript te testen.

Monkey testing

Gremlins is een tool voor een nieuwe manier van testen genaamd monkey testing. Deze manier van testen staat gelijk aan als je een aap achter een pc zet. De aap zal op alle knoppen en toetsen rammen. Door deze manier van testen kun je bijvoorbeeld verborgen scenario’s vinden die bugs veroorzaken. Klik hier voor een demo en hier voor de source code.

Linting

Met linting kun je de syntax van je CSS code of Javascript code testen. Er bestaan enkele online linting tools waar je de CSS of Javascript code kunt plakken. Het resultaat bestaat uit de fouten of waarschuwingen die in de code zitten. Enkele tools zijn: CSSLint, JSLint, JSHint, UnCSS en HTMLLint.

Testen van je website is heel erg belangrijk. Het is vaak wel moeilijk om te weten wanneer je een bepaalde test moet gebruiken. In elk geval heel handig al die tools. Natuurlijk hoef je niet alle tools te gebruiken. Je zult je een aantal vragen moeten stellen om te kijken of een bepaalde tool of type test nodig is.

Bekijk hier Alicia’s slides.

A Ghost Story of CSS – Stephen Hay

Stephen Hay, een art director en designer die ook code kan schrijven en is hoofd UX designer bij Catawiki, een online veiling platform. Dit jaar zou hij zijn zevende presentatie bij Fronteers gegeven hebben. Daarnaast heeft hij het boek Responsive Design Workflow geschreven dat over best practices en strategieën voor responsive wireframing en prototyping gaat.

Stephen had een interessante en prettige manier van presenteren. Het thema dat hij koos is afgeleid van de film “A Christmas Carol” waarin een gierige norse man die 3 geesten op bezoek krijgt. Een geest dat zijn verleden laat zien, een geest dat het heden laat zien en een geest dat de toekomst laat zien. Zo nam Stephen ons mee in zijn verhaal om te kijken naar het verleden, heden en toekomst van CSS.

Stephen gaf in het begin van de talk al aan dat we niet veel van de toekomst van CSS moeten verwachten. Vooral omdat we vrijwel alle features al hebben.

Stephen begon met het verleden en gaf ons pijnlijke voorbeelden van hoe we CSS in het verleden gingen toepassen. Hoe we vroeger hacks moesten toepassen om bijvoorbeeld bepaalde elementen op een pagina te kunnen renderen. Hoe we achtergrondafbeeldingen gebruikten om “borders” te maken terwijl we daar nu gewoon border-radius voor hebben.

Vervolgens liet hij zien waar we nu staan. Dat “features” minder belangrijk zijn en dat we meer bezig zijn met hoe we het ontwikkelen gemakkelijker maken. Denk maar aan devtools en preprocessors. De belangrijkste features van het afgelopen jaren zijn “grid”, “flexbox” en “layout” het enige wat we eigenlijk nog miste in CSS.

Hij vertelde dat we in de toekomst, eigenlijk nu al, steeds meer bezig zullen zijn met de snelheid en de grootte van CSS. Vooral omdat de styling van een website tegenwoordig uit heel veel bestanden bestaat en de bestandsgrootte steeds groter wordt.

Tenslotte gaf hij nog een tip mee doordat hij het had over dat mensen in hokjes gaan denken over bijv. de verschillende talen. Dat de een CSS te makkelijk vind en de ander dat denkt over Javascript of HTML.

“Stop being little children, and just get your work done”

Ik ben het eens met zijn stelling. Je moet gewoon doen wat je leuk vindt, of iets nou moeilijk of makkelijk is. Als je het leuk vindt om met CSS te werken, en je bent er nog eens heel goed in, dan is dat toch gewoon geweldig.

Possibilities of WebVR and its role in the future – Ruben van der Leun

Ruben had een zeer interessante presentatie. Iedereen kreeg een Google Cardboard, een kartonnen versie van een VR-bril, waarmee hij ons meenam in de merkwaardige wereld van Virtual Reality en een aangrijpende live-demo gaf.

Eerst kregen we een geschiedenisles over de ontwikkelingen van VR, bijvoorbeeld apparaten zoals de HTC Vive en de Oculus Rift. Je kon aan Ruben zien dat hij met enthousiasme sprak over de mogelijkheden en de groei van VR. Vervolgens liet hij zien wat er allemaal mogelijk is met VR en nam hij ons mee om VR te ervaren middels de Google Cardboard. Hij liet ons vele voorbeelden zien en konden de presentatie volgen via de Cardboard. Ook liet hij een aantal tools zien van de techniek achter VR zoals Unity of Unreal, game engines. Maar ook Three.js, een javascript framework voor het creëren van 3D animaties en A-Frame, een web framework voor het maken van VR.

Tenslotte liet hij ons zien hoe je met WebVR kunt programmeren met A-Frame. In zijn real-time demo ging hij stap voor stap iets programmeren. De code typte hij live op het scherm en de voortgang hiervan kon je real-time volgen via de Google Cardboard. Hij maakte een universum met een aantal planeten die roteerde.

De demo van Ruben is veruit de beste demo van Fronteers Conference 2017. De ervaring was heel erg uniek en het zat foutloos in elkaar.

WebAssembly 101 – Ash Kyd

WebAssembly was een zeer pittig onderwerp en iets wat voor mij nog geheel onbekend was. Ash Kyd, werkend bij ABC News in Brisbane, Australië, is een javascript developer en gebruikt voornamelijk web API’s om de gebruikservaring te verhogen. Hij nam ons in zijn presentatie mee in de wereld van WebAssembly. Wat is het, waar wordt het voor gebruikt en wat betekent het voor Javascript?

WebAssembly, ofwel wasm, is

• Een verbetering voor javascript. Je kunt bijvoorbeeld je performance verbeteringen met wasm maken en importeren met javascript.
• Een nieuwe taal gerepresenteerd in een binary format. Je kan dit wel schrijven en omzetten naar leesbare tekst bijv. voor debugging.
• Een verbetering voor browsers. Browsers begrijpen binary formaat dus maakt het ons mogelijk om nog kleinere bestanden te comprimeren. Dit betekent dat het sneller is.
• Wordt ook gebruikt om te compilen. Je kunt met WebAssembly andere talen compilen naar binary.

Ash vertelde dat javascript tegenwoordig vaak gebruikt wordt om te compilen dan dat het een taal is. Denk maar aan Babel, CoffeeScript, TypeScript etc. Met deze “talen” kun je de code compilen naar “gewone” javascript.

WebAssembly kan hetzelfde. Het kan programmeertalen zoals bijvoorbeeld Python, .NET, of C++ compilen naar binary code. WebAssembly maakt het dus mogelijk om desktop games of applicaties om te zetten naar binary zodat het mogelijk is om ze op het web in de browser met dezelfde kwaliteit te gebruiken.

Ash Kyd gaf een pittige presentatie over WebAssembly. De techniek is erg moeilijk en ik weet niet precies wat ik hiermee moet. Ik denk dat ik er ook vrij weinig mee te maken krijg al is het wel goed om te weten dat het bestaat. Het maakt veel meer dingen mogelijk. Het is denk ik wel weer interessanter voor applicatie ontwikkelaars of bedrijven.

Lees verder