better-dom: Live extension playground
This library is about ideas. After some time of using jQuery I found that it's just too big, has lack of features I need and the API design is debatable. In particular live extensions was one of the main ideas that encouraged me to build a new library from scratch.
Note, that the better-dom project is only about the DOM. It does not contain any AJAX or BOM helper.
- lightweight: ~5 kB gzipped
- live extensions
- getter and setter
- declarative animations
- microtemplating using the Emmet syntax
- improved event handling
The simplest way is to use bower:
$ bower install better-dom
This will clone the latest version of the better-dom with dependencies into the
bower_components directory at the root of your project. Then just include the script below on your web page:
If you need to support IE8-9 please read the section below.
- Read the FAQ
- Take a look at the better-dom wiki
- Check releases tab for getting the changes log
- Walk through the sorce code of existing projects that use better-dom.
In order to modify the source code you have to install gulp globally:
$ npm install -g gulp
The project uses set of ES6 transpilers to compile the output file. You can use command below to start development:
$ npm start
After any change it recompiles
build/better-dom.js and runs unit tests automatically.
Notes about old IEs
For IE8-9 support you have to incude an extra file via the conditional comment below before end of the
<head> on your page:
<html> <head> ... <!--[if IE]> <script src="bower_components/better-dom/dist/better-dom-legacy.js"></script> <![endif]--> </head> <body> ... <script src="bower_components/better-dom/dist/better-dom.js"></script> </body> </html>
This file contains several important addons for IE8-9:
- es5-shim is used to polyfill/fix missed standards-based functions
- html5shiv solves issue with HTML5 tags in IE8
- polyfill/fix for the
inputevent in IE8-9
changeevent fix for checkboxes and radio buttons in IE8
- fix for bubbling of the
resetevents in IE8
Later the library downloads
better-dom-legacy.htc file. This file helps to implement live extensions support and should be in the same folder with
better-dom-legacy.js. And that fact applies several important limitations which you should be aware of in case when IE8-9 support is needed:
HTC behaviors have to serve up with a
content-typeheader of “text/x-component”, otherwise IE will simply ignore the file. Many web servers are preconfigured with the correct
content-type, but others are not:
AddType text/x-component .htc
IE requires that the HTC file must be in the same domain with as the HTML page which uses it. If you try to load the behavior from a different domain, you will get an “Access Denied” error.
- Safari 6.0+
- Firefox 16+
- Internet Explorer 8+ (see notes)
- Opera 12.10+
- iOS Safari 6+
- Android 2.3+
- Chrome for Android
Opera Mini is out of the scope because of lack of support for CSS3 Animations.