Greenfield

Hoewel het fijn kan zijn om te kiezen voor de technieken die je bekend zijn, is het niet verkeerd om soms een project compleet blanco te starten. Uiteraard is het eenvoudiger om te kiezen voor de gebaande paden maar daarmee is het niet gezegd dat de gekozen weg de beste oplossing oplevert. En het leveren van de beste oplossing is toch waarvoor wij iedere dag weer onze bed uitkomen.

Voor een nieuw project dat we mochten gaan uitvoeren voor één van onze vaste klanten, hebben we dus bewust de gebaande paden links laten liggen. In Sprint 0 van de realisatie van het E-commerce platform zijn we daarom gaan kijken naar een andere aanpak die zich beter leent voor dit project. Belangrijk hierbij was onder andere dat we konden inhaken op de bestaande database en bovenaan de eisenlijst stond de performance van de applicatie.

Het afwijken van gebaande paden hoeft niet perse in te houden dat we niets gebruiken van de kennis die we reeds in huis hebben. Applicaties worden tegenwoordig steeds meer samengesteld uit losse onderdelen. We kunnen daarbij ook nieuwe combinaties van frameworks maken. We hebben er in dit project dan ook voor gekozen om de backend met Spring Boot te ontwikkelen. Een framework waar we eerder mee hebben gewerkt en wat flexibel en erg makkelijk uitbreidbaar is door middel van standaard modules. Uiteindelijk is het Spring en daar hebben we hier allemaal ervaring mee. Neem maar eens een kijkje op de startpagina, binnen minuten heb je een draaiende applicatie. Die overigens nog niets doet ;-)

Om de gebruiker niet op te zadelen met een platte HTML pagina moet er uiteraard ook nog een ‘voorkant’ worden gemaakt. Matt Raible, een van de favorieten van Devoxx 2015, gaf een mooi voorzetje met zijn talk over 'hot javascript frameworks' die hij op SpringOne 2GX heeft gegeven. Dit was een mooi startpunt.

Gebaseerd op deze presentatie hebben we een aantal frontend frameworks beoordeeld op geschiktheid voor het project, waaronder: EmberJS, AngularJS, Angular2 en ReactJS. Één voor één hebben we deze frameworks onder de loep genomen, met als bevindingen:

  • EmberJS was niet flexibel genoeg qua integratie en hield erg vast aan een eigen manier, waardoor alles op de 'ember' manier moest;
  • AngularJS loopt door de introductie van Angular2 toch een beetje richting EOL;
  • ReactJS is mooi, maar voor dit project niet echt het volledige applicatie framework waar we naar op zoek zijn.

Angular2 voldeed wel aan de eisen voor dit project. En het gebruik van Typescript kunnen wij als Java developers ook wel waarderen.

Op basis van ons onderzoek leek Angular2 dus de juiste keuze om als frontend framework ingezet te worden bij de realisatie van het platform. Tijdens sprint 0 was Angular2 alleen nog niet gereleased, Beta 12 was net uit. Het leek erop dat een final versie of een productie waardige Release Candidate er binnen korte tijd wel zou moeten zijn.

Vervolgens stonden we voor de volgende uitdaging: het verzorgen van een single page applicatie in Spring Boot. Er zijn honderden AngularJS voorbeelden in combinatie met Spring Boot, maar niet één op basis van Angular2. De meeste 'getting started' guides van Angular2 gaan uit van een volledige Javascript aanpak met bijvoorbeeld een Node.JS backend. Ook heel gaaf, maar dit ligt niet geheel binnen onze comfortzone. Ondanks het gebrek aan bruikbare voorbeelden hebben we uiteindelijk gekozen voor één template die matcht op alle requests die niet specifiek gemapt zijn als REST endpoint. Deze template bootstrapt vervolgens de Angular2 applicatie.

Een ding om hierbij rekening te houden is om de Angular2 routing in te stellen op 'HashLocationStrategy'. Dan zal de routering tussen componenten client side plaatsvinden. Anders wordt voor elke link de template van hiervoor opnieuw geladen (en de applicatie herstart).

In voorgaande projecten hebben we met behulp van Gulp.js scripts en styles kunnen compileren en inpakken. Dat werkt op basis van file change detection. Dat hebben we nu ook ingezet en werkt als een zonnetje:

[15:23:02] Starting 'watch-js'...
Event type: changed
[15:23:06] Starting 'copy:assets-only'...
[15:23:06] Finished 'copy:assets-only' after 138 ms
[15:23:06] Starting 'compile-ts-files'...
[15:23:11] Finished 'compile-ts-files' after 5 s

Gulp zorgt er in ons nieuwe project voor dat de Typescript sources worden gecompileerd (naar Javascript) en op de juiste plek worden neergezet, zodat ze door Spring Boot als static resources kunnen worden geserveerd. Het leuke van Gulp is dat deze er ook gelijk source maps bij zet en ditzelfde kunstje ook voor Sass ondersteunt.

Een klein deel van het E-commerce platform is ook beschikbaar voor niet ingelogde gebruikers. Om de applicatie om te laten gaan met wel en niet ingelogde gebruikers hebben we gebruik gemaakt van een 'PreAuthenticationStrategy' in Spring die ervoor zorgt dat je in ieder RequestMapping een '@AuthenticationPrincipal' geannoteerde parameter kunt gebruiken. Indien iemand is ingelogd, zal deze gevuld zijn met het gebruikersobject wat de PreAuthenticationStrategy heeft klaargezet. Handig!

Door deze flexibele aanpak is integratie met de CMS pagina's (die op een andere applicatieserver draaien) ook mogelijk. Tegenwoordig worden dat soort Cross-Site requests erg strict gevalideerd in de browser en zal eerst een 'handshake' moeten plaatsvinden. Spring biedt ook daar mogelijkheden voor: uiteindelijk is het toevoegen van een @CrossOrigin annotatie op de RequestMapping voldoende om dit werkend te krijgen.

Dat was grotendeels de 'plumbing' van de backend. Maar hoe werkt het in de praktijk met Angular2? Nou, best goed! Het voelt ondanks dat er met beta’s en release candidates is gewerkt, erg volwassen aan. IntelliJ bood voor de beta's al integratie en code completion. De uitdaging ligt hem tot nu in de Release Candidates. We hadden verwacht dat die alleen maar non-breaking fixes of nieuwe functionaliteit zouden bevatten. De realiteit is helaas anders: sommige van de nieuwe RC versies leken meer op een major version upgrade. Gelukkig is Angular2 inmiddels gereleased en beloven ze stabiele updates.

Inmiddels is het project vergevorderd en staat de release van het project gepland. Ondanks wat opstartproblemen en grote Release Candidate wijzigingen zijn we meer dan tevreden met de gekozen opzet. De performance is prima en wat een verademing om op deze manier component based, reactive applicaties te kunnen ontwikkelen.

Niet helemaal gevonden wat je zocht?

Geen probleem, waarschijnlijk hebben wij wel gewoon een antwoord voor je. Om het makkelijk voor je te maken
bellen wij je gewoon terug. Laat hier je gegevens achter en nemen zo snel als mogelijk contact met je op.