10 Feb Quantum.js
Today marks the first release of [Quantum.js](https://github.com/mlcheng/js-quantum), a new library designed with simplicity and ease-of-use in mind. Each feature inside Quantum.js can be used separately without the need of including the entire library. As of today, Quantum.js is only *12.7kb* minified, and it features:
* [Data binding](https://github.com/mlcheng/js-binding)
* [Drag and drop](https://github.com/mlcheng/js-dragdrop) for files
* [State/URL management](https://github.com/mlcheng/js-history) for SPAs
* Simple [http library](https://github.com/mlcheng/js-http) for network requests
* [HTML templating](https://github.com/mlcheng/js-template)
* Beautiful [toast notifications](https://github.com/mlcheng/js-toast)
* [Snackbar notifications](https://github.com/mlcheng/js-snackbar) that extend toasts
* And finally, a [testing framework](https://github.com/mlcheng/js-test)
Ever since the first module was [created last May](https://github.com/mlcheng/js-binding/commit/86dae0ac2dca20fc13f918cbf9172fa3420e0745), I've always found it particularly fun to be able to create a simple library that just works. Obviously, the level of "it just works" will never reach that of something as polished as React or Angular. But for simple use cases, it does the job. For example, data binding is as simple as
```
// JS
let person = {
firstName: 'Michael',
lastName: 'Cheng'
};
iqwerty.binding.Model({person});
// HTML
<element data-iq-bind-scope="person">{firstName} {lastName}</element>
```
Compared to Angular
```
// JS
module.controller('PersonController', () => {
let vm = this;
vm.person = {
firstName: 'Michael',
lastName: 'Cheng'
};
});
// HTML
<element ng-controller="PersonController as pc">
{{pc.person.firstName}} {{pc.person.lastName}}
</element>
```
There are a few gotchas and limitations to Quantum.js since each module was initially created as an experiment. Therefore it is wise to read the documentation thoroughly or even submit a few PRs yourself! I am also constantly improving the modules. Just a few weeks ago, I pushed an update that improved the data binding library's performance by 100%.
If you're looking to have increased functionality in your web app but aren't too excited about Angular 1.5.x's 150kb size, try out [Quantum.js](https://github.com/mlcheng/js-quantum). Maybe you'll regret it, maybe you won't!
Comments
Congrats on publishing the lib. It looks pretty awesome. It must have been a pain putting the data binding together.
Thanks Nish! Yeah, I think it was either data binding or state management that caused the most trouble. I'm quite satisfied with the results though, haha :) Are you familiar with Angular? I seem to remember you used Angular in Podfire a while ago.
Yeah great work on that. It looks awesome. We use Polymer now, with material design and all that. Works well and really easy to put together.
I tried Polymer a while back, but it doesn't seem *quite* ready yet. I tried to build a small app using it but couldn't find enough documentation (or maybe I just don't get the Polymer way, haha)
It's way different now. Lots of great features especially with the element catalog. You basically just import whatever you need :) It's great for noobs like me with no skill.