In 4 stappen een succesvolle webapplicatie bouwen!

Website

Websites zijn geen websites meer. Tegenwoordig zijn het volledig dynamische applicaties. Dat komt doordat we het internet totaal anders gebruiken dan een klein decennium geleden. En morgen alweer anders dan vandaag. Werd je voorheen verplicht de site te verversen voordat de nieuwe data zichtbaar is? Nu is alles interactief en real-time. Daarom heb je een moderne manier nodig om webapplicaties te structureren. In deze blog neem ik je in vier (basis) stappen mee in hoe wij een modern webapplicatie traject doorlopen.

1.Een praktische ontwikkelomgeving

Het opzetten van een ontwikkelomgeving wordt vaak onderschat. In onze ogen is dat juist een hele belangrijke factor voor de gezondheid van je werkzaamheden. Niet alleen codeer je in een hoger tempo maar ook secuurder wanneer de omgeving goed geconfigureerd is. Denk aan configuratie bij automatische code-checks tijdens het ontwikkelen, het opstellen van algemene code-regels (zo blijft je code netjes en voorkom je bugs) en strikte programmeertalen (of supersets).

Zelf gebruiken wij Docker als ontwikkelomgeving en code editor Visual Code voor het schrijven van de code, zolang iedereen binnen het team Docker heeft heb je nooit tot weinig ‘gezeur’ met versies van software welke de app gebruikt. Een goede ontwikkelomgeving zorgt ervoor dat jij als ontwikkelaar minder fouten maakt en als een team samenwerkt – Docker is daarom een aanrader.

2.Structuur aanbrengen in de applicatie

Een bezoeker krijgt de applicatie te zien en gaat hier interactief mee aan de slag. Hij weet niet wat er allemaal op de achtergrond gebeurt en hoe complex dat eigenlijk is. Hoe regisseer je die complexiteit achter de schermen? Een vraag met verschillende antwoorden , afhankelijk van het type project. Bij UBO hebben wij als volgt, zoals hieronder stapsgewijs beschreven. Dat wil uiteraard niet zeggen dat wij “de” manier hanteren.

Voordat we starten aan een traject bespreken we de volgende punten:
a. Welke technieken gaan we gebruiken voor het project en hoe richten we onze ontwikkelomgeving daarvoor in;
b. Wat voor services gieten we in de architectuur;
c. Welke structuur brengen we aan in onze app;
d. Welke stappen zijn nodig voor het uitrollen van de applicatie;
e. Hoe meten we alles succesvol?

Neem een gemiddelde applicatie. Die heeft vaak twee verschillende kanten, die los van elkaar, maar gelijktijdig met een gedeeld doel samenwerken. Aan de ene kant heb je de front-end, ingezet als een SPA (Single Page Application) met een framework/library naar keuze die continu communiceert met een API of andere service (bijv. autorisatie). Aan de andere kant heb je de back-end, verantwoordelijk voor de logica. Die API zet je in met daaromheen microservices, zo hou je code gescheiden en kan elke service geschreven worden in zijn eigen taal en is daarom een expert op zijn gebied. De API werkt samen met een database, een autorisatie service, een caching (memory) database, cloud storage of connectoren naar andere API’s met daarbij nog een database warehouse. Een hoop termen en daarom ook belangrijk om hierin structuur in aan te brengen. Onze tip: werk je applicatie theoretisch uit voordat je aan de praktijk begint. Stel een ERD samen voor je database(s) en onderzoek wat de juiste manieren zijn en welke services bedoeld zijn voor welke taken. Zorg ervoor dat de gekozen services optimaal kunnen samenwerken. En iets wat vaak vergeten wordt: denk aan de veiligheid van je applicatie!

Webontwikkelaars moeten beslissen over de functies en services, hoe sluit je services aan en welke keuzes maak je? Hieronder vind je een lijstje van de keuzes waar wij vaak op terugvallen:

a. Front-end: React (TypeScript);
b. Back-end: Laravel (als API);
c. Database: MySQL;
d. Autorisatie service: Keycloak met een PostgreSQL database of een eigen NodeJS (TypeScript) service met Prisma 2.0 als ORM;
e. Caching database: Redis;
f. Cloud storage: S3-storage;
g. Back-end mobiele applicaties: Firebase;
h. Front-end mobiele applicaties: React Native (+ vaak Expo);
i. Websites: Gatsby en headless WordPress.

3. Automatisch uitrollen door een pipeline

In de complexe, hedendaagse markt is flexibiliteit een must. Daar moet continu op ingespeeld worden. Veel organisaties ervaren nog knelpunten in het opleverproces waardoor ze hun doelen niet bereiken. Continuous Integration, Continuous Delivery (CI/CD) wordt gezien als de volgende stap om het ontwikkelproces te versnellen. Zou het niet fantastisch zijn om met één simpele druk op de knop je hele applicatie naar een staging omgeving te pushen en gelijk automatisch tests uit te voeren? Dit kan door het opstellen van een CI/CD pipeline. Op deze manier kun je de flexibiliteit van de huidige markt automatiseren en de constante wijzigingen redelijk eenvoudig bijbenen. Zie hieronder een voorbeeld van CI/CD en pipeline.

GitLab CI/CD & GitLab Runners is daarvoor een goede aanrader!

4. Hoe meten wij alles “succesvol”?

Succes… wat is dat precies? Het lijkt een grijs gebeid. Want voor wie telt dit eigenlijk? Het is belangrijk om succes te meten, verbeteringen aan te brengen en opnieuw te meten als je succesvol wilt zijn als ontwikkelaar.

Net als bij elke andere zakelijke onderneming start je niet zomaar een app en ga je verder met de volgende. Je moet de prestaties volgen, het rendement op de klant zijn investering meten en gegevens gebruiken om beslissingen te nemen en verbeteringen aan te brengen.

Maar hoe doe je dat? Als ontwikkelaar doe je dit door het aantal bugs bij te houden of deze voor te zijn, de stabiliteit te meten en je performance in de gaten te houden. Kan je applicatie bijv. 10000 requests aan vanuit 100 verschillende sessies binnen een korte periode? Als klant zijn het de standaard marketinggegevens; het aantal gebruikers, hoe lang zijn zij actief, waar haken ze af of juist waar blijven ze langer hangen. Maar wij, developers, vinden een applicatie succesvol als die stabiel draait, zonder performance issues, bugs en wanneer een feature eenvoudig uit te rollen is.

Wil jij hier meer over weten en inzoomen op alle punten? Schrijf je dan in voor mijn (technische) webinar op 23 april.

25
juni
Meld je aan voor de UBO kennissessie.

'Een succesvolle website met CRO marketing'

vrijdag 25 juni 2021 11:00
UW BUSINESS ONLINE
ONLINE

Meer blogs

Blijf top of mind met krachtige touchpoints!Zet de klantreis centraal, niet jouw bedrijfMerkidentiteit, dé basis voor effectief design

Menu

  • Home
  • Over UBO
  • Cases
  • Vacatures

Voor vastberaden
ondernemers.

Contact

Amersfoortseweg 28
3751 LK, Bunschoten-Spakenburg

Econtact@uwbusinessonline.nl
T030 700 97 63