Single Page Application

Single Page Application also called SPA – is creating a huge impact of web application development. This brings in lot of benefit to web application development – since it brings in lot of features like

1. Component based development2. Stateful development.3. MVC creation using JavaScript tightly coupled.4. Encapsulated with State data.5. Operations/methods are tightly bound to class.

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or partial changes are performed loading new code on demand from the web server, usually driven by user actions. The page does not automatically reload during user interaction with the application, nor does control transfer to another page. Updates to the displayed page may or may not involve interaction with a server.

As shown above in the picture one single web page which assembles the components and it maintains the state. The current web sites switches between different sites.

Write-only DOM. No state / data is read from the DOM. The application outputs

HTML and operations on elements, but nothing is ever read from the DOM. Storing

state in the DOM gets hard to manage very quickly: it is much better to have one

place where the data lives and to render the UI from the data, particularly when the

same data has to be shown in multiple places in the UI.

Models as the single source of truth. Instead of storing data in the DOM or in

random objects, there is a set of in-memory models which represent all of the

state/data in the application.

Views observe model changes. We want the views to reflect the content of the

models. When multiple views depend on a single model (e.g. when a model changes,

redraw these views), we don't want to manually keep track of each dependent view.

Instead of manually tracking things, there is a change event system through which

views receive change notifications from models and handle redrawing themselves.

Decoupled modules that expose small external surfaces. Instead of making

things global, we should try to create small subsystems that are not interdependent.

Dependencies make code hard to set up for testing. Small external surfaces make

refactoring internals easy, since most things can changes as long as the external

interface remains the same.

Minimizing DOM dependent-code. Why? Any code that depends on the DOM

needs to be tested for cross-browser compatibility. By writing code in a way that

isolates those nasty parts, a much more limited surface area needs to be tested for

cross-browser compatibility. Cross-browser incompatibilities are a lot more

manageable this way. Incompatibilities are in the DOM implementations, not in the

Javascript implementations, so it makes sense to minimize and isolate DOM -

dependent code

On a Single Page Application, the server-side will be responsible for:

Handling CRUD (Create, Read, Update and Delete) operations

Executing different operations and workflows (these may include changing states

of entities, updating database records)

Authentication and Authorization (this should always be done on the server side

to ensure that the requests are legitimate)

Validation of web requests

Providing an interface for the client application to perform operations (typically

done via a REST API)

The client side will be responsible for:

Populating and rendering the UI with proper data

Access the server via AJAX

Perform client side routing

Perform client side validation

Angular JS this is one tool which helps in creating SPA application

Data-binding: It is the automatic synchronization of data between model and view components.

Scope: These are objects that refer to the model. They act as a glue between controller and view.

Controller: These are Javascript functions that are bound to a particular scope.

Services: AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.

Filters: These select a subset of items from an array and returns a new array.

Directives: Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel...)

Templates:These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".

Routing: It is concept of switching views.

Model View Whatever: MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.

Deep Linking: Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

Advantages of AngularJS

AngularJS provides capability to create Single Page Application in a very clean and maintainable way.

AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience

AngularJS code is unit testable.

AngularJS uses dependency injection and make use of separation of concerns.

AngularJS provides reusable components.

With AngularJS, developer write less code and get more functionality.

In AngularJS, views are pure html pages, and controllers written in javascript do the business processing.

On top of everything, AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

Sample Loading Stack on how the modules are getting loaded

All the specific functionalities are defined as modules in the system which mostly represent objects – Apps.js

This does the routing part on click of what which module should be routed will be handled by - States.js

The Screen representation which is Html definition of the screens will be mentioned here.

Every html will be supported by one controller this controller provides the supportive functionality for the screens.

The Associated data which is populated from the Mongo DB is essentially pulled from Service.js this makes a remote call in pulling the data