This article is the first in a series of three aimed at giving you a comprehensive overview of the possibilities offered by server-side templating languages.
In this series, we will cover:
- What templates are used for and the main templating languages available.
- How to inject data into HTML pages and intelligently manage their layout using template inheritance.
- How to create reusable components with templates to maintain a clean and maintainable server-side architecture.
Without further ado, let’s begin with the first part.
What are templates used for?
When creating a website or application, we generally aim for code that is easy to read, test, and maintain. Centralization and modularity of code are particularly important. Templates can contribute to this in three ways:
- Easily inject data into pages, typically data from a database, computed data, or metadata in the case of SSG (Static Site Generation). This ensures cohesive pages, simplifying debugging and maintenance.
- Centralize page layout and facilitate the creation of new derived layouts.
- Create reusable components, such as breadcrumbs, author profile cards, article summaries, etc.
These needs emerged early in server-side web development with frameworks like PHP, ASP.Net, Python, Ruby, etc. Each of these frameworks introduced a default templating engine.
Templating even made its way to the client side with JSX, introduced by React, though it’s more of a JavaScript transpilation syntax than traditional templating.
Today, structuring web applications into components has become the norm on the client side and is increasingly common on the server side. Frameworks like Blazor, Next.js, Nuxt.js, and Svelte Kit enable server-side rendering (SSR) with a component-based structure to meet the needs of code organization, maintainability, and reusability.
Note
However, we’ll see that some templating languages also allow implementing the concept of components in frameworks that don’t natively support it! This is one of the great strengths of templates!
A simple templating language: Markdown
You may have already created templates without realizing it if you’ve written in Markdown. Markdown is a very simple templating language for creating written documents in formats like HTML, PDF, Word, etc. Here’s a small excerpt of Markdown with headings, lists, and bold text (a handy guide is available here):
### Lists
**Bullet List:**
- item 1
- item 2
- item 3
Note: You can also use a + or * instead of -. The result is the same.
**Numbered List:**
1. item 1
2. item 2
3. item 3
You can use different numbers or leave the number 1 on each line. The editor automatically increments the numbers in the final output.
### Hyperlinks and images
Link to another site: [Markdown Guide](https://www.markdownguide.org/)
Embed an image file:  To transform Markdown into HTML, you don’t need a complex web framework—a parser is enough. Note-taking apps like Obsidian and Typora (my favorites), for example, include a Markdown parser to preview the HTML output in real-time and optionally export it to other formats.
Markdown is well-suited for creating simple documents or pages, but for building complex websites with dynamic layouts and variable data, more advanced templating languages are needed. Let’s take a quick tour of the main templating languages available today.
What are the main templating languages?
You might think that each web framework has its own templating language, and that’s it! But reality is a bit more complex...
Each web framework does have a native templating syntax. The following table (non-exhaustive) provides a few examples:
| Web Framework | Language | Native Templating Syntax |
|---|---|---|
| Symfony | PHP | Twig |
| Spring Boot | Java | Thymeleaf |
| ASP.Net Core | C# | Razor |
| Ruby on Rails | Ruby | ERB (Embedded Ruby) |
| Django | Python | DTL (Django Template Language) |
| React | JavaScript | JSX |
However, some frameworks support other templating syntaxes, and conversely, some templating syntaxes can be used across multiple frameworks!
To give you an idea, the following table expands on the previous one by listing the templating syntaxes supported by the main web frameworks. It specifies the default templating language for each framework and other languages that can be used with the corresponding extensions:
| Framework | Side | Language | Supported Templating Languages |
|---|---|---|---|
| Ruby on Rails | server | Ruby | ERB (default), Haml, Slim, Liquid |
| Django | server | Python | DTL (default), Jinja2 |
| Flask | server | Python | Jinja2 (default), can integrate Mako, Cheetah |
| Laravel | server | PHP | Blade (default), Twig (via package), Smarty |
| Symfony | server | PHP | Twig (default), native PHP |
| Express.js | server | JavaScript | EJS (default), Pug (formerly Jade), Handlebars, Mustache, React/JSX |
| Spring Boot | server | Java | Thymeleaf (default), Freemarker, JSP, Mustache |
| React | client | JavaScript | JSX (built-in, transpiled to JS) |
| Vue.js | client | JavaScript | Vue templates (.vue), JSX (optional), Mustache |
| Angular | client | TypeScript | Angular templates (HTML + proprietary syntax) |
| Svelte | client | JavaScript | Svelte templates (.svelte), enhanced HTML |
Note: For React, JSX is not a templating engine in the traditional sense but a JavaScript transpilation syntax.
Note
In 2011, Mozilla released the Nunjucks templating language, a modern clone of Jinja2 designed for backends and static site generators (SSG) based on Node.js. For example, the SSG Eleventy supports Nunjucks (among others).
Conclusion
We’ve explored the main uses of templating and an overview of the associated languages and frameworks. In the next part of this series, we’ll see how to implement the concepts introduced here, with Nunjucks code examples. But beyond syntax, the most important aspect will be understanding the approaches used, which remain valid regardless of the language.
In the meantime, if you enjoyed this article, please like it to help spread the word. 😉