Fronteers — vakvereniging voor front-end developers

Mastering Web Components met Danny Moerkerke

Met Web Components kun je met alleen standaard HTML, CSS en JavaScript herbruikbare frontend componenten bouwen die in alle moderne browsers werken, zonder framework.
Hierdoor kun je HTML zelf uitbreiden met je eigen HTML tags (componenten) die net zo werken als de al bestaande tags en dus door iedereen gebruikt kunnen worden.

Frameworks komen en gaan en veranderen snel, maar omdat Web Components gestandaardiseerd zijn is er geen risico dat deze opeens zullen veranderen of verdwijnen.
Om met Web Components herbruikbare componenten te bouwen hoef je dus niet een compleet nieuw framework te leren met alle tooling en plugins die er omheen hangen.

Goede kennis van HTML, CSS en JavaScript is voldoende om Web Components in één dag onder de knie te krijgen.

In het eerste deel van deze workshop leer je:

  • wat Web Components zijn
  • wat de voordelen van Web Components zijn
  • uit welke specificaties Web Components bestaan
  • hoe je HTML kunt uitbreiden met je eigen tags
  • hoe je bestaande HTML tags kunt extenden
  • hoe je de interne structuur van componenten kunt verbergen met Shadow DOM
  • hoe je user-defined HTML kunt opnemen in je componenten
  • hoe Web Components CSS drastisch kunnen versimpelen
  • de lifecycle van Web Components
  • het testen en debuggen van Web Components

In het tweede deel van de workshop gaan we het geleerde in de praktijk brengen door samen een Web Component te bouwen waarin alle geleerde aspecten terugkomen.

Na het volgen van deze workshop heb je de benodigde kennis en een stuk ervaring om Web Components succesvol in productie te gebruiken.

Voor de workshop is vereist:

  • kennis van HTML5, CSS3 en JavaScript (ES2015+)
  • basiskennis van werken met DOM in JavaScript
  • laptop met Node.js (versie 8+), npm en git
  • IDE (VS Code, Webstorm, IntelliJ, Sublime Text etc.)

Over Danny Moerkerke

Danny Moerkerke is freelance JavaScript en TypeScript engineer, auteur en spreker. Hij heeft gewerkt voor o.a. Overstappen.nl, Endouble, Peerwith en ING Bank.
Hij schrijft artikelen op Medium.com, spreekt op Meetups en ontwikkeld cursussen voor educative.io
Daarnaast werkt hij aan open-source projecten met de focus op Web Components en Progressive Web Apps.

Je kunt hem volgen via zijn website www.dannymoerkerke.com Twitter @dannymoerkerke, LinkedIn en GitHub

Opgave

Voor deze workshop is nog geen (nieuwe) datum gepland. Mocht je geïnteresseerd zijn in de workshop, hou dan het overzicht in de gaten of blijf op de hoogte via RSS en Twitter.