https://github.com/atmajs/mask-node

DOM / Components / Controllers for nodejs
https://github.com/atmajs/mask-node

Last synced: 6 days ago
JSON representation

DOM / Components / Controllers for nodejs

• Host: GitHub
• URL: https://github.com/atmajs/mask-node
• Owner: atmajs
• Created: 2013-04-27T16:00:50.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T22:43:19.000Z (over 1 year ago)
• Last Synced: 2024-04-14T22:12:06.892Z (7 months ago)
• Language: JavaScript
• Size: 2.37 MB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
MaskJS for the Node.JS

----

[![Build Status](https://travis-ci.org/atmajs/mask-node.png?branch=master)](https://travis-ci.org/atmajs/mask-node)

[MaskJS](https://github.com/atmajs/MaskJS)

#### Features overview

- NodeJS HTML Renderer: mask templates, components, custom attributes, etc.

- renders **meta information** for the custom tags, attributes and utils, so that all components are proper initialized on the client

- serialize and deserialize models

- components **render mode** - `server` / `client` or `both` (_default_).

- Caching: components could be cached after first render.

#### Benefits

- hide sensitive application parts in server-side-only components

- front-end application startup performance - client gets plain html.

- SEO: Bots can crawl the application 

Short overview, how it works:

_Some template_

```sass

h4 > '~[username]'

:profile {

	input type=text value='~[age]';

	button x-signal='click: sendAge' > 'Send'

}

```

_Server-side rendering_

```javascript

var html = mask.render(template, { username: 'John', age: 27 });

```

_Client output_

```html

	
John

	

		;

		

		Send

	


```

Some additional work should be accomplished to initialize `:profile` component:

- include sources:

	- include the component's javascript source (_from example `:profile`_)

	- include `mask.js` and `mask.bootstrap.js`

- run ```mask.Compo.bootstrap()```

- That's all, now the component is fully functional, as if it was rendered on the client.

### Examples

- [define](examples/define/index.mask)

- [import](examples/import/index.mask)

> And only 2 commands to view them im browser:

```bash

$ npm install

$ npm run examples

# navigate to: http://localhost:5771/index

```

### Build

```bash

git submodule init && git submodule update

npm install

npm run build

```

### Run all tests

```

npm install

npm test

```

----

 :copyright: ` MIT; 2014-2015; The Atma.js Project `