Fredrik Holmström recently posted a small template engine, based on DOM-manipulation. While there are certainly a lot of template engines around, I find this approach interesting. The concept is simple enough; The template is parsed into an object model (DOM), and then values can be assigned to these through PHP code. The main difference to traditional template engines (Such as Smarty), is that the template it self doesn’t have any imperatives within. In fact, the template doesn’t even have to be written to the template engine, to be used – Any markup can be used as a source. Since the template can’t contain any view-logic, it ends up in a separate place (In PHP code). This makes the separation between presentation and logic airtight, which was the main idea of template engines in the first place. Another benefit is that since there is no string-level manipulation, it is virtually impossible to inadvertently get injections-type security breaches. The template may be unaware of the view-logic, but the opposite can’t be said. To bind values to the template, the view-logic needs to be aware of the internal structure of the template. This means that if the template changes, so must the view-logic. To decouple this dependency, we need some kind of abstraction. Luckily it just so happens that there is a very convenient mechanism for that; Element id‘s can be used to address central nodes in the markup. They do however have the rather annoying limitation (For this use), that they must be globally unique to the document. A better candidate then, is to use classes (The HTML attribute – I’m not talking of PHP classes) to address elements. The really nice thing about using classes is that it’s very unobtrusive to the markup. One will have to add classes, but since they would have to go on central elements in the markup, they would be prime candidates for reusing as fix points for CSS rules and for Javascript code. Instead of being superfluous markers in the HTML code, they actively help to write better markup. That sounds good in theory, so to see how it holds out in reality, I mocked together a small prototype. Even with a very limited API, it has a remarkably good expressiveness:
Simple variable binding
$t = new Domling('<p class="hello"></p>');
$t->capture('hello')->bind("Hello World");
echo $t->render();
<p class="hello">Hello World</p>
Switching a block out
$t = new Domling('<p>Lorem Ipsum</p><p class="message">Hidden message</p>');
$t->capture('message');
echo $t->render();
<p>Lorem Ipsum</p>
Putting it back in
$t = new Domling('<p>Lorem Ipsum</p><p class="message">Hidden message</p>');
$block = $t->capture('message');
$block->bind();
echo $t->render();
<p>Lorem Ipsum</p>
<p class="message">Hidden message</p>
And looping over a block
$t = new Domling('<ul class="links"><li class="link"><a class="anchor" href="#">title</a></li></ul>');
$links = array(
'Sitepoint' => 'http://www.sitepoint.com',
'Example' => 'http://www.example.org?foo=bar&ding=dong');
foreach ($links as $title => $link) {
$t->sequence('link', 'links')->bind(array('anchor:href' => $link, 'anchor' => $title));
}
echo $t->render();
<ul class="links">
<li class="link"><a class="anchor" href="http://www.sitepoint.com">Sitepoint</a></li>
<li class="link"><a class="anchor" href="http://www.example.org?foo=bar&ding=dong">Example</a></li>
</ul>
Frequently Asked Questions about DOM vs Template in Angular
What is the difference between DOM and Template in Angular?
The Document Object Model (DOM) and Templates in Angular are two different concepts. The DOM is a programming interface for HTML and XML documents. It represents the structure of a document and allows a way to manipulate its content and visual presentation. On the other hand, Templates in Angular are a form of HTML that tells Angular how to render the component. They can include bindings and directives among other things to control how data and events flow between the DOM and the component.
How does Angular use templates?
Angular uses templates to define views. A view is a portion of the screen that Angular can control and change according to your program data and behavior. Templates combine ordinary HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for display.
What is the role of components in Angular?
Components are the most basic building block of an Angular application. An Angular application is a tree of Angular components. Components are essentially classes that interact with the HTML files of the application, which become views once they are processed by Angular. They help to define the application’s logic and can be reused throughout the application.
When should I use a template vs a component in Angular?
Components and templates in Angular serve different purposes. A component manages a section of the webpage (a view) and is created with a class and a template. The class handles data and functionality while the template defines how it is displayed. You would use a component when you want to control a section of your webpage. On the other hand, a template is used to create reusable and dynamic views. You would use a template when you want to define how a certain view should be displayed.
How can I create a template in Angular?
In Angular, you can create a template by defining an HTML file with Angular’s template syntax. This syntax allows you to create bindings and directives that tell Angular how to render the component. The template is then linked to a component, which provides the data and behavior for the view.
What is the difference between a template and a directive in Angular?
A template in Angular is a form of HTML that tells Angular how to render the component. It can include bindings and directives. A directive, on the other hand, is a custom HTML attribute with an associated class, used to extend the power of an HTML element.
How does Angular handle data binding?
Angular handles data binding by synchronizing data between the model (component) and the view (template). There are two types of data binding in Angular: one-way binding and two-way binding. One-way binding can be either from the model to the view or from the view to the model. Two-way binding, on the other hand, is a combination of both.
What is the role of the DOM in Angular?
In Angular, the DOM (Document Object Model) serves as a bridge between the HTML document and the JavaScript code. Angular manipulates the DOM to update the view whenever the model changes and update the model whenever the view changes.
How does Angular use components and templates together?
In Angular, a component and its template together define a view. The component manages the data and behavior, while the template defines how it should be displayed. The component and template are linked together, allowing Angular to render the view.
Can I use multiple templates with a single component in Angular?
Typically, each component in Angular has a single template associated with it. However, you can use multiple “ng-template” tags within a single component’s template. These can be used with structural directives like *ngIf and *ngFor to create dynamic views.
Troels Knak-NielsenTroels has been crafting web applications, as a freelancer and while employed by companies of various sizes, since around the time of the IT-bubble burst. Nowadays, he's working on backend systems for a Danish ISP. In his spare time, he develops and maintains Konstrukt, a web application framework for PHP, and is the organizer of a monthly PHP-meetup in Copenhagen.
