Monday 16 February 2015

An Insight Into Two-Way Binding In AngularJS

Indubitably, single-page applications offer great accessibility and for this reason, it's highly admired by app developers. However, developing a single page application is not a child's play.

Since, mobile apps are ruling the ground currently, there is a great demand of android or iPhone app development services in the market. Fortunately, there are several web app frameworks available in the market that makes app development a breeze, but the amazing features of AngularJS make it stand ahead of its competitors.

There are numerous utile features offered by the open source framework – AngularJS (aka Angular), and two-way binding is the ultimate benefit of using this framework. This article will reveal the principle behind this feature and how to implement it in an AngularJS environment. For this, it is assumed that you possess a basic understanding of JavaScript.


How the Angular model is different from the traditional MVC model

Traditional MVC frameworks: Here models establish a connection between an application and the back-end database. Whenever an app is implemented, the corresponding MVC model is accessed and the data is retrieved; then the retrieved data are further merged with the view template, and this way a user version is created. Now, the controller keeps generating query to the model while, a user clicks on the interface of the user version. By reloading the page, the retrieved data become visible to the view (due to AJAX, small data sets don't demand page reloading).

For this, a developer needs to endeavor for proving this capability and certain explicit view changes are also required. If you look for an Android or Hire iPhone App Developer, to accomplish your project with utmost ease and precision. And once, you will learn this framework, you will be able to easily maintain your project and tweak it for better functioning.

AngularJS model: In an AngularJS app, the model and the view are interlaced. The data sourcing is managed by the model via the view. It is then turned around and passed back into the view. That is, no additional developer's effort is needed, only a few simple configurations and it is done.

Code Snippet:

sample.tpl.html
<body data-ng-app=”sampleApp”>
<div data-ng-controller="SampleController as sample"
<input type="text" data-ng-model="yourName" />
<h2>{{ yourName }}</h2>
</div>
</body>
sample.ctrl.js
var sampleApp = angular.module(‘sampleApp’,[]);
sampleApp.controller( SampleController, function ( $scope ) {
});

Here, it can be observed that in the most trivial situation, the view and the model can instantly accomplish a bidirectional data sharing. Therefore, there is no need to implement a user-defined controller. Due to this close relationship, the models simply manipulate the data in the view and move around.

Binding: Ultimate features of AngularJS framework

The AngularJS also helps efficiently implement regular HTML for creating view templates. As soon as the AngularJS continues the DOM processing, all the elements that are not embracing any AngularJS hooks are certainly ignored. This facilitates Angular to deliver an efficient solution, whether it is connected to a root element or not. Now, whenever the HTML template comes into a view, all the elements featuring hooks eventually become “bounded”.

In the binding process, a property “$scope” is attached to the hooks. Therefore, every time when there is a variation in a “$scope” property, the bound element also changes accordingly (as represented in the aforementioned code snippet).

$scope: It is a property, not the controller. It is a plain old JavaScript object and the bound view elements turn into their respective $scope property. And, the idea of a direction is a way to better understand the relationship between bound elements of the associated $scope property.

A bound $scope property can be rendered into the view by implementing the below mentioned lines of code.

Code Snippet:

{{firstName}}
or
<span ng-bind=”firstName”></span>

Thus, binding can be explained as a relationship that doesn't exhibit any direction. Here, it is the relationship between bound elements that are related to the “$scope” property.

Two-way Binding

To elaborate the two-way binding, let's consider the following chunk of code from the first code snippet.
sample.ctrl.js
sampleApp.controller( SampleController, function ( $scope ) {
$scope.yourName = “Miley”;
})
sample.tpl.html
<input type="text" data-ng-model="yourName" />
<h2>{{ yourName }}</h2>

With this code fragment, according to the two-way binding,
  • When the HTML template renders into a view, the “$scope” property replaces the “yourName”.
  • Now, when a new name is entered by a user in the text field, a listener becomes active. After this, the AngularJS immediately updates the “ $scope“ property with the user-typed text.
Eventually, then the bound view elements with that $scope property are also updated.

Final Thought

Whether it is one-way binding or two-way binding, the compiling process of Angular influences the binding process. With compilation, the genuine HTML and all the child nodes (that are existing within the ngApp directive) are evaluated. The AngularJS after identifying the pure HTML (which is also known as a template), enables all the associated models and directives to the $scope property. Thereby, resulting a template into the live view.

You can update the live views in a desired fashion by implementing the private event loop of AngularJS, that is, $digest(). This loop facilitates Angular to take care of all the real time events. Whenever a change in model's value is suspected, this loop is executed to determine whether there is any change or not by comparing the values.

Friday 6 February 2015

Instagram app for Android- 2 Key areas emphasized by designers


Having evolved into one of the leading smartphone operating systems, Android has over 1 billion active users on-board. Whether it's about the absolutely stunning speed, cost or feature set; Android hasn't stopped impressing consumers hailing from different age groups. Not just the consumers, even the mobile app designers have been extremely impressed by the array of app development opportunities that the mobile platform brings along. Once such remarkable app that has undergone extensive redesigning and reimaging for Android is the cool and trendy Instagram app. The sole aim of penning down this post is to make you familiar with the key areas that were being looked into, while developing the Instagram app for Android consumers.

Impressing Android users has always remained a technical challenge for app designers

Backed by a huge ecosystem, Android bestwoing features and functionalities to every Android App development company that are competent in meeting varied requirements in a simple and convenient way. The wide suite of Android devices available in the market undoubtedly serve as jitters for app designers. Prime reason for this being the complexity in building an app that can load perfectly on multiple devices with varying screen sizes and resolutions.  

Design
With 'flat' design approach taking big leaps in the world of mobile app development, professionals at Instagram have been busy redesigning their Android app keeping three prime concerns in mind viz: speed, visual features and a greater coverage in terms of screens with varying dimensions. After ditching complex shadows and gradients for flat images and solid colors; the Instagram app re-designers have emerged as successful in making the application load faster on all types of Android powered gadgets.

Rendering Instagram app, a flat makeover, the app designers have been able to ensure a greater download rate for the same. With a larger space for viewing photos and videos, this all-new Instagram app for Android has undergone complete refurbishment in terms of user interface elements.

Seamless UI Optimization for photo and video capture and editing utility


While re-designing the Instagram app for Android, designers choose to implement an extensive UI optimization for the app's photo-and-video capture and editing feature. As per this, they divided the app screens into four buckets, on the basis of DPI and aspect ratio, followed by utilizing a condensed layout for screens available in the smallest buckets. This UI optimization approach has offered an expanded layout to Android users owning devices with medium and large-sized screens.
 
Now, coming to the second key area that was being focused during re-design of Instagram app for Android

Startup Time
An app that takes a lot of time to load can perhaps not be considered successful and this can be resolved if you opt to hire Android App developer. At Instagram, app design professionals have been able to manage cutting down the app start time in half.  It is interesting to know that Instagram now starts up and is ready-for-use in less than 0.5 seconds on Galaxy S5 and in only 1.5 seconds on the very popular Galaxy Y.

Approach used for reducing the start time for Instagram app available for Android

App designers at Instagram have opted for the Android TraceView tool to cut down the app start time. They have made some tiny improvements such as rewriting the lazy-loading components(the  ones which were non-essential for startup) and also the inefficient JSON parsing code. Whether it was about managing the “heavy” app-wide singletons like image cache, http client, video etc. or handling the speed issues due to the app's News Page, these designers have been able to look into everything with complete amount of perfection.
 
Wrapping Up
App design professionals at Instagram have put in a lot of time and effort into re-shaping their app for Android consumer base. It will be interesting to see how these consumers react to these modifications.