Home » Twig Tutorials » Introduction to Twig template engine

Introduction to Twig template engine

    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 and 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: 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 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 Twig templates 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 and other template engines

    We will compare template engines in terms of ease of use, the popularity of templating engine, 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

    Template engines vary a lot, and in the current era, productivity and speed of performance are very important and this Twig provides, and using Twig 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 Twig, and its advantages, such as speed, data preservation, and others. We also made a comparison between several search engines. In the end, we explained the difference between the template engine, the template, and the template language. In 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.

    Discussions

    You can share your feedback on this post via the flowing facebook post 

     

    End