SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
SPA and Framework
By
Chandra Sekar
What is SPA ?
–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”
Let the users have experience of desktop application on
using web pages.
Why SPA ?
• 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
Server Side
Client Side
Types of SPA ?
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 .
• 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 ?
Development Utilities Libraries Micro Library+ +
Good Framework
What is framework ?
( )
Libraries
• 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
• 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
Development Utilities
• 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
• 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
Framework
Choose
Make Own
Framework after Architecture
Decide your Application architecture First
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*
What is MVC ?
• Model
Business model
• View
Representing model and Handling DOM events
• Controller
Writing business logic
Model
View Controller
What is MVVM ?
• Model
Business model
• View
Data binding and commands
• Viewmodel
Maintain state , update model
Model
View
Viewmodel
What is MVP ?
• Model
Business model
• View
Handling DOM events
• Presenter
Representing UI with model.
Model ViewPresenter
“All frameworks are not created for single solution and that might not
suite for our application.”
My thought 😉
• Less to learn.
• Should be Straightforward to JavaScript.
• Framework size should not exceed application size.
On choosing Framework
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 ✔️ ✔️ ✔️ ✔️ ✔️ ✔️

Weitere ähnliche Inhalte

Was ist angesagt?

Single page application
Single page applicationSingle page application
Single page applicationArthur Fung
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentationJohn Staveley
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page ApplicationCodemotion
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRafael Casuso Romate
 
Building great spa’s with angular js, asp.net mvc and webapi
Building great spa’s with angular js, asp.net mvc and webapiBuilding great spa’s with angular js, asp.net mvc and webapi
Building great spa’s with angular js, asp.net mvc and webapiMaurice De Beijer [MVP]
 
Learning Single page Application chapter 1
Learning Single page Application chapter 1Learning Single page Application chapter 1
Learning Single page Application chapter 1Puguh Rismadi
 
Single Page Apps
Single Page AppsSingle Page Apps
Single Page AppsGil Fink
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Yuriy Shapovalov
 
SGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page InterfaceSGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page InterfaceDomingo Suarez Torres
 
Single page applications
Single page applicationsSingle page applications
Single page applicationsPrafful Garg
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsJose Javier Columbie
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Alexandre Malavasi
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guidesamir azazy
 

Was ist angesagt? (20)

Single page application
Single page applicationSingle page application
Single page application
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentation
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page Application
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend Developer
 
Building great spa’s with angular js, asp.net mvc and webapi
Building great spa’s with angular js, asp.net mvc and webapiBuilding great spa’s with angular js, asp.net mvc and webapi
Building great spa’s with angular js, asp.net mvc and webapi
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 
Codegen2021 blazor mobile
Codegen2021 blazor mobileCodegen2021 blazor mobile
Codegen2021 blazor mobile
 
Azure Serverless Conf
Azure Serverless ConfAzure Serverless Conf
Azure Serverless Conf
 
Learning Single page Application chapter 1
Learning Single page Application chapter 1Learning Single page Application chapter 1
Learning Single page Application chapter 1
 
Single Page Apps
Single Page AppsSingle Page Apps
Single Page Apps
 
Ionic
IonicIonic
Ionic
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4
 
Jquery
JqueryJquery
Jquery
 
SGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page InterfaceSGCE 2012 Lightning Talk-Single Page Interface
SGCE 2012 Lightning Talk-Single Page Interface
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
 
Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3Modern Applications With Asp.net Core 5 and Vue JS 3
Modern Applications With Asp.net Core 5 and Vue JS 3
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guide
 

Andere mochten auch

Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Jollen Chen
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...Artyom Trityak
 
Backgrid - A Backbone Plugin
Backgrid - A Backbone PluginBackgrid - A Backbone Plugin
Backgrid - A Backbone PluginNeerav Mittal
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJungryul Choi
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsVisual Engineering
 
OWASP Serbia - A3 broken authentication and session management
OWASP Serbia - A3 broken authentication and session managementOWASP Serbia - A3 broken authentication and session management
OWASP Serbia - A3 broken authentication and session managementNikola Milosevic
 
Опыт разработки эффективного SPA
Опыт разработки эффективного SPAОпыт разработки эффективного SPA
Опыт разработки эффективного SPAEugene Abrosimov
 
Axr betabeers 2011-01-31
Axr betabeers 2011-01-31Axr betabeers 2011-01-31
Axr betabeers 2011-01-31Miro Keller
 
