Monthly Archives: December 2015

YEOMAN ANGULAR GENERATOR

YEOMAN ANGULAR GENERATOR

A MODERN DEVELOPMENT KICKSTARTER

yeoman

What is YEOMAN – A quick summary:

Yeoman is an open-source client-side (MVC-MODEL VIEW CONTROLLER) platform to create Development Stack, which consists of tools and frameworks designed to help the developers to build high quality web applications. Yeoman runs as a command-line interface which is written in node.js. Yeoman provides a local development server and optimizes the production code for deployment.

YEOMAN Architecture:

Yeoman is a collection of three tools: YO, GRUNT, BOWER. These 3 tools provide everything for a developer to get started on a project.

YO

Is a tool that generates essential assets for a project like style sheets, JavaScript, and views.

GRUNT

Is a task runner that will automate things like converting sass files to css, and optimising images. Grunt performs repetitive tasks like minifying, and compilation process of running an application instead of doing it manually.

BOWER

To develop any application it needs basic requirements like widgets, Framework, assets, and Library files. Bower is a package Manager, It will find and download all required files for our application. Bower requires GIT.

Prerequisites for YEOMAN:

Node, npm, Git, compass (If application needs sass compilation). Compass in-turn requires Ruby and Ruby gems.

Getting started with YEOMAN:
1.Go to command prompt, and install Npm install -g grunt-cli bower yo generator-angular.
2. Create a folder in local drive, move to that folder in command prompt.
Execute the command yo angular <>
e.g. yo angular sampleApp
Now, Everything will be taken care of by, Yeoman generator.
Generator will create the following files and folders with default and basic configurations.
Application will be generated with app and bower components as illustrated bellow:

Starting Your Application:
The generated gruntfile has an inbuild task that will create a simple webserver so that we can preview our app.
We can start running the application by using this command.

Grunt serve
Once the server is started, grunt will automatically launch our application with default port 9000.

OTHER YEOMAN GENERATORS:
With Yeoman, below generators can also be created:
Backbone.js – generator-backbone
Ember.js – generator-ember
Jquery – generator-jquery
Wen-app- generator-webapp
These generators are installed through npm globally.
Npm install –g [generator-name]

WHICH WAY TO GO: NATIVE, HTML5, OR HYBRID?

Which way to go: Native, Html5, or Hybrid?

In a world that is progressively social and open, portable applications play a key role, and have changed the emphasis from what’s on the Web, to the applications on our smartphone. Versatile applications are no more an alternative, they’re a basic. You require a versatile application, yet where do you begin? Many elements have influence in your versatile technique, for example, your group’s improvement abilities, required gadget usefulness, the significance of security, logged off capacity, interoperability, and so on, that must be considered.

html

There are mainly 3 options of mobile application development:

mobile application developement
Native Mobile Applications

More or less, local applications give the best ease of use, the best elements, and the best general versatile experience. There are a few things you just get with local applications:

Multi touch – Twofold taps, squeeze spread, and other compound UI motions.

Graphics API – The local stage gives you the speediest design, which may not be a major ordeal in case you’re demonstrating a static screen with just a couple of components, or a major ordeal in case you’re utilizing a great deal of information and require a quick invigorate.

Fluid animation – Identified with the quick representation API is the capacity to have fluid liveliness. This is particularly vital in gaming, exceedingly intelligent reporting, or strong computational calculations for changing photographs and sounds.

Built-in components – The camera, location book, geolocation, and different elements local to the gadget can be consistently incorporated into versatile applications. Another imperative implicit parts is scrambled capacity, yet more about that later.

Usability – The local stage is the thing that individuals are acclimated to, thus when you include that recognition with the local’s majority highlights they expect, you have an application that is out and out simpler to utilize.

Documentation – There are more than 2500 books alone for iOS and Android advancement, with numerous more articles, blog entries, and nitty gritty specialized strings on destinations like StackOverflow.

HTML5 Web Apps

