jQuery components

Component-based application framework.

Not bound to any template language.

Designed for Progressive Enhancement.

Nested components.

Multiple components on a same DOMElement.

Can be extended at runtime.

Responsive components.

Warning: This is a draft, not ready for production

gh-pages and master branches have different script versions at the moment.

Do not expect demos working with master branch.

API is not frozen, functions and properties can change names at any time

Features

Not bound to any template language. Use plain JavaScript if you want, or load preferred one.
Designed for Progressive Enhancement. Components are extending or replacing existing HTML code, which is useful for clients without JavaScript, such as crawlers (SEO), browsers with no or disabled support and other bots.
Components can be initialized with JavaScript only and do not require pre-existing HTML code on a page.
Components can be built as services and do not require creation of any HTML code at all.
Nested components. Components can initialize all known application components withing itself, without knowledge of their specific names. Useful when loading rich content withing itself (for example, for modal window component).
Multiple components on a same DOMElement. This allows compact HTML code.
Components can be extended at runtime: replace ‘extend’ method with own code. For example, component can be made singleton by replacing ‘instance’ method.
Responsive components. Every component is receiving resize events, use .on('resize' to recalculate it’s size or hide/show some elements.

TODO

? Access to parent/child scope, object as a value
? Component router with History support
Implement events on separate components
Check order of resize events
?
…

Component definition

new component(String name, Object definition)

(new component('component-codename', {
	'render': function(){
		var self = this; // "this" points to component instance

	},
})).ready();

Component lifecycle

DOMElement is passed to component.e & component.$e
component.render() is called
[model=*] bindings are applied
component.service() is called.

Placing component into HTML page

Some placeholder content

For search engines and other clients without javascript

<body>
	<div class="panel panel-default">
		<div component="component-codename" class="panel-body">
			<h1>Some placeholder content</h1>
			<p>For search engines and other clients without javascript</p>
		</div>
	</div>
	<script>
	(new component('component-codename', {
		'render': function(){
			var self = this;
			self.$e.before($(document.createElement('div')).addClass('panel-heading').text('Sample text'));
		},
		'service': function(){
			var self = this;
			var i = 0;
			setInterval(function(){
				// simple example
				self.$e.text(i++);
			}, 1000);
		}
	})).ready();
	</script>
</body>

Clock Example

Some placeholder content

<div class="panel panel-default">
	<div component="example-clock" class="panel-body">
		<h1>Some placeholder content</h1>
	</div>
</div>

(new component('example-clock', {
	'render': function(){
		var self = this;
		self.$e.text((new Date()).toTimeString());
	},
	'service': function(){
		var self = this;
		setInterval(function(){
			self.$e.text((new Date()).toTimeString());
		}, 1000);
	}
})).ready();

License

MIT