White Paper On. Single Page Application. Presented by: Yatin Patel

Transcription

1 White Paper On Single Page Application Presented by: Yatin Patel

2 Table of Contents Executive Summary... 3 Web Application Architecture Patterns... 4 Common Aspects... 4 Model... 4 View... 4 Architecture Patterns... 4 Choose Right SPA Architecture Framework... 5 MVC... 5 MVP... 5 MVVM... 5 Frameworks to build Single Page Application... 6 Backbone... 6 Knockout... 6 Ember... 6 Angular... 6 Comparison Summary... 7 Conclusion Knowarth

3 Executive Summary Migration from Desktop application to web application comes up with its own challenges like Page load time and Poor user experience. Single page application can help us to overcome those challenges. A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience like desktop application. In an SPA, either all necessary code HTML, JavaScript, and CSS is retrieved with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although modern web technologies can provide the perception and navigability of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes via AJAX. Single Page Application have compatibility of reload UI whiteout refreshing browser a server roundtrip to get HTML. This is achieved by distinguish the data from Presentation of data by including in model layer that handles data and view layer read data from models. Modern browsers that can parse HTML5 allow developers to shift the user interface (UI) and application logic from web servers to the client. Mature open-source libraries support the building of an SPA without forcing the developer to dig too deep into JavaScript trenches or fight with technology problems. If you are a UI developer and looking for to build your Single Page Application, please refer to our blog on Single Page Application Knowarth

4 Web Application Architecture Patterns We are familiar with the MV* architectural patterns Like Model-View-Controller(MVC), Model-View-Presenter (MVP) and Model View-View Model (MVVM). MVC is the most known and used pattern. MVP is similar to the MVC pattern. MVVM is a Presentation Model abstracts a view in a manner that does not depend on a specific user-interface platform. Common Aspects Let s dig it to down about pattern, where listed below two are very common aspects among popular architecture patterns. Model The Model handles the logic for the application data, business logic and functionality. Model objects are retrieve data and store data from a database, which is handles data access layer. It's contain classes, rules, trigger web service. View The View handles the display or render of the data. The views are created based on the model data. It is part of user interface which contain UI elements, html tags. Architecture Patterns Knowarth

5 Choose Right SPA Architecture Framework There are multiple architecture frameworks for SPA development. We will discuss about MVC framework as it is very popular and adopted by a large number of developers. However, we have given brief description about some of the popular frameworks below: MVC Model is the parts of the application that contain and implement the logic for the application's data domain. Views are the components that display the application's user interface. Controllers are the components that handle user interaction, work with the model, and ultimately select a view to render that displays UI. MVP Model is an interface defining the data to be displayed or otherwise acted upon in the user interface. View is a passive interface that displays data (the model) and routes user commands (events) to the presenter to act upon that data. Presenter acts upon the model and the view. It retrieves data from repositories (the model), and formats it for display in the view. MVVM This architecture requires a paradigm shift in the way we perceive the application. This pattern establishes separation of concerns and the open-close principle well. This basic capability takes MVVM to next level (ahead in competition). MVVM has been in use in Microsoft applications and therefore is not completely new Knowarth

6 Frameworks to build Single Page Application Backbone Backbone was the first frameworks we seriously looked at. Backbone is pretty clear about how to divide up Model and View code. Backbone seems really focused on the model/rest-binding part, but doesn't really prescribe anything for view binding. The separation of Model and View code was nice, but since we'd have to write all our bindings from scratch it requires measurable development efforts. As it is an incredibly small library for the amount of functionality and structure it gives you, it is good for small scale single page application. Knockout Backbone is focused on the Model, Knockout is a MVVM framework and is focused on the View. It has a clear separation between domain data, view components and data to be displayed. It has observable wrappers for JavaScript object properties and uses a data-bind attribute to bind properties to your HTML. If you like Knockout's view binding and Backbone's model bindings there's also KnockBack which combines both frameworks. Ember Ember has an ability to incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates and a router for managing application state. It looks promising but it is just launched and not matured compare to other frameworks. Angular AngularJs is an open source web application framework maintained by Google and community and assist developers in creating single page applications. Its goal is to augment web applications with model-view-controller (MVC) capability in an effort to make development and testing easier. Best of AngulerJS features are like two way data binding, Templates, Full testing environment, Server Communication, Deep-Linking, De-couple client side and server side etc. We can use it for large scale single page application Knowarth

7 Comparison Summary The following table summarizes some of the features supported by the four JavaScript application development frameworks. Framework AngularJS Backbone Ember Knockout MVVM Supported Yes No Yes Yes MVC Supported Yes Yes No No Offline Supported Yes Yes Yes Yes Community Strong Average Strong Average Browsers Supported Yes Yes Yes Yes User Experience Yes No Yes Yes Hybrid Mobile App Support Yes Yes Yes Yes Testing Framework Yes Yes Yes Yes Knowarth

8 Conclusion For developing single page application, a lot of frameworks are available on web. We recommend to go with AngularJS as per current market trend. AngularJS is an open-source JavaScript framework, maintained by Google, which assists with running single-page applications. Its goal is to augment browser-based applications with model view controller (MVC) capability, in an effort to make both development and testing easier. We can choose above mentioned framework depending on our requirement. If we want to build any complex single page application then choose AngularJS which provide features like Two Way Data-Binding, Templates, MVC, MVVM, Dependency Injection, Directives etc Knowarth