ConditionerJS

Simpele situatie

• Herhalend en omslachtig zonder jQuery
• Data-attribuut toevoegen aan element
• Alle elementen zoeken met dat attribuut
• Alle elementen doorlopen
• Functionaliteit toevoegen

Voorbeeld 1

Demo

Voorbeeld 1

• Doet wat het moet doen
• Nieuwe functionaliteit, extra loop
• Conditionele logica
• SPAGHETTI

Voorbeeld 2

Demo

Voorbeeld 2

• DESIGN PATTERN
• Script weet niet wat 'ie uitvoert
• Verder geen loops benodigd
• Ook geen aanroepen van functies
• JavaScript elementen zijn te herkennen in HTML

Wat nu?

• Van globale functies naar eigen componenten
• Herbruikbaarheid
• Configuratie (parameters) nu niet mogelijk
• Geen conditionele logica in de loop

Voorbeeld 3

Demo

Voorbeeld 3

• ConditionerJS
• ES modules met import()
• Conditioner lazyloads module makeitred.js
• Kwestie van bestand met functionaliteit en [data-module]
• Vergelijkbaar met onze manier van werken

Conditioner...

• Modules laden op basis van de user context
• Schermgrootte, locatie, etc.
• Continue monitoring
• Media query monitor is default
• Bijvoorbeeld @visible voor lazy-load (voorbeeld4)
• Snellere laadtijden
• Bepaalde functionaliteiten per user context