COMMON MISTAKES ANGULAR JS DEVELOPERS MAKE

Common Mistakes Angular JS Developers make

Angular JS is a Javascript structural framework for dynamic web pages that enables usage of HTML as a template language and allows the extension of HTML’s syntax in order to achieve the lucid and concise expression of an application’s components. It is one of the most widely used Javascript frameworks in existence today. The USP of Angular JS could perhaps be its unique ability to simplify the development process which is awesome as far as protoyping small apps is concerned. However, the sheer power of the framework enables scaling to full featured client side applications. Despite the developer-enticing advantages such as; Removal of registering callbacks, Non requirement of programmatic manipulation of HTML & DOM, Elimination of boilerplate code etc. a lot of drawbacks in terms of Angular JS usage haunt developers. Let us delve deeper into those so that we know what not to do and why.

Accessing the Scope through DOM

Few optimization tweaks are recommended for production and one of them is disabling debug information. DebugInfoEnabled is a setting which defaults to true and it allows for scope access through DOM nodes. If web developers want to try this, they should select a DOM element and access its scope with: Angular. Element (document.body).scope ( )

Not Using Named Views with UI Router

De-facto routing solution for AngularJS has been the UI-Router and ngRoute is basic for more sophisticated routing. There is a new NgRouter on its way and web development experts term it as basic for more sophisticated routing. UI-Router is prominent because it has awesome basic nesting, route abstraction and optional parameters. Solution to this mistake can be obtained from HTML code and it is necessary to separate them into files and states

Declaring Everything in the Angular World Using Anonymous Functions

This mistake is of very light importance and it is a question of style than avoiding Angular JS error message. If functions are assigned to a variable, web developers can manipulate and mutate functions. The code will be cleaner and it can be very easily split into files. By avoiding this mistake, web development experts get more expressive power through reusable code and splitting all code in self contained blocks is just bette.

JQuerying It-Detached DOM Tree

It is not recommended to use JQuery with Angular JS and it should be avoided at all costs.

Overusing Isolated Scope

There are two reasons for this issue and the first one is that we can’t apply two isolated scope directives to an element and we will have to encounter issues with nesting/inheritance/event processing.

Not Cleaning up Watchers, Intervals, Timeouts and Variables

Not cleaning up any watchers that are not bound to the current scope, intervals, timeouts, variables referencing DOM and JQuery plug-in is a mistake made by even experienced JS Developers. If the above mentioned tasks are not completed manually, we will have to encounter unexpected behavior and memory leaks.

Misunderstanding the Digest

Angular JS updates DOM as a result of callback functions to watchers and watchers are set for many other directives such as ng-if and ng-repeat.

Managing Numerous Watchers

The cycle can cause several performance problems if the number of watchers exceeds about 2000. This is due to the dirty checking that is carried out in a digest cycle.

Common Mistakes Angular JS Developers make

The aforementioned Immediately Invoked Function Expression (IIFE) prints the number of watchers presently on the page. To view the total number of current watchers on a page, just paste the IIFE in the console.

By employing this technique, ascertaining of the existence of duplication or whether unchanging data has a watch is made possible. Use Bindonce to template unchanged data using Angular. Bindonce is a simple directive that allows usage of templates within Angular. However, this does not prevent the count from increasing.

Leaving Batarang On The Shelf

A Google Chrome extension for debugging and developing AngularJS apps, Batarang is a great tool for developers. Batarang enables model browsing to learn the models that are bound to scopes as determined by Angular. This can be useful in isolation of scopes in order to be able to see where the locations are bound. It can also be helpful during working with directives. Whilst entering an untested codebase, Batarang helps determine which services should get the most attention. It also offers a dependency graph.

Offering performance analysis, Batarang enables detection of functions that take the most time in the digest cycle. In addition to the aforementioned benefits, non-utilization of Batarang also prevents developers from viewing the full watch tree, which can come in very handy when dealing with numerous watchers.

Utilization of jQuery

