De webapplicaties en websites van tegenwoordig moeten 24/7 beschikbaar zijn vanaf elke plek ter wereld en moeten bruikbaar en prettig in gebruik zijn vanaf elk apparaat of schermformaat. Daarnaast moeten ze veilig, flexibel en schaalbaar zijn om pieken in de vraag op te vangen. In deze blog laten we u kennismaken met de architectuur van moderne webapplicaties en gaan we dieper in op verschillende back-end en front-end frameworks en hoe ze samenwerken.
Tegenwoordig, als je een iets complexere webapplicatie of websiteoplossing wilt bouwen, heb je vaak solide frameworks nodig die stukjes van zowel de front-end als de back-end kant aanpakken om te bereiken wat je zoekt. De specifieke kenmerken van je applicatie zullen bepalen wat die onderdelen zijn en of het de moeite waard is om te investeren in het gebruik van slechts één van de twee technologieën, of beide in combinatie.
Een back-end framework is het "brein" van je webapplicatie. Het moet zorgen voor de meeste, zo niet alle, taken op het gebied van berekeningen, gegevensbeheer en modelmanipulatie. Laten we het voorbeeld van FastAPI nemen. Hoewel dit back-end webframework voornamelijk wordt gebruikt voor het ontwikkelen van RESTful API's, kan het ook worden toegepast voor het ontwikkelen van complete webapplicaties als het wordt gekoppeld aan een front-end engine zoals Jinja2. Het gebruik van alleen FastAPI en wat templating zou ideaal zijn als je een standalone API wilt waar andere ontwikkelaars mee kunnen communiceren. Een ander goed doel zou een website of webapp zijn die dashboards en inzichten biedt over gegevensinvoer (grafieken gebaseerd op bestanden die je uploadt, etc.) zonder functionaliteiten die afhankelijk zijn van snelle gebruikersinteracties.
Hieronder vind je een voorbeeld van een applicatie die volledig is gebouwd met een Python back-end en Jinja2 als templating engine. Klik hier voor meer informatie over het project, de broncode, enz.
Het probleem dat je zou kunnen tegenkomen bij het maken van een complete web app of website met FastAPI is dat de hele logica van het programma naar de back-end wordt geduwd, en de enige taak voor de browser en het apparaat aan de kant van de client is het renderen van de HTML/CSS/JS respons die er naar toe wordt gestuurd. De tijd tussen het moment dat de browser het verzoek doet om iets weer te geven en het moment dat de gebruiker het ziet, kan dan enorm variëren op basis van een heleboel factoren. Denk aan de belasting van de server, de snelheid van het internet van de gebruiker, het geheugengebruik of de CPU-efficiëntie van de server, de complexiteit van de gevraagde taak, ...
Tot nu toe kan de back-end zorgen voor alle operaties die we willen dat onze webapp heeft, maar er is geen manier om echt te interageren met de gebruiker. Een front-end framework zorgt voor de gebruikerservaring - UI-elementen zoals knoppen, een landingspagina, een interactieve tutorial, het uploaden van een bestand - in principe verloopt elke interactie met de gebruiker via het front-end framework. Als we kijken naar React of Vue JS - dit zijn front-end frameworks voor het ontwikkelen van dynamische websites en single page applicaties. Ze hebben echter een back-end technologie nodig (zoals FastAPI, Flask of NodeJS) om een RESTful API te bieden, zodat wat ze tonen dynamisch en interactief kan zijn. Alleen React gebruiken zou gebeuren in situaties waarin er al bestaande gegevensbronnen zijn waarmee je kunt interageren (openbare API's, externe gegevensleveranciers, cloudservices, enzovoort) en het enige wat je wilt creëren is de gebruikersinteractie met die services.
Maar we kunnen hier al zien dat, in theorie, het combineren van de sterke punten van een solide back-end framework - zoals Flask, FastAPI, of NodeJS - met een goed front-end framework een optie is, en dan nog een hele goede ook. Voorbeelden van die combinatie zijn de BBC World Service News websites die worden gerenderd met behulp van een React-gebaseerde Single Page Application met een NodeJS back-end (Express). Klik hier voor een gedetailleerd overzicht op de GitHub-pagina van het project.
In deze gevallen proberen front-end frameworks een deel (of veel) van de taken van de back-end te delegeren naar de client-side. Alleen de computationeel zware delen blijven op de server, terwijl alles wat overblijft en snel uit te voeren is in de browser op het apparaat van de client wordt gedaan. Dit zorgt voor een goede gebruikerservaring, "snappiness" en is in feite een soort decentralisatie van delen van de uitvoering van de webapplicatie, waardoor de belasting en verantwoordelijkheden van de server afnemen.
Tegenwoordig bestaat de architectuur van goed gebouwde en schaalbare webapplicaties uit een client-side framework dat een toestand bijhoudt, bestaande uit een toestand van de gebruikersinterface en een toestand van het datamodel. Deze toestanden vertegenwoordigen respectievelijk UI-elementen die de visuele ruggengraat van een applicatie vormen, en data-elementen die gekoppeld zijn aan wat voor soort gegevens of modellen (bijvoorbeeld een gebruiker) gebruikt worden doorheen de applicatie. Elke verandering in de toestand van het gegevensmodel veroorzaakt een verandering in de UI-toestand van de applicatie. Veranderingen in de datamodellen worden veroorzaakt door een gebeurtenis die direct van de gebruiker komt (zoals een muisklik) of een gebeurtenis aan de serverkant (zoals de server die zegt dat er een nieuwe melding voor de gebruiker is).
De combinatie van al deze factoren zorgt voor een geweldige gebruikerservaring die dichter in de buurt komt van een desktopapplicatie in plaats van een ouderwetse, trage website.
Klaar voor meer? In onze volgende blog leggen we de sterke punten van Python en NodeJS uit, en hoe je daartussen moet kiezen.