Category Archives: AngularJS

SUBSCRIBE TO UI STREET

Angular & REACT teams meet to brainstorm on mutual problems.

Angular & REACT teams meet to brainstorm on mutual problems.

Reinvention of working tools instead of sharpening them, however, remains a contentious issue.

Alright! So teams from Google and Facebook have met to discuss about their JS Frameworks. Yes, Angular and REACT team members had recently met to explore possible scopes of collaborations.. The decision to take on NPM as package manager was also discussed. Although this meeting between two significant JavaScript frameworks indicates an alliance in the making, an actual collaboration seems to be on the cards.

Christopher Chedeau (representing ReactJS) had visited Google Headquarters along with the React team to witness Igor Minar share Angular’s plans of building a Common Language Infrastructure (CLI) that comprises of several JavaScript tools. The intention behind CLI , according to Igor, was to “provide a good default experience out of the box”. He said that it was also due to their belief that the existing, prevalent JavaScript tools did not fulfil Angular team’s expectations. In addition to possible coverage of deployment, the CLI shall cover aspects ranging from scaffolding, skeleton files, setting up the build and testing environments.

The teams have also discussed about:

Animations: where ReactJS team shared the concern about their framework’s interruptible animations which makes state transitions stop and how their framework needs to a way to abstract things multiple levels deep. Angular team mentioned that they have moved to declarative Animations format and demonstrated to ReactJS team.

Renderers: ReactJS team shared about how their rendering concept started – by building a canvas rendered first. They shared how they have much more granular control over state/memory usage. They also shared about ReactNative and how it would to let you write native code and so long as the interface is async with Image decoding on another thread. They opened up to Angular Team that if Angular could try to implement on top of our same primitives, they could go in together.

Immutable JavaScript data structures: Teams discussed about having extensible records/objects that spreads value from original ones. However, the concern of immutability was brought up. Angular Team pointed out that Angular 2.0 (A2) could support mixed immutable and observables/streams. ReactJS agreed with such mix of immutable with observables that would let control better about reusability and object-changes notifications.

Web Workers: Angular team discussed that their goal is to build a non-blocking UI thread. Angular did a first prototype with a React-like virtual DOM and had good performance results. They are looking into handling asynchrony of events. In A2, they have a View Tree instead of Virtual DOM and marshal on the level of Views and not DOM elements. ReactJS team shared that they originally ran React all in Web Worker. In ReactNative they had to provide a different API and do an async wrapper around UIKit APIs. Both the teams shared the dissatisfaction with performance of web workers given the overhead between environments. In order to address the technical concerns, both the teams would start with describing their API surfaces and work on solution/protocol to position it in front of standards committees.

Sharing Performance Tips:

Both the teams from Angular and React shared their thoughts freely. They compared their expectations from each tool and feature. BenchPress could be used as a potential framework for an E2E performance testing. Angular Team explained that upon analysis of measuring performance in a predictable manner, it was found that micro-benchmarks weren’t conducive to framework code which was why their team had tried to move to macro-benchmarks. Angular Team further more discussed the technical aspects of running BenchPress, quantum of Garbage Collection (GC) and also about how WebDriver is being used to control the browser during GC evaluation..
The React team expressed their interest in testing the React’s internals and their performance in a manner contrary to Angular’s way of using browser front-end build system (to run comparisons with previous builds).

Both the teams agreed that performance was indeed a good area to collaborate on despite differences voiced about React not having done anything significant yet about locking down of the kernel and turning extensions off.

This is not the first time that these team have met, however this meeting is being considered as a significant one because of in-depth architectural discussions. The teams have met on earlier occasions as well. Team Angular was seen at the React.js conference at Facebook’s Headquarters in January.

SUBSCRIBE TO UI STREET

How to prevent double curly brace notation from displaying before angular.js compiles document?

How to prevent double curly brace notation from displaying before angular.js compiles document?

The directive “ngCloak” is used to prevent the” {{ }}” notation from being displayed before angular.js compiles the document. This directive will hide the element until page has been rendered.

