Introduction to Twig template engine: a start of a love | part 1

Introduction to Twig template engine: a start of a love

In these articles, we do not aim to copy the official documentation of the Twig template engine which you find on the official website, but we aim to generate a deep and simple understanding of this technology that you can make this article useful for beginners and interesting for the advanced reader.

What template engine is? and how does it work?

The template engine is a way to automate the creation of documents including the web page. It is automation systems that allow to minimize data entry, reduce the time to create or change them, and reduce the risks associated with human error.

One of the most important benefits of using the template engine is to make a group of documents or web pages into one category so that changing the template will change all the formatted documents arranged in it.

We can also define a template engine for web pages as a technique that gives developers the ability to separate HTML/CSS from the application’s logic code for a web page eg PHP code.

To illustrate how the template engine works, let’s say we have ten students and we want to send each a welcome message:

Twig

Wellcome student {{ name }}
  1. We call the previous statement “the template”
  2. The data are the names of the students represented by the name field
  3. The resulting hello word is the formatted document
  4. Finally, the template engine is the computer program that combined the previous template with the data which are the names of the students in our example. It replaces the {{ name }} with the student’s name as needed.

If the data contains two names: Samer, Ziad then the outputs of the previous template are

Output

Welcome student Samer
Welcome student Ziad

The {{ name }} varies depending on the data submitted to the template.

Template engine work

data + template ==> formatted documents

Twig template engine & other most popular template engines for web pages

There are lots of template engines. It covers many fields including web pages.
In fact, it can generate formatted documents for any text or graphic, such as a book, web page, or a simple advertisement.

The PHP programming language provides easy mechanisms for processing templates. The discussion in PHP is as follows, for example:

PHP

Hello student <?php echo  $student; ?>

Although PHP provides the features of a template engine, beginners rarely used it for this purpose.
Technologies have varied and advanced a lot. And there are many template engines. We will mention the most famous template engines:

  • Smarty: A popular, easy-to-install template engine written in PHP that is second only to Twig in terms of popularity.
  • Plates: a template engine that has a somewhat complicated writing method and is less readable by a beginner
  • Volt: a template engine written in C. Its template syntax is similar to Twig.
  • Twig template engine: is a fast, flexible, and very popular template engine written in PHP

The difference between template engine, template, and template language

We would like to point out something important that explains the difference between the overlapping concepts, template engine, template, and template language:

  • The templating engine is a program written by the company that designed the template engine and we can download it from the company’s official website.
  • The template is the commands we write and submit to the template engine. For example, the filesingle.twig is a template.
  • Template syntax is the writing method that the template engine asks us to use. It is the rules that we have to consider when writing the template, for example, the way to output variables, the way to call functions, filters, and other technologies provided by the template, for example, it Volt template language is very similar to the Twig template language.

Each templating engine has its own method for writing templates, usually called the template engine itself, and here we do not mean the file suffix, but we mean the way to write within the file itself, i.e. template syntax.

What Twig template engine is? and what are the advantages of it?

Twig template engine is a free, open-source, fast, secure, flexible, and easy-to-learn template engine that is based on PHP. It is primarily used to output HTML pages but we can use it to output any other text format. It is a standalone component that we can easily integrate into any PHP project.

Twig has the following advantages:

Speed

It may come to mind that using the Twig template engine will slow down a web page compared to using PHP but in fact, this is not true because Twig compiles or translates the template into PHP and then executes the resulting code directly.

Twig not only translates the code into PHP but also performs several syntax improvements to increase execution speed.

Data care

When the front end theme designer Twig, we can change the templates as it needs without the risk of data loss, as the instructions written in the Twig templates are safe and they are used to read and show the data and not to change it

No to dangerous instructions and no critical errors

Twig gives you additional security compared to using PHP directly as the instructions provided in Twig templates cannot cause the site to crash.
Did your site stop working because of the wrong PHP code? Twig has a Sandbox mode for evaluating untrusted template code before we execute it.

Common in use

When we learn a technology, it is important to use it in various fields. We can use Twig in many open-source projects and many frameworks, for example, Symfony, Drupal, phpBB, and Laravel. Besides the possibility of using it in the design of WordPress templates, and this is what we will discuss in a separate post later.

Flexibility and Inherits Support

Twig is flexible, as it is easy to expand the work of Twig and add filters or functions to it. It also supports inheritance. If we have two similar templates, we may not need to write both templates. It is enough to write one of them and then write the differences in the second template so that the sub-template can be just a simple modification of the other one.

Comparison of  Twig template engine & other template engines

We will compare template engines in terms of ease of use, the popularity of templating engines, and execution speed

Easy to read and learn

Twig and Volt occupy the first place in terms of readability, as they have the same syntax, followed by Smarty and finally PHP and Plat. Here are examples for each one:

Twig

{# Twig #}
{{ name }}

Volt

{# volt #}
{{ name }}

Smarty

{* smarty *}
{$name}
PHP
<?php echo $name; ?>

Plate

<!-- plate -->
Hello <?=$this->e($name)?>

The simpler the template construction and the closer to the natural language, the faster the ease of learning. As we can see from the above example, we note that using Twig does not require adding special characters to the variable name, unlike other template engines.

Common usage among developers

To test the common use of each of the template engines, I use the Alexa rank of the official website for each of the template engines except for PHP; As PHP is a programming language makes the Alexa ranking of its website does not give a correct impression of its popularity as a template engine.

Alexa evaluates sites based on their popularity and the number of visitors per month to the site, for example, Google occupies the number 1, and the greater the number of visitors to the site, the site’s ranking less, in other words, the less Alexa rank is better.

  1. Twig: 13,000
  2. Smarty: 56,000
  3. Volt: 127,000
  4. Plot: 1,600,000

Speed when in use

Template engines generate PHP code against the template and then execute the resulting code.

We have checked the performance comparison site phpbenchmarks.com and the speed of the latest version of the popular template engines is almost similar when used with PHP 7.3.

Ease of setup as standalone

Smarty is on the top for setup ease as its official installation method does not involve using composer. But in the next article, we will describe how to install Twig without the use of Composer so that the difference becomes less important. PHP does not require any additional installation.

Last word for Introduction to Twig template engine

Template engines vary a lot, and in the current era, productivity and speed of performance are very important and this Twig template engine provides. Using the Twig template engine makes it easy to get clear, simple code that is easy to maintain when needed. In the template, we focus on the general look of the formatted document and the structure of the document.
In this article, we touched on a quick introduction to the Twig template engine, and its advantages, such as speed, data preservation, and others. We also made a comparison between several templating engines. In the end, we explained the difference between the template engine, the template, and the template language. and for the second article, we will make a quick start with Twig. To introduce us to the work requirements and how to install Twig with a quick overview of how to use it.

Part 1: Introduction to Twig template engine: a start of a love (current article)

Part 2: Twig install & setup of the template engine

Part 3: Twig template syntax: powerful & easy

Discussions about Introduction to Twig template engine

You can share your feedback about this introduction to the Twig template engine via the flowing facebook post 

 

totop