-
Notifications
You must be signed in to change notification settings - Fork 3
🏎 Templating Engines
Ik heb al ervaring met React (JSX) en heb in het verleden gewerkt met PHP. Daarom zoek ik een intuïtieve templating engine die zoveel mogelijk lijkt op wat ik al ken. Hiermee verlaag ik m'n leercurve en kan ik sneller iets vets produceren. Ook wil ik een wat populairdere templating engine gebruiken zodat er veel documentatie beschikbaar is op internet en vrijwel alle beginners vragen al gesteld zijn op StackOverflow.
De top 5 Templating Engines zijn:
- Handlebars
- ETA
- EJS
- Mustache
- Marko
Handlebars is gebaseerd op Mustache. Ik ben het eens met Handlebars op het punt dat logica apart van de view moet staan. Naast dat deze enorm populair is lijkt mij dit een goede keus. Het lijkt ook wel een beetje op JSX {{ variable }} wat ik fijn vind. Alleen de logica vind ik onlogisch. {{#each people}}. Heel lelijk. Hopelijk lost een andere populaire Templating Engine dit wel netjes op.
Volgens de website van ETA lijkt ETA erg op EJS maar is het beter in een aantal punten. Voornamelijk compiling en rendering tijd. Dus naast Mustache kan ik ook EJS afstrepen. Aangezien ETA populairder is dan EJS. Ik vind het fijn bij ETA dat je 'gewoon' Javascript kunt schrijven in je view. Zeker een pluspunt!
Hier ben ik eigenlijk direct het meest enthousiast over. Elk HTML bestand is valide Marko, dus dat is echt heel fijn. Verder breid het HTML uit. Dus de leercurve is, vermoed ik, heel klein. Het lijkt ook echt veel op JSX; tenminste, op het eerste gezicht. Ook de progressive rendering is heel cool.
Bij het uitproberen van Marko kwam ik erachter dat je voor Marko een bundler nodig hebt. Nu heb ik wel eens met WebPack gewerkt en een taskmanager als Gulp. Maar heb ik niet veel ervaring met het zelf instellen van een bundler. Zeker niet op de server-side. Leuke uitdaging wel.
Omdat Marko niet werkt zonder een Javascript Bundler ben ik gaan onderzoeken welke bundler het beste is. Uit m'n verleden weet ik dat Webpack echt een hel kan zijn om op te zetten en Marko gebruikt zelf Vite voor het bundelen in haar documentatie. Van Vite heb ik nog niet eerder gehoord, maar de documentatie klinkt veel belovend (nieuw, is gebaseerd op moderne javascript met ES6 modules I.P.V het oplossen van problemen uit het verleden zoals Webpack gedaan heeft).
Toch blijf ik een javascript bundler op de server-side een nogal vreemde vogel vinden. En na veel lezen en uitproberen blijft de logica mij vreemd. Het bundelen voor de browser vind ik logisch. Je verpakt alle gemoduleerde javascript in een net pakketje en verstuurt het naar de browser. Maar het bundelen van Marko om het vervolgens te serveren als statisch bestand vind ik omslachtig.
Alleen wordt het wel vermeld op de Templating Engines pagina van ExpressJS. Dus klaarblijkelijk wordt het dusdanig veel gebruikt als Templating Engine dat het een vermelding waard was.
Uiteindelijk heb ik Marko aan de praat gekregen, maar vind ik de boel zo omslachtig en eigenlijk een beetje overkill voor de opdracht dat ik ervoor gekozen heb om Marko toch niet te gebruiken. EJS vind ik verschrikkelijk lelijk dus ETA en EJS vallen af. Handlebars blijf ik dan toch wel het mooist vinden, dit komt eigenlijk omdat het gebaseerd is op Mustache. Volgens dit in-depth artikel over Mustache vs Handlebars is Mustache beter voor een kleine app zoals deze. Maar het blijft kiezen uit kwaden. Eigenlijk is mijn conclusie uit dit onderzoek dat er geen mooie, intuïtieve templating engine bestaat voor ExpressJS. Laat de voorkant maar aan front-end over 😉 Mustache it is! 🎉