This directive can be applicable to the entire ‘body’ element or it can also be applicable multiple times for small chunks of code for the entire document. But the latter is the most preferable because it will allow progressive rendering of the browser.

Browsers such as IE 7, will not be able to provide support to the attribute selector, so the workaround for this is to include the directive as a class.

Ex:
Other browsers -</strong>
<section id=””sample1””>{{Welcome}}</section>
For IE 7 -<section id=””sample1”” class=””ng-cloak””>{{Welcome }}</section>

SUBSCRIBE TO UI STREET

Stay on 1.3 or Move to NEW ANGULAR 2.0?

Stay on 1.3 or Move to New Angular 2.0?

AngularJS 1.3 is the best version of Angular as of yet, it introduced a lot of awesome features with substantial performance and speed improvements. But Angular was not the same as it is today. The framework changed in the meantime to keep up with the ever changing web, and developers started picking it up too and more complex applications started being created. It has undergone significant changes from version 1.3 to 2.0 to improve almost every single part of AngularJS. Angular 2.0 was officially announced at the ng-conference. This version is being rewritten from scratch to take advantage of new browser features and integrate lessons learned from Angular up to this point.

Angular 1.3
</button></div>
<div ng-controller=”SantaTodoController”>
<input type=”text” ng-model=”newTodoTitle”>
<button ng-click=”addTodo()”>+</button>
<tab-container>
<tab-pane title=”Tobias”>
<div ng-repeat=”todo in todosOf(‘tobias’)”>
<input type=”checkbox”>
ng-model=”todo.done”>
{{todo.title}}
<button ng-click=”deleteTodo(todo)”>
X

Angular 2.0
<div>
<input type=”text” [value]=”newTodoTitle”>
<button (click)=”addTodo()”>+</button>
<tab-container>
<tab-pane title=”Good kids”>
<div [ng-repeat|todo]=”todosOf(‘good’)”>
<input type=”checkbox”
[checked]=”todo.done”>
{{todo.title}}
<button (click)=”deleteTodo(todo)”>
X
</button>
</div>
<tab-pane> </tab-container> </div>

Let’s take a closer look at the above example. You no longer see ng-model and ng-click in Angular 2.0, rather it uses square bracket notation. Just like in JavaScript, Angular 2.0 will also use parentheses to invoke methods.

New things in Angular 2.0

a) AtScript

AtScript is a language that is a superset of ES6 and it’s being used to author Angular 2.0. It uses TypeScript’s type syntax to represent optional types which can be used to generate runtime type assertions, rather than compile-time checks. It also extends the language with metadata annotations.

b) Child Injectors

Angular 2.0 has other new things to offer like CHILD INJECTORS. As name suggests child injector will inherit services from parents and moreover it will also have the ability to change them. Woaahh!! Pretty Powerful child!

c) Dynamic Loading

One main issue with angular 1.3 was developers weren’t able to easily add new feature (controller or directive) on the fly. But in Angular 2.0 everything is designed from scratch with asynch.

d) Directives

In Angular 2.0 there are three types of directives:

Component Directive – Creates a custom component composed of a View and a Controller. You can use it as a custom HTML element. Also, the router can map routes to Components.

Decorator Directive – Decorates an existing HTML element with additional behavior. A classic example is ng-show.

Template Directive – Transforms HTML into a reusable template. The directive author can control when and how the template is instantiated and inserted into the DOM.
Examples include ng-if and ng-repeat.

As an Angular developer, Igor Minar made clear in ng-europe conference that ” It’s still early days and design is still evolving and changes can be seen in actual framework and we’re trying to consider all the options. Perhaps will come up with something new and amazing! “. Many developers are excited about the modern approach the Angular team is taking with 2.0, a few seem to be predicting high, and a few more are worried about what they should do.

