Goal: An overview about HTML Preprocessor.
Last month, I wrote a few articles about HTML, from basic stuff until bundler such as webpack, roller, and parcel. The big gap is the template engine aka HTML preprocessor. So I decide to make an article series dedicated to HTML preprocessor.
Template Engine in
MVC context is the view parts.
This means, frontend can alter views without messing with backend.
templating engine is also a fundamental part of learning backend.
I choose the term
because the word
template might refer to somethine else,
Which Template ?
My aim is to give ready to use examples.
We have to pick what example to provide. There are so many template, There is no use to cover them all.
I start with easy to use JS based template engine. They are Pug, Nunjucks, EJS, Handlebars. And test each with Grunt, Express, and Oak.
Then I might continue with other stuff as well, such as Jinja2, Twig, Blade, and else. I learn those things a decade ago, and I need to refresh my youth memories, for use with the nowadays era of modern web development. In short, update my personal knowledge.
For you who haven’t got any idea what template is, you can have a look at these express examples below:
Step By Step.
I arrange this article series as below:
Fundamental Stuff: Issue with HTML.
Render Static HTML Using Grunt: Pug, Nunjucks, EJS, Handlebars
Server Side Express and Koa (NodeJS): Pug, Nunjucks, EJS, Handlebars
Static Site Generator: Eleventy+Nunjucks, Pelican+Jinja, Jekyll+Liquid
I’m not sure
I consider to continue, if I could have time.
- Server Side Oak (DenoTS): : (maybe) Pug, Nunjucks, EJS, Handlebars
After above stuff, I will consider continue to Non JS Web Framework:
a. PHP Symfony: Twig
b. PHP Laravel: Blade
c. Flask: Jinja2
d. Ruby on Rails: Not known yet
e. Java Spring: Not known yet
You can obtain source examples here:
Before we begin, we need a HTML case. A basic example, that will be used, as a based of all template engine, throughout this article series
Consider continue reading [ Template - HTML - Example Case ].