Top java script frameworks ppt

Top JavaScript Frameworks
By omkarsoft

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 AngularJS
1.All of your AngularJS application files will live in the app/js
directory.
2.app.js declares the application with all its dependencies
3.config.js defines the routes, initializes the angularFireAuth
module, and declares your Firebase URL as a constant
4.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

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 handle 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
being 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
the simplest MVC patterns: users define Controller functions,
which make direct calls to, and handle events from Models
and Views. The diagram below illustrates this.

• 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:
Views
Events
Models
Collections
Routers

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: ClassStudents
Model: Todo Item, Collection: Todo List
Model: Animal, Collection: Zoo
Documentation:
Here is the documentation link:http://backbonejs.org

Thank You
Presented by
Omkarsoft www.omkarsoft.com

Top java script frameworks ppt

Recommended

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Top java script frameworks ppt (20)

Recently uploaded (20)

Top java script frameworks ppt