TechNight: Voeg een beetje 'static type checking' toe aan een wereld van Web Components

  • 11/02/2019
  • 2 minuten leestijd

TechNight: Voeg een beetje 'static type checking' toe aan een wereld van Web Components

Jordy Moos, Senior software engineer bij ING, laat ons zien waarom WebComponents met ELM een toekomstvaste frontend oplossing zijn.

Wat zijn Web Components en waarom zijn ze zo cool? Voordat we in deze materie duiken krijgen we een waarschuwing vooraf: we gaan vanavond ongezouten meningen horen. En er gaan ook lelijke dingen gezegd worden over veel gebruikte programmeertalen. Maar het is voor een goed doel, we willen toewerken naar een betere wereld.

Web components zijn web platform APIs die het mogelijk maken om HTML elementen met encapsulation in herbruikbare componenten te modelleren. De APIs maken gebruik van Custom Elements, waarmee je je eigen HTML elementen kunt definiëren, van een Shadow DOM, waarmee je jouw specifieke HTML/CSS kunt isoleren van de globale definities en HTML templates, waarmee je herbruikbare stukjes HTML kunt definiëren. Inladen van HTML imports wordt met behulp van ES Modules gedaan. Web components worden ondersteund door chrome, opera, safari, firefox en edge (met wat trucjes, edge loopt nog een beetje achter). Maar belangrijker dan dit is het om te beseffen dat web components een web standaard is.

In een stukje live coding wordt duidelijk hoe web componenten eruit zien en hoe je hier in de praktijk mee werkt. We zien het goede van web components, hoe attributen gebruikt worden om data te verzamelen en hoe events gebruikt worden om die kennis te delen. We zien het lelijke van web components, als we proberen alles in componenten te stoppen. Dit wordt wel zo gepromoot door Google, maar is geen goed idee. En we zien het slechte, als we in een quiz geconfronteerd worden met de akelige kanten van de meest gebruikte frontend taal: Javascript. Er volgt een reeks voorbeelden van de soms bizarre en weinig intuitive manier waarop onze code wordt geïnterpreteerd.

En dat is waar ELM ten tonele verschijnt. ELM is een puur functionele, statisch getypeerde en sterk getypeerde taal die makkelijk is in het gebruik en een goede performance en robuustheid heeft. Het wordt net als typescript getranspiled naar Javascript en het belooft dat je geen runtime errors meer zult krijgen. Er volgt geen quiz, want dat zou saai zijn: ELM interpreteert onze code op een intuitive manier. In een live coding session krijgen we een voorbeeld te zien van web components gebouwd met ELM en eerlijk is eerlijk: het ziet er smooth uit. We zien de code van de eerdere quiz https://github.com/JordyMoos/elm-quiz en we zien dat er inderdaad een compile error volgt als we een nieuwe button maar half implementeren.

De boodschap waarmee we naar huis gestuurd worden is:

  1. Klamp je niet vast aan een framework, want die gaan niet zo lang mee
  2. Web Standaarden hebben een langere levensduur, dus stap over op Web Components
  3. Scheid logic en view, schrijf de logic in ELM en stop de views in Web Components