Ajax herdefinieert webapplicatie-ontwikkeling

Ajax is een eenvoudige, maar revolutionaire techniek op het gebied van webapplicatie-ontwikkeling. Ontwikkelen op basis van de oude technologieën, zoals Struts, kan nu nog verdedigbaar zijn. De JSF-standaard (Java Server Faces) is echter mosterd na de maaltijd.

Er voltrekt zich momenteel een revolutie op het gebied van webapplicatie-ontwikkeling: de ‘page reload cyclus’ wordt vervangen door de ‘page update cyclus’. Op ad hoc basis wordt Ajax nu al volop toegepast. Dit is slechts het begin: Ajax betekent de opkomst van een nieuw type webapplicatie met een veel uitgebreidere gebruikersinterface die vergelijkbaar is met die van desktopapplicaties. Bovendien kan een dergelijke webapplicatie sneller en goedkoper gebouwd worden.

Een nieuwe generatie ‘webapplicatie frameworks’ is geboren. Deze zullen snel terrein winnen op die van Struts en JSF, die toegesneden zijn op de ontwikkeling van de huidige webapplicaties. Daarbij doet ook een nieuwe manier van ontwikkelen zijn intrede: net als desktopapplicaties wordt de nieuwe generatie webapplicaties ‘component based’ en ‘event driven’ gebouwd.

‘Rich thin client’

De grote tekortkoming van de nu nog gangbare thin client-architectuur is de ‘magere gebruikerservaring’. Enkele jaren geleden leidde dit nog tot de opkomst van de rich thin client-architecturen. Webapplicaties gebouwd volgens deze architecturen zouden zowel ‘thin’ als ‘rich’ zijn. Toch heeft dit geen grote vlucht genomen: de meeste architecturen waren of niet echt ‘thin’, of niet echt ‘rich’. Daarmee bleven thin clients – webapplicaties zuiver op basis van html, JavaScript en css – de norm.

Het probleem van de klassieke thin client-architectuur is de ‘page reload cyclus’. Elke client-serverinteractie verloopt via een aanvraag (request) van een nieuwe pagina. De server retourneert vervolgens een compleet nieuwe html-pagina. Deze wordt door de browser geladen, waarbij hij in de regel nog een aantal nieuwe aanvragen naar de server moet sturen om afbeeldingen, stylesheets en JavaScript-bibliotheken op te halen, voordat hij het resultaat als een opgemaakte pagina aan de gebruiker kan tonen.

Ajax maakt een nieuwe thin client-architectuur mogelijk die gebaseerd is op de ‘page update cyclus’. In tegenstelling tot de klassieke thin client-architectuur laadt de browser slechts één keer een pagina bij het opstarten van de applicatie. Vervolgens worden selectief acties door de gebruikers middels een XMLHttpRequest naar de server gestuurd. De server verwerkt het vezoek en retourneert een xml-code. Aan de hand van de data in deze xml-code wordt middels JavaScript en dhtml waar nodig de pagina in de browser aangepast.

Zowel het aantal ‘requests’ als de hoeveelheid data die over het netwerk moet worden verstuurd en die door client en server moeten worden verwerkt, is dus minimaal. Deze nieuwe thin clients kunnen veel beter en sneller reageren op acties van gebruikers. Het vervangen van de ‘page reload’ door de ‘page update’ cyclus resulteert in eerste instantie in een nieuw type webapplicatie dat efficiënter met hardware en bandbreedte omgaat. De vrijgevallen bandbreedte en processorkracht kan vervolgens ingezet worden om de gebruiker een gebruikersinterface aan te bieden die net zo uitgebreid en geavanceerd is als die van een desktopapplicatie.

Frameworks

Het bouwen van webapplicaties met een geavanceerde gebruikersinterface vraagt om een ander type webapplicatieframework dan de nu nog veel gebruikte frameworks (zoals Struts, JSF en Spring). Deze zijn primair bedoeld om multi page applications (MPA) te bouwen. Met deze frameworks wordt middels een aantal configuratiebestanden een groot aantal webpagina’s, hulpbestanden en programma’s aan elkaar geknoopt tot een applicatie. Een buitengewoon improductieve ontwikkelmethode die ongeschikt is voor de nieuwe generatie thin clients. Dit zijn namelijk single page applications (SPA), waarbij het aan elkaar knopen van pagina’s tot een applicatie eenvoudigweg niet van toepassing is.

Het ligt voor de hand om webapplicaties met een geavanceerde gebruikersinterface, zoals desktopapplicaties, ‘component based’ en ‘event driven’ te bouwen. Concreet betekent dit dat de applicatieontwikkelaar, zonder de voor hem vertrouwde programmeeromgeving te verlaten, een gebruikersinterface samenstelt uit een aantal interfacecomponenten. Waar nodig worden hier event listeners aan toegevoegd, zodat de programmatuur op basis van de (door de gebruiker) gegenereerde events het achterliggende model en de gebruikersinterface kan manipuleren.

