Leestijd 6 min

Kamen Zhekov

Het starten van een nieuw webproject kan een ontmoedigende taak zijn met veel verschillende onderdelen om rekening mee te houden en te configureren. Voor ontwikkelaars kan het zeker handig zijn om toegang te hebben tot een startpunt voor het bouwen van webapps, met alle benodigde bestanden en configuraties al ingesteld. Het bespaart niet alleen veel tijd en moeite in vergelijking met wanneer je alles vanaf nul moet opbouwen, het verhoogt ook de productiviteit en maakt klanten blij omdat ze veel sneller tastbare resultaten kunnen zien. Bij ACA Group doen we veel van dergelijke implementaties en de volgende vereisten zijn gemeenschappelijk voor de meeste webapplicatieprojecten: Een geweldige gebruikerservaring: een snelle, responsieve en vlotte frontend die flexibel genoeg is om elk soort gebruikersinteractie te implementeren Betrouwbare en performante verwerking: een solide database en backend oplossing die gemakkelijk uitbreidbaar, testbaar, onderhoudbaar en begrijpbaar is voor elke ingenieur Gebruikersauthenticatie en -beveiliging: een robuuste en volwassen authenticatieserver die ook SSO en gebruikersfederatie heeft en integreert met veel verschillende providers Eenvoudige en veilige implementatie: toch eenvoudig te ontwikkelen zonder al te veel overhead Ons antwoord op deze terugkerende eisen is een flexibele softwarebasis die out of the box werkt. Met een paar regels in de terminal kun je een nieuw project opstarten dat alle bovenstaande functionaliteiten in een basistoestand heeft, wachtend om uitgebreid en uitgebouwd te worden. De figuur hieronder illustreert de basis van de architectuur die we vaak gebruiken voor kleine en middelgrote webapplicaties, en de verschillende services die een rol spelen. Natuurlijk zijn er nog andere componenten in het spel, maar die worden vaker per geval geïmplementeerd. Backend Laten we beginnen met het brein van de webapplicatie - de backend. Voor ons Python-team is het niet meer dan logisch om deze taal te gebruiken om de ruggengraat van de applicatie te bouwen. FastAPI biedt veel flexibiliteit in termen van hoe je bedrijfslogica en ontwerppatronen implementeert. Het is ook een van de best presterende backend-oplossingen die je kunt kiezen in Python; het heeft geweldige documentatie en wordt ondersteund door een solide community. Een populaire keuze voor projecten met data-analyse, machine learning of AI, een Python backend maakt het gemakkelijker om geavanceerde technologieën dichter bij de gebruiker te brengen. Frontend Voor het ontwerpen van de gebruikerservaring - of de frontend - geven we de voorkeur aan Angular, een volwassen en goed onderzocht JavaScript-framework dat overal in de industrie wordt gebruikt. Het is ontworpen om eenvoudig interactieve webapplicaties van één pagina te maken die in elke moderne webbrowser kunnen draaien. Angular heeft ook een gevestigde reputatie op het gebied van goede prestaties en schaalbaarheid, waardoor het risico op schaalbaarheidsproblemen bij grotere projecten afneemt. Een ander voordeel is dat Angular gestructureerd is en veel lijkt op backend code, waardoor het makkelijker te begrijpen is voor niet-frontend ontwikkelaars. Database en opslag Voor gegevensopslag is PostgreSQL een veelgebruikt en betrouwbaar databasemanagementsysteem (DBMS) dat zeer geschikt is voor verschillende toepassingen, waaronder webontwikkeling. Het staat bekend om zijn prestaties, vooral als het gaat om het verwerken van grote hoeveelheden gegevens. Het kan complexe query's efficiënt verwerken en heeft de reputatie goed te kunnen schalen naarmate de grootte van de database toeneemt. Het is ook rijk aan functies en heeft verschillende opties voor indexering en query optimalisatie. Beveiliging en verificatie Onze beveiligde authenticatieserver is gebouwd op Keycloak, een volwassen IAM-oplossing die organisaties helpt hun applicaties en diensten te beveiligen. Het is niet alleen open-source, maar ook gesponsord door 's werelds leider op het gebied van open source voor bedrijven, RedHat. Het biedt een enkel toegangspunt voor gebruikers om zichzelf te authenticeren en toegang te autoriseren tot verschillende bronnen; en het ondersteunt een breed scala aan authenticatiemechanismen, zoals gebruikersnaam en wachtwoord, twee-factor authenticatie en social login. Infrastructuur Het volgende stukje van de puzzel is NGinx, dat al het inkomende verkeer orkestreert en verdeelt over de services. Het is een krachtige en flexibele webserver en reverse proxy die vaak wordt gebruikt om inkomende klantverzoeken veilig en met hoge prestaties af te handelen. Het staat bekend om zijn vermogen om een groot aantal gelijktijdige verbindingen af te handelen met een laag gebruik van bronnen, en is vooral efficiënt bij het serveren van statische inhoud zoals afbeeldingen, CSS en JavaScript-bestanden. Nginx kan verzoeken van clients doorsturen naar een of meer services, waarbij het verkeer eenvoudig naar de juiste component van de webapplicatie wordt geleid en de belasting over meerdere servers of services wordt verdeeld, zelfs als ze dezelfde rol vervullen. Dit betekent ook dat alle verschillende services uitsluitend via NGinx communiceren met SSL/TLS protocollen, waardoor al het verkeer wordt versleuteld en gevoelige gegevens worden beveiligd. Implementatie Tot slot vergemakkelijkt Docker de implementatie en ontwikkeling. Door de verschillende onderdelen van de app te containeriseren, zoals de backend of de database, wordt het veel eenvoudiger om de app op verschillende hostingomgevingen te implementeren. Dit is vooral belangrijk als klanten verschillende eisen hebben op het gebied van hostingmachines, infrastructuur, enzovoort. Met Docker kunnen de services van de app op een gestandaardiseerde manier worden verpakt en vervolgens consistent worden ingezet in verschillende omgevingen. Docker heeft ook voordelen voor het beheren van de app in productie. Door componenten in containers te plaatsen, kun je eenvoudig op- of afschalen, updates en rollbacks uitrollen en de gezondheid van de app bewaken. Dit kan helpen om de betrouwbaarheid en onderhoudbaarheid van de app te verbeteren. Voor ontwikkelaars maakt Docker het ook makkelijker om de app in verschillende omgevingen te testen, samen te werken met teamleden en taken zoals het bouwen, testen en uitrollen van de app te automatiseren. Kickstart een nieuw project 👊 Het doel van deze architectuur is om een startpunt te bieden voor het bouwen van een webapplicatie met alle benodigde componenten al geconfigureerd. We hebben het verpakt in een sjabloon dat alles bevat wat je nodig hebt om te beginnen, zodat je niet vanaf nul een startarchitectuur hoeft te bouwen. In plaats daarvan kunt u de sjabloon gebruiken als basis en deze vervolgens aanpassen aan uw specifieke behoeften. Om deze template te gebruiken, hebben we gekozen voor een tool genaamd Cookiecutter. Het hoeft maar één keer geïnstalleerd te worden door de persoon die de initiële repository opzet om een nieuw project te maken op basis van een sjabloon van de bovenstaande architectuur. Als onderdeel van dit proces worden een paar waarden gevraagd om het sjabloon aan te passen, zoals de naam van het project, het e-mailadres van de beheerder, welke functies je wilt inschakelen, enzovoort. Zodra je Cookiecutter hebt gebruikt om de projectmap aan te maken, bevat deze alles wat je nodig hebt om de webapplicatie te bouwen en uit te voeren. Om met de app aan de slag te gaan, kun je een eenvoudig Docker-commando uitvoeren en de webapplicatie is in een mum van tijd klaar voor gebruik. Dit maakt live ontwikkeling op elk deel van de applicatie mogelijk met hot reload, en maakt de implementatie zo eenvoudig als een paar klikken. Conclusie Al met al kan een kant-en-klare webapplicatie-architectuur zoals beschreven in deze blog een waardevol hulpmiddel zijn om tijd en moeite te besparen op elk nieuw project. Door een solide basis te bieden voor het bouwen van een webapplicatie, kan het teams helpen om snel een MVP op te starten, zonder vanaf nul te hoeven beginnen. De combinatie van de bovenstaande technologieën bespaart niet alleen tijd en moeite, maar geeft je ook het vertrouwen dat je app goed is uitgerust voor een breed scala aan behoeften.