• Stars
    star
    135
  • Rank 269,297 (Top 6 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Benchmarking framework for multiple templating engines

templating-benchmarks

This project provides a framework for running benchmarks against multiple templating engines under Node.js. The following templating engine modules are currently integrated:

Template Syntax Streaming Asynchronous Auto-escape
dustjs-linkedin Text ✔ ✔ ✔
doT Text ✖ ✖ ✖
handlebars Text ✖ ✖ ✔
pug Short-hand HTML ✖ ✖ ✔
marko HTML/Concise HTML ✔ ✔ ✔
nunjucks Text ✖ ✔ ✖
react1 JSX ✖ ✖ ✔
swig Text ✖ ✖ ✔

NOTE 1: While React is not a "templating engine", it is commonly used to render HTML on the server so it has been included in this benchmark.

Table of Contents

Run Benchmarks

  1. Clone this repository
  2. npm install
  3. npm test (or make)

Current Results

The following results were collected with the following setup:

  • Node.js v7.4.0
  • MacBook Pro (Retina, 15-inch, Mid 2014)
  • Processor: 2.8 GHz Intel Core i7
  • Memory: 16 GB 1600 MHz DDR3

Performance

Higher numbers are better.

                      RUNTIME PERFORMANCE
                      ===================
                      friends
                   ✓ marko »    4,780 op/s (fastest)
                    ✗ dust »      868 op/s (81.84% slower)

                      if-expression
                   ✓ marko »  603,718 op/s (fastest)
                     ✗ pug »  495,798 op/s (17.88% slower)
                    ✗ jade »   73,946 op/s (87.75% slower)

                      projects-escaped
                   ✓ marko »  116,897 op/s (fastest)
      ✗ marko (native-for) »  114,487 op/s (2.06% slower)
              ✗ handlebars »   64,465 op/s (44.85% slower)
                    ✗ dust »   41,080 op/s (64.86% slower)

                      projects-unescaped
      ✓ marko (native-for) »  476,404 op/s (fastest)
                   ✗ marko »  416,648 op/s (12.54% slower)
              ✗ handlebars »  182,510 op/s (61.69% slower)
                    ✗ dust »  123,418 op/s (74.09% slower)

                      reverse-helper
                   ✓ marko »  571,518 op/s (fastest)
                    ✗ dust »  361,126 op/s (36.81% slower)

                      search-results
                   ✓ marko »   47,645 op/s (fastest)
                    ✗ dust »   15,447 op/s (67.58% slower)

                      simple-0
                   ✓ marko »  472,020 op/s (fastest)
                     ✗ es6 »  466,638 op/s (1.14% slower)
                  ✗ lodash »  291,743 op/s (38.19% slower)
                    ✗ dust »  250,187 op/s (47.00% slower)

                      simple-1
                     ✓ pug »  415,779 op/s (fastest)
                   ✗ marko »  363,983 op/s (12.46% slower)
                     ✗ dot »  299,093 op/s (28.06% slower)
              ✗ handlebars »  161,886 op/s (61.06% slower)
                    ✗ dust »  135,315 op/s (67.46% slower)
                    ✗ jade »   88,483 op/s (78.72% slower)
                ✗ nunjucks »   56,782 op/s (86.34% slower)
                    ✗ swig »   54,721 op/s (86.84% slower)
                     ✗ vue »   15,601 op/s (96.25% slower)
                   ✗ react »    3,874 op/s (99.07% slower)

                      simple-2
                   ✓ marko »  437,265 op/s (fastest)
                    ✗ dust »  154,719 op/s (64.62% slower)

                      ui-components
                   ✓ marko »  199,304 op/s (fastest)
                   ✗ react »    3,621 op/s (98.18% slower)

Compiled Size

Lower numbers are better.

                      COMPILED SIZE (gzipped/uncompressed)
                      ====================================
                      friends
                    ✓ dust »   489 bytes gzipped    1378 bytes uncompressed
                                      (smallest)                 (smallest)
                   ✗ marko »   667 bytes gzipped    1887 bytes uncompressed
                                   26.69% larger              26.97% larger

                      if-expression
                   ✓ marko »   344 bytes gzipped     680 bytes uncompressed
                                      (smallest)                 (smallest)
                    ✗ jade »   388 bytes gzipped    1049 bytes uncompressed
                                   11.34% larger              35.18% larger
                     ✗ pug »   905 bytes gzipped    2138 bytes uncompressed
                                   61.99% larger              68.19% larger

                      projects-escaped
                    ✓ dust »   262 bytes gzipped     554 bytes uncompressed
                                      (smallest)                 (smallest)
                   ✗ marko »   432 bytes gzipped    1182 bytes uncompressed
                                   39.35% larger              53.13% larger
      ✗ marko (native-for) »   445 bytes gzipped    1182 bytes uncompressed
                                   41.12% larger              53.13% larger
              ✗ handlebars »   558 bytes gzipped    1594 bytes uncompressed
                                   53.05% larger              65.24% larger

                      projects-unescaped
                    ✓ dust »   268 bytes gzipped     586 bytes uncompressed
                                      (smallest)                 (smallest)
                   ✗ marko »   419 bytes gzipped    1125 bytes uncompressed
                                   36.04% larger              47.91% larger
      ✗ marko (native-for) »   433 bytes gzipped    1125 bytes uncompressed
                                   38.11% larger              47.91% larger
              ✗ handlebars »   535 bytes gzipped    1626 bytes uncompressed
                                   49.91% larger              63.96% larger

                      reverse-helper
                    ✓ dust »   147 bytes gzipped     312 bytes uncompressed
                                      (smallest)                 (smallest)
                   ✗ marko »   246 bytes gzipped     524 bytes uncompressed
                                   40.24% larger              40.46% larger

                      search-results
                    ✓ dust »   544 bytes gzipped    1514 bytes uncompressed
                                      (smallest)               0.59% larger
                   ✗ marko »   597 bytes gzipped    1505 bytes uncompressed
                                    8.88% larger                 (smallest)

                      simple-0
                    ✓ dust »   173 bytes gzipped     234 bytes uncompressed
                                      (smallest)                 (smallest)
                   ✗ marko »   213 bytes gzipped     345 bytes uncompressed
                                   18.78% larger              32.17% larger

                      simple-1
                   ✓ react »   395 bytes gzipped     850 bytes uncompressed
                                      (smallest)               5.53% larger
                    ✗ dust »   413 bytes gzipped     884 bytes uncompressed
                                    4.36% larger               9.16% larger
                   ✗ marko »   485 bytes gzipped     956 bytes uncompressed
                                   18.56% larger              16.00% larger
                     ✗ dot »   491 bytes gzipped     803 bytes uncompressed
                                   19.55% larger                 (smallest)
                    ✗ jade »   524 bytes gzipped    1116 bytes uncompressed
                                   24.62% larger              28.05% larger
                ✗ nunjucks »   599 bytes gzipped    1367 bytes uncompressed
                                   34.06% larger              41.26% larger
              ✗ handlebars »   617 bytes gzipped    1492 bytes uncompressed
                                   35.98% larger              46.18% larger
                    ✗ swig »   756 bytes gzipped    3378 bytes uncompressed
                                   47.75% larger              76.23% larger
                     ✗ pug »  1047 bytes gzipped    2304 bytes uncompressed
                                   62.27% larger              65.15% larger

                      simple-2
                    ✓ dust »   267 bytes gzipped     639 bytes uncompressed
                                      (smallest)                 (smallest)
                   ✗ marko »   311 bytes gzipped     739 bytes uncompressed
                                   14.15% larger              13.53% larger

                      ui-components
                   ✓ react »   204 bytes gzipped     310 bytes uncompressed
                                      (smallest)                 (smallest)
                   ✗ marko »   274 bytes gzipped     559 bytes uncompressed
                                   25.55% larger              44.54% larger

Client-side Runtime Sizes

Below are the approximate runtime sizes for each engine (lower numbers are better):

Marko

| Modules | Size | | ------------- |:-------------:| -----:| | marko | ~1.2KB gzipped (2.7KB uncompressed) | | marko +
async-writer +
raptor-xml/util | ~2.33KB gzipped (6.3KB uncompressed) |

NOTE: Sizes are approximate because overhead associated with the CommonJS module loader varies. Size based on code as of April 7, 2014.

Dust

| Modules | Size | | ------------- |:-------------:| -----:| | dust-core | 3.41KB gzipped (10.07KB uncompressed) | | dust-core +
dust-helpers | 4.7KB gzipped (14.2KB uncompressed) |

NOTE: Size based on code as of April 7, 2014.

Contribute

Adding a New Comparison Group

Each comparison group should contain a data file (either data.json or data.js) and a set of templates to compare. The file extension of the template will be used to determine which engine should be used. If the data file has the .js extension then it should be a JavaScript module that exports the data. A sample directory structure is shown below:

templates
    ├── group1
    │   ├── data.js
    │   ├── template.dust
    │   └── template.marko
    ├── group2
    │   ├── data.json
    │   ├── template.dust
    │   └── template.marko
    ├── group3
    │   ├── data.json
    │   ├── template.dust
    │   ├── template.native-for.marko
    │   └── template.marko
    └── group4
        ├── data.json
        ├── template.dust
        └── template.marko

Adding a New Template Engine

To register a new templating engine, simply create a new module under the engines directory and it will automatically be loaded. See existing engine modules for supported methods and properties.

Pull Requests welcome!

More Repositories

1

marko

A declarative, HTML-based language that makes building web apps fun
JavaScript
13,178
star
2

isomorphic-ui-benchmarks

Client/server benchmarks for various UI libraries
JavaScript
245
star
3

htmljs-parser

An HTML parser recognizes content and string placeholders and allows JavaScript expressions as attribute values
TypeScript
137
star
4

run

The Marko application framework
TypeScript
131
star
5

writable-dom

Utility to stream HTML content into a live document.
TypeScript
100
star
6

cli

command-line tools for Marko
JavaScript
94
star
7

examples

54
star
8

vite

A Marko plugin for Vite
TypeScript
53
star
9

micro-frame

A Marko tag for building SSR friendly micro frontends.
HTML
50
star
10

language-server

Marko autocomplete, intellisense and editor support.
TypeScript
38
star
11

website

The markojs.com website
Marko
36
star
12

atom-language-marko

Syntax highlighting in Atom for the Marko templating language
JavaScript
33
star
13

testing-library

Simple and complete Marko testing utilities that encourage good testing practices.
TypeScript
33
star
14

tags

Not quite core components.
JavaScript
22
star
15

tags-api-preview

Preview the Marko 6 "Tags API" in Marko 5!
TypeScript
22
star
16

marko-tmbundle

TextMate bundle for the Marko templating language
Marko
20
star
17

x

experiments. do not use.
TypeScript
19
star
18

rollup

A Marko plugin for Rollup.
TypeScript
16
star
19

markojs.com-legacy

Source code for markojs.com
JavaScript
14
star
20

prettier

A prettier plugin for parsing and printing Marko files.
Marko
13
star
21

webpack

A loader for marko files and a plugin for universal bundling
JavaScript
13
star
22

fastify

Render Marko templates in a Fastify application.
TypeScript
10
star
23

ssr-to-html

Crawl a server rendered application and output html files.
TypeScript
9
star
24

express

Render Marko templates in an express application.
TypeScript
9
star
25

jest

A preprocessor and preset to use Marko with Jest
TypeScript
8
star
26

urql

An isomorphic URQL GraphQL client for Marko
TypeScript
7
star
27

tutorial-blog

Blog site tutorial to demonstrate basic concepts in Marko
Marko
6
star
28

community

Meetings, proposals & other community related discussions
5
star
29

fixture-snapshots

A tool for loading fixtures and creating snapshot tests
TypeScript
5
star
30

marko-migrate

Tool for migrating a project using marko v2 to marko v3
JavaScript
5
star
31

branding

Logos and other graphics for Marko
4
star
32

utils

A set of utilities used by the Marko ecosystem. 🛠
JavaScript
4
star
33

marko-js.github.io

Statically generated files for markojs.com
HTML
4
star
34

screencasts

Project source code associated with Marko screencasts
JavaScript
3
star
35

relative-import-path

Like path.relative for generating short require'able paths.
TypeScript
1
star
36

compat

Marko compat taglibs
JavaScript
1
star
37

markojs-website-v3

Marko v3 website (legacy)
JavaScript
1
star
38

migrate-v3-widget

Migrates a Marko v3 widget to a v4 component.
TypeScript
1
star
39

marko.run

Marko Run website
Marko
1
star