dustjs

Asynchronous Javascript templating for the browser and server

2,915

478

2,915

View on GitHub View on NPM

Top Related Projects

ejs

7,699

Embedded JavaScript templates -- http://ejs.co

pug

21,636

Pug – robust, elegant, feature rich template engine for Node.js

nunjucks

8,536

A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)

mustache.js

16,412

Minimal templating with {{mustaches}} in JavaScript

eta

1,401

Embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript

Quick Overview

DustJS is a JavaScript templating engine developed by LinkedIn. It is designed to be asynchronous and highly performant, making it suitable for both client-side and server-side rendering. DustJS emphasizes logic-less templates and provides a powerful set of features for creating dynamic content.

Pros

Asynchronous rendering, allowing for efficient handling of large datasets
Logic-less templates, promoting separation of concerns
Supports both client-side and server-side rendering
Extensible through custom helpers and filters

Cons

Steeper learning curve compared to some other templating engines
Less active development and community support in recent years
Limited built-in helpers compared to some alternatives
Documentation could be more comprehensive and up-to-date

Code Examples

Basic template rendering:

const dust = require('dustjs-linkedin');

const template = 'Hello, {name}!';
const context = { name: 'World' };

dust.renderSource(template, context, (err, out) => {
  console.log(out); // Output: Hello, World!
});

Using conditionals in templates:

const template = '{@if cond="{isAdmin}"}Welcome, Admin!{:else}Welcome, User!{/if}';
const context = { isAdmin: true };

dust.renderSource(template, context, (err, out) => {
  console.log(out); // Output: Welcome, Admin!
});

Iterating over arrays:

const template = '{#items}<li>{.}</li>{/items}';
const context = { items: ['Apple', 'Banana', 'Cherry'] };

dust.renderSource(template, context, (err, out) => {
  console.log(out); // Output: <li>Apple</li><li>Banana</li><li>Cherry</li>
});

Getting Started

To use DustJS in your project, follow these steps:

Install DustJS via npm:
```
npm install dustjs-linkedin
```

In your JavaScript file, require DustJS:

const dust = require('dustjs-linkedin');

Create a template and render it:

const template = 'Hello, {name}!';
const context = { name: 'World' };

dust.renderSource(template, context, (err, out) => {
  if (err) {
    console.error(err);
  } else {
    console.log(out);
  }
});

This will output: "Hello, World!"

Competitor Comparisons

ejs

7,699

Embedded JavaScript templates -- http://ejs.co

Pros of EJS

Simpler syntax, easier to learn for developers familiar with HTML
Supports both server-side and client-side rendering
More flexible with JavaScript integration, allowing inline JS code

Cons of EJS

Less performant for large-scale applications compared to Dust.js
Lacks built-in asynchronous rendering capabilities
May lead to less maintainable code due to mixing logic and presentation

Code Comparison

EJS:

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

Dust.js:

{?user}
  <h2>{user.name}</h2>
{/user}

Summary

EJS offers a more straightforward approach with its HTML-like syntax and easy JavaScript integration, making it suitable for smaller projects or developers new to templating engines. However, Dust.js provides better performance and separation of concerns, which can be advantageous for larger, more complex applications. The choice between the two depends on project requirements, team expertise, and scalability needs.

handlebars.js

17,914

Minimal templating on steroids.

Pros of Handlebars.js

More widely adopted and has a larger community, leading to better support and resources
Offers pre-compilation of templates for improved performance
Provides built-in helpers and the ability to create custom helpers easily

Cons of Handlebars.js

Slightly more complex syntax compared to Dust.js
Less focus on asynchronous rendering, which Dust.js handles well
May have a steeper learning curve for beginners

Code Comparison

Handlebars.js:

