Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
50 lines (39 sloc) 2.58 KB

Client-side components

The web development nowadays is all about managing HTML, CSS and JavaScript. AbsurdJS is a JavaScript library and could produce CSS and HTML. And because it is ported for a client-side usage it was normal to form some kind of web components. Components which are truly built with JavaScript. No external CSS files or HTML templates.

var absurd = Absurd();
var ComponentClass = absurd.component("ComponentName", {
	css: {
		'.component': {
			h1: { color: '#F00' }
	html: {
		'.component': {
			h1: '<% %>'
	constructor: function(name) { = name;
		  this.set('parent', this.qs('body')).populate();
var comp = ComponentClass("AbsurdJS");

absurd.component API defines a class, which you later could create instances from. The entry point of every component is its .constructor method. In the example above we set a local variable name which is used in the HTML template of the component. this.set('parent', ...) tells to AbsurdJS what will be the parent DOM element and this.qs is just an alias to document.querySelector. populate is the only one long method. It checks for css and html properties and launches the proper preprocessors. As a result your page contains a new <style> tag and a new <div class="component"> element into the DOM.

<style id="ComponentName-css" type="text/css"> .component h1 { color: #F00; } </style> <div class="component"> <h1>AbsurdJS</h1> </div>

Here is a JSBin to play with:

JS Bin<script src=""></script>

The main goal of AbsurdJS components are to implement things which you already know and use. At the same time acts as an utility, as a helper and not as a framework. For example, every component is actually an event dispatcher, there is dependency injector implemented. You could use the build-in Router or the HTTP request module. What you should remember is that it is up to you to bootstrap the components and wire them into a complete application. Frameworks like Angular, Knockout or Ember provide enormous list of features and if you want to use a framework then you better check them. However, if you need a custom solution or you want to extend the already started project AbsurdJS is suitable for you. It is a minimalistic collection of helpful JavaScript snippets which main purpose is to avoid all those magical moments.