This code bleeds!

Entegre JS is built using ECMAScript 6 and strict mode. This means you'll need Chrome 42+, Firefox 45+, Safari 9+, or Edge 13. Even then, not all features may work for you.

The purpose of this UI toolkit is to make programmatic use of Bootstrap components easier.

Application development is the main target use for Entegre. It isn't intended for regular web page use. This distinction has important SEO ramifications due to the way Entegre works. It injects code into the DOM which won't exist in the actual source code, so search engines, etc. will not see the additional content/markup. This is different from the core way jQuery and jQuery plugins work as they generally apply some style and logic to existing DOM nodes and only add DOM nodes when necessary.

Core Concepts

Careful / logical class naming

By default, there are five groups of classes:

factory
abstract base classes used when building other classes
bootstrap
components which directly reflect core Bootstrap components
widget
components from other sources but which integrate well with bootstrap
control
advanced components, most of which have interaction after initial build
tag
a few often-used classes

Class names are always lowercase.

As a rule, user created components belong in widget or control depending on the implementation and use.

Care is taken in naming components to ensure uniqueness whenever possible. While uniqueness across groups is not required, having both bootstrap.foo and widget.foo classes is inconvenient when making use of the $E magic method.

Chainable methods

Like jQuery, most Entegre methods return this, making method calls chainable.

The only time this is difficult is when creating an instance of an object:

var obj = new E.bootstrap.p();
obj.child( 'Hello, world!' );

With a little extra syntax, we can make the constructor call chainable:

var obj = ( new E.bootstrap.p() ).child( 'Hello, world!' );

The added parenthesis isn't very pretty, and decreases code readability, so we introduce the $E magic method.

Recursive object build

All final classes in Entegre are designed to be added to objects recursively, so it is necessary to have a build or toString method in any object that has output if that object is not already natively string-convertible.

Also, any object which will inject it's own output into the DOM requires an append method. This method is a glorified wrapper for jQuery's append method, so the only parameter needed is any jQuery acceptable DOM element selector.

Late DOM modification

Entegre components only modify the DOM when absolutely required, namely when append() is called.

This allows the application to build the render stack in memory and keep expensive DOM modification calls to a mimimum.

$E magic method

To facilitate code readability and constructor method chaining, $E looks for the first available class with the specified name and returns an instance.

var obj = $E('p').child( 'Hello world!' );

Search order is bootstrap, widget, control, tag. Thus, as mentioned above, if you have bootstrap.foo and widget.foo, $E('foo') will always return an instance of bootstrap.foo.

If no matching class is found, $E returns an instance of the generic node class.

$E permits a single argument to simplify certain usages. For example:

var obj = $E('badge').child('42');

VS

var obj = $E('badge','42');
Last modified: 2016-02-22