Monthly Archives: November 2015

EXT JS VS ANGULAR JS

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. Trigger.io 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 Prerender.io 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

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

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.

5 ESSENTIAL JAVASCRIPT TOOLS WORTH LEARNING

5 Essential Javascript Tools Worth Learning

javascript has rocketed into prominence as the symbol of new generation web technologies ruling tech world. Web developers rate Javascript as a critical component of HTML5 technologies along with JQuery and CSS. Javascript is ubiquitous and it is impossible to think of a web development arena without Javascript. It has been reported that Javascript is the most used language on GitHub..

As an article published in a web development journal succinctly put it, “Javascript is the number one language in the world. It’s the language of the web and a starting point for so many web developers”. JSON, Ajax, Angular.JS, BackboneJS and Node.js, are the most used Javascript concepts beyond any doubt of dispute.

JSON

JSON stands for Javascript Object Notation and it has become the major technical specification used in the web development arena. As JSON can be used with any programming language, its primary usage is for transmitting data between server and web application. JSON naturally becomes a best choice for web developers to connect to their applications to backend services (developed in Java or PHP or ASP.NET or similar). Mauritius Although JSON is derived from Javascript scripting language, it is a language independent data format. JSON’s basic types are Number, String, Boolean, Array, Object, and Null. It is the primary data format used for asynchronous browser or server communication largely replacing XML.

Ajax

Ajax is the acronym for Asynchronous Java and XML. AJAX helps to update a portion of the webpage without the need to refresh the whole page (for any data updates). It is the prominent technique of single page application. Objective of single page application is to build a website that fits on a single web page to provide a more fluid web experience. Implementation of Single Page Application is done using XMLHttpRequest object from Javascript. Ajax lets developers to write web applications to send and retrieve data from a server asynchronously and they can ensure that it is performed without causing interference to display existing page. AJAX supports various data types such as html,string,json and xml. There have been a number of developments in the technologies used in Ajax application ever since its inception.

Angular.JS

Angular.JS is an open source web development (MVC) framework built by the Internet giant and omnipotent Google. It was introduced for the purpose of simplification of application development and Angular.JS takes care of HTML’s inability to build dynamic views in web applications. With the help of Angular.JS, web development experts can extend HTML dimension for web application. Angular.JS collects data from server and compiles templates locally for presentation through client side MVC framework. Angular JS library works by first reading the HTML page which is embedded into additional custom tag attributes. According to information available from a Javascript analytics service provider, Angular JS is used by many major companies such as Verizon, Apple, Cisco, Etrade, ATT and more. One of the prominent features of AngularJS is two-way data binding which is missing in most of other JS-MVC frameworks.

Backbone.JS

Backbone.JS is an effective Javascript library equipped with JSON interface and it is based on the model view presenter. According to the description given in Backbone.JS website, “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects all to your existing API over a RESTful JSON interface”. Backbone.JS has gained huge popularity among web developer community because it is a robust and scalable platform for building web applications. Web applications of Digg, Foursquare, LinkedIn Mobile, Pandora Radio, and Pinterest are built with Backbone.JS. As Backbone.JS technology is dependent on one Javascript library, it is known for being light weight. It leads to more code and lean MVC framework for organizing Javascript application. Backbone.JS comes with models, collections, views, events, router, and other great features. In the context of Backbone.js, the model is a place where data is kept and the business logic is distributed between the views and main application’s file.

Node.Js

Node.js acts as the backbone of success of Javascript and it is a platform used for building fast network applications. Being based on Google’s V8 Javascript engine and Chrome browser runtime, Node.js has gained immense fame among web development aficionados. A unique feature of Node.js is that it contains a built-in library that allows applications to act as an independent web server. It is to be recalled that other prominent software platforms used for building network applications depend on Apache HTTP server and IIS. Node.js features an event-driven architecture (Software architecture pattern promoting the production and reaction to events) and non blocking I/O API. Web development projects of upcoming years will be based on the uniform web language of Node.js. Node.js can be run within the run time on OSX, Microsoft Windows, Linux, Free BSD and IBM-I. It has been reported that Node.JS is used by multinational corporations including PayPal, Microsoft, Yahoo as well as Walmart. When Node.js was invented in 2009, neither its developer Ryan Dahl nor others thought that it would become a stupendous hit among web developers.

GO PROGRAMMING ON THE RISE

Go Programming on the Rise
The Next Generation of Communication

Go is an open sourced programming language (notably referred to as “Golang”), that was created by Google Inc. in 2009. Go, like other programming language tools, is used to design a proper framework to communicate operating instructions to your computer. What makes Go stand out from it’s competition is it’s ability to simplify the complexities of writing programs in a very fluid way.

Why Go For Go?

At its core, Go is very user friendly. This lang is concise, expressive, readable and garbage collected, which will come in handy when dealing with concurrent programming. Go programs are fast; you can compile and run a program faster than some interpreters. Typical build times for Go programs are leaps and bounds ahead of it’s competitors due to the dependency management of large programs. Go has a clean dependency model built in the language that streamlines the experience and makes the language much more efficient.

In addition to that, “Golang” is open sourced and pulls resources from a large environment of dedicated contributors and developers within it’s community. Go programming was developed by Google to handle the mass scale of programming at the company. Google has stated that they created Go “out of a sense of frustration with the existing systems for programming”. The existing systems that are most commonly used by developers (C++ & Java) did not possess the fluidity and ease of construction that Google would have liked.

