better-dom: Live extension playground
![Bower version](https://camo.githubusercontent.com/89eae65cad132683044b7a9b2a78102cdf88cf6a4e6607799869369e51b6be22/687474703a2f2f696d672e736869656c64732e696f2f626f7765722f762f6265747465722d646f6d2e737667)
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.
Vanilla DOM also has a lot of bad parts, that I'm trying to fix by providing a JavaScript wrapper for each DOM element you use in code. This extra layer allows to abstract from legacy interfaces and to add new methods on the top of particular elements without touching vanilla DOM prototypes. So the object model used is very different from what jQuery does.
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:
<script src="bower_components/better-dom/dist/better-dom.js"></script>
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.
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
input
event in IE8-9 change
event fix for checkboxes and radio buttons in IE8- fix for bubbling of the
submit
andreset
events 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-type
header of “text/x-component”, otherwise IE will simply ignore the file. Many web servers are preconfigured with the correctcontent-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.
- Chrome
- 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.