This article includes a list of references, related reading, or external links, but its sources remain unclear because it lacks inline citations .(July 2013) |
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, JSX (used by React), 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.
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:
Library | HTML Code | Explanation |
---|---|---|
<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 | |
<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 |
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.
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.
A web template system in web publishing allows web designers and developers to 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 loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
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.
npm is a package manager for the JavaScript programming language maintained by npm, Inc., a subsidiary of GitHub. npm is the default package manager for the JavaScript runtime environment Node.js and is included as a recommended feature in the Node.js installer.
Mustache is a web template system. It 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.
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.
Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It is designed to allow 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.
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, Eleventy, Gatsby, and Next js, SSGs are typically for rarely-changing, informative content, such as product pages, news articles, software documentation, and blogs.
Vue.js is an open-source model–view–viewmodel front end JavaScript framework 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.
The 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. Quasar was created by Razvan Stoenescu and is maintained by a small team of developers and contributors. Most from the core team currently work at various companies such as Lenovo, IntelliView Technologies Inc. and AG Development Services.
htmx is an open-source front-end JavaScript library that extends HTML with custom attributes that enable the use of AJAX directly in HTML and with a hypermedia-driven approach. These attributes allow for the dynamic definition of a web page directly in HTML and CSS, without the need for writing additional JavaScript. These attributes allows tasks that traditionally required writing JavaScript to be done completely with HTML. The library was created by Carson Gross as a new version of intercooler.js.