Wat is een CSS framework?

Een CSS-framework is meestal gewoon een kant-en-klaar CSS-bestand waarin heel veel opmaak regels voor je zijn klaargezet. Je hoeft dan zelf bijna geen CSS meer te schrijven, door de structuur van je html tags en de juiste klassen namen class="xxx" te gebruiken krijg je "automagisch" de juiste opmaak die dan meestal ook nog eens responsief is. In principe bevatten CSS-frameworks over het algemeen geen logica zoals programmeertalen dat kennen (if then else etc). Enkele CSS-frameworks zijn bijvoorbeeld: Bootstrap, Bulma, Foundation en Skeleton. Vaak bestaat een CSS framework dus uit een CSS bestand en regelmatig zitten daar dan een of meedere javascript bestanden bij die je optioneel ook uit gebruiken. Die javascript bestanden voegen dan functionaliteit toe die via platte html en css anders niet mogelijk zouden zijn geweest.

En wat zijn frontend frameworks dan?

Frontend frameworks doen veel meer dan CSS-frameworks, een frontend framework doet bijvoorbeeld ook de routing en is verantwoordelijk voor state-management. Frontend frameworks bevatten vaak ook logica om te communiceren met een backend en frontend frameworks zijn vaak uitgerust met build systemen, live reloading en transpilers. Bekende frontend frameworks zijn: React, Vue.js en Angular.

Terminologie

Term Betekenis
Routing Routing gaat over de nagivatie binnen je applicatie, vaak wordt hiermee bedoeld welke code er moet worden uitgevoerd wanneer de bezoeker een url aanroept.
Live reloading Met live reloading bedoeld men dat je resultaten direct ziet in je browser. Het systeem kijkt constant naar bestanden en zodra er iets wijzigd dan wordt dit automatisch overgenomen in de browser.
Transpiler Een transpiler zet code van de ene programmeertaal om naar de andere. De programmeertaal TypeScript is hier een goed voorbeeld van, code geschreven in TypeScript wordt altijd eerst omgezet naar JavaScript. In dit hoofdstuk gaan we kijken naar Less en naar SCSS kijken en hoe je met deze talen sneller stylesheets kunt genereren, ook deze talen worden getranspileerd.
State management De manier waarop web pagina's werken is in principe stateless. Een gebruiker verzend gegevens naar een pagina, een server reageert op basis van wat het ontvang en klaar. De server hoeft in in deze situatie niets te onthouden over de gebruiker. Dit wordt ook wel een transactie genoemd. Wanneer je een applicatie in de frontend maakt dan is het nodig om bij te houden in wat voor staat het systeem is. Stel je maakt een file sql, dan moet je bijvoorbeeld weten welke mapjes er open staan zodat je die op de juiste manier weer kunt geven. Dit wordt state genoemd.
Build logica Wanneer een software producent code in gebruik wil gaan nemen dan moeten er vaak allerlei stappen doorlopen worden (backup maken van het oude systeem, unit tests draaien om te kijken of alles nog werkt, git committen, terug kunnen draaien als er iets fout is gegaan et cetera. Dit soort dingen worden vaak geautomatiseerd in een zogenaamd build script.

Transpilers

Een transpiler zet code van de ene programmeertaal om naar de andere. Stel je gaat een app maken voor een klant en die klant wil graag dat die app werkt op zowel de iPhone als op Android. Aangezien Google en Apple hele andere programmeertalen ondersteunen zou je dan meerdere programmeertalen moeten leren. Een transpiler kan soms helpen door code geheel of gedeeltelijk om te zetten van de ene taal naar de andere.

1 2 3 4 5 6 7 8 9 10
Jij: Je hebt gekozen voor het Vue.js framework, je gebruikt de programmeertaal TypeScript. NodeMon: Terwijl je aan het programmeren bent houd een script de project map in de gaten om te zien of er iets gewijzigd is. Jij: Drukt op opslaan in je IDE. NodeMon: Ziet een wijziging in de code en informeert de transpiler. Transpiler_A: Leest de door jou geschreven TypeScript code en zet dit om naar JavaScript code. Transpiler_A: De gegenereerde JavaScript wordt doorgestuurd naar ReactNative. ReactNative: Ontvangt opdracht om de code klaar te maken voor een mobile device, bijvoorbeeld de Iphone 15. ReactNative: React ziet dat de code klaargemaakt moet worden en start de transpiler voor de IOS. Transpiler_B: De code wordt omgezet naar Swift of Objective-C en gecompileerd. Compiler: De Objective-C compiler zet code om naar machine taal voor Android IOS.

Vragen

Beantwoord nu de onderstaande vragen.

Navigatie

« Wat gaan we doen Frameworks in deze cursus »