frzr
v0.22.7
Published
Turboboosted 2 KB view library
Downloads
247
Readme
*FRZR*
Turboboosted 2 KB view library with 100 % test coverage.
Contributing:
Issues/pull requests are more than welcome! Please use the dev
branch for pull requests, thanks!
Install:
npm install frzr
Download:
- Development: https://pakastin.github.io/frzr/frzr.js (10 KB before, 3 KB after GZIP)
- Production: https://pakastin.github.io/frzr/frzr.min.js (4 KB before, 2 KB after GZIP)
- cdnjs: https://cdnjs.com/libraries/frzr
Latest updates
- v0.22: List no longer part of the build if not used (when tree shaking is in use)
- v0.21: JSX component support!
- v0.20: el.extend(tagName)
- v0.19: Destroy method + notifyDown helper
- v0.18: custom elements & custom attributes
- v0.17: lifecycle "events"
Using at server-side
Using with JSX
https://gist.github.com/fson/576eda4a5401fd078c18101cdda558e0#file-todo-js
Getting started
http://codepen.io/collection/XKwVMG (more will be added soon..)
Calendar project example
https://github.com/pakastin/frzr-calendar
Creating a table
https://jsfiddle.net/mhLq0p9r/1/
Performance
- http://mathieuancelin.github.io/js-repaint-perfs/
- http://pakastin.fi/perf
HelsinkiJS talk
http://youtu.be/0nh2EK1xveg
SurviveJS interview:
http://survivejs.com/blog/frzr-interview/
el(tagName, (attributes), (...children))
Creates a HTML element:
var p = el('p', { textContent: 'Hello world!' });
You can also define children:
var div = el('div', null, p);
You can also omit attributes:
var p = el('p', 'Hello world!' );
var div = el('div', p);
It's also possible the register custom elements and attributes, covered here.
svg(tagName, (attributes), (...children))
Works like el
, but creates a SVG element:
var circle = svg('circle', { cx: 50, cy: 50, r: 50 });
var canvas = svg('svg', { width: 100, height: 100 }, circle);
Creating components
Components (or Views) are just POJF (plain old JavaScript functions):
function Item () {
this.el = el('p');
}
Item.prototype.update = function (text) {
this.el.textContent = text;
}
var item = new Item();
item.update('Hello world!');
mount(document.body, item); // <body><p>Hello world!</p></body>
You can also use ES6 classes:
class Item {
constructor () {
this.el = el('p');
}
update (text) {
this.el.textContent = text;
}
}
const item = new Item();
item.update('Hello world!');
mount(document.body, item); // <body><p>Hello world!</p></body>
There are also some lifecycle "events" covered here.
new List(View, (key), (initData), (skipRender));
Automatically inserts, removes and even reorders components. Previous example makes a lot more sense now:
var list = new List(Item);
mount(document.body, list);
list.update([1, 2, 3]); // <body><p>1</p><p>2</p><p>3</p></body>
list.update([2, 3, 4, 5]); // <body><p>2</p><p>3</p><p>4</p><p>5</p></body>
By defining a second key
parameter you can reorder DOM elements. The third initData
parameter just gets sent to the Component constructor as a first argument, with item
and index
. The fourth skipRender
parameter skips the DOM update, if you want to implement a custom method.
mount(target, child)
You can mount HTML elements/components to HTML elements/components.
mount(document.body, p);
mount(document.body, div);
mount(div, p);
mountBefore(target, child, before)
mountBefore(document.body, svg, div);
unmount(target, child)
Unmounts element/component from element/component.
unmount(document.body, svg);
setChildren(target, [child])
This cleverly replaces target's children. Children already in the DOM automatically gets moved / kept in place.
setChildren(document.body, [p, svg]);
virtual-dom version
If you like virtual dom updates better, check out RZR. You can also mix & match!