It’s standardized cross platform development and becoming almost a necessity in contemporary web development makes jQuery an amazing library. Albeit despite its appealing and attractive features, the philosophy of jQuery is not compatible with AngularJS. The fundamental difference between the two is that AngularJS is about architecture of applications whereas jQuery is a library for simplifying “HTML document traversal and manipulation, event handling, animation and Ajax.”

AngularJS allows for the extension of one’s HTML vocabulary for the application whereas jQuery compels the developer to think of existing HTML standards. Therefore, in order to truly comprehend the building of an application using AngularJS, the usage of jQuery must be stopped.

AngularJS is a framework that evolves with the community. By refraining from the conventions described above and understanding the reason why, it is hoped that the mistakes made in the usage of AngularJS are not repeated.

HOW TO PASS COMMAND LINE ARGUMENTS TO NODE.JS?

How to pass command line arguments to Node.js?

Three ways to pass the command line arguments to node.js

  • Using process.argv – process.argv is an array containing the command line arguments. The first element will be ‘node’, the second element will be the name of the JavaScript file. The next elements will be any additional command line arguments.

// print process.argv
process.argv.forEach(function (val, index,
array) {
console.log(index + ‘: ‘ + val);
});
This will Genearate,
$ node process-2.js one two=three four
0: node
1: /Users/mjr/work/node/process-2.js
2: one
3: two=three
4: four

  • Using yargs module – It is a light-weight option parsing with an argv hash.
  • Using minimist module – It is a module which parse argument options.

IS IT POSSIBLE TO APPLY CSS TO HALF OF A CHARACTER/WORD?

Is it possible to apply CSS to half of a character/word?

Yes, by using :before and :after, we can achieve this. However, for dynamic data, we may have to use JQUERY.

Only CSS (static text)

<h1></h1>
h1:before {
content: ‘Exam';
color: #0000ff;
font-size: 32px;
}
h1:after {
content: ‘ple';
color: #ff0000;
font-size: 32px;
}

Result:
CSS to half of a character

HOW TO HANDLE INITIALIZING AND RENDERING SUBVIEWS IN BACKBONE.JS?

How to handle initializing and rendering subviews in Backbone.js?

  • The view’s container element (affectionately known as its el) swaps out all of its html for new html, probably fetched from a template. The problem is in the child view.

There are several ways to handle this situation

1. Don’t Re-Render the Parent View

The simplest is to design a parent view that doesn’t require re-rendering. It has static content and serves as a container of child views. The child view container elements are never re-rendered, so they never go stale.

2. Reassign the Child View’s Element

Another more practical approach is to reassign the child view’s container once the parent view renders. Your view can now re-render appropriately, but its events will still be broken, as they are still stale. This second piece can be fixed with a call to delegate Events.

Example
Example.ParentView= Backbone.View.extend({
childView:new Example.ChildView(),
render:function(){
this.$el.html(this.template(this.model.
toJSON()));
this.childView.$el
=this.$(‘#child-view-container’);
this.childView.render();
this.childView.delegateEvents();
}
});

EXPLAIN “DEFERREDS”?

Explain “Deferreds”?

Deferreds

  • In their simplest form, deferreds allow you to specify what will occur when a computation/task completes or fails. jQuery’s specific implementation allows you to register callback functions that will run if a deferred resolves successfully, if it is rejected with errors, or if it is notified of some “progress” towards a resolved state (more on that later).
  • The “Deferred” pattern describes an object which acts as a proxy for some unit of computation that may or may not have completed.
  • The pattern can apply to any asynchronous process: AJAX requests, animations or web workers to name a few.

Important to understand:

  • Deferreds can be passed around indefinitely, and callbacks can continue to be added during the entire lifetime of the deferred object.
  • The key to this behavior is callbacks registered with the deferred will run immediately if the deferred is already resolved.
  • You don’t need to worry if the asynchronous unit of computation (e.g. an AJAX request) is finished or not.

EVENT DELEGATION SIMPLIFIED?

Event delegation simplified?

  • First let’s understand few terms in Event model in JS. When an event is trigged on an element (say a click on a button), then such event goes UP to all it’s ancestors elements and triggers “click” on all of button’s parents.

<body onclick=”alert(“I am the body”)>
<section onclick=”alert(“I am a section”)>
<div>
<button onclick=”alert(“I am a button”)>-
Click Me</button>
</div>
</section>
</body>

Clicking on the button will show up 3 alert boxes in the following order:

I am a button
I am a Section
I am the body

Whether an onclick is attached on each of it’s ancestors elements or not, the “click” event is fired on each of them. This is event bubbling. The “clicked” element (in this case button) is stored in ‘target’ property of the event object.

Now the event delegation:

  • Let’s say that we wanted to have a click event to each list item <li> element below. Instead of adding an event to each <li> element, we add the event at the parent level (ul in this case). The reason is that whenever a list item is clicked, the event bubbles up to top of DOM tree. When this happens, we can capture the event at UL (event bubbling) and easily determine from which element the event originated and perform the functionality to that element.

<ul id=”parent-list”>
<li id=”post-1″>Item 1</li>
<li id=”post-2″>Item 2</li>
<li id=”post-3″>Item 3</li>
<li id=”post-4″>Item 4</li>
<li id=”post-5″>Item 5</li>
<li id=”post-6″>Item 6</li>
</ul>

  • When the event bubbles up to the UL element, you check the event object’s target property to gain a reference to the actual clicked node.
  • JS Example

// Get the element, add a click listener…
document.getElementById(“parent-list”).addEventListener(”
click”,function(e){
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName ==”LI”){
// List item found! Output the ID!
console.log(“List item “, e.target.id.replace(”
post-“),” was clicked!”);
}
});

