shimjs
v0.18.7
Published
ShimJS Framework
Downloads
3
Readme
ShimJS
the two similar api calls in the render chain should reuse data rather than running the api call again
module.exports = function (html, render, query, cb) {
var user_get_params = {
token: query.token,
requesting_user_id: query.user_id,
user_id: query.user_id
};
var chain = [['collection', 'navbar', 'user/get', user_get_params],
['collection', 'title'],
['collection', 'insert'],
['collection', 'entry', 'collection/entry/get', {}],
['collection', 'entry', 'collection/entry/get', {}]];
render(html, chain, function (err, html) {
if (err) return cb(err);
return cb(null, html);
});
};ShimJS is an HTML/API templating system similar to AngularJS and ReactJS.
There are two major concerns with building a complicated website:
Loading a page that has been prerendered with all appropriate data from the server.
Updating a loaded with page with new data via pagination (next 10 results), addition (add an entry to a list), removal (remove an entry from a list), or update (following and unfollowing another user).
Project Setup
A ShimJS project is made up of two distinct parts that are shimmed together:
The API folder which contains a directory tree representing the API, with files named
fn.jsrepresenting API calls (containing the API logic). For example if our API directory was./api_directory/:api_directory/ user/ get/ fn.js update/ fn.js collection/ get/ fn.js add/ fn.js remove/ fn.jsThe above directory would result in 5 available API calls:
user/get user/update collection/get collection/add collection/removeThe HTML folder which contains a directory tree representing the HTML page structure. The HTML structure does not have to match or resemble the API structure at all. For example if our HTML directory was
./html_directory/:html_directory/ index.html user/ profile.html profile_edit.html profile_card.html collection/ display.htmlThe above directory would result in 5 available HTML pages:
index user/profile user/profile_edit user/profile_card collection/display
The Include Tag
Including one page in another and populating it with API data is done using include tags in HTML pages, and calling the render function.
Including a file with no data.
Syntax:
<include id="header" file="header">Example:
index.html
<html> <include id="header" file="header"> <body>This is my Page</body> </html>header.html
<head>This is my header</head>rendered
<html> <head>This is my header</head> <body>This is my Page</body> </html>Including a file with an object.
Syntax:
<include id="profile" file="profile">Example:
index.html
<html> <include id="profile" file="profile"> </html>profile.html
<img src="@(user.avatar)"><b>@(user.username)</b> <a href="user.html?user_id=@(user.user_id)&action=view">object
{ "user": { "avatar": "http://img.com/myavatar", "username": "Willy", "user_id": 12345 } }rendered
<html> <img src="http://img.com/myavatar"><b>Willy</b> <a href="user.html?user_id=12345&action=view"> </html>Conditionally including a file.
Syntax:
<include id="profile" file="profile" if="user.show">Example:
index.html
<html> <include id="profile" file="profile" if="user.show"> </html>profile.html
<img src="@(user.avatar)"><b>@(user.username)</b> <a href="user.html?user_id=@(user.user_id)&action=view">object
{ "user": { "avatar": "http://img.com/myavatar", "username": "Willy", "user_id": 12345, "show": false } }rendered
<html> <include id="profile"> </html>Including an array of objects using the same file.
Syntax:
<include id="profile" file="profile" for="users" each="user">Example:
index.html
<html> <include id="profile" file="profile" for="users" each="user"> </html>profile.html
<div class="card"> <img src="@(user.avatar)"><b>@(user.username)</b> <a href="user.html?user_id=@(user.user_id)&action=view"> </div>object
{ "users": [ { "avatar": "http://img.com/myavatar", "username": "Willy", "user_id": 12345 }, { "avatar": "http://img.com/hisavatar", "username": "Jackson", "user_id": 12346 }, { "avatar": "http://img.com/heravatar", "username": "April", "user_id": 12347 }, ] }rendered
<html> <div class="card"> <img src="http://img.com/myavatar"><b>Willy</b> <a href="user.html?user_id=12345&action=view"> </div> <div class="card"> <img src="http://img.com/hisavatar"><b>Jackson</b> <a href="user.html?user_id=12346&action=view"> </div> <div class="card"> <img src="http://img.com/heravatar"><b>April</b> <a href="user.html?user_id=12347&action=view"> </div> </html>
todo:
- make a true and false for conditional inclusion
- conditional iterative inclusion?
- recursive injection
- what if we want to inject a json object itself and not the value of one of its keys
- for in just a base array object
- render_append
- render_prepend