Menu

06 July 2014

[Solved] - Play Mp4 videos on firefox 30 + Fedora + Youtube

In my case, videos was not working on youtube.
I installed gstreamer1-libav-1.2.4-1.fc20.x86_64 and everything worked fine !

--
Narendra Sisodiya
UI Architect @
Unicommerce
Delhi - Bharat (India)

02 July 2014

JS API Viewer! new approach in Front-end development #javascript

We have REST console where we can test REST API. Similarly, we must create JS-API (DOM-Less Layer) using JS-API viewer/creator!
-- From this blog

This is part 3 of current series of DOM-less applications!

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

In front-end development, we have several MVC frameworks!

Now a day, we have clear cut separation between client and server using the REST API. Rest API abstract server's internal logic into REST API (JSON).

In part1 and part2, we had talked about creating a separation in client side code using UI-Layer Views and JS API.

We have given the name of this separation - DOM-less (JS-API) and UI Layer (Views).

UI Layers consist of HTML files, event bindings, js code which is required for creating Views.
Dom-Less is basically JS API layer which may consist of multiple models and this layer talk to the server using the REST API.

So here is the architecture which I am following.
"JS API (DOM-less Layer)" talk to server using REST API.
"UI Layer" talk to JS API for all operations. "UI Layer" do not talk to the server or hold any business logic.

I have worked on large SAAS based projects (from single person to team lead), and the major flaw I found in development is  - "normally we develop both layer (JS-API, UI-Layer) simultaneously, and because we do so, we produce mixed code, even If we use any MVC framework"

For example, In our View, we want to show list of students and total number of students. We may use 1-way or 2-way binding. Now for showing total number of students, most of developers will use JS code inside template file-

<span> Total students {obj.students.length} </span>

Assuming obj. students is an array,
Now this code is OK, but still the calculation of total number of student is performed inside View-template layer (UI-Layer).
That is what I was talking about mixing of code.


Instead of this, we must transfer the length calculation logic to the DOM-less layer (that is JS-API layer).
So we can re-write this as

<span> Total students {obj.getTotalStudents()} </span>

Now we have shifted logic to JS-API layer.

JS-API layer, can consist of multiple models and collections. In the above example, JS logic was simple, but in many cases, this logic is not simple.

We have REST console where we can test REST API. Similarly, we must create JS-API (DOM-Less Layer) using JS-API viewer/creator!

If we develop our JS-API using JS-API viewer/creator, then we need not to work on Views and at the same time mixing of code will not happen.

So the normal flow of development will be->>
     Server team will create a REST API then
    JS team will create JS API using REST API and then
    UI-team (html/css/views) can develop the rest of the code!

What exactly is the JS-API viewer/creator !

Here are some screen-shots from the project, which I am working on!

My Task is to develop this page !






In my current approach I am not developing html/css for above view. I am not working on any View/HTML/CSS codebase.

I am working with JS-API Layer!

You can see sample JS-API code for this module below.




Now Here is my JS-API viewer which I wrote.
JS-API viewer is a generic module. This module creates an object of a given model/factory/class and show all its methods and JSON data.

Take a look at this -




JS-API Viewer/creator show JSON data inside view and generate buttons for all method.
For example in my code, you can see a SCAN function. You can see that Viewer has automatically generated a button to scan. If you click on the scan, then it will invoke scan function on the model.

Now here are some conventions.
If a function name contains "_" (underscore) the viewer will consider it as private function and it will not generate button for that function.
For example, there is no button for "_itemScanned" function!!

Also, If your function start with "get" then it will add this function into "watchers" list.
For example - getPackListItemLength starts with "get", so there is no action button.
Viewer generates a separate table for watchers where you can see their values.
Everytime, if model-data or internal state of JS-API changes, it will publish a change event and the viewer will load with new data (json). It will also execute all functions from "watcher list" and render table again.

So, we have a panel from where we can operate JS-API and verify my code using displayed JSON.

Because I am not writing any html/css/view/events, I am focusing on core JS logic, core business logic.

As an architect, I highly recommend this approach which will give you proper separation in client side code.


PS : Sorry for my bad English




--
Narendra Sisodiya
UI Architect @
Unicommerce
Delhi - Bharat (India)

26 June 2014

Using Backbone Or any MVC does not guarantee good code, You need good developer


Here is screenshot from a project which was build using backbone.js, but If you start reading you can start observe bad coding style.

Normally developers use jQuery based spaghetti code in their start of career and unfortunately they continue using them even when they using MVC framwork etc !

I highly suggest that you must stop using $(".result") kind of expression and instead of this, you must write
this.$el.find(".result") kind of expression !!



--
Narendra Sisodiya
UI Architect @
Unicommerce
Delhi - Bharat (India)

05 June 2014

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

This is part 2 of the Tutorial



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)