Front-end ontwikkeling met Vaadin

Vaak worden de contouren van de front-end van een applicatie snel neergezet. Hierdoor krijgt de gebruiker al vroeg een indruk hoe de applicatie er in grote lijnen uit gaat zien en welke functionaliteit wordt ondersteund. Voor demo-doeleinden is dat prima. Wat de gebruiker echter snel vergeet, is dat er nog veel tijd besteed moet worden aan het tot in detail uitprogrammeren. Hierbij kan je denken aan het programmeren van alle scripts die de elementen op een pagina bepaald gedrag toekennen, de opmaak van de pagina’s en vooral belangrijk: de koppelingen met de back-end. Vraagstukken die hierbij naar boven komen zijn: welk Javascript-framework wordt er gebruikt, waar komen de validaties (front- of server-side) en welke browsers moeten we ondersteunen. Ook bekijken we hoe we de ontwikkelingstaken moeten verdelen, hoe we gebruik kunnen maken van continuous integration en of onze applicatie automatisch getest wordt. Vaadin neemt een groot aantal van deze vraagstukken uit handen en biedt een aantal interessante oplossingen.

In dit artikel leggen we het Vaadin Framework uit en bespreken we de mogelijkheden die dit framework biedt. Zo gaan we in op de architectuur, beschrijven we de voordelen tijdens de bouw van een applicatie en lichten we de voordelen ten opzichte van een traditionele HTML/Javascript-applicatie uit.

Veel Java-ontwikkelaars zijn erg goed in het ontwikkelen van robuuste en schaalbare systemen voor de klant. Ook zijn ze zeer goed in staat de mogelijkheden van de Java-taal te benutten, vooral als het gaat om back-end systemen. Wanneer een ontwikkelaar echter wordt gevraagd een fraaie front-end-applicatie te bouwen, dan ontstaat er al snel een discussie over de te gebruiken technologie en de Javascript-frameworks die daarbij komen kijken. Veel scripting libraries schieten als paddenstoelen uit de grond, waardoor het moeilijk is de juiste library voor het juiste werk te kiezen.

Architectuur

Om een ontwikkelaar enigszins af te schermen voor de specifieke front-end ontwikkeling is er Vaadin, een UI- ontwikkelframework, dat is ontwikkeld door Vaadin Ltd uit Finland.

 

Dit framework is volledig geschreven in Java en maakt op de achtergrond gebruik van Google Web Toolkit (GWT). Zodra de applicatie gebouwd wordt, vertaalt de GWT cross-compiler de Java-applicatie naar HTML, CSS, JavaScript en een Ajax-gebaseerde communicatielaag. De ontwikkelaar merkt hier weinig tot niets van.

 

Het gebruik van Java voor front-end ontwikkeling heeft de volgende grote voordelen:

• Compile-time type checking.
• De ontwikkelaar kan alle Java-principes toepassen in de applicatie (overerving, hergebruik, polymorphisme).
• Iedere ontwikkelaar kan zijn bekende Java development tools blijven gebruiken; applicaties draaien en debuggen werkt net als elke andere webapplicatie op een applicatieserver.
• Unit-testing van componenten.

 

Vaadin kent twee programmeermodellen: server-side en client-side. Het server-side model is veruit het krachtigste model, waarbij de applicatie-ontwikkeling volledig aan de serverkant plaatsvindt. Een op AJAX- gebaseerde client-side engine zorgt voor het renderen van de user interface in de browser. Het client-side model biedt ondersteuning voor het zelf ontwikkelen van widgets en applicaties in Java, die gecompileerd worden naar Javascript en uitgevoerd worden in de browser.

 

De architectuur van Vaadin ziet er als volgt uit:

Figuur 1 Vaadin-architectuur (bron: Book of Vaadin) ***

Een Vaadin-servlet, draaiend in een webcontainer op een webserver, handelt de inkomende HTTP-verzoeken af. Op de server wordt vervolgens de benodigde business logica uitgevoerd, bijvoorbeeld door het benaderen van databases of door een webservice of EJB in de back-end aan te roepen.

Wanneer de business logica is uitgevoerd en er een response terug moet naar de gebruiker, zal de UI-logica de wijzigingen doorgeven aan de user interface- componenten die draaien aan de serverkant, waarna er een response voor de browser wordt gegenereerd.

Client-side

De client-side engine draait dus in de browser en ontvangt deze response. Deze engine zal de nodige wijzigingen doorvoeren binnen de pagina.

Zo wordt de ‘state’ van de client-side componenten aangepast, wat het verversen van de pagina in de browser tot gevolg heeft. De client-side engine wordt in de browser uitgevoerd in Javascript, waardoor er geen extra browser-plugins nodig zijn om een Vaadin-applicatie te kunnen draaien.

