❄️Introducing the HMPL Template Language

Hello everyone! I once wrote a lot of articles, but in fact I never told what this HMPL is. Today I will correct myself and will show in full examples how it works and how it can be useful in your projects. Well then, let's go!

What is this?

How would I describe it? Probably the easiest way to describe it is: Server-side rendering (SSR) for any web application, but without robot viewing. That is, this tool will allow you to load components to the client directly from the server, and with full customization. And, most importantly, it is all like a template language, that is, everything is super convenient and practical.

????

Okay, that's what I tried to say in a few words, but in general it's worth looking at the example and then we can learn a little more.

eXaMpLe

As one example, let's take a simple clicker:

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment">



<p>The result will be as follows:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173595838038516.jpg" class="lazy" alt="❄️Introducing the HMPL Template Language"></p>

<p>And, in fact, there can be a lot of examples of use. From a gallery to loading simple text.</p>

<h2>
  
  
  How can HMPL help in your project?
</h2>

<p>In the project, in fact, you can come up with a huge number of situations when you might need this module. First of all, this is, of course, sharing components between sites.</p>

<p>If you have components like a sidebar that are repeated on several of your sites, it would be a good idea to move them to the server and get them from there via a request. By changing the template once, you will get the same result on dozens, if not hundreds of sites.</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173595838185581.jpg" class="lazy" alt="❄️Introducing the HMPL Template Language"></p>

<p>Also, such a practice of working with the server will allow to reduce the code on the client. Thus, users of the site will load the site for the first time much faster, because, in fact, the size of the bundle will be smaller.</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173595838576474.jpg" class="lazy" alt="❄️Introducing the HMPL Template Language"></p>

<h2>
  
  
  Illusion
</h2>

<p>In this section, from a million similar articles, they write something like the summary of the article. I think that the article has one summary. We need to learn to program on paper and you can create a really cool application.</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173595840360379.jpg" class="lazy" alt="❄️Introducing the HMPL Template Language"></p>


          

            
        

The above is the detailed content of ❄️Introducing the HMPL Template Language. For more information, please follow other related articles on the PHP Chinese website!