Road to modern Front-end development

Inleiding

Wanneer je van start gaat met Front-end ontwikkeling, dan kan je al snel ontmoedigd raken en het bos doorheen de bomen niet meer zien. De bedoeling van dit artikel is een leidraad te geven, die je kan helpen doorheen de jungle van dependencies, build systems, frameworks… te fietsen. Deze roadmap probeert een inzicht te geven in de verschillende facetten van moderne Front-end ontwikkeling, maar ambieert niet compleet te zijn. Er zijn nog heel wat meer mogelijkheden, die hier niet worden vermeld. Je hoeft ook niet alles te kennen.

Beginnen bij het begin: de basics

Je kan geen Front-end wizard worden als je niet eerst de basisconcepten beet hebt. Je werkveld is het internet, het is dus interessant om een notie te hebben van hoe het internet werkt, wat browsers doen, ... Je eerste stap op Front-end vlak, zal het bestuderen zijn van HTML, CSS en JavaScript. Al het werk van een Front-end ontwikkelaar is gebaseerd op deze 3 peilers. Deze technieken zijn al jaren de basis van elke website.

InternetHoe werkt het internet?Wat is HTTP?Browsers en hoe ze werken?Leer de basisSemantische HTMLForms en validatie Conventies en best practicesSyntax en basis conceptenDOM Manipulatie Fetch API / Ajax (XHR)ES6+ en modulaire JavaScriptBegrijp concepten als Hoisting, Event bubbling, Scope, Prototype, Shadow DOM, Strict...Hoe werkt het internet?Wat is HTTP?Browsers en hoe ze werken?AccessibilitySEO basisBasisconceptenLayoutsResponsive designFloatsPositioningDisplay Box ModelCSS GridFlex BoxHTMLCSSJavaScript

Cascading Style Sheets (CSS)

Een webpagina wordt van opmaak en layout voorzien door middel van stylesheets. Als Front-end ontwikkelaar spendeer je best wel wat tijd aan het layouten van pagina’s, componenten en typografie. Later in de roadmap wordt dit nog meer in detail bekeken. 

JavaScript

Deze scriptingtaal is tot op heden nog steeds heer en meester in de browser. Wil je een goede Front-end-ontwikkelaar worden, dan doe je er dus goed aan om hier niet te licht over te gaan. Zonder JavaScript kan je anno 2020 heel weinig doen. 

Version Control

Version Control Systems laten je toe de veranderingen van je code bij te houden. Met dergelijke systemen kan je op elk moment teruggaan in de tijd naar een eerdere versie van je code. Ze maken het samenwerken met meerdere collega’s op dezelfde codebase ook een stuk makkelijker. 

Version Control SystemsWat zijn ze en waarom heb je er een nodig?Repo hosting servicesMaak een account en leer GitHub gebruikenBasis gebruik van GitGitHub GitLab Bitbucket

Git

Git is momenteel het meest gebruikte systeem. Er zijn verschillende hosting-services zoals GitHub, GitLab… die je het leven makkelijker kunnen maken. Als nieuwkomer in Front-end land doe je er goed aan om deze wat dichter te bekijken. 

Web security

Als Front-end ontwikkelaar ben je medeverantwoordelijk voor de veiligheid van de software die je bouwt. Het beveiligen van de webapplicaties gebeurt voornamelijk aan de Back-end kant, maar als Front-end ontwikkelaar ga je niet vrijuit. Het is dus goed een zekere basiskennis hieromtrent te verwerven.

Basiskennis over web securityHTTPSContent Security PolicyCORSOWASP Security RisksProbeer een basis kennis op te bouwen van deze thema’s

Package managers

Om het wiel niet steeds opnieuw te moeten uitvinden, maken we bij het ontwikkelen van moderne applicaties gebruik van reeds bestaande libraries of packages. Dit zijn stukjes software die je kan inpluggen in je code, om van de aangeboden functionaliteit te kunnen gebruik maken. Op het internet zijn een massa aan packages te vinden. Moderne applicaties zijn vaak gebaseerd op een ingenieuze puzzel van packages, die samenwerken om een goede structuur als basis van de applicatie te garanderen.

De grote hoeveelheid en diversiteit van deze packages kan snel onoverzichtelijk worden. Elke package heeft zijn eigen versiebeheer, versies van packages zijn soms niet combineerbaar en veel packages zijn afhankelijk van nog andere packages om goed te kunnen werken.

