Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Advertorial

Door Tweakers Partners

Back to basics met web components bij ING

20-08-2019 • 08:00

23 Linkedin Google+

Als grootste bank van Nederland hecht ING aan klantvriendelijke applicaties. Daarbij schroomt zij niet om te kiezen voor bleeding edge-technologie. Een voorbeeld is het gebruik van web components, onder meer voor de Mijn ING-omgeving. Hiermee kan de bank snel schalen en nieuwe functies toevoegen.

ING Live-webinar

Bij ING staat digitalisering om klantprocessen beter te maken centraal in de bedrijfsvoering. Daarbij wil de bank niet alleen vandaag leidend zijn, maar ook morgen. Dit uit zich onder meer in de keuze voor web components bij het ontwikkelen van de Mijn ING-omgeving en het uitfaseren van grote frameworks, zoals Angular. Web components zijn een verzameling low-level standaarden die in de recentste versies van veelgebruikte browsers als Chrome en Firefox al zijn ingebouwd.

Frameworks de deur uit

De keuze voor web components wil niet zeggen dat de bank helemaal geen gebruik meer maakt van frameworks. Wel dat het deze grotendeels uitfaseert en niet meer vol instapt in een framework. “Dat zou inhouden dat je de roadmap ervan moet volgen, waardoor we minder snel kunnen inspelen op de veranderende markt”, zegt Bob Bijvoet, technology lead voor ING's front-end in Nederland en België. In deze landen is hij verantwoordelijk voor de strategische richting en adoptie van webtechnologie, waaronder de keuze voor libraries en het in- en uitfaseren van technologie.

ING heeft de keuze voor web components overigens niet in Nederland gemaakt. Wereldwijd vormen lokale teams van de bank een virtueel developerteam waarin ervaringen worden gedeeld. Door goede lokale ervaringen met web components werd drie jaar geleden besloten om deze wereldwijd te gaan gebruiken, wat grote voordelen oplevert. Bob: “Wij hebben vooral gekeken naar hoe wij front-endcode tussen de verschillende teams, verspreid over de wereld, konden gaan delen. Daarbij gaat het vooral over de UI-componenten, zoals buttons, datepickers en menu's: basisbouwstenen die je niet in ieder land opnieuw hoeft uit te vinden, maar die je als standaard kunt hergebruiken. Daardoor kunnen wij heel snel ontwikkelen.

Web zoals web bedoeld is

Web components maken het ontwikkelproces een stuk efficiënter, zegt ook Lars den Bakker. Als softwaredeveloper is hij verantwoordelijk voor het ontwikkelen en onderhouden van de Mijn ING-webapplicatie. Een uitdaging brengt het ook met zich mee, doordat verschillende teams, de zogeheten feature teams, autonoom onderdelen bouwen voor deze omgeving. Daarbij zijn ze end-to-end verantwoordelijk voor bepaalde functionaliteit. “Voorbeelden van dergelijke functionaliteit zijn het beheer van incasso’s en het regelen van een overschrijving door de gebruiker. Met mijn team help ik onze feature teams met het integreren van hun code.”

De gemaakte afspraken met de feature teams binnen ING zijn helder; zij bouwen zelf een web component en integreren deze met de webapplicatie. Dat is de enige manier waarop de applicatie met de feature communiceert; de applicatie houdt zich verder niet bezig met wat zich binnen de feature afspeelt. Doordat de webapplicatie hiervoor geen extra zaken zoals JavaScript hoeft te laden, laadt ze niet alleen sneller, maar is ze ook beter toegankelijk met bijvoorbeeld de screenreadertechnologie die door veel slechtzienden wordt gebruikt. “Het is web zoals web bedoeld is. Eigenlijk is het weer een beetje zoals in de begindagen van internet: zonder allerlei extra elementen en daardoor heel robuust.”

Size does matter

Toch is het niet zo dat web components frameworks een-op-een kunnen vervangen. “Het is low-level technologie; werken met alleen web components is niet heel ergonomisch”, zegt Bob. “Je moet er libraries bij gebruiken die onder water de web components api gebruiken, als extra abstractielaag." Waar nodig schrijft ING deze libraries deels zelf, maar het liefst kijkt de bank naar libraries die al beschikbaar zijn. Voorwaarde is wel dat ze goed onderhouden zijn door een actieve community op GitHub. Bovendien mogen ze niet te groot zijn. “Snelheid is voor ons heel belangrijk. Want hoe groter de library, hoe langer de laadtijden. Ook op een mobieltje met een slechte internetverbinding moet onze applicatie snel zijn.”

