Codekraker 11: Jelmer Duzijn - Werkenbijtopicus
naar topicus.nl
naar topicus.nl
Codekraker 11: Jelmer Duzijn

Codekraker 11: Jelmer Duzijn

‘Deze webtechniek is perfect om gefaseerd je front-end te vernieuwen.’

Geleidelijke vernieuwing van je front-end met Web Components

Vroeg of laat is een applicatie aan vernieuwing toe. Een eenvoudige app kun je gemakkelijk in één keer overzetten met naar nieuwe front-end techniek. Bij een webapplicatie van 10 jaar oud met veel functionaliteiten is dat een ander verhaal. Als je hier vernieuwing aan wilt doen, dan doe je dit liever gefaseerd. Realiseer deze geleidelijke vernieuwing van je front-end door het toepassen van Web Components. Web Components is een webstandaard en wordt dus goed ondersteund door alle grote webbrowsers, al dan niet met polyfills. Voor de transitie van de WebForms naar Web Components gebruik ik Angular in combinatie met Angular elements, om zo de Angular applicatie te bundelen tot een Web Component en het (her)bruikbaar te maken in de pagina’s die nog in WebForms zijn.

De oude webapplicatie was vooral opgebouwd met CRUD schermen (die rechtstreeks mappen op de database) waardoor het bouwen van nieuwe scherminteracties soms erg ouderwets voelde. Web Components bieden de mogelijkheid om kleinere interacties uit te werken. Deze interacties bestaan uit nieuwe taakgerichte schermen ondersteund met functionele WebAPI’s, die gericht zijn op een specifieke set handelingen. Mijn verwachting is dat deze WebAPI’s een veel langere houdbaarheid hebben dan de front-end techniek die ik nu toepas. Je trekt namelijk de verantwoordelijkheden uit elkaar. Waar voorheen de voorkant en logica aan elkaar vastgelijmd zaten, is het nu mogelijk om deze als twee losse concerns te behandelen.

Ga je voor een big bang overgang van oud naar een nieuw, dan werk je jezelf eigenlijk in de nesten. Je moet dan in één keer veel standaard problemen aanpakken, zoals authenticatie en autorisatie, inlogschermen, laadschermen, pop-ups. Door voor Web Components te kiezen in de overgang, kun je meeliften op deze reeds gebouwde functionaliteit en hoef je alleen de nieuwe onderdelen te bouwen. Voordeel: focus op de meeste value, in plaats van technical debt en je kan de Web Components ook nog eens hergebruiken in een nieuwe applicatie. Een ander belangrijk voordeel is dat je ook een grotere testdekking van de software kunt realiseren. Door de scheiding die is gerealiseerd met Web Components kun je de achterkant van de applicatie – waar jaren in is geïnvesteerd – op een extra niveau testen, en aan de voorkant een mock-implementatie van de WebAPI gebruiken om de schermfunctionaliteit te testen. Ga voor vernieuwing in kleine(re) stapjes met meer functionaliteiten en gemak, in plaats van met grote stappen snel thuis te zijn.

In de afbeelding zie je hoe ik Web Components in onze applicatie heb toegepast. Het Web Component wordt op de (oude) WebForms pagina ingeladen en haalt via de WebAPI zijn data op. De WebAPI staat los van de rest van de applicatie waardoor je dus eventueel ook de backend zou kunnen vervangen. Omdat de WebForms pagina soms moet weten dat er iets gewijzigd is heb ik generieke Events geïmplementeerd (middels de CustomEvent API). Hierdoor weet de onderliggende WebForms pagina dat er via het Web Component bijvoorbeeld data is opgeslagen (Finished).

Benieuwd naar andere codekrakers? Lees de tips van NickDennisFrankRamonJeroenLisette en SallyJim, Rhodé of Marco.