Exact Difference between forEach and map function in JavaScript

If you want to iterate over Array in JavaScript then you have two options in your hand

Array.prototype.forEach

and
Array.prototype.map

I wanted to know the exact answer and there were huge list of answers.

Many were totally incorrect.

So I opted second way to find difference. I went to MDN and downloaded polyfill for forEach and map function.

It turns out there is only one difference in forEach and map function.

map function in JavaScript Array do exactly same as forEach but in addition, map function also return Array.

So, forEach is subset for map function.

I never use forEach function in my code. I always use map function.

Even of you do not want to use Array returned by map function, you need not to worry as It will be collected back !

--

Narendra Sisodiya
UI Architect @ Unicommerce

Delhi - Bharat

[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)

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

2) Part 2 : http://blog.narendrasisodiya.com/2014/06/how-to-separate-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)

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)

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)

X-Tag & Custom HTML markup elements

Recently I got interested in X-Tag project.

X-Tag project is from Mozilla.

It provide a cool way to create your own html tags

like

<uni-button></uni-button>

<uni-progress-bar></uni-progress-bar>

The way of interacting with these HTML element is same as Native html element,

Like you can do use jQuery 

As shown in this example - http://jsfiddle.net/nsisodiya/266tt/

in this example, I have used x-flipbox element from brick library.

Defining custom element provide modular design.

There is huge list of custom html element can be found on 

http://customelements.io/

Example like - https://github.com/luiztiago/facebook-image-element

create very simple way to add facebook image of any user using following html markup

<facebook-image object="luiztiago"></facebook-image>

<facebook-image object="narendra.sisodiya"></facebook-image>

etc

will add facebook image on your site.

We have a chrome plugin which detect that If a website is using Web Components (Custom elements) or not 

There are 2 main ways to write custom elements

1) using XTag

2) using Polymer

I am first exploring X-tags

You can learn how to create a custom element here http://x-tags.org/docs

I will create some custom elements and will blog on whole process.

--

Narendra Sisodiya
UI Architect @ Unicommerce

Delhi - Bharat (India)

What is DOM-Less JavaScript Application

As a UI Architect, I am passionate about the design architecture of web application.

Normally a web application start with a time-line and deliverable UI pages.
In most of the cases, people design bad applications (non-salable) because they do not focus on UI architecture.

We can split whole application (The front-end) into 2 part. One DOM-less client and second is UI-Layer. UI-Layer take services from DOM-Less client.

What is the DOM-Less Client.

Its simple, Its a blank page, just pure blank page where you are nothing to show. For example, One day you open facebook.com and you get a pure blank page.

I call this a DOM-Less client because user do not have direct method to interact with application but he can interact with application using console or firebug.
In summery : Dom-Less client is just a JavaScript API, Similar to REST API.

REST API deals with URL, GET,POST method and request response methods.

DOM-Less client is a collection of services and classes which can be used by a 'super technical user' to interact with web application.

For example, Twidge is a terminal application for 'super technical user' who want to use Twitter on their terminal.
http://www.techdrivein.com/2010/05/twidge-twitter-client-is-for-those-who.html

DOM-less client methodology deals with creating full fledged software for 'super technical user who want to use application without GUI and with the help of JavaScript console.

Now, If you focus for creating such DOM-less application immediately then your focus and way of writing a web application will change. You need not to create a web application on thinking how a UI will behave, instead you are going to create a web application focusing on core logic and core behavior. you do not need to focus on how click events etc. Just focus on a fully functional console based web application for 'super technical user'.

you can consider writing it using node.js and there you will not be able to find browser.

This DOM-less client will provide services to your DOM-Layer (UI Layer or View layer). UI layer will be having all soft of click event , animation, view binding , templating etc. UI Layer will utilise  services from DOM-Less client and create a great application.

If we create this kind of separation while creating application then we will be having a solid architecture, at the same time we can separate UI team into two part using this. You can put domain experts and JS experts to create first layer (DOM-less client) and CSS-HTML-JS developer to work on second layer. (View Layer)

I hope this will help in designing better web application.

I will try to develop some demo application for this pattern.

#JavaScript

Part 2 - http://blog.narendrasisodiya.com/2014/06/how-to-separate-javascript-application.html

--

Narendra Sisodiya
UI Architect @ Unicommerce

Delhi - Bharat (India)

How I use underscore template in my JavaScript projects

Here are few rules which I keep in mind while creating template

• always use separate .html for a template
• compile all .html files into single .js file of compiled code using grunt
• create client side templateResolver service

Here is sample code in my JavaScript projects.