Om dit kluwen van ‘dependencies’ goed onder controle te kunnen houden zijn er package managers zoals Yarn en NPM. Dit zijn systemen die het beheer van deze stukjes software automatiseren. Moderne Front-end ontwikkeling zonder deze systemen zou haast onmogelijk zijn.

NPMYarnPackage managersNPM en Yarn zijn beide goed, kies er één of leer beide, ze verschillen niet zo veel.

CSS-architectuur en preprocessing

Zoals eerder al vermeld, wordt de layout van je pagina’s, componenten, typografie… bepaald door Cascading Style Sheets. In grote applicaties is het aangewezen deze beschrijving van de layout goed te structureren. Dit kan namelijk heel snel uit de hand lopen.

Op het internet zijn heel wat goede bronnen en methodologieën te vinden om dit te doen. Je doet er goed aan deze te bekijken.

BEM OOCSS SMACSSSass PostCSSLessCSS ArchitectuurIn moderne JS-frameworks en met CSS-in-JS heb je deze niet echt nodig, maar het blijft nog steeds heel relevant.CSS PreprocessorModerne JS-frameworks gaan vaak naar CSS-in-JS dus je zal deze minder nodig hebben. Het blijft wel een goed idee om minstens Sass onder de knie te hebben.

CSS-preprocessors

CSS is een eenvoudige, declaratieve taal. CSS-preprocessors zijn systemen die je helpen bij het opbouwen van deze beschrijvingen, door je functionaliteit en automatisatie aan te reiken. Zowat elke moderne Front-end maakt gebruik van zo’n preprocessor.

CSS-in-JS

CSS gebruikt een globale namespace voor zijn declaraties, dat wil zeggen dat alle stijldefinities die je maakt, over de volledige applicatie gelden. Dit kan al snel voor styling conflicten zorgen. CSS-preprocessors zoals Sass of Less bieden hier oplossingen voor, maar naarmate de complexiteit van je applicatie vergroot, wordt dit moeilijk te beheren.

In moderne JS-frameworks wordt styling vaak niet meer in CSS gedefinieerd, maar rechtstreeks in JavaScript. In zo’n geval zal JavaScript een unieke class-id genereren voor elke stijl-declaratie. Hierdoor heb je geen conflicten meer. Je stijl-declaratie staat ook netjes bij je JavaScript-component, en dat maakt het een stuk overzichtelijker en beter schaalbaar. Zo kan je nadenken over de styling van je component, zonder je zorgen te maken over styling op een andere plaats in je applicatie.

Build tools

Onder build tools verstaan we een verzameling van systemen die het ontwikkelen van applicaties vereenvoudigen. Dit doen ze door aspecten van de ontwikkeling te automatiseren. Er zijn ook tools die je helpen om foutloze en goed gestructureerde code te schrijven.

NPM scriptsGulpWebpackRollupParcelPrettier ESLintStandardJSBuild toolsTask runnersModule bundlersLinters en formatters

Kies een framework

Een eenvoudige webpagina hoeft niet in een framework gemaakt te zijn. Als je echter ingewikkelde webapplicaties bouwt, dan doe je er goed aan om een degelijk framework te kiezen als basis voor je ontwikkeling. Er zijn zowel voor JavaScript als CSS verschillende frameworks beschikbaar, elk met hun voor- en nadelen.

Hoe maak je hierin een keuze?

Styled componentsCSS ModulesStyled JSXEmotionRadiumGlamorousHTML TemplatesCustom ElementsShadow DOMRedux MobXRxJSNgRVueXKies een frameworkWeb componentsCSS FrameworksReactJSModern CSSAngularVue.jsReactstrapMaterial UITailwind CSSChakra UIOp JS gebaseerd en beter om te gebruiken met JS frameworksBootstrapMaterialize CSSBulmaCSS first frameworks die niet standaard met JS components uitgerust zijn

Noden van de te bouwen applicatie

Het belangrijkste uitgangspunt in de keuze voor een framework is waarschijnlijk de specifieke vereisten die je applicatie heeft. Elk framework heeft zijn specialiteiten, zijn voor- en nadelen.

Community

Hoe groot en actief is de community achter het framework? Bij het ontwikkelen van een applicatie zal je vroeg of laat wel eens tegen een probleem aanlopen. Indien het framework dat je gebruikt door een grote, actieve community wordt ondersteund, is de kans groot dat iemand anders datzelfde probleem ook al heeft ervaren. Je vindt zeker en vast veel antwoorden op je vragen.

Testen! Testen! Testen!

