JavaScript templating

Last updated

JavaScript templating refers to the client side data binding method implemented with the JavaScript language. This approach became popular thanks to JavaScript's increased use, its increase in client processing capabilities, and the trend to outsource computations to the client's web browser. Popular JavaScript templating libraries are AngularJS, Backbone.js, Ember.js, Handlebars.js, Vue.js and Mustache.js. A frequent practice is to use double curly brackets (i.e. {{key}}) to call values of the given key from data files, often JSON objects.

Contents

Examples

All examples use an external file presidents.json with following contents

{"presidents":[{"name":"Washington","firstname":"George","born":"1732","death":"1799"},{"name":"Lincoln","firstname":"Abraham","born":"1809","death":"1865"}]}

All examples will produce the following HTML list:

LibraryHTML CodeExplanation

DNA Template

<linkrel="stylesheet"type="text/css"href=".../template.css"/><scriptsrc=".../jquery.min.js"></script><scriptsrc=".../jquery.template.min.js"></script>Our favorite presidents are: <ulid="target"><litemplate="[presidents]"z-var="name ., born ., death .">     ${name} (${born}-${death}) </li></ul><script>$.getJSON('.../presidents.json',function(data){$('#target').template(data);});</script>

➊ Load the necessary resources, including required jQuery
➋ The HTML code with template attribute marking for-each subtemplate and z-var replacement instructions.
➌ Load JSON data from presidents.json and apply data to the HTML template with id attribute "target".

Mustache.js

<scriptsrc=".../jquery.min.js"></script><scriptsrc=".../mustache.min.js"></script>Our favorite presidents are: <ulid="target"></ul><scriptid="president-template"type="text/template">{{#presidents}}<li>{{name}}({{born}}-{{death}})</li>{{/presidents}}</script><script>$.getJSON('.../presidents.json',function(data){vartemplate=$('#president-template').html();varinfo=Mustache.to_html(template,data);$('#target').html(info);});</script>

➊ Load the necessary libraries, here mustache.js and jQuery
➋ The HTML code provides a "target" to insert generated contents into.
➌ Provide a template named "president-template".
➍ Last is a function grasping the JSON data, and for each president's subitem, grasping one template and filling it to finally select the HTML page's target appending the whole to it.

Templating becomes useful when the information distributed may change, is too large to be maintained in various HTML pages by available human resources and not large enough to require heavier server-side templating.

See also

Related Research Articles

Extensible Application Markup Language is a declarative XML-based language developed by Microsoft for initializing structured values and objects. It is available under Microsoft's Open Specification Promise.

<span class="mw-page-title-main">JSON</span> Open standard file format and data interchange

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays. It is a commonly used data format with diverse uses in electronic data interchange, including that of web applications with servers.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

In the context of the World Wide Web, a bookmark is a Uniform Resource Identifier (URI) that is stored for later retrieval in any of various storage formats. All modern web browsers include bookmark features. Bookmarks are called favorites or Internet shortcuts in Internet Explorer and Microsoft Edge, and by virtue of that browser's large market share, these terms have been synonymous with bookmark since the First Browser War. Bookmarks are normally accessed through a menu in the user's web browser, and folders are commonly used for organization. In addition to bookmarking methods within most browsers, many external applications offer bookmarks management.

<span class="mw-page-title-main">Web template system</span> System in web publishing

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.

Svelte is a free and open-source component-based front-end software framework, and language created by Rich Harris and maintained by the Svelte core team members.

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.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of 2023, the project had over 230K LOCs not counting the embedded Mozilla Rhino compiler.

Mustache is a web template system. Mustache is described as a logic-less system because it lacks any explicit control flow statements, like if and else conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and anonymous functions (lambdas). It is named "Mustache" because of heavy use of braces, { }, that resemble a sideways moustache. Mustache is used mainly for mobile and web applications.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

Mojito is an environment agnostic, Model-View-Controller (MVC) web application framework. It was designed by Ric Allinson.

<span class="mw-page-title-main">Yesod (web framework)</span>

Yesod is a web framework based on the programming language Haskell for productive development of type-safe, representational state transfer (REST) model based, high performance web applications, developed by Michael Snoyman, et al. It is free and open-source software released under an MIT License.

<span class="mw-page-title-main">Ember.js</span>

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It is designed with the aim of allowing developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

<span class="mw-page-title-main">Webix</span> JS/HTML5/CSS3 UI toolkit for developing complex and dynamic cross-platform web applications

Webix is a JavaScript/HTML5/CSS3 UI toolkit for developing complex and dynamic cross-platform web applications.

Static site generators (SSGs) are software 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 articles, software documentation, and blogs.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

This is a list of articles related to the JavaScript programming language.

<span class="mw-page-title-main">Quasar Framework</span> JavaScript framework

Quasar Framework is an open-source Vue.js based framework for building apps with a single codebase. It can be deployed on the Web as a SPA, PWA, SSR, to a Mobile App, using Cordova for iOS & Android, and to a Desktop App, using Electron for Mac, Windows, and Linux.

References