JQUERY 3.0- THE FUTURE OF WEB DEVELOPMENT

JQUERY3.0 – THE FUTURE OF WEB DEVELOPMENT

Ever since its inception, jQuery has been a tool to be reckoned with. It has become the philosopher’s stone for developers across the world with its unparalleled ability of maintaining code compatibility with popular and old browsers alike. Conventional development practises have evolved over the past few years. Practises which were the norm some time ago are now considered wrong, such as browser sniffing. Today, UI developer practises have become more disciplined.

future_of_web_development

The jQuery development team under the guidance of its lead, the president of the jQuery foundation Dave Methvin is introducing jQuery 3.0

The 1.x and 2.x versions that supported old browsers like IE6, 7, 8 and recent browsers respectively were in fact compatible with each other in terms of the API. This led to confusion in the product’s Semantic Versioning (Semver), which is why they introduced jQuery 3.0 This latest version comes in two packages,“jQuery 3.0” which is a successor to what previously was jQuery 2.1.1& “jQuery Compat 3.0” which is a successor to the erstwhile 1.11.1.

The jQuery 3.0 offers support only to modern browsers. This package might also offer support for additional browsers based on market share.

The jQuery Compat 3.0 however, supports both the old and new browsers. This support that spans a wide range of browsers comes however with the risk of a potentially lower performance and at the expense of a larger file size. Though they might differ insignificantly in their internal implementations, segregating the same version into two packages lays emphasis on the fact that both are API compatible. This would enable developers to switch between the two versions smoothly and assure compatibility with all third party jQuery plugins. The need for a new version and the subsequent segregation arose due to the fact that jQuery was using Semver to indicate browser compatibility whereas ideally, Semver indicates API compatibility.

Dave Methvin stated in his blog that If support is required for a wide range of browsers including IE8, Opera 12, Safari 5 etc. the “jQuery 3.0.0 Compat” version is the option to go for as this version offers compatibility for all website visitors. However, if support is required only for a select few popular browsers that are widely in use or just an HTML app within a webview (Example: PhoneGap or Cordova) and in cases where knowledge about the browser engines in use is privy, the jQuery 3.0.0 package is the most feasible option.

Contrary to what one might anticipate, this version is not a major rework of jQuery’s API. The folks at the jQuery foundation are quite content with the design and therefore are only interested in tweaking the API when necessary. Some significant changes have however been introduced, such as the Promise/A+ compatibility for jQuery’s deferred implementation and the return of Request Animation Frame for animations to enhance battery life and performance.

This version of jQuery has been made modular to allow developers working on the smallest file sizes to exclude unnecessary parts. For instance they now have the liberty of excluding the animation methods of jQuery if they exclusively use CSS animations.