Wanneer de gebruiker aan de client-side een handeling uitvoert (bijvoorbeeld het aanklikken van een checkbox of het openklappen van een tabel), dan zorgt Vaadin ervoor dat deze actie vanaf de client wordt doorgestuurd naar de server. Deze functionaliteit wordt geïmplementeerd met clickListeners, waarin het gewenste gedrag kan worden geprogrammeerd. Aan de serverkant wordt vervolgens opdracht gegeven om elementen in de browser te wijzigen, waarna de server-zijde de client opdracht geeft om het scherm (of een deel daarvan) te verversen. Het verschil met traditionele applicaties is dat dit gedrag zich dus volledig op de server afspeelt in plaats van in de client.

Achter het server-side model maakt Vaadin gebruik van AJAX-calls (Asynchronous Javascript and XML) voor het bouwen van een Rich Internet Application (RIA) met een goede performance. Deze goede performance komt door het bijwerken van delen van het scherm in plaats van het compleet ophalen van de volledige pagina. Doordat volledig in Java wordt ontwikkeld, heeft de ontwikkelaar niets te maken met deze low-level AJAX-calls.

 

Bouw
Een Vaadin-applicatie is goed te vergelijken met het bouwen van een UI met behulp van AWT of Swing. Middels layout-managers wordt de volledige UI opgebouwd. Telkens kun je componenten, zoals Labels, Buttons of Tables aan een layout toevoegen. Het verschil is dat het bij Vaadin om een volwaardige webapplicatie gaat.

Het bouwen van een GUI krijgt daardoor een iets andere insteek dan het bouwen van een plain HTML-applicatie, waardoor het soms lastig is te visualiseren hoe het betreffende scherm eruit ziet. Om hieraan tegemoet te komen, heeft Vaadin een plugin voor Eclipse ontwikkeld, waarbij je met behulp van een WYSIWYG-editor de layout middels drag- and drop kan samenstellen.

 

Componenten en add-ons

Standaard wordt een complete set aan componenten meegeleverd met Vaadin. Van Buttons/Labels tot DateFields en van Windows/SplitPanels tot TwinColumnSelect, waarbij je uit een lijst van waarden een nieuwe lijst kunt opbouwen.

 

Op http://demo.vaadin.com/sampler kun je alle beschikbare componenten bekijken, samen met voorbeeldcode hoe je de betreffende component moet gebruiken.

 

Het beschikbaar hebben van een volledige set aan componenten binnen Vaadin is een enorm voordeel, omdat het bouwen van een webapplicatie meer een drag/drop-handeling wordt. Bij een traditionele HTML/Javascript-applicatie gaat er juist veel tijd zitten in het opzetten en schrijven van de benodigde scripts en de bijbehorende layout.

 

De componenten die standaard bij Vaadin aanwezig zijn, bieden veel functionaliteit voor de standaardacties binnen een webpagina. Wanneer het echter om complexere functies gaat, is er een complete bibliotheek met bijna 450 add-ons beschikbaar, waarvan het overgrote deel gratis is te gebruiken.

 

Styling (themes)

Het opbouwen van de pagina’s gebeurt net als iedere andere webapplicatie door HTML en de look-and-feel van de pagina’s gebeurt met CSS. Iedere Vaadin-component genereert zijn eigen style-element. Vaadin levert standaard een aantal ‘themes’ mee, zodat een applicatie standaard al van een bepaalde style is voorzien. Uiteraard kun je elementen van een eigen style voorzien. Online kun je het base-theme Chameleon van Vaadin gebruiken en net zolang aanpassen totdat alle componenten voldoen aan de gewenste huisstijl. Vervolgens kun je het gecreëerde thema downloaden en binnen de webapplicatie plaatsen.

 

Vaadin biedt support voor het gebruik van SASS (Syntactically Awesome Stylesheets). SASS is een extensie van de CSS-taal met als voordeel:

• het gebruik van variabelen, vooral bedoeld voor hergebruik.
• geneste structuren die de nesting binnen de HTML-opzet kunnen volgen.
• uitbreiding / overerving waarmee copy-paste van verschillende stijlen verleden tijd is.

Wanneer de applicatie gedeployed is, kun je de gedefinieerde layout controleren op fouten met behulp van het ‘debug-window’ van Vaadin. Dit window wordt getoond door het toevoegen van ?debug achter de betreffende URL. Hiermee wordt in de browser een window zichtbaar, waarin de gedefinieerde componenten verschijnen en de eventuele conflicten daartussen.

 

Performance