How to push a react js application in production and sleep better
How to push a react js application in production and sleep betterHow to push a react js application in production and sleep better
How to push a react js application in production and sleep betterEmanuele Rampichini
 
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)Ryuma Tsukano
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone frameworkfrontendne
 
Let’s talk about JavaScript - WebElement
Let’s talk about JavaScript - WebElementLet’s talk about JavaScript - WebElement
Let’s talk about JavaScript - WebElementMarian Rusnak
 
RxJS 5 in Depth
RxJS 5 in DepthRxJS 5 in Depth
RxJS 5 in DepthC4Media
 
Single Page Application Best practices
Single Page Application Best practicesSingle Page Application Best practices
Single Page Application Best practicesTarence DSouza
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to knowChris Love
 
Five stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page applicationFive stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page applicationCharles Knight
 
Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp ArchitectureMorgan Cheng
 

Andere mochten auch (20)

Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
Чик чик и в продакшн: быстрый обзор маленьких библиотек для большого Backbone...
 
Backgrid - A Backbone Plugin
Backgrid - A Backbone PluginBackgrid - A Backbone Plugin
Backgrid - A Backbone Plugin
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, Future
 
Workshop 7: Single Page Applications
Workshop 7: Single Page ApplicationsWorkshop 7: Single Page Applications
Workshop 7: Single Page Applications
 
OWASP Serbia - A3 broken authentication and session management
OWASP Serbia - A3 broken authentication and session managementOWASP Serbia - A3 broken authentication and session management
OWASP Serbia - A3 broken authentication and session management
 
Опыт разработки эффективного SPA
Опыт разработки эффективного SPAОпыт разработки эффективного SPA
Опыт разработки эффективного SPA
 
Axr betabeers 2011-01-31
Axr betabeers 2011-01-31Axr betabeers 2011-01-31
Axr betabeers 2011-01-31
 
How to push a react js application in production and sleep better
How to push a react js application in production and sleep betterHow to push a react js application in production and sleep better
How to push a react js application in production and sleep better
 
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone framework
 
Let’s talk about JavaScript - WebElement
Let’s talk about JavaScript - WebElementLet’s talk about JavaScript - WebElement
Let’s talk about JavaScript - WebElement
 
RxJS 5 in Depth
RxJS 5 in DepthRxJS 5 in Depth
RxJS 5 in Depth
 
Single Page Application Best practices
Single Page Application Best practicesSingle Page Application Best practices
Single Page Application Best practices
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
Five stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page applicationFive stages of grief: Evolving a multi-page web app to a single page application
Five stages of grief: Evolving a multi-page web app to a single page application
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
 

Ähnlich wie Single page application and Framework

Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - IntroductionWebStackAcademy
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web DevelopmentSWAGATHCHOWDARY1
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Todaybretticus
 
Introduction to backbone_js
Introduction to backbone_jsIntroduction to backbone_js
Introduction to backbone_jsMohammed Saqib
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NETRajkumarsoy
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleIT Arena
 
From server generated pages to client app in a micro-services world
From server generated pages to client app in a micro-services worldFrom server generated pages to client app in a micro-services world
From server generated pages to client app in a micro-services worldAssaf Gannon
 
Product Camp Silicon Valley 2018 - PM Technical Skills
Product Camp Silicon Valley 2018 - PM Technical SkillsProduct Camp Silicon Valley 2018 - PM Technical Skills
Product Camp Silicon Valley 2018 - PM Technical SkillsSandeep Adwankar
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--devaltsav
 
Single page applications with backbone js
Single page applications with backbone jsSingle page applications with backbone js
Single page applications with backbone jsGil Fink
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackWeb Applications Development with MEAN Stack
Web Applications Development with MEAN StackShailendra Chauhan
 
Asp.Net 3 5 Part 1
Asp.Net 3 5 Part 1Asp.Net 3 5 Part 1
Asp.Net 3 5 Part 1asim78
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentpuneetbatra24
 

Ähnlich wie Single page application and Framework (20)

Top 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web DevelopmentTop 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web Development
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
Introduction to backbone_js
Introduction to backbone_jsIntroduction to backbone_js
Introduction to backbone_js
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NET
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
From server generated pages to client app in a micro-services world
From server generated pages to client app in a micro-services worldFrom server generated pages to client app in a micro-services world
From server generated pages to client app in a micro-services world
 
