Downloaded 21 times
Uploaded byChandrasekar G
Single page application and Framework
The document discusses single page applications (SPAs) and frameworks. It defines an SPA as a web app that loads a single HTML page and dynamically updates it as the user interacts. This provides a desktop-like experience within web pages. Frameworks help with development by providing libraries for routing, templates, controllers, models, views and more. They also include tools for linting, transpiling, bundling, preprocessing and more. The document examines different framework architectures like MVC, MVVM and MVP and notes that frameworks should have a small size, be straightforward and support the needs of the specific application.
More Related Content
Similar to Single page application and Framework
Single page application and Framework
- 1.
- 2.
- 3. –Microsoft “Single-Page Applications areWeb apps that load a single HTML page and dynamically update that page as the user interacts with the app”
- 4. Let the usershave experience of desktop application on using web pages. Why SPA ?
- 5. • Maintains applicationstate. • 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
- 6. Server Side Client Side Typesof SPA ?
- 7. Server Side Client Side Inearly 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 Lessbugs • Write Less vulnerable • Organize application code • Fast development • Reusability • Let focus more on business logic • Fast development • Reduces code review Why framework ?
- 9. Development Utilities LibrariesMicro Library+ + Good Framework What is framework ? ( )
- 10.
- 11. • Routing Routing isan 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
- 13.
- 14. • Linting Tools Helpsto 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
- 16.
- 17. Framework after Architecture Decideyour Application architecture First
- 18. Popular Architectures • ModelView 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 arenot created for single solution and that might not suite for our application.” My thought 😉
- 23. • Less tolearn. • Should be Straightforward to JavaScript. • Framework size should not exceed application size. On choosing Framework
- 24. Vennila Vue RiotReact Aurelia Ember Angular 2 File Size (min) App Size 23K 9.75KB 40K 880KB 111K 111K Architecture MVVM MVP View MV* MVC MVC Testable ✔️ ✔️ ✔️ ✔️ ✔️ ✔️