4. Let the users have experience of desktop application on
using web pages.
Why SPA ?
5. • Maintains application state.
• Help to bookmark and share.
• Keep the data and view in synchronization.
• Partial refresh
• Reduces static resource loading.
• Fast navigation between the application pages.
Advantages of SPA
7. Server Side
Client Side
In early days Single Page application has developed fully in server
side with the help of Template engine. Business logic also written
in same programming language.
Ex: JSP, ASP, ERB, HBS
Now days Template engine got developed for client side rendering
and Half of the business logic has written in client side .
8. • Write Less bugs
• Write Less vulnerable
• Organize application code
• Fast development
• Reusability
• Let focus more on business logic
• Fast development
• Reduces code review
Why framework ?
11. • Routing
Routing is an url state container that helps to keep UI and url sync.
• Templates
HTML that is going to be inserted to view on runtime.
• Controller
Class object which use to consists business logic that manipulate application
data
12. • Model
Application data.
• View
Elements which are going to be visible and interactive to user.
• State Container
Data which is going to represent state of the views
• Dispatcher / Observer Pattern
Helps to write loosely coupled code
14. • Linting Tools
Helps to avoid mistakes when writing programs.
Example : ESLint , JSLint , JSHint and JSCS
• Code Transpiler for script
Let us write next generation code now that looks pretty-printed and readable.
Example : CoffeScript, Type Script, Bable JS, Live script
• Package manager
Tool for package management
Example : NPM, Bower, Yarn
15. • Live reload / Hot reload
• Module Bundler
Helps to bundle all dependency files for production.
Example : browserify, webpack, requires JS
• CSS Preprocessors
A Scripting language for css that use to generate compiled regular CSS
Syntax.
Example : Sass, LESS
18. Popular Architectures
• Model View Controller
Example : Angular, Ember
• Model View Viewmodel
Example : Knockout
• Model View Presenter
Example : Backbone , Riot
Note : Listed above architectures are frequently used not recommended for all types app*
19. What is MVC ?
• Model
Business model
• View
Representing model and Handling DOM events
• Controller
Writing business logic
Model
View Controller
20. What is MVVM ?
• Model
Business model
• View
Data binding and commands
• Viewmodel
Maintain state , update model
Model
View
Viewmodel
21. What is MVP ?
• Model
Business model
• View
Handling DOM events
• Presenter
Representing UI with model.
Model ViewPresenter
22. “All frameworks are not created for single solution and that might not
suite for our application.”
My thought 😉
23. • Less to learn.
• Should be Straightforward to JavaScript.
• Framework size should not exceed application size.
On choosing Framework