Product Camp Silicon Valley 2018 - PM Technical Skills
Product Camp Silicon Valley 2018 - PM Technical SkillsProduct Camp Silicon Valley 2018 - PM Technical Skills
Product Camp Silicon Valley 2018 - PM Technical Skills
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--dev
 
Single page applications with backbone js
Single page applications with backbone jsSingle page applications with backbone js
Single page applications with backbone js
 
Tech talk php_cms
Tech talk php_cmsTech talk php_cms
Tech talk php_cms
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackWeb Applications Development with MEAN Stack
Web Applications Development with MEAN Stack
 
Webapplication ppt prepared by krishna ballabh gupta
Webapplication ppt prepared by krishna ballabh guptaWebapplication ppt prepared by krishna ballabh gupta
Webapplication ppt prepared by krishna ballabh gupta
 
Asp.Net 3 5 Part 1
Asp.Net 3 5 Part 1Asp.Net 3 5 Part 1
Asp.Net 3 5 Part 1
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end development
 

Kürzlich hochgeladen

A Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationA Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationMohsinKhanA
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxwendy cai
 
me3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part Ame3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part Akarthi keyan
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptxMUKULKUMAR210
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfNaveenVerma126
 
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docxSUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docxNaveenVerma126
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Bahzad5
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Amil baba
 
ASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entenderASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entenderjuancarlos286641
 
Dev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingDev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingMarian Marinov
 
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxUNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxrealme6igamerr
 
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...soginsider
 
Design of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxDesign of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxYogeshKumarKJMIT
 
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratoryدليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide LaboratoryBahzad5
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....santhyamuthu1
 
Phase noise transfer functions.pptx
Phase noise transfer      functions.pptxPhase noise transfer      functions.pptx
Phase noise transfer functions.pptxSaiGouthamSunkara
 
cloud computing notes for anna university syllabus
cloud computing notes for anna university syllabuscloud computing notes for anna university syllabus
cloud computing notes for anna university syllabusViolet Violet
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchrohitcse52
 

Kürzlich hochgeladen (20)

A Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationA Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software Simulation
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptx
 
me3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part Ame3493 manufacturing technology unit 1 Part A
me3493 manufacturing technology unit 1 Part A
 
Power System electrical and electronics .pptx
Power System electrical and electronics .pptxPower System electrical and electronics .pptx
Power System electrical and electronics .pptx
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
 
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docxSUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)
 
Présentation IIRB 2024 Chloe Dufrane.pdf
Présentation IIRB 2024 Chloe Dufrane.pdfPrésentation IIRB 2024 Chloe Dufrane.pdf
Présentation IIRB 2024 Chloe Dufrane.pdf
 
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
Best-NO1 Best Rohani Amil In Lahore Kala Ilam In Lahore Kala Jadu Amil In Lah...
 
ASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entenderASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entender
 
Dev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & LoggingDev.bg DevOps March 2024 Monitoring & Logging
Dev.bg DevOps March 2024 Monitoring & Logging
 
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptxUNIT4_ESD_wfffffggggggggggggith_ARM.pptx
UNIT4_ESD_wfffffggggggggggggith_ARM.pptx
 
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...Transforming Process Safety Management: Challenges, Benefits, and Transition ...
Transforming Process Safety Management: Challenges, Benefits, and Transition ...
 
Design of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptxDesign of Clutches and Brakes in Design of Machine Elements.pptx
Design of Clutches and Brakes in Design of Machine Elements.pptx
 
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratoryدليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
 
Lecture 4 .pdf
Lecture 4                              .pdfLecture 4                              .pdf
Lecture 4 .pdf
 
Phase noise transfer functions.pptx
Phase noise transfer      functions.pptxPhase noise transfer      functions.pptx
Phase noise transfer functions.pptx
 
cloud computing notes for anna university syllabus
cloud computing notes for anna university syllabuscloud computing notes for anna university syllabus
cloud computing notes for anna university syllabus
 
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai searchChatGPT-and-Generative-AI-Landscape Working of generative ai search
ChatGPT-and-Generative-AI-Landscape Working of generative ai search
 

Single page application and Framework

  • 3. –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”
  • 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 ?
  • 9. Development Utilities Libraries Micro Library+ + Good Framework What is 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
  • 17. Framework after Architecture Decide your Application architecture First
  • 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
  • 24. 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 ✔️ ✔️ ✔️ ✔️ ✔️ ✔️