Wat is een webapplicatie?

Snelle navigatie

• Wat zijn de voordelen van een webapplicatie?
• Soorten webapplicaties
• Wanneer heb je een webapplicatie nodig?
• Wat kost een webapplicatie
• Hoe wordt een webapplicatie gebouwd? (Technologiekeuze)
• Een webapplicatie op Drupal

Wat is het verschil tussen een website en een webapplicatie?

Platgeslagen gezegd heeft een website als doel informatie over te brengen, iets te presenteren of te verkopen. Denk bijvoorbeeld aan onze eigen website, waar je informatie kunt vinden over de ontwikkeling van online platformen. Een webapplicatie heeft als doel een gebruiker een dienst te verlenen of een taak te laten voltooien. Dit kan bijvoorbeeld een interactieve leeromgeving zijn of een portaal waar je bankzaken kunt regelen. 

De verschillen in interactiviteit

Wanneer je als gebruiker een website bezoekt ben je een consument van de inhoud. De interactie is dan vaak beperkt tot het lezen van tekst of het bekijken van een video of afbeelding. Soms navigeer je tussen een aantal pagina's door middel van links en daar houdt het bij op.

Bij een webapplicatie is het doel om de gebruiker echt actief deel te laten nemen. Dat betekent dat de applicatie reageert op de complexe invoer van de gebruiker. In andere woorden, jij kan als gebruiker gegevens creëren, bewerken, sorteren of manipuleren. 

Dynamische content van een webapplicatie

Een webapplicatie is goed te herkennen aan de hoge mate van dynamische en gepersonaliseerde content. Wat een gebruiker op zijn scherm ziet (bankoverzicht of dashboard), is specifiek gegenereerd op basis van zijn eigen profiel, rechten en eerdere acties.

Wanneer je een online cursus volgt is dat achter een inlog omdat de voortgang moet worden bijgehouden voor jouw profiel. Wanneer je ingelogd bent kun je hier zien waar je bent gebleven, hoe ver je bent en wat je al hebt afgerond. Dit zijn dynamische elementen omdat het zich aanpast aan jouw handelen.

Bij een website is de inhoud statisch en heb je vaak geen inlog nodig. Elke bezoeker/gebruiker krijgt dezelfde informatie te zien. Updates worden aangebracht door een redacteur en vervolgens live gezet. 

Authenticatie en beveiliging

Zoals we eerder noemden is de content dynamisch en gepersonaliseerd op basis van jouw profiel. Om die reden is er vrijwel altijd een login vereist om een webapplicatie te openen. Omdat jouw gegevens gekoppeld moeten worden aan een account en daar ook specifieke rollen en rechten voor nodig zijn om de webapplicatie te kunnen gebruiken.

Bij een website is een login niet vereist. De informatie is meestal publiek toegankelijk. Wel zijn er bepaalde websites waar een login mogelijk is, denk hierbij aan een website waar je een artikel wilt kunnen opslaan om later makkelijk terug te vinden. 

Verschillen in techniek en complexiteit

Een website is ‘relatief’ eenvoudig te bouwen. Dit komt omdat deze meestal gebouwd is in HTML, CSS en een beetje JavaScript. De meeste websites draaien op een CMS (content management systeem) zoals Drupal of WordPress, wat helpt bij het beheren van de website.

Een webapplicatie is technisch een stuk complexer. Het vereist vaak complexe “client-side” scripting (zoals React of Angular) en een uitgebreide “backend” (zoals Node.js of Python) voor database koppelingen en complexe bedrijfslogica. Ook een webapplicatie kan draaien binnen een CMS zoals Drupal. Dat is voordelig: gebruikersrollen, rechten en beveiligingsupdates zitten al in de architectuur verankerd, en doordat moderne CMS'en API-first zijn, communiceert de backend rechtstreeks met andere applicaties.

1. Updates die direct voor iedereen gelden

Een ander groot voordeel is dat wanneer je een update wilt doorvoeren voor je webapplicatie, deze direct beschikbaar is voor alle gebruikers. Een gebruiker hoeft dus zelf geen stappen te ondernemen om een update te installeren.

Ook nemen webapplicaties nauwelijks schijfruimte in beslag op het apparaat van de gebruiker, op wat cachedata en cookies na. Native applicaties moeten wel worden geïnstalleerd en vragen daardoor structureel meer opslagruimte.

2. Groeit mee met de organisatie

Een webapplicatie groeit mee met de organisatie: van tien gebruikers vandaag naar honderd volgend jaar vraagt in de cloud geen nieuwe serverhardware, alleen meer capaciteit op het bestaande hostingplatform.

Webapplicaties zijn ook vaak modulair opgebouwd. Dit maakt het relatief eenvoudig om nieuwe functionaliteiten toe te voegen. Denk aan een extra afdeling, een nieuw bedrijfsproces of een nieuwe functionaliteit zoals een koppeling met een nieuw systeem. 

3. Samenwerking

Een webapplicatie is ontworpen voor meerdere gebruikers die tegelijkertijd in dezelfde omgeving kunnen werken. Denk hierbij aan een webapplicatie zoals Google Docs. Hier is realtime samenwerking mogelijk waarbij teamleden samen in een tekstdocument kunnen werken. Wanneer jij een zin typt ziet een collega deze direct verschijnen zonder dat er een opslaan knop nodig is.

4. Integraties en databeheer

Webapps blinken uit in het verbinden van informatiestromen die voorheen versnipperd waren in bijvoorbeeld verschillende spreadsheets of losse tools.
Bij een webapp worden gegevens opgeslagen op een centrale database. Dit kan informatie zijn uit andere systemen zoals je boekhoudpakket, CRM en ERP die op één centraal dashboard getoond worden.

