Front-End Development

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 React 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 React-project om alle onderdelen te combineren. We kijken ook naar de kracht van Next.js.

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.