Web template system

Last updated
The basic process for a server-side web templating system: content (from a database), and "presentation specifications" (in a web template), are combined (through the template engine) to mass-produce web documents. TempEngWeb016.svg
The basic process for a server-side web templating system: content (from a database), and "presentation specifications" (in a web template), are combined (through the template engine) to mass-produce web documents.

A web template system in web publishing allows web designers and developers work with web templates to automatically generate custom web pages, such as the results from a search. This reuses static web page elements while defining dynamic elements based on web request parameters. Web templates support static content, providing basic structure and appearance. Developers can implement templates from content management systems, web application frameworks, and HTML editors.

Contents

Overview

A web template system is composed of the following:

The template and content resources are processed and combined by the template engine to mass-produce web documents. For purposes of this article, web documents include any of various output formats for transmission over the web via HTTP, HTTPS, or another Internet protocol.

Template engine

A diagram illustrating all of the basic elements and processing flow of a template engine. TempEngGen015.svg
A diagram illustrating all of the basic elements and processing flow of a template engine.
A template processor (also known as a template engine or template parser) is software designed to combine templates with a data model to produce result documents. [2] [3] [4] The language that the templates are written in is known as a template language or templating language. For purposes of this article, a result document is any kind of formatted output, including documents, web pages, or source code (in source code generation), either in whole or in fragments. A template engine is ordinarily included as a part of a web template system or application framework, and may be used also as a preprocessor or filter.

Example

With the model typically held in a relational database, the remaining components of the MVC architecture are the control and view. In the simplest of systems these two are not separated. However, adapting the separation of concerns principle one can completely decouple the relationships.

For example, the view template may look like this:

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Sites</title></head><body><h1data-xp="title"><!-- placeholder --></h1></body></html>

Then, the control template loads the view, and then uses XPath addressing [ original research? ] to insert components from a database, for instance:

<?php$doc=newDOMDocument;$doc->preserveWhiteSpace=false;$doc->Load('view.html');$titlenode=$doc->createTextNode("Like this");$xpath=newDOMXPath($doc);$xpath->registerNamespace("h","http://www.w3.org/1999/xhtml");$query="//h:*[@data-xp='title']/comment()";$entries=$xpath->query($query);foreach($entriesas$entry){$entry->parentNode->replaceChild($titlenode,$entry);}echo$doc->saveXML();?>

Kinds of template systems

A web browser and web server are a client–server architecture. Sites often also use a web cache to improve performance. Five templating system types are classified based on when they replace placeholders with real content and assemble pages.

Template languages may be:

The source code of the template engine can be proprietary or open source.

Many template systems are a component of a larger programming platform or framework. They are referred to as the "platform's template system". Some template systems have the option of substituting a different template language or engine.[ citation needed ]

Language support

Programming languages such as Perl, Ruby, C, and Java support template processing either natively, or through add-on libraries and modules. JavaServer Pages (JSP), PHP, and Active Server Pages (ASP with VBScript, JScript or other languages) are examples, themselves, of web template engines. These technologies are typically used in server-side templating systems, but could be adapted for use on an "edge-side" proxy or for static page generation.

Static site generators

Static site generators are engines that use flat text input files like markdown and asciidoc to generate a static web page. Examples of this include Jekyll (Liquid, Ruby), Hugo (Go templates), and Pelican (Jinja2, Python).

Static HTML Editors

Outside server template system architecture. StaticTemplates.gif
Outside server template system architecture.

HTML editors often use web template systems to produce only static web pages. These can be viewed as a ready-made web design, used to mass-produce "cookie-cutter" websites for rapid deployment. They also commonly include themes in place of CSS styles. In general, the template language is used only with the editor's software. [5]

FrontPage and Dreamweaver were once the most popular editors with template sub-systems. A Flash web template uses Macromedia Flash to create visually interactive sites.

Many server-side template systems have an option to publish output pages on the server, where the published pages are static. This is common on content management systems, like Vignette, but is not considered out-server generation. In the majority of cases, this "publish option" doesn't interfere with the template system, and it can be made by external software, as Wget.

Server-side systems

Server-side template system ServerSideTemplates.gif
Server-side template system

People began to use server-side dynamic pages generated from templates with pre-existent software adapted for this task. This early software was the preprocessors and macro languages, adapted for the web use, running on CGI. Next, a simple but relevant technology was the direct execution made on extension modules, started with SSI.

Many template systems are typically used as server-side template systems:

System label/namePlatform/frameworkNotes
Blade PHP Public. Part of Laravel
CheetahTemplate Python Public. Embedded complex language.
Django Python Use the "Django template language".
FreeMarker Java Public.
Facelets Jakarta EE Public. Part of Jakarta Server Faces
Genshi Python Public
Haml Ruby or OtherPublic.
Hamlets Java Public.
Jinja2 Python Public. Embedded complex language.
Kid Python
Lasso LassoSoft, LLC Proprietary. Interpreted Programming Language and Server
Mustache ActionScript, C++, Clojure, CoffeeScript, ColdFusion, D, Erlang, Fantom, Go, Java, server-side JavaScript, Lua, .NET, Objective-C, ooc, [6] Perl, PHP, Python, Ruby, Scala, Tcl Public.
Basic Server Side Includes (SSI)The basic directives fix a "standard". Embedded simple language, if exclude exec directive.
Smarty PHP Public. Embedded complex language.
Template Toolkit Perl Public. Embedded complex language.
Template Attribute Language (TAL) Zope, Python, Java, Perl, PHP, XSLT Public; a.k.a. Zope Page Templates (ZPT); see also TAL Expression Syntax (TALES), Macro Expansion TAL (METAL)
Tiles Java Public. Supports multiple template languages (JSP, Velocity, Freemarker, Mustache) from various frameworks (servlet, portlets, struts, spring).
Thymeleaf Java Public.
Topsite Python Public. "As of 2008-02-20, this project is no longer under active development." [7]
Twig PHP
PHPlib PHPlib Public. Embedded iterable language.
WebMacro Java Public. Embedded iterable language.
WebObjects Java Use the WebObjects Builder as engine.
Velocity Java Public. Use VTL - Velocity Template Language.
Vignette Proprietary.Commercial solution. Embedded complex language.
XSLT (standard language)Any with an XSLT parserStandard. Event-driven programmable language.
XQuery (standard language)Any with an XQuery parserStandard. Embedded programmable language.

Technically, the methodology of embedding programming languages within HTML (or XML, etc.), used in many "server-side included script languages" are also templates. All of them are Embedded complex languages.

System label/nameNotes
Active Server Pages (ASP)Proprietary (Microsoft platform). See also: VBScript, Javascript, PerlScript, etc. extensions for ASP.
eRuby Public (Ruby).
ColdFusion Markup Language (CFM)Public (Lucee, Railo, OpenBD). Proprietary (Adobe ColdFusion).
Jakarta Server Pages (JSP)Public, Jakarta EE.
Active Perl Public.
PHP Public.
OpenACS Public (Tcl).

There are also preprocessors used as server-side template engines. Examples:

Preprocessor Notes
C preprocessor Public. Embedded iterable language.
M4 Public. Embedded complex language.

Edge-side systems

Edge-Side template and inclusion systems. "Edge-side" refers to web servers that reside in the space between the client (browser) and the originating server. They are often referred to as "reverse-proxy" servers. These servers are generally tasked with reducing the load and traffic on originating servers by caching content such as images and page fragments, and delivering this to the browser in an efficient manner.

Basic Edge Side Includes (ESI) is an SSI-like language. ESI has been implemented for content delivery networks. The ESI template language may also be implemented in web browsers using JavaScript and Ajax, or via a browser "plug-in".

Client-side systems

Client-side and distributed (decentralized) template system. ClientSideTemplates.gif
Client-side and distributed (decentralized) template system.

Many web browsers can apply an XSLT stylesheet to XML data that transforms the data into an XHTML document, thereby providing template functionality in the browser itself.
Other systems implement template functionality in the browser using JavaScript or another client-side scripting language, including:

Distributed systems

The most simple form is transclusions (HTML frames). In other cases dynamic web pages are needed.

Examples:

See also

Concepts:      Standards:
  • UIML (User Interface Markup Language)
  • XSLT (Extensible Stylesheet Language Transformations)
     Software:

Related Research Articles

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

<span class="mw-page-title-main">Transclusion</span> Including one data set inside another automatically

In computer science, transclusion is the inclusion of part or all of an electronic document into one or more other documents by reference via hypertext. Transclusion is usually performed when the referencing document is displayed, and is normally automatic and transparent to the end user. The result of transclusion is a single integrated document made of parts assembled dynamically from separate sources, possibly stored on different computers in disparate places.

<span class="mw-page-title-main">World Wide Web</span> Linked hypertext system on the Internet

The World Wide Web is an information system that enables content sharing over the Internet through user-friendly ways meant to appeal to users beyond IT specialists and hobbyists. It allows documents and other web resources to be accessed over the Internet according to specific rules of the Hypertext Transfer Protocol (HTTP).

<span class="mw-page-title-main">Website</span> Set of related web pages served from a single domain

A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment or social networking. Hyperlinking between web pages guides the navigation of the site, which often starts with a home page. As of May 2023, the top 5 most visited websites are Google Search, YouTube, Facebook, Twitter, and Instagram.

XSLT is a language originally designed for transforming XML documents into other XML documents, or other formats such as HTML for web pages, plain text or XSL Formatting Objects, which may subsequently be converted to other formats, such as PDF, PostScript and PNG. Support for JSON and plain-text transformation was added in later updates to the XSLT 1.0 specification.

