How to separate a JavaScript application in DOM-less and UI-layer

Part 1 => http://blog.narendrasisodiya.com/2014/05/what-is-dom-less-javascript-application.html ,

This is part 2 of the Tutorial

Demo => https://jsfiddle.net/nsisodiya/d2yQz/

Explanation =>

This is not at all a new approach, Any good JavaScript application need such separation.

Many of the times this separation is totally blur and create bugs and affect re-usability of code.

In my example code -  I have not used any framework. (just klass.js , otherwise you can directly use prototype chaining based inheritance).

In this example, I have tried to separate code into DOM-LESS Layer and UI-Layer which totally work with DOM + Events

So I highly suggest to follow simple guideline

1) DOM-less (UI-less) ===> js code which do not interact of any DOM element or events. Can be loaded in any JS environment where window object (dom traversal , events) are not available. Just One exceptions that This DOM-less part may deal with XHR calls.

2) UI-part ==>  js code which only deal with dom, dom events, and models provides by DOM-Less layer. there should be no XHR call in UI part.

I try to design my enterprise application based on above principle.

I have just presented a small application in this demo which has clear cut separation in DOM-less and UI-Layer.

Code Explanation =>

First we will learn how to create CLASS type or OO behavior in JavaScript. This is done using Prototype pattern.

Here is the sample code

We can use klass.js to write same code like this

klass.js support inheritance using extend method.

Now you can directly load example,  http://jsfiddle.net/nsisodiya/d2yQz/ most of code is self explanatory and simple.

--

Narendra Sisodiya
UI Architect @ Unicommerce

Delhi - Bharat (India)