In de developercommunity woedt op dit moment nog een discussie over het gebruik van web components. Nuancering is hier wel op zijn plaats, vindt Lars. “Er ontbreekt nog functionaliteit die in veel frameworks al wel aanwezig is, dat is waar. Over het geheel bekeken zien we echter voornamelijk voordelen, vooral op het gebied van flexibiliteit en onderhoud.” Het verschil tussen een library en een framework is trouwens ook een wat grijs gebied, voegt Bob toe. Een praktisch onderscheid is dat libraries modulair zijn en daardoor sneller te vervangen dan een volledig framework. “Dat is een belangrijk voordeel, want nieuwe standaarden ontwikkelen zich zo snel dat je daar met een framework onmogelijk snel op kunt reageren. Met libraries kan dat wel en is het gewoon pick and choose.”

Minder tooling nodig

Voor de schaal waarop ING (wereldwijd) ontwikkelt en met het oog op de waarde voor de eindgebruiker is de keuze voor web components ideaal gebleken. Niet elke organisatie hoeft op dezelfde keuze uit te komen, stelt Bob. “Op de arbeidsmarkt zijn veel goede developers te vinden met ervaring in Angular en React; dat kan ook een overweging zijn voor bedrijven. Voor ons is het belangrijk dat we snel kunnen ontwikkelen en dat we ons ook comfortabel voelen bij onze manier van werken. Wij merken ook dat onze developers tevreden zijn met de keuze voor web components. Ook zij zien dat het een oplossing kan zijn voor een al langer spelend probleem binnen webdevelopment: de enorme hoeveelheid tooling. Door te ontwikkelen met browserstandaarden laten we zien dat je al die overhead helemaal niet meer nodig hebt. We gaan dus eigenlijk back to basics.

Aanmelden

Meer weten over het gebruik van web components door ING? Op donderdag 5 september, van 20.00 tot ongeveer 21.00 uur, geven Bob en Lars een Engelstalig webinar waarin ze je meenemen in hun developmentworkflow en de webarchitectuur binnen ING. Zij laten onder meer zien hoe ING front-endfeatures internationaal kan schalen en configureren, iets wat zij ook in de live coding gaan demonstreren.

Meld je aan

Je gegevens
De gegevens van de aanmeldingen worden niet met Tweakers gedeeld, maar komen alleen ter beschikking van Crowdale om de deelnemers een e-mail te kunnen sturen met een bevestiging van hun aanmelding, een reminder-e-mail over de webinar en een e-mail wanneer de live webinar van start gaat. Na de webinar wordt een anonieme enquête verstuurd om jullie bevindingen te horen, en zo de kwaliteit van de webinar te kunnen waarborgen en verbeteren. De gegevens worden dertig dagen bewaard.

Dit artikel is geen redactioneel artikel, maar een advertorial. Mocht je ideeën met ons willen delen over deze vorm van adverteren, dan horen wij dat graag. Hierover kun je met ons in gesprek via [Discussie] Reclame algemeen, daar zullen collega's aanwezig zijn om jouw vragen en/of opmerkingen te bespreken/beantwoorden.

Reacties (23)

Wijzig sortering
Voorwaarde is wel dat ze goed onderhouden zijn door een actieve community op GitHub. Bovendien mogen ze niet te groot zijn. “Snelheid is voor ons heel belangrijk. Want hoe groter de library, hoe langer de laadtijden. Ook op een mobieltje met een slechte internetverbinding moet onze applicatie snel zijn.”
Mag hopen dat dat ook is omdat elke library versie geaudit moet worden, security wise ?
Ik werk voor ING en kan het volgende zeggen, alle applicaties worden periodiek door ons geauditeerd en gepentest. Daarna zijn wij vanzelfsprekend als medewerker ook verplicht om alle audit punten/kwetsbaarheden op te lossen. De leverancier wordt hier bij betrokken of we lossen het helemaal zelf op en geven dit weer terug.
Dus jullie doen ook pull requests terug naar de community. Dat is het mooie van OSS. :)

[Reactie gewijzigd door NotCYF op 20 augustus 2019 13:36]