The release date is not yet out, however, the subsequent releases of both the packages shall be made available on npm & bower. They shall also be made available as single-file builds on the jQuery CDN. According to the jQuery people, both the packages shall also be supported by Google’s CDN.

With the current trend of newer, simpler and easier versions to popular platforms, it seems that developers are spoilt for choice. So all those jQuery enthusiastic out there, go ahead and exercise the luxury of choosing what you require and using only that which you need making your life simpler.

MICRO SERVICES ARCHITECTURE – GENESIS AND BENEFITS

Micro Services Architecture Genesis and Benefits

MicroServices a suite of small services, each running in its own process and communicating with lightweight mechanisms often an HTTP resource API. Micro Service Architecture (MSA) is quite similar compared to Service Oriented Architecture(SOA) in the industry. Both emphasis about services as the cornerstone for the architecture. Let’s first explore what exactly is a MSA.

Micro service architecture is a distinctive method of developing software systems as a suite of independently deployable, small, modular services in which each service runs a unique process and communicates through a well-defined, lightweight mechanism to serve a business goal. It has grown and become a popular software architecture style, courtesy of its leaps and bounds in the past few years. In this model, large and complicated applications are broken down into small and manageable processes that communicate with each other using language-agnostic Application Program Interfaces(APIs). Micro services are small, highly decoupled services that focus on conducting minute tasks.

So, a micro-services architecture would involve developing a single yet meaningful functional feature that will act as a single service, with each service having its own process and lightweight communication mechanism that is initiated in single or multiple servers.

Example of how Micro Services are implemented:

Let’s assume that you are building an e-commerce application that takes orders from customers, verifies inventory and available credit, and ships them.

The application consists of several components including the StoreFrontUI, which implements the user interface, along with some backend services for checking credit, maintaining inventory and shipping orders. The application is deployed as a set of services.

Y axix scaling – application level

Y axis scaling application level

Apply X axis cloning and/or Z axis partitioning to each service

This application is likely using different services such as Accounting, Inventory services and Shipping service. Each of this functionality is effectively running as an independent service and composed together. Each service runs in its own process and communicating with lightweight mechanisms. These services will have their own database in order to decouple from other services. When necessary, consistency between databases is maintained using either database replication mechanisms or application-level events. These services are independently deployable. With this approach, it is easier to deploy new versions of services frquently.

MicroServices, the name suggests that the services need to very small and probably very fine grained but in reality no size restrictions apply. Ironically, it’s the size (and focus) of services that commonly cripple SOA implementations.

Benefits of Micro Services Architecture:

  • Simplicity -Code is easier to understand
  • More productive in speeding up the deployments
  • Each service can be deployed independently
  • Makes continuous deployment feasible
  • Develops, deploys and scales each serviceindependently
  • Improves fault isolation
  • Eliminates any long-term commitment to a technology stack
  • Easier to deploy new versions of services frequently

How MSA is useful to UI developers:

Micro services architecture helps UI developers in building an entire portfolio of applications where services and resources are shared, allowing you to eliminate redundant workflows. So,instead of maintaining an array of monolithic applications by various teams where architects and support resources end up duplicating each other’s effort, UI developers can now draft and design their applications from an existing service that has already been built and setup by others.

It is useful to note that this is not the same as reusing old codes, because as a UI developer, you’re embedding a live service that will become a part of your application and will benefit all applications that use that service. It’s independent code bases, independent deployability and having different teams work on different parts of the stack without having to coordinate with each other is what makes it the preferred choice.

Conclusion:

Micro services architecture has been used to describe a peculiar and effective method of designing applications as a package of independently deployable services. And as an innovative concept that’s blossomed out of an old idea, micro services architecture has shown stellar potential in describing development patterns that web developers keep incorporating into their design.

BATTLE OF IDE’S : WHICH ONE IS THE BEST?

BATTLE OF IDE’S : WHICH ONE IS THE BEST?

Explore your editor of choice that allows you to be ultra-productive.

