Front-end development bij Nederlandse FinTech-reus: migratie van Polymer naar LIT

Front-end development: migratie van Polymer naar LIT

Gepubliceerd: Categorie: Java & Web

Qualogy helpt het grootste FinTech-bedrijf van Nederland met de migratie van Polymer naar LIT. Een van de strategische programma’s van de bank heeft als doel om een wereldwijd schaalbaar bankplatform aan te bieden. Door het vereenvoudigen en standaardiseren van banktoepassingen. Met een modulair opgebouwd systeem. Web Components (LIT) sluit naadloos aan op deze strategie. We spraken met onze Front-end Consultant.

“Qualogy en de bank zijn geen onbekenden. Er wordt al jaren samengewerkt op het gebied van backend- en fullstack development (Oracle, Java en Angular). De migratie van Polymer naar LIT is het begin van een goede samenwerking op het vlak van front-end development bij de bank.”

Web components als oplossing voor legacy en framework-afhankelijkheid

“Als developer weet je wat het is om met legacy-code te werken. Het voelt alsof je in een doolhof staat en de weg steeds verder kwijtraakt. Met verwarrende structuren, gedateerde patronen en een gebrek aan documentatie. Front-end frameworks React, Angular en Vue – of specifieke versies – gaan ooit ook tot de legacy-klasse behoren. Bij mijn opdrachtgever zagen ze al vroeg in dat web components (LIT) legacy en framework-afhankelijkheid kunnen voorkomen.”

Van Polymer naar LIT

“Polymer en LIT zijn door Google ontwikkelde open source JavaScript-bibliotheken. Polymer draait om het maken van nieuwe HTML-elementen die herbruikbaar zijn in te zetten in je applicatie. Zonder dat de inhoud van de componenten invloed heeft op de elementen buiten het component. Anders gezegd: Polymer is gebouwd met het idee dat het benutten van ‘native’-technologieën van de browser voorgaan op het gebruik van steeds complexere JavaScript-bibliotheken.

Polymer is nooit zo populair geworden als andere frameworks, zoals Angular en React. Google realiseerde zich dat sommige functies van Polymer de oorzaak waren van gecompliceerde code in veel webapplicaties. In 2018 zijn ze daarom gestopt met het doorontwikkelen van Polymer. Ze creëerden gewoon een nieuwe bibliotheek: LIT.

Bijna alle principes van Polymer vind je terug in LIT. Beide bibliotheken bouwen voort op de web components-standaarden van moderne browsers. Maar open een LIT-component en je ziet al snel de verschillen. Zo bouw je custom Elements in LIT met JavaScript-classes in plaats van losse HTML-templates en scripts. Alle onderdelen van het component bouw je in JavaScript: template, logica en styling. Daarnaast biedt LIT reactieve eigenschappen. Veranderen eigenschappen van een component, dan wordt het component opnieuw gerenderd op de pagina.

LIT heeft duidelijk inspiratie gehaald uit de grotere JavaScript-frameworks, zoals React, Angular en Vue. Developers met ervaring in React zullen snel de architectuur, stijl, functionaliteit en syntax herkennen. Er bestaat zelfs een third-party uitbreiding op LIT om de "hooks api" van React na te bootsen (Haunted).”

Voordelen van LIT

“LIT heeft veel voordelen ten opzichte van Polymer. De belangrijkste voordelen zijn:

  • Snelheid: door onder meer het formaat van de bibliotheek en de architectuur van features laden LIT-componenten sneller dan Polymer.
  • Developer experience: ontwikkelen in LIT doe je voornamelijk in JavaScript. Dus geen obscure en onduidelijke syntax meer, zoals ‘Helper elements: dom-repeat, dom-if’.
  • Support: Google is gestopt met het doorontwikkelen van Polymer.
  • Deelbaarheid van componenten: in Polymer waren parent- en child-componenten van elkaar afhankelijk, door ‘two way binding’. Componenten zijn hierdoor minder deelbaar. In LIT is dit niet het geval.”

Migratie van Polymer naar LIT

“Polymer- en LIT-componenten zijn in de basis gewoon web components. Daarom kunnen ze prima in dezelfde applicatie worden gebruikt (zelfs in andere frameworks). Het vereist alleen een paar aanpassingen in de configuratie van je ontwikkeltools (zoals Webpack of Rollup). Bij de migratie van Polymer naar LIT bij mijn klant is dan ook gekozen om de applicatie pagina voor pagina te migreren naar LIT. In plaats van een ‘big bang release’, waarbij de applicatie in een keer wordt omgezet naar LIT. Hiermee beperken we de risico’s van de migratie en wordt debuggen van eventuele fouten makkelijker.”

Early adaptor

“Qualogy heeft zich al vroeg gespecialiseerd in LIT-technologie. LIT staat qua adoptie in de markt nog in de kinderschoenen. De technologie begint nu tractie te krijgen. Qualogy staat graag in de voorhoede en blijft de ontwikkelingen continu volgen.”

Meer informatie?

Qualogy heeft veel kennis van en ervaring met LIT en web components. Wij delen deze kennis graag. Neem voor meer informatie contact op met info@qualogy.com of 070 319 5000. Hieronder nog wat meer informatie over web components en LIT:

  • Zelf aan de slag met LIT en web components? open-wc.org is de perfecte plek om te starten. Met ‘battle tested’-standaarden voor het opzetten van een project, vergelijkbaar met de ‘create-react-app’ voor web components.
  • Google heeft recent LIT 2.0 gelanceerd, inclusief een nieuwe website voor documentatie. Alle ins and outs van LIT vind je hier.
  • Meer informatie over de verschillen tussen Polymer en LIT vind je hier.
Team Communication
Over auteur Team Communication

Innovatieve projecten voor mooie klanten, inspirerende interviews met collega’s en het laatste nieuws over behaalde successen. Qualogy zit vol bijzondere verhalen die Team Communication graag deelt met relaties, IT-professionals en sollicitanten.

Meer posts van Team Communication
Reacties
Reactie plaatsen