HTML5 is a dialect that empowers designers to make rich online applications that keep running on any gadget by means of the web program; engineers can “compose once, run all over”. A versatile venture may need to make a substantial number of distinctive applications to bolster a horde of differing offices and useful undertakings, which makes HTML5 more alluring financially.

Defenders of HTML5 trust that the quality is practically identical to that of a local application. Likewise, it is less demanding to adapt and roll out improvements to your application in light of the fact that you are not experiencing an application store.

Contentions against HTML5 incorporate execution, hindrance of heading off to a URL rather than downloading an application, and absence of program similarity (not all portable programs bolster the same subset of components).

Hybrid App

The last choice is to make a half and half endeavor portable application, which is composed in HTML5 however wrapped in a local “compartment”, and made by means of cross-stage advancement devices, for example, PhoneGap and Sencha. It would seem that a local application, can be downloaded from an endeavor application store, and can even access on-gadget highlights, however doesn’t contain an ounce of Objective-C or Java code. The engineer ordinarily needs to utilize HTML5, CSS, and JavaScript inside of the stage environment, abilities which are less demanding and less expensive to discover than Objective-C or Java.

One downside to this methodology is timing: there may be issues while sitting tight for your stage to actualize new usefulness discharged by a working framework. This methodology is picking up in prominence: Gartner predicts that by 2016, more than half of all applications conveyed will be crossover.

At last, if your endeavor portable applications oblige access to gadget particular components or predominant response time required for amusements rate advanced applications (video), then local is your most logical option.

On the off chance that you are expense obliged and need to create numerous applications for some stages, or need to do quick prototyping preceding building up the full-highlighted application (run of the mill with a commercial organization), pick HTML5.

In the event that you are some place between the two, well then go half and half.

THE SECRET TO DESIGNING AN INTUITIVE UX

The Secret to Designing an Intuitive UX

It is important to design websites and software with the user in mind and intuitive user experience has huge impact on customer satisfaction. UI design experts firmly believe that intuitive user experience boosts user adoption, satisfaction and retention. As the starting point, desktop software, mobile app, and website, should incorporate an umbrella structure (The umbrella structure is the overall structure that lays out what the product can do for us). Umbrella structure in a typical website is the navigation bar along the header and the iPhone’s central phone app is a classic example. There are five icons along screen bottom for contacts, voicemail, and other features that tell users right way.

Overloading the umbrella structure should be avoided and UI designers should keep a keen eye on how the elements are being labeled. It is recommended to stick to one word names as users will get a quick idea of what this will offer them. Another important user experience aspect to be considered is nexus structure and it is almost like a form of navigation. As a user experience concept, nexus structure separates mediocre design from great design and it lets users switch from one application to another easily.

It has been said that too much text impacts how quick users look at the screen. For example, the phrase “please sign in here” can be simplified into just ‘sign in’. It is to be ensured that graphics are clean and not distracting in any web page so users will have a better visual experience. Buttons should look clickable with bright and high contrast colors and it should be clearly labeled with one word actions like ‘send’ or ‘submit’. Experts familiar with developments in web development arena say that high quality user experience is the difference between failure and success.

Major objective of any UX project is to have an intuitive UI and describing UI as intuitive is a commendable achievement for developers. ‘Simple’, ‘easy to use’, and ‘clean’ are other phrases used for denoting an intuitive UX among developers.

Do you feel that intuitive is a fancy word for affordance, consistency and predictability? As a rule of thumb, we can state that a UI is intuitive when it has a well balanced combination of affordance, expectation, efficiency, and responsiveness. From the perspective of functionality, UI delivers the expected and predictable results with no surprises.

In an intuitive UI, users can navigate throughout the UI without the fear of penalty or unintended consequences. An intuitive UI will be memorable, discoverable, easy to learn, familiar and matches expectation. A system design presents two aspects of the control user needs to operate in order to make the device function properly and the domain user is operating in.