Het spreekt voor zich dat je wil vermijden dat je software vastloopt of foutief reageert. Naarmate je applicatie groter wordt, zal het steeds moeilijker worden om alles te blijven testen. Het toevoegen van een nieuwe functionaliteit kan soms eerder geverifieerde code stuk maken. Het is belangrijk dit snel en efficiënt te kunnen detecteren. Hiervoor bestaan systemen die je code automatisch kunnen testen tegen vooropgestelde scenarios.

Naast automatisch testen, kan het gebruik van type checkers je ook verhinderen van foutieve code te schrijven. Het gebruik ervan is aan te raden.

TypeScriptFlowType checkersJestreact-testing-libraryCypressEnzymeMet deze 4 tools heb je genoeg om al je testen te schrijvenJe applicatie testenLeer het verschil tussen Unit, Integration en Functional tests en leer die schrijven met de links vermelde tools

Progressive Web Apps

Moderne webapplicaties worden bekeken op een brede waaier aan toestellen en schermen. Met progressive web apps kan je ervoor zorgen dat je software, die voor het web werd geschreven, zich kan gedragen als een native applicatie van het toestel waarop het wordt bekeken. Hiervoor zijn verschillende tools beschikbaar.

Progressive Web AppsStorageWeb SocketsService WorkersLocationNotificationsDevice OrientationPaymentsCredentialsHeb noties van de verschillende web API’s gebruikt in PWA’sPRPL PatternRAIL ModelPerformance MetricsLighthouse gebruikenDevTools gebruikenPerformantie berekenen, meten en verbeteren.

Server-side rendering

Soms is het wenselijk dat je applicatie op de server wordt gerenderd. Om dat te bekomen zijn per framework verschillende technologieën beschikbaar.

Server Side RenderingRedux MobXRxJSVueXReactJSAngularVue.js

GraphQL

Je Front-end applicatie zal in de meeste gevallen communiceren met een Back-end systeem. Er zijn verschillende manieren om deze communicatie op te zetten. GraphQL is een framework, door Facebook ontwikkeld om met de server te communiceren. Het ambieert alle voordelen van een RESTful webservice te bieden, maar zonder zijn zwaktes. In realiteit hebben beide systemen voor- en nadelen. Het komt erop aan de juiste keuze te maken, de technologie die bij de noden van het project past.

GraphQLApolloRelay Modern

What's next?

Heb je bovenstaande technologieën reeds vlot in de vingers? Top! Je bent helemaal klaar om als Front-end ontwikkelaar aan de slag te gaan. Naast bovenstaande zijn er nog tal van verdere specialisaties die het bekijken waard zijn.

Styled componentsCSS ModulesStyled JSXEmotionRadiumGlamorousReact NativeNativeScriptFlutterIonicElectronCarloProton NativeMobile ApplicationsDesktop ApplicationsStatic Site Generators

New kid on the block

JavaScript is nog steeds heer en meester in browser land en dat zal ook nog een tijdje zo blijven. Eind 2019 werd Web Assembly geaccepteerd als officiële standaard door de W3C. Het is een taal die naast JavaScript leeft en als voordeel heeft dat het bepaalde taken een pak sneller kan uitvoeren. Het zal wel nog een tijdje duren vooraleer de technologie mainstream wordt.

Web AssemblyWeb Assembly of WASM is binaire instructies gegenereerd door higher level programmeertalen zoals Go, C, C++ of Rust. Het is sneller dan JavaScript en WASM 1.0 is reeds geïntegreerd in de voornaamste browsers. Het werd eind 2019 door W3C geaccepteerd als officiële standaard. Het zal wel nog een tijdje duren vooraleer WASM mainstream wordt.

To infinity and beyond

Blijven leren is de boodschap, want in Front-end land ben je nooit volleerd. De technologie die we als Front-end ontwikkelaars op dagelijkse basis gebruiken, evolueert heel snel. Wat je vandaag geleerd hebt, is morgen alweer old-school. Het is dan ook niet nodig om al deze zaken te kunnen om als Front-end ontwikkelaar aan de slag te gaan. "On-the-job" kan je nog heel veel dingen bij leren.

Een website die gemaakt is op stabiele, beproefde technologie is daarom zeker niet slecht. Gebruik de technologie-stack die past bij het probleem dat je wil oplossen. Met de basis onderdelen van JS en CSS kan je nog steeds gave dingen maken, over-engineer niet.

Dit artikel is geschreven op basis van een gastles voor de Arteveldehogeschool, voor de grafieken werd roadmap.sh gebruikt als inspiratiebron.

Blijf leren!