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.
Careful / logical class naming
By default, there are five groups of classes:
- abstract base classes used when building other classes
- components which directly reflect core Bootstrap components
- components from other sources but which integrate well with bootstrap
- advanced components, most of which have interaction after initial build
- a few often-used classes
Class names are always lowercase.
As a rule, user created components belong in
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
widget.foo classes is inconvenient when making use of the
$E magic method.
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
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
tag. Thus, as mentioned above, if you have
$E('foo') will always return an instance of
If no matching class is found,
$E returns an instance of the generic
$E permits a single argument to simplify certain usages. For example:
var obj = $E('badge').child('42');
var obj = $E('badge','42');