# monkberry

> Monkberry is a JavaScript library for building web user interfaces

Latest version **4.0.8** (published 2016-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install monkberry
pnpm add monkberry
yarn add monkberry
bun add monkberry
```

Provides the command `monkberry`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.8 |
| Published | 2016-09-16 |
| First published | 2015-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1487 |
| Author | Anton Medvedev |
| Maintainers | medv |
| Keywords | dom, template, view, ui |

## Links

- npm: https://www.npmjs.com/package/monkberry
- Repository: https://github.com/monkberry/monkberry
- Homepage: http://monkberry.js.org
- Issues: https://github.com/monkberry/monkberry/issues
- npm.io page: https://npm.io/package/monkberry

## Dependencies (3)

- [asciitree](https://npm.io/package/asciitree.md) ^1.0.2
- [commander](https://npm.io/package/commander.md) ^2.9.0
- [source-map](https://npm.io/package/source-map.md) ^0.5.6

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 4.0.8 (latest) — 2016-09-16
- 4.0.7 — 2016-07-07
- 4.0.6 — 2016-07-06
- 4.0.5 — 2016-07-06
- 4.0.4 — 2016-07-02
- 4.0.3 — 2016-06-26
- 4.0.2 — 2016-06-15
- 4.0.1 — 2016-06-11
- 4.0.0 — 2016-06-11
- 4.0.0-beta.6 — 2016-06-11
- 4.0.0-beta.5 — 2016-06-11
- 4.0.0-beta.4 — 2016-06-10
- 4.0.0-beta.3 — 2016-06-10
- 4.0.0-beta.2 — 2016-06-09
- 4.0.0-beta — 2016-06-09
- … 34 more at https://npm.io/package/monkberry/versions

## README

# Monkberry
[![npm](https://img.shields.io/npm/v/monkberry.svg)](https://www.npmjs.com/package/monkberry)
[![Build Status](https://travis-ci.org/monkberry/monkberry.svg?branch=master)](https://travis-ci.org/monkberry/monkberry)

Monkberry is **blazingly fast**, **small `1kb`** and **simple** JavaScript library for building **web user interfaces**.

## Example

Monkberry comes with powerfull templating engine, which is compiled to JavaScript.

```twig
<ol>
  {% for todos %}
    <li>
      {% if complete %}
        <del>{{ text }}</del>
      {% else %}
        <em>{{ text }}</em>
      {% endif %}
    </li>
  {% endfor %}
</ol>
```

and then

```js
import Monkberry from 'monkberry';
import Template from 'template.monk';

const view = Monkberry.render(Template, document.body);

view.update({todos: [...]});
```

## Features

* Small **`1kb`** minified & gzipped
* Simple, small learning curve
* Fully tested
* Precompiled templates
* Source maps
* Custom tags
* Blazingly fast (only necessary dom updates)

## Documentation

Documentation available on [monkberry.js.org](http://monkberry.js.org) site.

## Development

If you want to hack on Monkberry, the first step is to fork the repo.

```sh
# Build compiler
npm run build

# Build parser
npm run build:parser

# Watch changes and rebuild
npm run watch

# Start tests server
testem
```

## Plugins

* [Atom Package](https://atom.io/packages/language-monkberry)
* [Sublime Text Package](https://github.com/monkberry/language-monkberry)

## Performance

#### [Benchmarks](http://monkberry.github.io/benchmark/)

Why is Monkberry so fast? Even in comparison with React, Monkberry is **10 times faster**, sometimes **100 times faster**.
It's because Monkberry will do only necessary dom updates, and does it in a completely different way than React does.
Monkberry compiles template to plain JavaScript to gain an advantage by using v8 **hidden classes** and **reduce call stack**.
There is no virtual dom (in general, an react app have to keep 3 virtual doms), for example next template will be generated to JavaScript code which will do only necessary dom updates on state changes.

```twig
<div>
  ...
    <h1>{{ title }}</h1>
  ...
</div>
```

Will be compiled to code like this:

```js
function (state) {
  h1.textContent = state.title;
}
```

Benchmarks covers a few use cases and compares Monkberry with React and innerHTML. Also, it contains real site code and data.


## License

The MIT License (MIT) Copyright © 2016 Medvedev Anton

---
_Source: https://npm.io/package/monkberry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._