Download - Single page application and Framework
![Page 1: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/1.jpg)
SPA and Framework
By Chandra Sekar
![Page 2: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/2.jpg)
What is SPA ?
![Page 3: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/3.jpg)
–Microsoft
“Single-Page Applications are Web apps that load a single HTML page and dynamically update that page as the user
interacts with the app”
![Page 4: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/4.jpg)
Let the users have experience of desktop application on using web pages.
Why SPA ?
![Page 5: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/5.jpg)
• 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
![Page 6: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/6.jpg)
Server Side
Client Side
Types of SPA ?
![Page 7: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/7.jpg)
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 .
![Page 8: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/8.jpg)
• 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 ?
![Page 9: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/9.jpg)
Development Utilities Libraries Micro Library + +
Good Framework
What is framework ?
( )
![Page 10: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/10.jpg)
Libraries
![Page 11: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/11.jpg)
• RoutingRouting 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.
• ControllerClass object which use to consists business logic that manipulate application data
![Page 12: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/12.jpg)
• ModelApplication data.
• View Elements which are going to be visible and interactive to user.
• State ContainerData which is going to represent state of the views
• Dispatcher / Observer PatternHelps to write loosely coupled code
![Page 13: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/13.jpg)
Development Utilities
![Page 14: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/14.jpg)
• Linting Tools Helps to avoid mistakes when writing programs. Example : ESLint , JSLint , JSHint and JSCS
• Code Transpiler for scriptLet 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
![Page 15: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/15.jpg)
• Live reload / Hot reload
• Module BundlerHelps to bundle all dependency files for production.Example : browserify, webpack, requires JS
• CSS PreprocessorsA Scripting language for css that use to generate compiled regular CSS Syntax.Example : Sass, LESS
![Page 16: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/16.jpg)
Framework
Choose
Make Own
![Page 17: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/17.jpg)
Framework after ArchitectureDecide your Application architecture First
![Page 18: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/18.jpg)
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*
![Page 19: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/19.jpg)
What is MVC ?• Model
Business model
• View Representing model and Handling DOM events
• ControllerWriting business logic
Model
View Controller
![Page 20: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/20.jpg)
What is MVVM ?• Model
Business model
• View Data binding and commands
• Viewmodel Maintain state , update model
Model
View
Viewmodel
![Page 21: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/21.jpg)
What is MVP ?
• Model Business model
• View Handling DOM events
• Presenter Representing UI with model.
Model ViewPresenter
![Page 22: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/22.jpg)
“All frameworks are not created for single solution and that might not suite for our application.”
My thought 😉
![Page 23: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/23.jpg)
• Less to learn.
• Should be Straightforward to JavaScript.
• Framework size should not exceed application size.
On choosing Framework
![Page 24: Single page application and Framework](https://reader035.vdocuments.site/reader035/viewer/2022070519/58ece5f31a28abb1118b47b5/html5/thumbnails/24.jpg)
Vennila Vue Riot React Aurelia Ember Angular 2
File Size (min) App Size 23K 9.75KB 40K 880KB 111K 111K
Architecture MVVM MVP View MV* MVC MVC
Testable ✔ ✔ ✔ ✔ ✔ ✔