Moreover, Angular team already announced that they will keep supporting and updating 1.3 for next few years and there will be migration path from Angular 1.3 to 2.0. Some of the people that are using AngularJS right now might say this upgrade that the framework is getting is a good thing, while some might say it’s a bad one. But how can you really judge a product that’s still in development phase? Things can completely change at any point of time, so it’s too early to make an opinion about it. We have to wait and see how things turn out to be in the end and then decide if the transition from AngularJS 1.3 to 2.0 is worth it.

SUBSCRIBE TO UI STREET

What’s the correct way to communicate between controllers in AngularJS?

What’s the correct way to communicate between controllers in AngularJS?

The two best ways to communicate between controllers in Angular JS are:
a) $broadcast
b) $emit

$emit, $broadcast and $on all these methods come under the common “publish/subscribe” design pattern.If an event is fired up the $scope, it is because of $scope.$emit. If an event is fired down the $scope, it is because of $scope.$broadcast. If we want to listen for these events, then we use $scope.$on.

We need not fire events on $rootScope, unless and until we need each and every single scope in the application to be notified about the event, So accordingly, $broadcast method is fired on our own scope only if it required for the children scopes. And if it is required for parent scopes, then $emit is fired on your own scope.

SUBSCRIBE TO UI STREET

Scope Inheritance in Angular JS

Scope Inheritance in Angular JS

In Angular, a scope is associated to an element, while an element is not necessarily directly associated with a scope. It is important to have a solid understanding of prototypical inheritance and differentiate the types of scopes. A child scope normally (prototypically) inherits from its parent scope, but not always. Scope inheritance is also normally straightforward, until 2-way data binding is required (i.e., ng- model) in the child scope. In that case, the child scope gets its own property that hides/shadows the parent property of the same name.

There are four types of scopes. The first one has “normal prototypical scope inheritance”; ng- include, ng-switch, ng-controller – create new scopes and inherit prototypically ( note that, ng- controller, however, is considered bad form for two controllers to share information via “scope inheritance.”), directive with scope: true. If more than one directive (on the same DOM element) requests a new scope, only one new child scope is created. Since we have “normal” prototypal inheritance, you want to be wary of 2-way data binding to parent scope primitives, and child scope hiding/shadowing of parent scope properties.

The second type has “normal prototypal scope inheritance with a cop y/assignment” – ng-repeat. Each item/ iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property. Changing the child scope property’s value does not change the array the parent scope references.

The third type of scope and the one exception to the rule of inheritance is an “isolate scope” (created by directive with scope: {…}. Note, also, that, by default, directives do not create new scopes i.e., the default is scope: false so there is no inheritance there. Default is not a good choice for writing directives that are intended as reusable components.) An “isolate scope” is not prototypical but ‘=’, ‘@’, and ‘&’ provide a mechanism to access parent scope properties, via attributes. The object hash is used to set up two-way binding (using ‘=’) or one-way binding (using ‘@’) between the parent scope and the isolate scope. There is also ‘&’ to bind to parent scope expressions. So, these all create local scope properties that are derived from the parent scope. This construct is often the best choice when creating a “reusable component” directive, since the directive cannot accidentally read or modify the parent scope.

Scope Inheritance in Angular JS

The last type is a “transcluded scope”- directive with transclude: true. The directive creates a new “transcluded” child scope, which prototypically inherits from the parent scope. The transcluded and the isolated scope are siblings – the $parent property of each scope references the same parent scope.

It’s important to remember that for all scopes (prototypal or not), Angular always tracks a parent- child relationship (i.e., a hierarchy), via properties $parent and $$ childHead and $$childTail.

In the case of a more complex scope inheritance, your workarounds should include three basic steps: 1) define objects in the parent for your mode, then reference a property of that object in the child: parentObj.someProp, 2) use $parent.parentScopeP roperty (where possible), and 3) define a function on the parent scope, and call it from the child.

SUBSCRIBE TO UI STREET

SUBSCRIBE TO UI STREET

Optimize Mix and match typography in web design

Optimize Mix and Match Typography in Web Design