{{#each items}}
  <li>{{name}}: {{price}}</li>
{{/each}}

Dust.js:

{#items}
  <li>{name}: {price}</li>
{/items}

Both templating engines offer similar functionality, but Handlebars.js uses double curly braces {{}} for expressions, while Dust.js uses single curly braces {}. Handlebars.js also explicitly uses the #each helper for iteration, whereas Dust.js implicitly iterates over arrays.

Handlebars.js is generally more popular and has a larger ecosystem, making it easier to find resources and support. It also offers pre-compilation of templates, which can improve performance in certain scenarios. However, Dust.js excels in asynchronous rendering and has a slightly simpler syntax, which may be preferable for some developers.

Ultimately, the choice between the two depends on specific project requirements, team familiarity, and performance considerations.

pug

21,636

Pug – robust, elegant, feature rich template engine for Node.js

Pros of Pug

More concise and readable syntax with significant whitespace
Extensive features including mixins, includes, and inheritance
Active development and community support

Cons of Pug

Steeper learning curve due to unique syntax
Less flexibility in mixing HTML and template code

Code Comparison

Pug:

doctype html
html(lang="en")
  head
    title= pageTitle
  body
    h1 Welcome
    p= message

Dust.js:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{pageTitle}</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>{message}</p>
  </body>
</html>

Key Differences

Syntax: Pug uses indentation and minimal punctuation, while Dust.js resembles HTML more closely
Learning Curve: Dust.js may be easier for developers familiar with HTML
Features: Pug offers more built-in features and language constructs
Performance: Dust.js is generally faster in rendering, especially for large templates
Use Cases: Pug is popular for Node.js projects, while Dust.js is often used in enterprise environments

Conclusion

Both templating engines have their strengths. Pug excels in readability and feature-richness, while Dust.js offers better performance and an HTML-like syntax. The choice between them depends on project requirements, team familiarity, and performance needs.

nunjucks

8,536

A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)

Pros of Nunjucks

More active development and maintenance
Larger community and ecosystem
Better documentation and learning resources

Cons of Nunjucks

Slightly steeper learning curve for beginners
May be overkill for simple templating needs

Code Comparison

Nunjucks:

{% for item in items %}
  <li>{{ item.name }}</li>
{% endfor %}

Dust.js:

{#items}
  <li>{name}</li>
{/items}

Summary

Nunjucks, developed by Mozilla, offers a more feature-rich and actively maintained templating solution compared to Dust.js. It provides a larger ecosystem, better documentation, and more community support. However, this comes at the cost of a slightly steeper learning curve.

Dust.js, created by LinkedIn, is simpler and may be more suitable for basic templating needs. Its syntax is more concise, which can be advantageous for smaller projects or developers who prefer a minimalistic approach.

Both templating engines support similar core features like loops, conditionals, and filters. The choice between them often depends on project requirements, team familiarity, and the need for long-term support and updates.

mustache.js

16,412

Minimal templating with {{mustaches}} in JavaScript

Pros of Mustache.js

Simpler syntax and easier to learn for beginners
Lightweight and faster rendering for small templates
Wide language support with implementations in many programming languages

Cons of Mustache.js

Limited logic capabilities in templates
Lack of advanced features like asynchronous rendering and streaming
Less suitable for complex, large-scale applications

Code Comparison

Mustache.js:

var view = {
  name: "John",
  greeting: function() {
    return "Hello, " + this.name + "!";
  }
};
Mustache.render("{{greeting}}", view);

Dust.js:

var compiled = dust.compile("Hello, {name}!", "greeting");
dust.loadSource(compiled);
dust.render("greeting", {name: "John"}, function(err, out) {
  console.log(out);
});

Key Differences

Mustache.js uses a logic-less templating approach, while Dust.js allows for more complex logic within templates
Dust.js supports asynchronous rendering and streaming, which Mustache.js does not
Mustache.js has a simpler API and is easier to set up, while Dust.js offers more advanced features for larger applications

Use Cases

Mustache.js: Small to medium-sized projects, simple templating needs, multi-language environments
Dust.js: Large-scale applications, complex templating requirements, performance-critical scenarios with streaming support

eta

1,401

Embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript

Pros of Eta

Faster rendering performance
Smaller bundle size and lighter weight
More active development and maintenance

Cons of Eta

Less mature and battle-tested in production environments
Smaller community and ecosystem compared to Dust.js
Fewer built-in helpers and plugins

Code Comparison

Dust.js:

{#users}
  <p>{name} is {age} years old</p>
{/users}

Eta:

<% it.users.forEach(function(user) { %>
  <p><%= user.name %> is <%= user.age %> years old</p>
<% }) %>

Key Differences

Syntax: Dust.js uses a more compact, logic-less templating syntax, while Eta allows for more JavaScript-like expressions
Performance: Eta generally offers faster rendering times, especially for larger templates
Learning Curve: Dust.js may be easier for non-programmers to learn, while Eta's syntax is more familiar to JavaScript developers
Flexibility: Eta provides more control and flexibility in template logic, whereas Dust.js encourages separation of logic from templates

Use Cases

Dust.js: Large-scale applications with complex templating needs, especially those requiring server-side rendering
Eta: Projects prioritizing performance and smaller bundle sizes, or those preferring a more JavaScript-like templating syntax

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Dust.js

Asynchronous Javascript templating for the browser and server. This fork is maintained by LinkedIn.

Install

NPM

Important: We recommend that you lock your version of Dust to a specific minor version, instead of a major version. By default, NPM will add "dustjs-linkedin": "^2.x.y" to your package.json, which will install new minor versions automatically.

npm install --save --production dustjs-linkedin
# If you want the dustc compiler available globally
npm install --global --production dustjs-linkedin

If you want to add the Dust helpers or secure filters:

npm install --save --production dustjs-helpers

Bower

bower install --save dustjs-linkedin

Get Started

Read dustjs.com for guides, tutorials, and documentation.
Check out the examples/ directory in the repo for simple examples to help you get started using Dust in a variety of ways.

Contribute

The team provides support on Stack Overflow, so that's the best place to ask questions.
Bug or feature? We welcome issues and pull requests! If you'd like to submit a PR, check out the guide to contributing. PRs should include unit tests.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of EJS

Cons of EJS

Code Comparison

Summary

Pros of Handlebars.js

Cons of Handlebars.js

Code Comparison

Pros of Pug

Cons of Pug

Code Comparison

Key Differences

Conclusion

Pros of Nunjucks

Cons of Nunjucks

Code Comparison

Summary

Pros of Mustache.js

Cons of Mustache.js

Code Comparison

Key Differences

Use Cases

Pros of Eta

Cons of Eta

Code Comparison

Key Differences

Use Cases

Convert designs to code with AI

README

Dust.js

Install

NPM

Bower

Get Started

Contribute

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days