Preface
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.
However templating engine
is also a fundamental part of learning backend.
I choose the term HTML preprocessor
,
because the word template
might refer to somethine else,
such as themes
, or boilerplate
, or example code
.
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.
Comparison
For you who haven’t got any idea what template is, you can have a look at these express examples below:
- Pug
- Nunjucks
- EJS
- Handlebars
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
On Consideration
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
Source Examples
You can obtain source examples here:
What’s Next?
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 ].