MNLA
MNLA is a wrapper for the Manila template engine that provides universal (isomorphic) rendering and client-side data binding. It adds only 2.5KB of client-side code and 2KB of server-side code on top of the Manila template engine, which is 4KB of server-side code.
Installation
npm install mnla --save
This documentation assumes you are using Express.
Example Setup
You can demo the Hello World yourself:
git clone https://github.com/mgrahamjo/mnla && cd mnla/hello-world && npm install && node index
Server side:
const express = require('express'),
app = express(),
mnla = require('mnla')();
app
.use(express.static('assets'))
.use(express.static('node_modules/mnla'))
.engine('mnla', mnla)
.set('view engine', 'mnla')
.get('/', require('./controllers/index'))
.get('/message', require('./controllers/message'))
.listen(1337, () => {
console.log('Listening on localhost:1337');
});
module.exports = (req, res) => {
res.json({
message: "hello, world!"
});
};
const manila = require('mnla/server');
module.exports = (req, res) => {
manila({
message: require('./message'),
input: {
message: "hello, world!"
},
},
req, res)
.then(templateData => {
res.render('index', templateData);
});
};
<h1><:message:></h1>
<input type="text" <:on('input', updateMessage):> value="<:message:>" />
<!DOCTYPE html>
<html>
<head>
<title>MNLA</title>
</head>
<body>
<::component.message::>
<::component.input::>
<::clientData::>
<script src="/dist.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
Client side:
manila
.component('message', vm => {
return {
update: message => {
vm.message = message;
}
};
})
.component('input', vm => {
vm.updateMessage = event => {
manila.components.message.update(event.target.value);
};
});
Now you can run node index
, and open up http://localhost:1337. The html is populated with the "hello, world!" message even before the client side javascript runs, and it stays up-to-date as you update the input.