Mix and Match Typography in Web Design
Technology advancements has popularized a typography style in websites. The ability of selecting the appropriate font has broaden to the extreme to make websites attractive. Mix and Match typography has become the necessary features of web design for creating the best user experience. To improve the website look and feel in long run, selecting the right typographic plays the key role to leave viewers attractive. After years of working, many customers are focusing and pushing designers to go with mix and match typography style of usage in their websites.

With emergence of new trends popping up for better readability, there is raise in usage of usage of typography in web design. Most notably, retro typography on vintage style websites is quiet powerful across the web. This trend has been around for a while but now we are seeing this in full force for websites who want to set up their brand in bold and visually interesting ways. This Mix and Match typography relies on the designer’s ability to choose the right fonts to match not just the message, but the other typographic styles in use.

Some designers usually stick to one font to what they like, but it is good to mix and match fonts with the flow of website without effecting the overall look. Think of not to use too-small or too loopy fonts that are hard to read and look for long periods of time. Though there are several kinds of fonts available, look for the right mix and match typography that fits the mood and aesthetic of your design. Try out new things to achieve a desired effect for your website allowing viewers with maximum readability.

SUBSCRIBE TO UI STREET

Advancing from jQuery to AngularJS

Advancing from jQuery to AngularJS

Technology trends are increasingly growing today with the developers building robust  and more complex applications. Almost all of the rich web applications that we currently see on the web rely on a subtle set of UI controls, libraries and frameworks. There are so many options out there to provide a consistent, reliable, and highly interactive user interface, but selecting the right library or  a framework can be overwhelming. To have an idea of all the possible alternatives, in this article we will explore what constitutes best practices with regard to jQuery and, furthermore, why angular is a good choice of a framework to implement.

jQuery as we all know it has become an essential library when it comes to common functions and adding JavaScript functionality to a website. But when it comes to some of the web applications that are large and complex, jQuery alone cannot be used to provide a stable foundation to write quality, maintainable code. Consequently, MVC frameworks have emerged to provide more structured  and maintainable code when developing these applications.

There are many JavaScript frameworks, which provide a solid structure for your code whilst also offering some extra functionality to turn up the desired task quickly. To name a few- Angular.js, Backbone.js, EmberJS, KnockoutJS, etc.   all these frameworks have their own perspectives based on the functionality, features, size, dependencies and interoperability.  Based on the statistical reports of Infoq.com, it is found that AngularJS has been the preferable framework in most of the cases. Also Angular has jQuery dependency, which makes it a good choice for web development. Angular provides a ready framework that works with multiple libraries which can be added on as required.

Let say, if you would like to send some requests to a backend server and display the results on a web page and vice versa. We can perform this simply in both Angular and jQuery. But with Angular it goes really well against jQuery with one big difference. It does not involve us to think of the back and forth DOM translations as opulent to jQuery. In jQuery, the view and the logic or behavior which affects those elements is left to the developer to split them. In jQuery, if we wish to update a specific DOM element with backend data it has to be coded. There is no separation as to which is the data and which is the controller of the data.

That’s where AngularJS comes into play with its two way data binding. Angular separates the UI data and the UI representation of data. The code in AngularJS  is the translation of data to the DOM and vice versa. Angular makes this binding ideal, while increasing productivity. This is the best way to separate data and the HTML view code.

Angular provides rich ‘desktop like’ applications and features that you don’t get with using a jQuery library.

  • MVW pattern (similar to MVC)
  • Two way data binding
  • Dependency Injection:
  • Templates
  • Form Validations
  • Deep Linking for dynamic pages
  • Communication with server
  • Reusable components and localization to name a few

When looking for a comprehensive all-in-one solution, AngularJS is the right choice between the two. Its two-way data binding, in-built directives and filters allows developers to build applications very rapidly. So if you are looking for a lightweight and modular front-end framework for developing fast and powerful web interfaces, AngularJS is the apt framework to build complex applications.  I hope this post has made you think about Angular.js as being a more than viable replacement to jQuery.