Ontwikkelen met SPA frameworks is de geëigende en wellicht zelfs enige manier om applicaties met een werkelijk geavanceerde gebruikersinterface te bouwen. Bovendien biedt deze manier van ontwikkelen een groot aantal extra voordelen ten opzichte van het ontwikkelen met MPA frameworks of een combinatie hiervan (zoals vaak wordt gepropagandeerd). Zo hoeven ontwikkelaars zich niet (nog) meer programmeertalen, technologiestandaarden en ontwikkelomgevingen eigen te maken. Ze blijven immers op bekend terrein. Dit betekent minder kosten door een korter leertraject. Een ander groot voordeel is dat de gebruikte ontwikkelomgeving álle relaties in de applicatie (dus inclusief de gebruikersinterface) kan bewaken en beheren, met eenvoudiger en goedkoper onderhoud tot gevolg. Ook kan voor het ontwikkelen van de gebruikersinterface optimaal gebruik gemaakt worden van de vele geavanceerde voorzieningen zoals ‘code completion’, contextgevoelige sensitive hulp en ‘refactoring’. Dit zijn voorzieningen die de laatste generatie ontwikkelomgevingen standaard bieden (zoals de gratis beschikbare ontwikkelomgevingen voor Java: Netbeans en Eclipse). Een verdere kostenbesparing in elke fase (leertraject, initiële ontwikkeling en onderhoud) wordt hierdoor mogelijk.

Event driven, component-based framework

Hoe werkt een applicatie gebouwd met een framework voor event driven, component based development? Op de server manipuleert de programmatuur een geneste structuur van interfacecomponenten op basis van (user) events. De basis interfacecomponenten zijn door het web application framework beschikbaar gesteld. Het framework zorgt op transparante wijze voor:

– de reproductie op de client van de geneste structuur van gebruikersinterfacecomponenten op de server,

– de onderlinge synchronisatie van de client- en serverstructuren,

– de notificatie van de listeners op de server van events op componenten waarop deze listeners zich hebben geabonneerd.

Er bestaan al enige tijd ‘event driven, component based user interface frameworks’ op basis van de traditionele thin client-architectuur. De inefficiënte page-reloadcyclus stond de verdere ontwikkeling van deze frameworks totnogtoe in de weg. Met Ajax zien we dat in deze frameworks de page-updatecyclus plaatsmaakt voor de page-reloadcyclus. Neem Echo: een volledig event driven, component based open source web application framework, dat nu herbouwd is op basis van de Ajax-technologie en kan worden gedownload als Echo2.

De Ajax-technologie past uitstekend in de architectuur van een event driven component based web application framework. In de hiermee gebouwde webapplicaties worden user events selectief door het framework naar de server gestuurd middels Ajax. Vervolgens identificeert en notificeert het framework op de server de corresponderende component. De component roept daarna de controllers aan die zich als listeners op het event hebben geabonneerd. Deze raadplegen/modificeren het model en de gebruikersinterface. Vervolgens verzamelt het framework alle interfacewijzigingen op de server en stuurt deze in de vorm van xml-data naar de client. Op de client past het framework op basis van deze data middels Ajax de pagina aan zodat deze weer in overeenstemming is met de server.

Minder is meer

De geschetste architectuur kan op verschillende manieren verder worden uitgewerkt. Zo kan het ‘renderen’ van de html op de client of op de server plaatsvinden. Renderen op de server is de eenvoudigste en meest efficiënte oplossing. De gebruikersinterfacecomponenten worden dan meteen naar het goede formaat omgezet. De hoeveelheid JavaScript op de client blijft hierdoor tot het absolute minimum beperkt, minder dan nu gebruikelijk is bij de wat geavanceerdere webapplicaties. Het alternatief: op de server omzetten naar een tussenformaat en dit op de client weer omzetten naar html. Hiervoor zijn al snel uitgebreide JavaScript libraries nodig.

Applicatieontwikkeling is met de opkomst van webapplicaties eind vorige eeuw om begrijpelijke redenen op een dwaalspoor terechtgekomen: thin clients zijn de norm, maar webapplicaties ontwikkelen is bovenmatig complex. De ontwikkel- en onderhoudskosten zijn hoog en de gebruikersinterface is magertjes in vergelijking met desktopapplicaties. Met Ajax keren we terug naar de basis: met het juiste framework en een standaardontwikkelomgeving bouw je eenvoudig, snel en goedkoop goed te onderhouden webapplicaties met een geavanceerde gebruikersinterface. Zo’n framework kun je zelf bouwen. Met de juiste keuzes is dit minder ingewikkeld dan je misschien denkt. Ook is het mogelijk om een open source framework te gebruiken of een framework in te kopen. Het aanbod van deze frameworks groeit gestaag. Het is dan ook zaak om een weloverwogen keuze te maken. In bepaalde gevallen kan het best verdedigbaar zijn om voorlopig door te ontwikkelen op basis van oude vertrouwde technologieën zoals Struts. Nu de nieuwe JSF-standaard omarmen is echter niet aan te raden. Deze is al verouderd voordat hij volwassen is.

Drs. Huub Cleutjens, IBS Nederland