In computer science, a preprocessor is a program that processes its input data to produce output that is used as input in another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers. The amount and kind of processing done depends on the nature of the preprocessor; some preprocessors are only capable of performing relatively simple textual substitutions and macro expansions, while others have the power of full-fledged programming languages.

A HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

XForms is an XML format used for collecting inputs from web forms. XForms was designed to be the next generation of HTML / XHTML forms, but is generic enough that it can also be used in a standalone manner or with presentation languages other than XHTML to describe a user interface and a set of common data manipulation tasks.

Apache Cocoon, usually abbreviated as Cocoon, is a web application framework built around the concepts of Pipeline, separation of concerns, and component-based web development. The framework focuses on XML and XSLT publishing and is built using the Java programming language. Cocoon's use of XML is intended to improve compatibility of publishing formats, such as HTML and PDF. The content management systems Apache Lenya and Daisy have been created on top of the framework. Cocoon is also commonly used as a data warehousing ETL tool or as middleware for transporting data between systems.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored. A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and including the setting up of more client-side processing. A client-side dynamic web page processes the web page using JavaScript running in the browser as it loads. JavaScript can interact with the page via Document Object Model (DOM), to query page state and modify it. Even though a web page can be dynamic on the client-side, it can still be hosted on a static hosting service such as GitHub Pages or Amazon S3 as long as there is not any server-side code included.

A static web page, sometimes called a flat page or a stationary page, is a web page that is delivered to a web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application.

JsonML, the JSON Markup Language is a lightweight markup language used to map between XML and JSON. It converts an XML document or fragment into a JSON data structure for ease of use within JavaScript environments such as a web browser, allowing manipulation of XML data without the overhead of an XML parser.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

In software development XRX is a web application architecture based on XForms, REST and XQuery. XRX applications store data on both the web client and on the web server in XML format and do not require a translation between data formats. XRX is considered a simple and elegant application architecture due to the minimal number of translations needed to transport data between client and server systems. The XRX architecture is also tightly coupled to W3C standards to ensure XRX applications will be robust in the future. Because XRX applications leverage modern declarative languages on the client and functional languages on the server they are designed to empower non-developers who are not familiar with traditional imperative languages such as JavaScript, Java or .Net.

In computing, Facelets is an open-source Web template system under the Apache license and the default view handler technology for Jakarta Server Faces. The language requires valid input XML documents to work. Facelets supports all of the JSF UI components and focuses completely on building the JSF component tree, reflecting the view for a JSF application.

ZK is an open-source Ajax Web application framework, written in Java, that enables creation of graphical user interfaces for Web applications with little required programming knowledge.

XQuery is a query and functional programming language that queries and transforms collections of structured and unstructured data, usually in the form of XML, text and with vendor-specific extensions for other data formats. The language is developed by the XML Query working group of the W3C. The work is closely coordinated with the development of XSLT by the XSL Working Group; the two groups share responsibility for XPath, which is a subset of XQuery.

Thymeleaf is a Java XML/XHTML/HTML5 template engine that can work both in web (servlet-based) and non-web environments. It is better suited for serving XHTML/HTML5 at the view layer of MVC-based web applications, but it can process any XML file even in offline environments. It provides full Spring Framework integration.

<span class="mw-page-title-main">XML transformation language</span> Type of programming language

An XML transformation language is a programming language designed specifically to transform an input XML document into an output document which satisfies some specific goal.

Static site generators (SSGs) are engines that use text input files to generate static web pages. Static sites generated by static site generators do not require a backend after site generation, making them first-class citizens on content delivery networks (CDNs). Some of the most popular static site generators are Jekyll, Hugo, Next.js (JavaScript). SSGs are typically for rarely-changing, informative content, such as product pages, news websites, (software) documentation, manuals, and blogs.

References

  1. "Template engine". phpwact.org wiki. Archived from the original on December 4, 2012. Retrieved 7 January 2013.
  2. Niemeyer, Patrick (2002). Learning Java. Sebastopol: O'Reilly. ISBN   0-596-00285-8.
  3. Manolescu, Dragos (2006). Pattern Languages of Program Design 5. Reading: Addison-Wesley Professional. ISBN   0-321-32194-4.
  4. Fowler, Martin (2003). Patterns of Enterprise Application Architecture. Boston: Addison-Wesley. ISBN   0-321-12742-0.
  5. MacDonald, Matthew (2015). Creating a Website: The Missing Manual. Chapter 8 > Putting the Same Content on Multiple Pages > Web Templates > Note box: O'Reilly Media, Inc. ISBN   9781491936177 . Retrieved 19 January 2016.{{cite book}}: CS1 maint: location (link)
  6. "{{mustache}}" . Retrieved 15 October 2013.
  7. jodyburns. "Topsite Templating System" . Retrieved 15 October 2013.

9. Free ecommerce website themes MG Technologies Blogs and Information Portal of Website Themes.