Top JavaScript Frameworks

By omkarsoft

Top JavaScript Frameworks

AngularJS:

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications.It has some compelling features for not only developers, but designers as well!

Getting Into AngularJS1.All of your AngularJS application files will live in the app/js

directory.2.app.js declares the application with all its dependencies3.config.js defines the routes, initializes the angularFireAuth

module, and declares your Firebase URL as a constant4.The controllers/ directory contains all your application

controllers, separated into their own files. You will continue this separate file convention as the application grows.

5.The services/ directory contains all your application services, following the same file convention as controllers.

6.The directives/ and filters/ directories are empty, but they will contain all your custom Angular directives and filters.

Overview:

The Angular.js web site essentially carries out these tasks:

1.When on the root page, the Angular.js will listen to messages sent via the WPF publisher over a web socket, which then gets broadcast internally using the Reactive Extensions for JavaScript to anyone interested, which in this article is essentially just the root page.

2.The user may also choose to navigate to a favourites page that will display some thumbnail images of their HTML 5 local storage persisted favourites. These thumbnails may be clicked on to show a pretty standard ColorBox (Lightbox etc etc type thing) jQuery plugin.

3.The user may also choose to a view static about page, which I simply added to make enough routes to make things more worthwhile when demonstating the routing within Angular.js

Block diagram:

Advantages of AngularJS:

• The declarative process is easier to understand.• You can package code as reusable modules.• The modules can be loaded in any order (or even in

parallel) because modules delay execution.• AngularJS is a great choice if your are building a CRUD

(create/read/update/delete) client side app• Unit tests only have to load relevant modules, which keeps

them fast.• End-to-end tests can use modules to override configuration.

Applications of AngularJS:

1.Mobile apps - You can create Mobile Web Apps with AngularJS and Phonegap; there’s a project that binds the awesome mobile framework LungoJS with AngularJS. It’s called Lungo-Angular-Bridge or just LAB.

2.CRUD Web Apps - Probably this is the most common use of Angular JS. It includes nice examples for creating a simple CRUD application with Directives, Resources and Services.

3.Chrome Extensions - The easiest way to create a Chrome Extension (either packaged or not) is through Yeoman, its Chrome Extension Generator.

4.Testable JS Apps - AngularJS is fully powered with Test Suites.

Node.JS:

Node.js is a software platform for scalable server-side and networking applications.

Overview:The functioning is described

in the schema below. A JavaScript script creates an instance of server and open a port through which a browser or other user agent can communicate with the script.

Examples of Where Node.js Should Be Used:

The following are some examples of where Node.js should be used :

• CHAT The chat application is really the sweet-spot example for Node.js:

it’s a lightweight, high traffic, data-intensive (but low processing/computation) application that runs across distributed devices.

• PROXY Node.js is easily employed as a server-side proxy where it can h

andle a large amount of simultaneous connections in a non-blocking manner.

It’s especially useful for proxying different services with different response times, or collecting data from multiple source points.

• DATA STREAMING It is possible to process files while they’re still b

eing uploaded, as the data comes in through a stream and we can process it in an online fashion. This could be done for real-time audio or video encoding, and proxying between different data sources.

Real Time Applications:

Some of the real time applications of Node.js are:

• It can be used as Web socket server : A typical example of this is a chat server.

• Fast file upload client: when there are big file to be uploaded, to make sure that they don’t block so that you can upload more than one file at a time.

Advantages of Node.js:

Node.js is a lightweight platform.

Node.js combined with a browser, a document DB (such as MongoDB or CouchDB) and JSON offers a unified JavaScript development stack.

Node.js allows the reuse of the same model and service interface between client-side and server-side.

Disadvantages of Node.js:

Npm shrink wrap and package.json were introduced a while back to set up standards, but the issue of standards is still a work in process and some issues still exist.

The whole callback, event-driven, functional programming aspects of Node.js can add a learning curve burden to server-side programmers of other object-oriented languages.

Asynchronous and event-driven code inherently adds more complexity to the code versus a synchronous code.

JavaScript has more than its share of “bad parts” that might throw off engineers and newcomers.

Agility.js:

Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries.

Architecture of Agility.js: Agility’s architecture follows one of th

e simplest MVC patterns: users define Controller functions, which make direct calls to, and handle events from Models and Views. The diagram below illustrates this.

Architecture of Agility.js

• Agility objects are lightweight in memory (through pervasive use of prototypes), this comes at little performance cost.

• Every Agility object can serve as a container of other Agility objects.

Agility objects:

Features of Agility.js:

Painless two-way model-view bindings;

Implicit controller-event bindings;

Controller auto-proxying for quick and consistent access to owner object;

Format and style in-object for “copy-and-paste” reusability;

Small (<10K) single-library include;

Compact and efficient syntax, inspired by jQuery;

Real time applications:

1. cheaphotels.co.uk – Cheap Hotels is an online search engine and deal finder for hotels across the globe.

2. OpDots.com – OpDots is the “see everything” dashboard for your enterprise data.

3. The Wall – The Wall is a minimal Twitter clone, where everyone can post anonymously to a virtual “wall”. It illustrates most features offered by Agility, including server-side persistence

Backbone.js:

Backbone came out in June 2010, and its community is nearly as large as Angular’s.

Backbone.js is a JavaScript client-side (front-end) framework.

It helps to organize your code and makes it easier for you to develop single-page web applications.

Applications: Many popular applications use the Backbone framework,

including Twitter, Foursquare, and LinkedIn Mobile.

A number of music apps were built with Backbone, including Soundcloud, Pitchfork, and Pandora.

Advantages:

Backbone’s diminutive size is typically its biggest selling point, since it only depends on one JavaScript library instead of several.

Backbone is extremely lightweight, which means it’s good for building fast and responsive applications.

How to start with Backbone.js :Backbone.js has hard dependency on underscore.js and a soft

dependency on jQuery.

It’s made up of the following modules:ViewsEventsModelsCollectionsRouters

view,model,router:

What is a view? Backbone views are used to reflect what your applications’

data models look like. They are also used to listen to events and react accordingly.

What is a model? Models are the heart of any JavaScript application. It contains the interactive data as well as a large part of the

logic surrounding it: conversions, validations, computed properties, and access control.

What is a router? Routers are used for routing your applications URL’s when

using hash tags(#). Defined routers should always contain at least one route

and a function to map the particular route to.

collection,

What is a collection?

Backbone collections are simply an ordered set of models.

It can be used in situations such as :

Model: Student, Collection: ClassStudentsModel: Todo Item, Collection: Todo ListModel: Animal, Collection: Zoo

Documentation:

Here is the documentation link:http://backbonejs.org

Thank You

Presented by

Omkarsoft www.omkarsoft.com