• code

Frontend

#javascript #css #html #passion

Hoe kunnen we een performante user interface maken in de browser? We bekijken de volledige flow van een goede test-driven development omgeving tot optimalisatie in de browser.

Tools:

Visual Studio Code, Chrome developer tools, Yarn en Gulp

We beginnen de module met een korte terugblik op eerdere modules. Een opfrissing van de module User interface design helpen om HTML & CSS weer goed te schrijven. We nemen ook notie van de beste semantische HTML-tags en wat er kan helpen om goede SEO te bereiken op onze website’s.

Vanuit de JavaScript kennis die we meenemen uit device programming 1 kijken we hoe een browser onze code uitvoert. Een inzage in de JS-runtime engine en de event-loop helpt ons om te snappen hoe we het beste asynchrone JS-code schrijven en wat complexere scripts zo vlot mogelijk laat verlopen. We gaan ook bekijken hoe we JavaScript code in grotere projecten kunnen gebruiken. Hier leren we werken met module- en een constructor-patroon. Nu kunnen we op een flexibele manier onze eigen JS-libraries met een module- en een constructor-patroon maken.

Als we vervolgens de andere onderdelen van de browser bekijken, zien we dat er bij het parsen van een HTML-bestand ook opportuniteiten zijn. We zetten een frontend development omgeving op die ons tijdens het ontwikkelen helpt om onze volledige website te optimaliseren voor productie. Aan de hand van een taskrunner (Gulp) voegen we hulpmiddelen toe die ons in staat stellen om efficiënt code te schrijven. Een manier om dit proces te verbeteren in het gebruik van SCSS. We leren hoe we goede gestructureerde styling schrijven en wat handige functionaliteiten zijn bij het gebruik van SCSS.

Uiteindelijk maken we een web-project om alle onderdelen te combineren. We zetten een omgeving op waarbij we starten met testen die nog niet slagen. We werken onze JS-functionaliteiten uit totdat alle testen slagen en we werken ook de markup en de CSS uit, met oog voor de manier waarop een browser dit verwerkt.

Doorheen de module is er veel tijd om deze onderdelen begeleid zelf in te oefenen. Dat is ook nodig want deze module legt de basis voor de module Frameworks & Patterns.