Grappig.
Hier was ik jaren geleden mee bezig bij ING.
Alleen destijds, had ik er geen interesse in, aangezien ik niks deed kwa programmeren, of iets kwa server beheer e.d.
Het enige wat ik deed was developers, de server hosting partij, en een link zijn van alle werknemers die tooling nodig had bij ING, en deze tooling die normaal gesproken werken in een Excel of een Access of een Word van MS, naar een website versie om te laten zetten.
Mooi om te zien dat er na jaren eindelijk wat gebeurd.

Om even een hint te geven hoe lang dit geduurd kan hebben, ik heb in 2010 voor ze gewerkt, dus iets van 9 jaar.... ? Damn..

[Edit]
Mensen op tweakers zijn raar, een on-topic post "offtopic" markeren... Rare mensen...

[Reactie gewijzigd door Power2All op 20 augustus 2019 17:06]

Lijkt me niet dat je jaren geleden al met web components bezig was. Zo lang bestaat de techniek niet eens. Web components daadwerkelijk in produktie inzetten is iets wat eigenlijk pas 2 jaar serieus genomen wordt, en dan nog is het erg vooruitstrevend.
Wat heeft de techniek ermee te maken...
Serieus, weet je wel hoe een bank de IT zag in het verleden ?
IT kreeg in het verleden vet onder betaald, totdat ze het nut zagen.
Ik heb het hier over toolings die medewerkers gebruikte....
Die moesten uiteindelijk omgezet gaan worden naar web componenten...

[Reactie gewijzigd door Power2All op 20 augustus 2019 17:06]

"Wat heeft de techniek ermee te maken...?"

Nou, alles...want web components zijn een techniek?

"Serieus, weet je wel hoe een bank de IT zag in het verleden ? Ik heb het hier over toolings die medewerkers gebruikte...."

Who cares? Daar gaat dit artikel helemaal niet over?

"Die moesten uiteindelijk omgezet gaan worden naar web componenten... "

Omzetten naar web en web componenten zijn 2 verschillende dingen. Omzetten naar web gebeurd al 20 jaar. Web componenten niet, dat is een splinternieuwe techniek.
"Nou, alles...want web components zijn een techniek?"
De techniek voor het inserten van web components gebeurde al jaren geleden, met hulp van o.a. ook iframes. Mijn reactie ging niet om het feit dat het om techniek ging, maar dat ING destijds in 2010 actief mensen zocht om die "techniek" te gaan toepassen...

"Who cares? Daar gaat dit artikel helemaal niet over?"
Zucht, jawel, het gaat namelijk om die toolings die medewerkers gebruikte, om te zetten naar web componenten, zodat ze op de ING website en andere locaties makkelijk toegepast worden, zonder hakkie takkie programmeerwerk in VB voor Excel o.i.d.

"Omzetten naar web en web componenten zijn 2 verschillende dingen. Omzetten naar web gebeurd al 20 jaar. Web componenten niet, dat is een splinternieuwe techniek."
Je hebt wel goed gelezen wat ik heb gezegd he ? Het gaat wel degelijk omtrent de VB tools die medewerkers gebruiken, om te zetten naar veilige en bruikbare toolings als Web Components. Maar goed, begrijp dat ik niet goed overkom zo te zien.
Je haalt een concept en een techniek door elkaar. Je zou een iframe ook een soort van conceptueel web component kunnen noemen, alszijnde een onafhankelijk en herbruikbaar iets.

Er is echter ook een techniek genaamd "web components":
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Nog specifieker:
- Custom elements
- Shadow DOM
- HTML Templates

DAT is het onderwerp van dit artikel. Het is ook te zien in dat enorme plaatje wat een custom element laat zien. Niets van dit gebruikte jij jaren terug, want het bestond nog niet.
Bekijk je eigen linkje eens, daar staat dat Polymer al in 2013 gereleased is. Polymer is ook gebacked door Google, op zich een redelijk grote naam in de industrie. Daarnaast denk ik niet dat je toevallig de siamese tweeling van Power2all bent en het dus een beetje raar is om te ontkennen dat hij daar al jaren geleden mee bezig was. Als hij zegt dat hij er jaren geleden al mee bezig was, wie ben jij om dat te ontkennen?

edit: ahh... ik reageerde op oude meuk 8)7

[Reactie gewijzigd door bloq op 1 september 2019 16:00]