So, you’re in the market for a reliable and functional text editor for your daily needs. There are hundreds of source code editors available in the market that might offer a high level of customization, but it’s very complicated and can become tedious to work with. To name a few- Eclipse, Notepad++, IntelliJ, Atom, Brackets and Sublime Text are few text editors. Among the most popular and useful of them are Atom, Brackets and Sublime Text.

Here’s a thorough comparison that measures these editors upon 6 important parameters and bares the best and worst of each. Though we are comparing open source IDE and commercial IDE’s – our intention is to just look at some important features keeping pricing aside. Right from the interface and customization flexibility to accessibility and stability, we consider everything and have a winner for you. Do not skip ahead, the ending should not be revealed until the time is right.

1. Interface

We all know that text editors aren’t what you’d call pretty, but as you use one over the course of the day, you’ll realize that a clean and efficient user interface is exactly what you need.

Text editors should be easy on the eye and allow for hours of coding sessions.Sublime Text offers the widest options because it lets developers understand the importance of color coding theme customization. Not to say that it’s the best because the other two editors also have a capable range of options which allow you to make your personalized text document.

Overall, it’s not easy choosing a favourite because they all look alike and even have identical interfaces. All three editors offer the best of everything, but brackets seems to be the obvious choice because it apparently provides you with the most consistent cross-platform user experience and is also quite eye pleasing. But even brackets has its flaws as its font rendering doesn’t appear as smooth as other editors. This issue can be solved with a little tweaking though. Atom’s text editor comes in really close second since it has windows aesthetics, which gives it a minor advantage over Sublime Text because it looks out of place.

2. Customization

Since text editors are universally designed to be fully customizable, it becomes a bit difficult to judge them upon this factor. Although Sublime Text and Atom have similar configuration files, Atom has more options integrated into its interface. Documentation is also more organized, and gives your access to the editor’s source in case you need more comprehensive changes or want to work on plug-in development. Brackets is also equipped with an array of options, but although it’s also open source, it’s just not as customizable as Atom andSublime Text.

3. Syntax Support

All four editors have the ability to edit any source files, no matter what kind of syntax they possess. Sublime text, however, clearly wins this category since it offers color coding and support for numerous popular and esoteric languages. Atom and brackets are in the same league as they offer plug-in support even for less-popular syntax.

4. Accessibility

The best text editor is one that allows you to be ultra-productive when you need to be, and allows you to explore new features over time. Keeping that in perspective, brackets is the best choice because it has easy accessibility to most of the options conveniently located on its general user interface. It is also configured in such a way that most of the options are available via the menu without having to modify the configuration files.Sublime text is packed with clever features but its interface makes locating, configuring and implementing these features troublesome to say the least. Atom works better and simpler in this case because of its relatively steeper learning curve compared to brackets.

5. Stability

Sublime text is, by far, the fastest of all the four editors and faces only the extremely rare crash or loss of progress or data. Brackets, on the other hand, has much higher hardware requirements that can cause some very annoying lag and frequent system or process crashes, especially with larger files. We recommend that you’d be best off if you used it to edit HTML, CSS and JavaScript files, and try avoiding complicated SQL files.

6. Native Features and Plugins

How good is your editor is out of the box? Again, Sublime Text wins this one, since it offers a comprehensive range of features. And even if that doesn’t satisfy you, it offers an excess of 2,000 extensions that can enhance functionality. Other contenders follow a more minimalist approach, offering just basic editor that needs to be supplemented by plugins that offer advanced avenues to take. In Atom, for example, even auto complete is an optional plug-in. Brackets doesn’t even offer a split view feature as an option. Sublime text manages to remain nimble and light despite the extra functionality. Atom and brackets offer easier plug-in management, despite their limited standalone functionality.Atom (primarily maintained by GitHub) and Brackets (Product of Adobe) are open source code editors where you can install and use them interchangeably. On other hand, Sublime text is not free, but has unlimited trial.

And the Winner is.

Now that we’ve thoroughly scrutinized the three text editors, we’ve enough evidence to establish that they all come in very close to each other. That being said, Sublime Text continues to remain the editor of choice despite its considerable price. This is mainly because it offers you a quick, stable, and highly-adaptable user interface that ensures a positive user experience.