Consistent and intuitive user experience is a pivotal element in web software of contemporary age. The most important thing about intuitive design is that it is invisible and intuitive design directs user attention to extremely important tasks. Since intuitive design is invisible, users will not appreciate it initially and they will immediately take note of it in its absence. A web developer or designer should take note of requirements of users ranging from tech savvy youngsters to computer illiterate folks. The interesting fact is that fifty percent of users can’t find what they are looking for and search is super important in this context. An intuitive design happens when we don’t force our users to attend to change and higher conversions as well as user loyalty are the amazing benefits of having an intuitive UX.

PYTHON VS RUBY ON RAILS

Python vs Ruby on Rails

Technology has gained a fast pace with new advanced tools and languages enabling developers to build rich internet-based applications. There are various backend, or server-side languages, which help developers in many ways. But Ruby and Python are two languages that are very popular in modern web development. Many get confused while choosing the programming language for their projects, whether to go for Ruby on Rails development or Python. So in this article, let us first understand what these technologies are all about and how better they provide an edge over other frameworks.

Ruby on Rails:

Ruby on Rails is an open source web application framework and programming language that is designed for rapid development. It is observed that many web developers are switching to this for their web development procedures. As we all know Ruby is an application development programming language and Rails is the framework that the language works on, it is ideal for businesses that hold large amount of data. Ruby on Rails makes complicated websites easy to develop and in turn makes developers spend less hours in writing code.

Ruby programming language allows developers build a completely functional website within a short period. The main features of RoR is based on migrations, attractive layouts, validations, filters, helpers and view generators. Generally, most useful tools used by Ruby on Rails and other web developers are SASS, HAML, YAML, S3, EC2 and Asana etc. You have to use the ROR platform to select executing projects using J Ruby or any other type of native Ruby interpreter on your system.

Python:

In recent years, Python is widely used for faster development of high level programming language. Specifically, a working knowledge of Python can be a solid foundation because Python’s methodologies can be used in a broad range of applications. Python comes with extensive standard libraries, and has a powerful datatypes such as lists, sets and dictionaries. These really helps you to organize your data. It is taking over as the general purpose language used to demonstrate concepts, provide a common vocabulary, and to glue together systems created in other languages.

So what is it about Python that is driving its adoption?

  • Ease of Learning, Ease of Use
  • Free and Open source
  • High level language
  • Portable – All Python programs can work on any of the platforms without requiring changes.
  • Object oriented pragramming

As an object-oriented language, Python aims to encourage the creation of reusable code. Even if we write perfect documentation all the time, code can hardly be considered reusable if it’s not readable. Many of Python’s features, in addition to its use of indentation, conspire to make Python code highly readable.

Let’s look at general differences between Ruby and Python languages. The comparison given below gives a clear insight of their advantages: and disadvantages in Web application development:

python vs ruby on rails
Final Verdict:

From this comparison of Python and Ruby, it is clear that the demand of Python in the market is slightly higher. You can choose any one of them. Python and Ruby On Rails are both excellent programming languages and both are widely adopted. But among these languages about which is more powerful depends on the intended application. Both are very complete and resourceful. The learning curve of Python is relatively easy when compared to Ruby On Rails. Python has got much better support for higher order programming, functional programming and, more debateably, meta-programming. Ruby on Rails does some things better than python, as multi-threading. At the end, you should test both and make your choice.

NODE.JS FRAMEWORK COMPARISON

Node.js Framework Comparison

Express.js, Koa.js and Hapi.js are the most popular Node.js application frameworks of today and all of them have obvious similarities. Node.js frameworks enable web developers to create a server with few lines of code and creating REST API has become very simple.

Express.js

Express.js is undoubtedly the most popular Node.js application framework in contemporary web development world. Popular frameworks like Sails.js are built based on Express.js and it was described as a “fast and small server side Javascript web development framework built on node.js and V8 Javascript engine” in a web development journal. The current version of Express.js is 4.x

