The output of the following program is 1 4 3 2. Why?

(function () {
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);

The browser has an event loop which checks the event queue and processes pending events. For example, if an event happens in the background (e.g., a script onload event) while the browser is busy (e.g., processing an onclick), the event gets appended to the queue. When the onclick handler is complete, the queue is checked and the event is then handled (e.g., the onload script is executed).
Similarly, setTimeout() also puts execution of its referenced function into the event queue if the browser is busy.
1 and 4 are displayed first since they are logged by simple calls to console.log() without any delay. 2 is displayed after 3 because 2 is being logged after a delay of 1000 msecs (i.e., 1 second) whereas 3 is being logged after a delay of 0 msecs.
When a value of zero is passed as the second argument to setTimeout(), it attempts to execute the specified function “as soon as possible”. Specifically, execution of the function is placed on the event queue to occur on the next timer tick. Note, though, that this is not immediate; the function is not executed until the next tick.
That’s why in the above example, the call to console.log(4) occurs before the call to console.log(3) (since the call to console.log(3) is invoked via setTimeout, so it is slightly delayed).


When a scope is terminated, explain how many “destroy” events are fired?

2 Destroy events are fired when a scope is terminated.
The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”.
The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.
Consider the two below happening in a directive’s postLink function.
The AngularJS event: scope.$on(‘$destroy’, function () {
// handle the destroy, i.e. clean up.
element.on(‘$destroy’, function () {
// jQuery plugins already have this handler.
// angular.element(document.body).off(‘someCustomEvent’);
The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.


Why is the “export” keyword used to make classes and interfaces public in Typescript?

export class SomeClass{..}
Is used as: varsomeVar = new;
Solution:With the export keyword, the JavaScript adds a line to add the exported item to the module. Like in example: here.SomeClass = SomeClass;
So, visibility as controlled by public and private is just for tooling, whereas the export keyword changes the output.
In Typescript, marking a class member as public or private has no effect on the generated JavaScript. It is simple a design / compile time tool that you can use to stop your Typescript code accessing things it shouldn’t.


Node.js is a single thread application. Does it support multi-process or platforms and utilize all the processor resources?

Since Node.js is by default a single thread application, it will run on a single processor core and will not take full advantage of multiple core resources.

It is believed that more performance and scalability can be achieved by doing async processing on a single thread under typical web loads than the typical thread based implementation. However, Node.js provides support for deployment on multiple-core systems, to take greater advantage of the hardware. The Cluster module is one of the core Node.js modules and it allows running multiple Node.js worker processes that will share the same port


Difference between event.preventDefault() and return false in jQuery.

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.
e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.
Note that this behavior differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.


Ext JS vs Angular JS

Ext JS and Angular JS are two industry frameworks for Rich User Interface development and both of them are regarded for powerful features. Sencha Ext JS is often considered as the industry’s most powerful Rich UI application development framework. Best features of Ext JS are cross browser compatibility, advanced MVC (Model View Controller) architecture, plug-in free charting, and modern UI widgets. Angular JS is pretty famous among web developers because of their specialties including two-way data binding, dependency injection and ability to quickly create a custom template (directives). Ext JS is often termed as one stop shop for rich User Interface applications and Angular JS does not have this distinction.

Rich collection of theme able UI components is another prominent attraction of EXT JS. There are a lot of open source components which can be integrated with Angular JS including Angular UI, Wijmo and Kendo. Major similarity of EXT JS and Angular JS is that both of them are suitable for single page applications. Cross browser compatibility is another area in which EXT JS and Angular JS possess obvious similarity. Angular JS depends on jqLite/jQuery that provides cross browser compatibility and integration with third party libraries require cross browser compatibility.

Ext JS vs Angular JS

Ext JS vs Angular JS

Similarities between Ext JS and Angular JS

Ext JS as well as Angular JS offer infinite possibilities of cross platform native mobile applications or hybrid apps. is optimized for Angular JS and it is used for developing rich mobile applications. How do we develop mobile sites in Ext JS and Angular JS? Sencha touch is used to develop mobile sites and Angular JS makes use of responsive modules, UI bootstrap, Angular JS response directives, and angular gestures. Built-in-router and deep linking are introduced in both Ext JS 5 and Angular JS.

Browser history, forward and backward button support are being introduced in Ext JS and it was made possible in earlier versions using Ext.util.History. Most single page app which works behind authentication may not require indexing for Search Engine Optimization. For public pages in Ext JS, it is ideal to use static HTML/CSS or AJAX based SEO. In Angular JS, it is best to consider Ajax based SEO with either or headless browser support in web browser. Sencha CMD tool and Sencha sdk tools are the major deployment tools available in Ext JS. Third party grunt tool, Yeoman, and Bower are the package manager functionalities available in Angular JS.

Major difference between Ext JS and Angular JS in the case of licensing is that Ext JS is open source under GPL license and it is an open script Javascript framework under MIT license. Full documentation suite, tutorials, video examples, and trainings are available for both Ext JS and Angular JS. Fascinating feature of Ext JS is that it offers no management concern of integrating new releases and bug fixes from selected 3rd party libraries. Other similar features of Ext JS and Angular JS are built-in animation support and deferred bootstrap.

  • If separate rich desktop applications and mobile web applications are valuable, it is better to choose Ext JS.
  • Business organizations who can offer paid support contracts and per seat commercial license can select Ext JS. Ext JS has become the favorite framework for many web developers as they don’t have to worry about issues of programming and development.

When to use AngularJS?

  • Companies in need of responsive design requirement and automated testing can prefer this framework over Ext JS.
  • IT organizations opting for Angular JS should be equipped with a team comfortable with CSS and who can handle cross browser compatibility issues.
  • If the web development team of an organization can’t manage integrating new releases and bug fixes from selected third party libraries throughout the application development process, they can bid adieu to Angular JS.

Final Verdict:

Ext JS has been the go-to solution for enterprises who have a very specific, long term needs. Angular JS most certainly have their place in web development. However, among these two frameworks Ext JS is component based and the code base with extending API classes as well as configuring models. Object oriented principles and MVC pattern are followed in Ext JS. Angular JS have been described as a “Model-View-Whatever’ framework in which it does not prescribe specific application architecture. Handy components delivered with Ext JS is a huge time saver and Ext JS 5 router can be used to track the application state through the use of browser history stack.


Common Mistakes Developers Make When Using Backbone.js

Backbone.js is a Javascript library and it is based on the model-view-presenter application framework. Its objective is to provide a simple set of data structures and features for creating a structured web application’s front end. Simple models, useful features, and easy integration with JSON API are the most talked about features of Backbone.js. In this article, we would like to list out common mistakes made by web developers while using backbone.js.

Ignoring the Functionalities of Backbone.js

Although Backbone.js offers a minimalistic framework, it provides numerous functionalities that can easily cover critical needs of developing a full-fledged web application. Newbie web developers often treat Backbone.js as yet another MVC like client framework for web applications. Not exploring Backbone.js framework in its entirety is a frequent mistake made by web development experts. Web developers should keep in mind that extensibility and plug-ins of Backbone.js can be used to build innovative web applications. It is to be mentioned that best features of Backbone.js are made tangible through models, collections and views. Its router and history components provide a simple mechanism to support client side routing.

Modifying DOM in Response to Arbitrary Events

Web developers often tend to update Backbone.js with a view in response to arbitrary DOM events and it is a practice that should be avoided at all costs. According to web developers with long years of experience, there may be occasions where direct manipulation of DOM from the event handlers will make sense. Web developers will have to think about costs involved in managing complex DOM manipulations.

Underestimating the Cost of Rendering

Backbone.js makes it very easy to render and re-render the DOM in response to events and it has a very huge impact on overall performance of web application. There are many methods that we can employ for thrashing the render method on our views and the drop in performance becomes more apparent. Re-rendering each and every time a model is added to the collection will work fine and the render method can be employed multiple times consecutively. A quick solution to this problem is to not to call the render method for every single model that is not being added. Developers of Trello (A web based project management application) had written extensively about approach in improving rendering performance while using Backbone.js.

Leaving Event Listeners beyond Their Use

Leaving unused event listeners bound is probably a common mistake committed by Javascript developers irrespective of framework they use. This issue can be easily sorted out using Backbone.js and leaving memory leaks in web application should be avoided. ‘Event’ component of Backbone.js is certainly a pretty neat implementation strategy and it is very easy to implement event based features in Javascript. As views are locations where event consumption usually happens, it is common to make mistake in ‘view’.

Creation of Monolithic Views

Fascinating advantage of Backbone.js is that it provides a great amount of flexibility in shaping up web application’s front end. With models, collections and views, web developers make backbone.js lightweight and specific. It is important that developers should not end up making giant monolithic views and a ‘view’ should be split into small ones.

Granular views make the process of developing an application with Backbone.js a soothing experience. Backbone.js code should be maintainable, easy to extend and easily customizable. Views in Backbone.js are designed to make it convenient for web developers to work with model or collection.

Not knowing that Backbone.js can be adapted to Non-RESTful APIs

It is a well known fact that Backbone.js works with JSON based RESTful APIs and it is extremely extensible. Developers fall in love with Backbone.js mainly because of the fact that it can be adapted to use other types of APIs and other encoding formats. Particular component of Backbone.js that deals with interaction of front end and back end services is called as “Sync”. It features number of attributes that web developers can easily override to customize Backbone.js. Numerous plug-ins are available for making the customization of Backbone.js’s behavior pretty easy. Backbone.js sync feature lets web folks to adapt to a wide range of back end service APIs and encoding formats.

It is quite interesting to note that other components of Backbone.js too are highly flexible and developers won’t have to utilize the default template engine which comes with underscore.js. It is possible to replace view component of Backbone.js with something web developers want and we leave it to your creativity. Backbone.js gives developers powerful set of tools that will help them to scale new heights of innovative excellence in web development. Despite the fact that Backbone.js collections can be simply configured, many of the web developers make mistakes easily.


Angular Authentication Process with OAUTH

OAuth is an open protocol that allows secure authorization in a simple and standard method from web, mobile and desktop applications. The OAuth 2.0 authorization framework enables a third party application to obtain limited access to HTTP service”. OAuth in angular refers to authentication process for resource owners to authorize third party access to server without sharing their credentials. It is tailor made to work with Hypertext Transfer Protocol and it is commonly used as a way for internet citizens to log into third party accounts using their Microsoft, Google, or Facebook account. Concept of ‘secure delegated access’ differentiates OAuth from other major authentication standards. This open standard for authentication allows access tokens to be issued to third party clients with the server custodian’s prior permission.

Secure Authentication Redefined and Reloaded

Some obvious similarities exist between OAuth and OpenID (an open standard protocol that allows users to be authenticated by third party sites). OAuth 2.0 specification defines OAuth as a delegation protocol which is highly useful for conveying authentication decisions across a network of web enabled applications and APIs. It is a well known fact that OAuth 2.0 is used for providing mechanisms for user authentication. Many web developers and API providers mistakenly refer OAuth as an authorization protocol. This confusion comes from the fact that OAuth is used inside of authentication protocols and newbie web developers reach the wrong conclusion that they can accomplish user authentication by simply using OAuth.

Authentication tells an application who the current user is and whether or not they are present. A full authentication protocol will probably indicate a number of attributes about a user like email address.

OAuth is recognized as the best tool for client authorization and there exists lot of authentication events in OAuth. Some web entities can be used along with OAuth to create an authentication and identity protocol. Even in this situation, the core functionality of OAuth remains intact and the client application turns out to be a sub category of identity API.

One best advantage of angular authentication process with OAuth is that it allows management of end user consent. Needless to say, end user consent is very important in cross domain identity federation at internet scale. It’s another amazing benefit is that a user can delegate access to other protected APIs alongside their identity at the same time using the one and only OAuth. OAUTH 2.0 is the second evolution of OAuth protocol and it is not compatible with OAuth 1.0. analysis of a website New version of OAuth will provide authorization flows for web applications, mobile applications, mobile phones and living room devices.

In OAuth, token as a proof of authentication is designed to be opaque to the client and the client should be able to derive some information from the token in user authentication. Client is the authorized presenter of token and audience is the protected resource in a typical OAuth model.

Angular Authentication Process

Boon for Web and Mobile Developers

Since access token can be traded for user attributes in newest versions of OAuth, we may think that possession of a valid access token is the credential to prove that a user is authenticated. Using OAuth, refresh tokens and assertions can be used to get access tokens in the absence of user. Because OAuth is a delegation protocol, the principle “access token is usable along after the user is no longer present” is fundamental to its design. Issue of injection of access tokens in OAuth can be tackled by using the authorization code flow and by only accepting tokens from authorization server’s token end point.

OAuth handles injection of invalid user information by getting the authentication information directly from identity provider and by providing authentication information with verifiable signature.

As OAuth 2.0 is portrayed as a framework than a defined protocol, it is not interoperable with any other OAuth 2.0 implementations. OAuth is pretty popular for its role as an authorizing mechanism to consume secured RSS/ATOM feeds. Amazon, Daily Motion, Deviant Art, Dropbox, Facebook, Flickr, Foursquare, Google, Google App Engine and Instagram are major service providers of OAuth.

Open ID Vs Authentication Using OAuth

In Open ID, the process starts with the application asking user for their identity (In most cases, it will be the login request to which the user provides Open ID rather original login information). As far as OAuth is concerned, the application specifically requests a limited access OAuth token. Application Program Interface provider in OAuth token allows application access because it trusts valet keys. It is an undeniable fact that OAuth has redefined secure authentication in an innovative way. OAuth will be of immense use in building webpage widgets, JavaScript based apps, and browser based apps.