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:
// index.jsconst express = app = mnla = ; app // Define the location of your static assets: // If you aren't using a bundler like Browserify, // add a static route for the MNLA source code: // Tell Express to use the MNLA template engine: // Set up some routes: // JSON endpoint // Start the app ;
// controllers/message.js// Here is a controller for the json endpoint /message. module { res;};
// controllers/index.jsconst manila = ; module { ;};
<!-- views/message.mnla --><!-- This is the template for the message component -->
<!-- views/input.mnla --><!-- This is the template for the input component --><!-- 'on' is a special method that you can use to listen to DOM events. --><!-- 'updateMessage' is a custom handler that we'll define in a client side script. --> value="" />
<!-- views/index.mnla --> MNLA <!-- since we've set up the 'message' and 'input' components, we can render them thusly: --> <!-- to allow client-side data binding, include this at the end of the body: --> <!-- and don't forget your client side scripts: --> <!-- this is from the node_modules/mnla folder --> <!-- this is from the assets folder -->
Client side:
// assets/js/app.jsmanila;
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.