Standaard genereert Vaadin voor diverse layouts nogal veel overhead aan HTML. Zo worden rondom bijna alle componenten één of meerdere <DIV>-elementen gegenereerd. Wanneer je veel data toevoegt aan een component, zoals een Table, dan hebben cellen in deze Table op hun beurt ook weer een complexe layout. Dit kan, zeker in oudere versies van Internet Explorer, nogal ten koste gaan van de performance in met name het renderen van de pagina.

In dat geval is het gebruik van de meer lightweight CSSLayout een goed alternatief. Deze layout is een vergelijkbare container voor componenten, maar met veel minder overhead aan HTML.

Mobile

Tegenwoordig wil ieder gerespecteerd bedrijf haar eigen (liefst ‚native’) app kunnen aanbieden om extra service aan haar klanten te kunnen verlenen.

Een vraag die daarbij al direct naar voren komt, is welke platforms en devices er ondersteund moeten worden. Het probleem waar ontwikkelaars vaak tegenaan lopen is de programmeertaal die nodig is voor het betreffende OS (Java voor Android, Objective-C voor iOS van Apple en C of C++ voor Windows Mobile).

Omdat het leren van een nieuwe programmeertaal vaak veel tijd vergt en een mobile app het liefste op korte termijn gemaakt moet worden, wordt er al gauw naar een alternatief gekeken. Dit kan bijvoorbeeld een mobiele website met HTML5/CSS3 zijn, waarbij het uiterlijk en gedrag van een app zeer goed is te benaderen.

Omdat er ook voor het bouwen van mobiele websites een overvloed aan frameworks bestaan, biedt Vaadin daarom een oplossing in de vorm van een add-on, genaamd ‘Vaadin Touchkit’. Hierin is een grote verzameling van UI-componenten al aanwezig, aangevuld met diverse ‘themes’ om de look van een native app te benaderen.

Door deze add-on kun je relatief eenvoudig een bestaande applicatie voorzien van een UI, die redelijk goed het betreffende device benadert. Zo kun je vrij snel een nieuwe front-end aan de bestaande back-end applicaties koppelen.

Deze touchkit add-on is niet gratis ($590 per developer). Een alternatief is een Vaadin Pro-account. Een pro-account is uitgebreider. Naast de Touchkit bevat deze ook een testbench voor het unit-testen van de UI, extra charts-componenten voor het tonen van grafieken en spreadsheet-editing vanuit de browser ($468 per developer/per jaar).

Documentatie en ondersteuning
Omdat je de volledige applicatie in Java kunt ontwikkelen, kan een ervaren Java-ontwikkelaar vrijwel direct van start gaan zonder zich direct een nieuwe taal eigen te moeten maken. Een Java-ontwikkelaar voelt zich, ondanks een nieuwe techniek, al snel thuis in Vaadin. Dankzij de zeer uitgebreide documentatie die wordt meegeleverd bij het framework en het zeer uitgebreide forum dat actief wordt onderhouden, kun je relatief snel antwoorden vinden op de wat complexere vraagstukken (reactietijd 4-6 uur op het Vaadin-forum door één van de medewerkers van Vaadin).

Conclusie

Gedurende de lange tijd dat Vaadin al bestaat (vanaf 2000), is het framework ondertussen uitgegroeid tot een volwassen technologie voor het bouwen van Rich Internet-applicaties.

Doordat volledig in Java kan worden ontwikkeld, is er geen noodzaak om zelf HTML en Javascript-functies te bouwen. Dit versnelt de bouwtijd aanzienlijk. Vanwege de rijke bibliotheek met vele componenten kun je Vaadin zeer goed inzetten om snel een prototype te bouwen. Vervolgens kun je dit prototype verder uitbouwen tot een volwaardige applicatie, waarbij hergebruik van reeds gedefinieerde componenten een absoluut voordeel is.

Door de beschikbaarheid van goede documentatie, uitgebreide voorbeelden, een zeer actief forum en de mogelijkheden tot het volgen van cursussen/trainingen door Vaadin in diverse landen, is er meer dan voldoende ondersteuning om bij complexere vraagstukken een oplossing te vinden.

Omdat er continue wordt gewerkt aan het toevoegen van nieuwe functionaliteit en het oplossen van eventuele bugs, worden door Vaadin de nieuwere features in browsers steeds beter ondersteund. Vooral de multi-browser support maakt Vaadin interessant, wanneer je niet van tevoren weet welke browser door bezoekers van de site worden gebruikt.

Wie Vaadin naar aanleiding van het bovenstaande graag wil uitproberen, kan het beste het ‘Book of Vaadin’ downloaden, waarin stap voor stap wordt uitgelegd hoe je een applicatie dient op te zetten.

Referenties:

vaadin.com/home

demo.vaadin.com/sampler/

vaadin.com/book

vaadin.com/directory

vaadin.com/pro-tools

demo.vaadin.com/chameleon-editor