De ING heeft naar mijn weten de afgelopen 5-7 jaar HEEL fors ingezet op IT. Ik geloof dat ze op een gegeven moment een team van 150-200 man hebben ingehuurd en met Agile werkwijze aan de gang hebben gezet. Hier zijn o.a. de app en nieuwe website uit voortgekomen. Ze liepen destijds wat achter, maar nu redelijk vooraan. De investering heeft zijn nut bewezen.
Klinkt goed, maar moesten ze wel.
Rond de tijd dat ik er ging werken, waren ze al bezig met in de lift te zetten van een boel systemen.
Maar ja, ik noem maar een Japanse bank in Amsterdam waar ik ook voor gewerkt had, werkte toen ook nog met de AS/400, wat een werk was me dat... pfft..

Maar goed, goed om te horen dat alles nu vooruit gaat.
en hint te geven hoe lang dit geduurd kan hebben, ik heb in 2010 voor ze gewerkt, dus iets van 9 jaar.... ? Damn..
Volgens mij heb je je tijdlijn niet helemaal op orde: https://en.wikipedia.org/wiki/Web_Components#History
De initial release van Polymer was zelfs pas in 2015...
Volgens mij lees jij mijn tekst verkeerd...
Er staat hier niks in omtrent waar jij naar refereert...
Het zou top zijn als ze mijn.ing.nl werkend kregen op een toestel met een vreemd/minimaal OS als Kaios (firefoxOS fork) erop... nu kan ik niet mijn bankzaken/saldo checken op mijn mobiel. ookal ben ik natuurlijk wel een heel specifiek geval want wie heeft er tegenwoordig nu geen iOS of Android mobiel.
Tja, als ze 't in PHP gemaakt hadden, zonder al de "vernieuwende dingen" zou 't overal op gewerkt hebben ;)

Maar op jou telefoon kan toch ook een normaal (en volledig) browser (Firefox)?
Werkt het echt niet of geeft het een niet-ondersteund bericht?
Je krijgt een eeuwig durend "een moment..." draaibalkje als je op inloggen klikt.

De site schaalt wel redelijk op 320x240 resolutie dat moet ik ze meegeven.
Dat is het punt.
PHP geeft geen browserondersteuning nodig.

Het is allemaal leuk en aardig, maar zoals de beste man hierboven aangeeft, werkt het niet op zijn device.

Ik zeg niet dat PHP de oplossing of basis is tot alles. En ik moet wel zeggen dat ik deze oplossing (web components) een stuk netter vindt dan react.

Ik snap niet waarom het zo moeilijk is om een JavaScript object een visuele (HTML) representatie te geven en te updaten of scope toe te passen.

[Reactie gewijzigd door FuaZe op 21 augustus 2019 03:16]

Je vergelijkt appels met peren.

PHP is server-side. Webcomponents V1 specificatie is client-side JavaScript.

De reden dat niet altijd alles werkt in browsers komt door het feit dat ze allemaal hun eigen engine gebruiken en zelf bepalen welke implementaties ze ondersteunen.

Wat je eigenlijk wilt zeggen is dat we zo min mogelijk JavaScript client-side moeten gebruiken en voornamelijk alleen HTML.

Dus de hele opmerking dat als het in PHP gemaakt was het dan overal op zou werken klopt voor geen meter.

Daarnaast zijn verscheidene browsers ook niet netjes geweest met de ondersteuning voor HTML5 of CSS3. Dus zelfs met zo weinig mogelijk JavaScript client-side heb je nog steeds kans dat er een browser is waar het niet op werkt. Daarom bestaan er ook dingen zoals Polyfill.
En het personeel moet ondertussen met talloze losse programmaatjes in windows 7 werken...
ING is erg groot dus wellicht is niet iedereen zo ver, maar iedereen moet over naar Windows 10.
Ik kreeg bij mijn onboarding gelijk een Windows 10 laptop.


Om te kunnen reageren moet je ingelogd zijn


Apple iPhone 11 Nintendo Switch Lite LG OLED C9 Google Pixel 4 FIFA 20 Samsung Galaxy S10 Sony PlayStation 5 Raspberry Pi 3

'14 '15 '16 '17 2018

Tweakers vormt samen met Tweakers Elect, Hardware Info, Autotrack, Nationale Vacaturebank, Intermediair en Independer de Persgroep Online Services B.V.
Alle rechten voorbehouden © 1998 - 2019 Hosting door True