Rollen en rechten bepalen wie welke data mag inzien of bewerken: een directeur ziet andere overzichten dan een sales medewerker, terwijl ze in hetzelfde systeem werken. Bij CZ bouwde Atom een rollen- en rechtenstructuur voor werkgevers, leidinggevenden, HR-medewerkers en financieel verantwoordelijken, elk met een eigen rol in het goedkeuringsproces voor zorginterventies.

5. Lagere ontwikkelkosten

Vanuit technisch oogpunt zijn webapplicaties makkelijker en goedkoper te onderhouden dan native apps of desktop software. Omdat de webapp op één codebase draait die op alle systemen werkt, is de initiële investering vaak lager dan wanneer je applicaties moet ontwikkelen voor iOS en Android. 
 

Onderverdeling op basis van architectuur

• Single-Page Applications (SPA): deze apps laden één keer een 'schil' in de browser. Daarna wordt alleen de data dynamisch ververst, zonder dat de hele pagina opnieuw hoeft te laden. Dat zorgt voor een snelle en vloeiende gebruikerservaring, vergelijkbaar met desktopsoftware. Voorbeelden zijn Gmail en Trello.
• Progressive Web Apps (PWA): een evolutie van de standaard webapp die functies van mobiele native apps overneemt. Een PWA kan offline werken, pushnotificaties sturen en direct op het startscherm van een telefoon worden geïnstalleerd, zonder tussenkomst van een appstore.
• Hybride apps: webapplicaties in een 'native jasje', gebouwd met dezelfde webtechnologie maar verpakt voor distributie via de appstore. Anders dan een PWA zijn ze in de praktijk alleen te gebruiken via de geïnstalleerde appstore-versie, niet los via de browser.
   

Wanneer heb je een webapplicatie nodig? 

Een belangrijk signaal dat een webapplicatie aan te raden is: een gewone website of standaardsoftware volstaat niet meer om specifieke taken te voltooien. Zoals eerder beschreven, kun je de vuistregel hanteren dat een website voldoet zodra gebruikers alleen informatie hoeven te bekijken, en dat een webapplicatie nodig is zodra gebruikers met data moeten werken: aanpassen, invoeren en beheren.

Omdat bovenstaande misschien nog wat vaag klinkt, delen we vier voorbeelden van wanneer een webapplicatie nodig is:

1. Automatiseren van handmatig werk

Wanneer je team veel tijd kwijt is aan repeterende taken of het handmatig overnemen van gegevens tussen systemen en spreadsheets, kan een webapp deze workflow automatiseren. Denk bijvoorbeeld aan het automatisch genereren van facturen of rapportages.

2. Behoefte aan centrale data

We hebben het eerder al even kort genoemd: wanneer je data versnipperd en verspreid staat over losse bestanden, kan een webapplicatie dit samenvoegen in één centrale database. Hierdoor werkt iedereen met de meest actuele versie en wordt voorkomen dat gegevens dubbel worden ingevoerd.

3. Persoonlijke toegang en rechten

Als gebruikers of medewerkers moeten inloggen om toegang te krijgen tot vertrouwelijke of gepersonaliseerde gegevens, is een webapplicatie de aangewezen oplossing. Voorbeelden hiervan zijn:

Klantportaal: een omgeving waar klanten 24/7 zelf gegevens kunnen inzien, zoals facturen, leveringen, bestellingen of hun chatgeschiedenis.
Rolgebaseerde toegang: hierbij is ingesteld dat niet iedereen standaard dezelfde gegevens kan zien. De rechten zijn afgestemd op de rol binnen de organisatie, zo kunnen sales en marketing dezelfde gegevens zien, terwijl R&D weer heel andere informatie te zien krijgt.

4. Unieke processen

Wanneer je organisatie te maken heeft met complexiteit waar (standaard)software niet aan voldoet, kan een maatwerk webapplicatie worden gebouwd die volledig aansluit bij de organisatie.
 

Rollen en rechten tot op veldniveau

In een webapplicatie zien verschillende doelgroepen, zoals burgers, medewerkers of leden, andere content. Atom regelt dat met rollen en rechten tot op veldniveau: niet alleen wie een record mag zien, maar ook welke afzonderlijke velden daarbinnen zichtbaar of bewerkbaar zijn per rol, aangevuld met publicatiestatussen en revisies waarmee elke wijziging herleidbaar blijft.

Koppelingen met bestaande systemen

Drupal stelt data beschikbaar via een standaard REST API en ondersteunt daarnaast SOAP voor oudere systemen. Atom bouwde hiermee al koppelingen met CRM- en ERP-systemen zoals Salesforce, Microsoft Dynamics, Exact, AFAS en SAP, betaalproviders zoals Buckaroo, Mollie en iDEAL, en SSO-oplossingen zoals SURFconext, miniOrange en Azure AD. 

Wanneer een directe koppeling niet volstaat, bouwt Atom een middleware-laag: voor Royal Caribbean verwerkt en buffert deze laag dagelijkse CSV-exports, en bij de Carnegie Stichting normaliseert en dedupliceert een koppeling 2,3 miljoen bibliotheekrecords naar 60 miljoen doorzoekbare records via Apache Solr.

Losgekoppelde front-end met React

Voor webapplicaties waarbij front-end en back-end onafhankelijk van elkaar moeten kunnen ontwikkelen, combineert Atom Drupal met React. Dat kan progressief (React voor specifieke interactieve onderdelen, de rest blijft een standaard Drupal-frontend) of volledig losgekoppeld (Drupal als content-API, React bouwt de volledige interface).