Fragments.js

Fragments.js is a fast and extensible templating library for browser-based JavaScript applications. It relies on the simplicity and speed of DOM DocumentFragments to create templates and clone new views from them. Fragments.js is not a framework by itself but is meant to be used as the view portion of a framework. Think of it as a build-your-own-framework tool to be used with other libraries that provide routing, structure, etc.

Speed

Fragments.js is fast. Because most JavaScript applications are long-lived sessions, Fragments.js favors up-front compiling in order to make using the application faster. It caches in-template expressions as JavaScript functions that get reused anywhere the expression appears. It makes the minimum changes to the DOM without requiring a virtual DOM. It pools views for reuse. And it breaks a template up into sub-templates to make the best use of the view pools.

Extensibility

Fragments.js provides a data-binding system that allows using it in many different ways. Developers register Binders which process matching attributes, elements, or text nodes. This makes customizing your individual app’s language and features easy. This feature also provides the mechanism to make only the minimum changes needed to the DOM.

Fragments.js has a number of binders available which should cover many of an application’s generic needs, things like conditional display of an element or repeating items.

Features

Fragments.js provides the following features:

• Template creation from multiple sources (including strings of HTML, HTMLCollections or NodeLists, DocumentFragments, and Template elements)
• Template compilation, a one-time step at application startup which finds bindings within a template and allows the binders to perform optimization (e.g. the if-binder will pull out the element into a template that can be pooled amongst all the instances where it appears)
• View pooling, allowing views (instances of a template) to be reused as they exit and re-enter the DOM
• Animation support for binders that add/remove views from the DOM (repeat and if binders) using CSS and/or JavaScript
• Data-binding to update the view as data changes over time
• Plain JavaScript expressions (single-line of JavaScript) in data-binding, including function calls, &&s and ||s, ternary expressions, parenthesis, and registered globals
• Formatters, registered functions which allow formatting the results of expressions
• An ecosystem of pre-built binders available for use in your framework or project
• A build-your-own-framework base which multiple styles of framework can be built on
• No globals, plays well with other frameworks loaded in memory, even multiple versions of Fragments.js

How Fragments.js Works

An instance of Fragments holds all the templates, binders, formatters, animations, and settings for a given project. By keeping all of this stuff off the global scope, multiple instances of Fragments can be run in a page at the same time.

Compiled

When a template is registered with Fragments it goes through a compile. The compile will “walk the DOM” of the template looking for any elements, attributes, and text nodes that match a registered binder. This step does two things:

1. finds and instantiates binders within the template, running the binder’s compile step
2. cleans up the template, removing binder attributes (individual binders may also remove things) making the template as light as possible

Reuse

Fragments.js uses the minimal amount of DOM objects necessary to display the screen. View pools on the template make reuse a built-in part of Fragments.js. The application is broken up into pieces to make reuse as optimial as possible.

As part of the the compile, elements that are part of a repeat or if binder get removed from their parent template and turned into their own templates. An empty text node keeps the place of where the original element lived so that it can be inserted again in the same place when needed.

Applications are made up of components, reusable templates that are inserted into the page. These components can contain other components within them. Sections of a template may be repeated with a repeat bindner or conditionally displayed with an if binder. ifs may appear within repeats and visa versa. Components may appear within ifs or repeats as well as the other way around. So if

Using Fragments.js

Fragments.js is a library for templating and data-binding within frameworks. It is not a pretty boxed solution that you can get started with immediately. That being said, if you are interested in using it, Fragments.js is meant to be used as a common-js module using tools like Webpack, Browserify, Brunch, or JSPM. Include Fragments.js in your project using:

npm install --save fragments-js