Sameer Ajimani of Google was quoted saying that “programming had become too difficult and the choice of languages was partly to blame. One had to choose either efficient compilation, efficient execution, or ease of programming; all three were not available in the same mainstream language”.

Today, people around the world from novice to professional backgrounds are starting up projects using Go. Go’s mission is to provide a tool that enhances programming language with “simple, easy to build and reliable software”.

If you are asking yourself why switch over to another language and use Go, well here are some points to consider.

  • First, statically typed languages are efficient, but typically bureaucratic and overly complex.
  • Second, dynamic languages can be easy to use, but are error prone, inefficient and break down at scale.
  • Lastly, concurrent programming can be a hassle with complex threads and security locks.

Go manages to solve a lot of these problems that stagnate the creative development process. In addition to that, Go believes in code adaptability to keep up in a fast paced environment.

Why developers turn to Go?

The developers feel that it should be a simple task to take a basic design and build upon it in a seamless and natural way. Go is an opinionated language the developers created, provides a layout that ultimately saves you from all the time you would spend working through the complexities of building program. Go aims to be simple and let the compiler do the heavy lifting, which in turn makes you a more productive programmer.

  • Go development uses the concept of a workspace, which contains the source files (src), compiled binary files (bin) and packages (pkg).
  • Every Go application is made up of packages and, using a Java reference, programs use the main package as the default.
  • Unlike PHP, Ruby, Python etc, Go is a compiled language,which means source code (the code you write) is translated into a language that your computer can understand. Therefore before you can write a Go program, you need the Go compiler installed.
  • It does’t require a resource heavy IDE to be productive, instead you can use regular IDE (like Sublime or similar)

Google’s upcoming language GO is intended to make developers easy to write programs that get the most out of multicore and networked systems. Go Programming is the most appropriate tool of choice for forward thinking projects right from application virtualization to self hosted Git services. As it stands, Go is a more enjoyable, faster and productive tool for writing programming code than any other language available. If you are looking for a way to expedite the process of programming and simplify your tasks, then look no further than Go program.

HOW TO ADD DIRECTIVES THAT TAKES CARE OF ADDING MORE DIRECTIVES TO THE ELEMENT IT WAS CREATED ON?

How to add directives that takes care of adding more directives to the element it was created on? i.e. build a directive that takes care of adding date picker or other elements to the existing element.?

In cases where you have multiple directives on a single DOM element and where the order in which they’re applied matters, you can use the priority property to order their application. Higher numbers run first. The default priority is 0 if you don’t specify one. The key was to remove the attribute: element.removeAttr(“common-things”); and also element.removeAttr(“data-common-things”); (in case users specify data-common-things in the html).

See working solution with html below:
angular.module(‘plunker’)
.directive(‘commonThings’, function ($compile) {
return {
restrict: ‘A’,
replace: false,
terminal: true,
priority: 1000,
compile: function compile(element, attrs) {
element.attr(‘tooltip’, ‘{{dt()}}’);
element.attr(‘tooltip-placement’, ‘bottom’);
element.removeAttr(“common-things”);
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
} }; } }; );

<html ng-app=”plunker”>
<div ng-controller=”DatepickerDemoCtrl”>
<hr/>
<select ng-options=”s for s in selects” ng-model=”el” common-things>
<option value=””></option>
</select>
</div>
</html>

Explanation why we have to set terminal: true and priority: 1000 (a high number):

When the DOM is ready, angular walks the DOM to identify all registered directives and compile the directives one by one based on priority if these directives are on the same element. We set our custom directive’s priority to a high number to ensure that it will be compiled first and with terminal: true, the other directives will be skipped after this directive is compiled.

When our custom directive is compiled, it will modify the element by adding directives and removing itself and use $compile service to compile all the directives (including those that were skipped).

If we don’t set terminal:true and priority: 1000, there is a chance that some directives are compiled before our custom directive. And when our custom directive uses $compile to compile the element => compile again the already compiled directives. This will cause unpredictable behavior especially if the directives compiled before our custom directive have already transformed the DOM.

HOW TO CENTER ABSOLUTE ELEMENT IN DIV ?

How to center absolute element in div i.e I need to place a div (with position:absolute;) element in the center of my window.?

Create the any class mentioned as below and assign it to your div..inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Here the clue is, that left:50% is relative to the parent while the translate in transform is relative to the elements width/height.

This way you have a perfectly centered element, with a flexible width on both child and parent.This works even if the child is bigger than the parent.

You can also center it vertically with this (Note : width and height of parent and child can be totally flexible(i.e. Unknown)). cheap hotels

HOW TO WRITE CSS MEDIA QUERIES IN IE8?

How to write CSS media queries in IE8?

Internet Explorer versions before IE9 do not support media queries. But we use IE’s conditional commenting to achieve this. Using this, you can specify an IE 8/7/6 specific style sheet which over writes the previous rules.

For example:

<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css”/>
<!–[if lt IE 9]> <link rel=”stylesheet” type=”text/css” media=”all” href=”style-ie.css”/>
<![endif]–>

This won’t allow for a responsive design in IE8, but could be a simpler and more accessible solution than using a JS plugin.