Express.js gained prominence as a web application framework for building single page and multi-page web apps. The finest attraction of Express.js is that many of its features are available as plug-ins and it is the backend component of MEAN stack(MongoDB ExpressJS AngularJS NodeJS). Douglas Christopher and Wilson are the developers of Express.js and it is a cross platform operating system.

Express.js can be downloaded using NPM and the command ‘npm install-g express’ in the node CLI for installing Express.JS. The quickest and easiest way to create express application architecture is to install express generator. Setting for Express applications can be obtained using the app.set and app.get methods. Application level, router level, third party and cookie middleware are available in Express.js web framework. Biggest contribution of Express.js is that it gave backend functionality that allows developers to build software with script on the server side. They can develop server side applications with Node.js and publish those ap plications as websites using Express.js.

var express = require(‘express’);
var app = express();

app.get(‘/’, function (req, res) {
res.send(‘Hello World!’);
});

var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;

console.log(‘Example app listening at http://%s:%s’, host, port);
});

” The app starts a server and listens on port 3000 for connection. It will respond with “Hello World!” for requests to the root URL (/) or route. ”

KoA.JS

Koa.js is termed as the next generation web application framework for the one and only Node.js. Objective of Koa development team was to build a smaller, expressive and robust foundation for web applications. Koa application is an object containing a wide array of middleware generator functions and they are composed in a stack like manner. Koa is almost similar to other middleware systems like Ruby’s Rack, Connect and so on. Content negotiation, cache freshness and proxy support are the spectacular features provided by Koa.js. It allows performing actions downstream, filter and then manipulating the response upstream. Methods common to all HTTP servers can be integrated directly into Koa’s small 550 SLOC database. This includes numerous functionalities like content negotiation, nominalization of node inconsistencies and redirection. Koa.js is not bundled with any middleware and it is supported in all versions of iojs without any flags. Web developers all over the world were super excited after the initial release of Koa.js and the curious fact is that Koa.js was developed by the same team who developed Express.js.

Koa is known for heavily leveraging Javascript generators provided by Harmony and Javascript generators refer to an experimental technology.

A simple hello world program in Koa.js is illustrated below.

1: var koi = require (‘koi’);
2: var app = koi ();
3:
4: app. use (function *() {
5: this. Body = ‘Hello World';
6 :});
7:
8: app. listen (3000);

We should be running node 0.11.9 or higher along with harmony flag for Javascript generator support. Koa is an innovative and pragmatic Node.js framework which can be used for building complex web applications.

HAPI.JS

Being known as a rich framework for building web applications, Hapi.js enables developers to focus on writing reusable application logic. Hapi is currently used by global corporate giants including PayPal, Walmart, Yahoo as well as Mozilla. As a web application framework, Hapi.js enables granular control over incoming requests. Hapi plug-ins can be broken into small applications with separate business logic very easily and servers should provide only configuration. In tech world, Hapi is being recognized as a battle tested framework for Node.js made by Walmart.

Hapi features huge amount of well maintained official plug-ins including OAuth. Configuration over convention approach of Hapi.js has become a hot topic of discussion among web development experts who are more inclined to convention-overconfiguration approach. Official version is that configuration based approach made the implementation of requirement theme very easy. Hapi.js will be an ideal tool for web developers who are keen on high availability, easy testing as well as easy theming.

var Hapi = require(‘hapi’);

var server = new Hapi.Server();
server.connection({ port: 3000 });

server.route({
method: ‘GET’,
path: ‘/’,
handler: function (request, reply) {
reply(‘Hello, world!’);
}
});
server.start(function () {
console.log(‘Server running at:’, server.info.uri);
});

Save the above as server.js and start the server with the command node server.js. Now, if you visit http://localhost:3000 in your browser, you’ll see the text Hello, world!.

THE OUTPUT OF THE FOLLOWING PROGRAM IS 1 4 3 2. WHY?

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

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

Solution:
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?

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.
});
And
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?

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


Eg:
module some.namespace.here
{
export class SomeClass{..}
}
Is used as: varsomeVar = new some.namespace.here.SomeClass();
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?

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