Fragbuilder.js

Document Fragment builder from JSON input.

Templating

Using a template engine on the server is nothing new. Client side templating on the other hand is a relative newcomer and some high profile websites have used it for some time now. The basic idea behind this is to not only offload the server from rendering the template, but also to easily leverage existing web service APIs while un-cluttering JavaScript code with markup.
FragBuilder aims to meet this need by efficiently converting your JSON or HTMLString input into a DocumentFragment which can then be inserted into the DOM.

HTML in your JavaScript?

How many time have you seen or been obligated to process strings of HTML within your JavaScript code? Workable but ugly chunks of return ‘<h2>’ + header + ‘</h2>’;. Separation of content anyone? I like the idea of having my JavaScript code completely free of any markup. If this principle has always been good on the server-side, why should it be any different on the client side? JSON is a well known, and accepted format for organizing data in JavaScript. It only makes sense...

Free up your server.

Obviously, the greater the load on the server, the slower the response time. A few years ago, client side templating was unthinkable because of the relative slowness of devices and browsers. With ever advancing technologies, hardware and browsers are getting speedier. Thanks to efficient JavaScript engines such as V8, Monkeys, Nitro and the like, delegating some CPU cycles off the server seems logical. We are simply moving from the Request -> Render -> Response paradigm to the Request -> Response -> Render one.

Servers are now serving static views and models while the controller sits on the client.

Web Service APIs, Who's content is it anyways?

Organizations are now adopting the idea that an open Web API to retrieve data information is a gold mine. One which we can easily leverage within our web apps using JSONP to retrieve the data. No need to set up a complex server architecture: Get data from a given web service, get the template off your static file server, render, and then voilà. Data from various sources can even be merged into complex models. Imagine pulling data from the data science toolkit to get coordinate information for a given IP address, then grabbing some photo URLs off Flickr and a map from Google for the associated coordinates. All this using a bit of JavaScript, JSON, some Unicorns, on the client side.

Demo


Results

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Support or Contact

Having trouble with FragBuilder? Check out the documentation at https://github.com/rlemon/FragBuilder.js or contact rob.lemon@gmail.com and I’ll help you sort it out.