Explanation of ``

javascript

client-side-templating

performance

micro-templating

byAnton Shumikhin·Dec 6, 2024

The <script type="text/template"> tag is meant to encapsulate reusable HTML that isn't initially rendered on the page. It's perfect for keeping your HTML templates neat. The template content is fetched and interpolated with data via JavaScript when necessary. In short, this tag lets you define HTML code/cosmetics as deferred makeup that is ready to be applied with data as needed.

<script type="text/template" id="my-template">
  <h1>{{title}}</h1>
  <p>{{message}}</p>
</script>

You then engrave the template in JavaScript by capturing the innerHTML, using string replacement to switch placeholders with real data:

var tmpl = document.getElementById('my-template').innerHTML; 
// Don't forget to wear welder goggles before operation!
document.body.innerHTML += tmpl.replace('{{title}}', 'Hello').replace('{{message}}', 'World!');
// From 'template monster world' to 'Hello, World'!

Client-side Templating: The Detail

Client-side templating combines JavaScript and HTML structures to handle dynamic content generation in web applications. As the application grows and we need to balance usability and performance, direct DOM manipulation or string concatenation becomes old school.

Templating Libraries: Many Players in the Market

Backbone.js does not come with a templating library so you're free to pick your favorite:

Underscore.js: Integrated with Backbone.js. No extra homework required.
Mustache: Leave logic to JS and keep templates clean. Like having your cake and eating it too.
Handlebars.js: A beefier version of Mustache, but nobody is watching your diet.
Haml, Eco, Google Closure templates: Because variety is the spice of life.

Performance Perks of `<script type="text/template">`

The <script type="text/template"> usage offers enhanced performance:

Reduced initial load time as templates are not rendered instantly.
Less server interaction as templates live within the initial HTML download.
Parallel loading with other webpage elements because templates aren't late to the party.

Just make sure to consider:

Browser inconsistency: Some elderly browsers may be grumpy and not ignore non-JavaScript content.
Security: Remember safe distancing rules apply with dynamic content to prevent XSS attacks!
Debugging: Errors embedded within templates may be sneaky and not obvious during execution.

Advancing Your Templating Game

Teach your template to be more interactive and add a dash of spice to your dynamic content delivery.

Micro Templating: The Fine Art of Embedding JS in Templates

Explore the technique of micro templating introduced by John Resig. Here, you pack JavaScript logic into template strings via underscore.js _.template:

var compiled = _.template("Hello <%= name %>!");
console.log(compiled({name: 'Jane'})); // Prints: "Hello Jane!"
// yes, you can talk to Jane now!

`<template>` Element: The Modern Move

Try using <template> element, offers better performance and compatibility:

<template id="my-new-template">
  <p>Template content here</p>
</template>

Rails Application + Templates: There's a Gem for That!

Using Rails? The Jammit gem bundles templates with your asset pipeline:

# In assets.yml
templates:
  - templates/*.jst
# Because who doesn't like an all-in-one package?

explain-codes / Javascript / Explanation of ``

Linked

What is the purpose of Backbone.js?



Jquery vs document.querySelectorAll



How do I accomplish an if/else in mustache.js?



What is VanillaJS?



When should I use Inline vs. External JavaScript?



What is the purpose of the HTML "no-js" class?



How do I use HTML as the view engine in Express?



Client-side Templating: The Detail Advancing Your Templating Game