SlideShare a Scribd company logo
Single Page
Applications
Diego Cardozo
github.com/diegocard/SPA-Presentation
Agenda
1. Motivation
2. Introduction
3. Examples
4. Architecture
5. Advantages and disadvantages
6. Tools
7. Demo
Motivation (1)
One of the main aspects that influence user
experience is load time.
We use many techniquest to make it quicker:
Minimize scripts and CSS
Combine images in a single sprite
Delay JavaScript execution
Handle static files separately (CDN)
Resource cache
Motivation (2)
However, even with cache the browser must:
Re-parse and execute CSS and JavaScript code.
Download and parse the whole page HTML.
Even when only a little part changed.
Rebuild the DOM tree.
Render the UI.
The user sees the page being constructed as he waits.
Motivation (3)
To sum up, SPA is an answer to the following questions:
¿How can we achieve a more efficient behavior?
¿Can we only load what's new or necessary?
¿How can we improve user experience?
Introduction (1)
What is a SPA?
It is a new approach to building web applications.
The whole source code is either loaded initially or
afterwards dynamically, without reloading the page.
Navigation is resolved on the client side.
Server calls are done asynchronously.
UI is built on the client side.
Introduction (2)
What is NOT a SPA
Join all webpages for the site and load them statically.
Black or white, hybrid approaches do exist.
A silver bullet: it might not be a good idea for some projects.
Introduction (3)
What can a SPA do?
Show URL changes and navigate forward and backward.
Manipulate the DOM on the client side.
Wait for the view to load before showing it.
Store previously loaded pages on the client.
Examples
GMail
This presentation
Stashy
Nogginator
Architecture
Advantages and disadvantages (1)
Advantages
Faster and slicker UI.
Easier maintenance.
Better load distribution.
The beginning of the development process is faster.
UI is simply another client.
Great for testing.
Perfect approach to combine with mobile applications.
Advantages and disadvantages (2)
Disadvantages
The initial load can be slow.
SEO can become complex.
Requires JavaScript to be enabled.
Requires additional JavaScript knowledge.
Breaks analytics, ads and widgets conventions.
Advantages and disadvantages (3)
Other aspects
We move non-critic business logic to the client.
Our code used to be90% C#/VB and 10% JS.
Now it will be 50/50.
This isn't necessarily an advantage or disadvantage, but we
will need a different set of tools to maintain good practices.
Tools (1)
Client side development
Tools (2)
Knockout.js
Created by Steve Anderson
ASP.NET PM for Microsoft.
Uses MVVM, a design pattern created by John Smith
Microsoft MVP for his work in WPF.
It can be even used when we are not developing SPA.
Included with MVC's default templates.
Tools (3)
Server side development
En MVC, nuestros controladores pasan a ser ApiControllers
para definir un API RESTful.
Implementamos una sola vista (layout).
No vamos a utilizar Razor para renderizar las vistas.
Vamos a ver un template para Visual Studio que trae un
proyecto pre-configurado para SPA (Hot Towel SPA).
Demo (1)
Start from John Papa's Hot Towel SPA template
Tour through at Durandal's main components
Analyzing each component in depth takes too long.
We take a look at how the RESTful API is implemented
Exposes user data.
We add a new functionality (sessions).
Tour through client code.
Mention the most important libraries.
Demogithub.com/diegocard/SPA-Demo
Resources
learn.knockout.com
singlepageappbook.com
todomvc.com
johnpapa.net
slideshare.net/dcslides/spa-25806613
If you want to know more
Questions?

More Related Content

What's hot

Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of Signals
Coding Academy
 
reactJS
reactJSreactJS
reactJS
Syam Santhosh
 
Spring Framework - Core
Spring Framework - CoreSpring Framework - Core
Spring Framework - Core
Dzmitry Naskou
 
Microservices with Java, Spring Boot and Spring Cloud
Microservices with Java, Spring Boot and Spring CloudMicroservices with Java, Spring Boot and Spring Cloud
Microservices with Java, Spring Boot and Spring Cloud
Eberhard Wolff
 
Introduction to Spring Framework
Introduction to Spring FrameworkIntroduction to Spring Framework
Introduction to Spring Framework
Serhat Can
 
Designing APIs with OpenAPI Spec
Designing APIs with OpenAPI SpecDesigning APIs with OpenAPI Spec
Designing APIs with OpenAPI Spec
Adam Paxton
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
Subodh Garg
 
React vs Angular
React vs Angular React vs Angular
React vs Angular
Appinventiv
 
React workshop
React workshopReact workshop
React workshop
Imran Sayed
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
Sunil Yadav
 
Spring introduction
Spring introductionSpring introduction
Spring introduction
Manav Prasad
 
Introducing Swagger
Introducing SwaggerIntroducing Swagger
Introducing Swagger
Tony Tam
 
Express js
Express jsExpress js
Express js
Manav Prasad
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
Sankalp Khandelwal
 
Angular vs. React
Angular vs. ReactAngular vs. React
Angular vs. React
OPITZ CONSULTING Deutschland
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
ModusJesus
 
Spring Framework
Spring Framework  Spring Framework
Spring Framework
tola99
 
Intro to Reactive Programming
Intro to Reactive ProgrammingIntro to Reactive Programming
Intro to Reactive Programming
Stéphane Maldini
 
Java spring framework
Java spring frameworkJava spring framework
Java spring framework
Rajiv Gupta
 

What's hot (20)

Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of Signals
 
reactJS
reactJSreactJS
reactJS
 
Spring Framework - Core
Spring Framework - CoreSpring Framework - Core
Spring Framework - Core
 
Microservices with Java, Spring Boot and Spring Cloud
Microservices with Java, Spring Boot and Spring CloudMicroservices with Java, Spring Boot and Spring Cloud
Microservices with Java, Spring Boot and Spring Cloud
 
Introduction to Spring Framework
Introduction to Spring FrameworkIntroduction to Spring Framework
Introduction to Spring Framework
 
Designing APIs with OpenAPI Spec
Designing APIs with OpenAPI SpecDesigning APIs with OpenAPI Spec
Designing APIs with OpenAPI Spec
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
React vs Angular
React vs Angular React vs Angular
React vs Angular
 
React workshop
React workshopReact workshop
React workshop
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
Spring introduction
Spring introductionSpring introduction
Spring introduction
 
Introducing Swagger
Introducing SwaggerIntroducing Swagger
Introducing Swagger
 
Express js
Express jsExpress js
Express js
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Angular vs. React
Angular vs. ReactAngular vs. React
Angular vs. React
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Spring Framework
Spring Framework  Spring Framework
Spring Framework
 
Intro to Reactive Programming
Intro to Reactive ProgrammingIntro to Reactive Programming
Intro to Reactive Programming
 
Java spring framework
Java spring frameworkJava spring framework
Java spring framework
 

Viewers also liked

Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
Morgan Cheng
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
M R Rony
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
 
Building single page applications
Building single page applicationsBuilding single page applications
Building single page applications
SC5.io
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 
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
Chris Love
 
Single Page Application Best practices
Single Page Application Best practicesSingle Page Application Best practices
Single Page Application Best practices
Tarence DSouza
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page Application
Codemotion
 
Islamic Fashion Festival
Islamic Fashion FestivalIslamic Fashion Festival
Islamic Fashion Festival
Vili 48
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
Sergey Bolshchikov
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Spa ppt
Spa pptSpa ppt
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Vincent Caillierez
 

Viewers also liked (16)

Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp Architecture
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
Building single page applications
Building single page applicationsBuilding single page applications
Building single page applications
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
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
 
Single Page Application Best practices
Single Page Application Best practicesSingle Page Application Best practices
Single Page Application Best practices
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page Application
 
Islamic Fashion Festival
Islamic Fashion FestivalIslamic Fashion Festival
Islamic Fashion Festival
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Spa ppt
Spa pptSpa ppt
Spa ppt
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 

Similar to Single page applications

CloudStack UI
CloudStack UICloudStack UI
CloudStack UI
ShapeBlue
 
Bitworks CloudStack UI - CSEUUG 08 August 2017
Bitworks CloudStack UI - CSEUUG 08 August 2017Bitworks CloudStack UI - CSEUUG 08 August 2017
Bitworks CloudStack UI - CSEUUG 08 August 2017
Ivan Kudryavtsev
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Alex Ross
 
Struts & hibernate ppt
Struts & hibernate pptStruts & hibernate ppt
Struts & hibernate ppt
Pankaj Patel
 
TRWResume-10-2016
TRWResume-10-2016TRWResume-10-2016
TRWResume-10-2016
Tommy Williams
 
Browser core red bus presentation
Browser core red bus presentation Browser core red bus presentation
Browser core red bus presentation
redBusTech
 
KiranGara_JEE_7Yrs
KiranGara_JEE_7YrsKiranGara_JEE_7Yrs
KiranGara_JEE_7Yrs
Kiran Gara
 
PERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACH
PERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACHPERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACH
PERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACH
cscpconf
 
Performance comparison on java technologies a practical approach
Performance comparison on java technologies   a practical approachPerformance comparison on java technologies   a practical approach
Performance comparison on java technologies a practical approach
csandit
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
write31
 
DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...
DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...
DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...
Shahir Daya
 
Quiz application system project report..pdf
Quiz application system project report..pdfQuiz application system project report..pdf
Quiz application system project report..pdf
Kamal Acharya
 
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applications
Manish Garg
 
How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022
Katy Slemon
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
Tech Stack & Web App Development For Startups
Tech Stack & Web App Development For StartupsTech Stack & Web App Development For Startups
Tech Stack & Web App Development For Startups
ZimbleCode
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JSFestUA
 
Isset Presentation @ EECI2009
Isset Presentation @ EECI2009Isset Presentation @ EECI2009
Isset Presentation @ EECI2009
Isset Internet Professionals
 
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISONSTATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
ijseajournal
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
KNOWARTH - Software Development Company
 

Similar to Single page applications (20)

CloudStack UI
CloudStack UICloudStack UI
CloudStack UI
 
Bitworks CloudStack UI - CSEUUG 08 August 2017
Bitworks CloudStack UI - CSEUUG 08 August 2017Bitworks CloudStack UI - CSEUUG 08 August 2017
Bitworks CloudStack UI - CSEUUG 08 August 2017
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
 
Struts & hibernate ppt
Struts & hibernate pptStruts & hibernate ppt
Struts & hibernate ppt
 
TRWResume-10-2016
TRWResume-10-2016TRWResume-10-2016
TRWResume-10-2016
 
Browser core red bus presentation
Browser core red bus presentation Browser core red bus presentation
Browser core red bus presentation
 
KiranGara_JEE_7Yrs
KiranGara_JEE_7YrsKiranGara_JEE_7Yrs
KiranGara_JEE_7Yrs
 
PERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACH
PERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACHPERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACH
PERFORMANCE COMPARISON ON JAVA TECHNOLOGIES - A PRACTICAL APPROACH
 
Performance comparison on java technologies a practical approach
Performance comparison on java technologies   a practical approachPerformance comparison on java technologies   a practical approach
Performance comparison on java technologies a practical approach
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
 
DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...
DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...
DeveloperWeek 2020: Cloud-Native and Microservices Accelerate Process Improve...
 
Quiz application system project report..pdf
Quiz application system project report..pdfQuiz application system project report..pdf
Quiz application system project report..pdf
 
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applications
 
How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Tech Stack & Web App Development For Startups
Tech Stack & Web App Development For StartupsTech Stack & Web App Development For Startups
Tech Stack & Web App Development For Startups
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
 
Isset Presentation @ EECI2009
Isset Presentation @ EECI2009Isset Presentation @ EECI2009
Isset Presentation @ EECI2009
 
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISONSTATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
 

More from Diego Cardozo

El proximo billon de usuarios
El proximo billon de usuariosEl proximo billon de usuarios
El proximo billon de usuarios
Diego Cardozo
 
The next billion users
The next billion usersThe next billion users
The next billion users
Diego Cardozo
 
Troubleshooting Ecommerce Performance
 Troubleshooting Ecommerce Performance Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
Diego Cardozo
 
Cranking It Up - SuiteWorld 2017
Cranking It Up  - SuiteWorld 2017Cranking It Up  - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
Diego Cardozo
 
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
Diego Cardozo
 
Performance in the cloud
Performance in the cloudPerformance in the cloud
Performance in the cloud
Diego Cardozo
 
Cómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intentoCómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intento
Diego Cardozo
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die trying
Diego Cardozo
 
Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intento
Diego Cardozo
 
How to test performance and not die trying
How to test performance and not die tryingHow to test performance and not die trying
How to test performance and not die trying
Diego Cardozo
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intento
Diego Cardozo
 
Organización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.jsOrganización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.js
Diego Cardozo
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
Diego Cardozo
 
Component Based Software Development
Component Based Software DevelopmentComponent Based Software Development
Component Based Software Development
Diego Cardozo
 
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDesarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
Diego Cardozo
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
Diego Cardozo
 

More from Diego Cardozo (16)

El proximo billon de usuarios
El proximo billon de usuariosEl proximo billon de usuarios
El proximo billon de usuarios
 
The next billion users
The next billion usersThe next billion users
The next billion users
 
Troubleshooting Ecommerce Performance
 Troubleshooting Ecommerce Performance Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce Performance
 
Cranking It Up - SuiteWorld 2017
Cranking It Up  - SuiteWorld 2017Cranking It Up  - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017
 
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016
 
Performance in the cloud
Performance in the cloudPerformance in the cloud
Performance in the cloud
 
Cómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intentoCómo testear performance sin morir en el intento
Cómo testear performance sin morir en el intento
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die trying
 
Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intento
 
How to test performance and not die trying
How to test performance and not die tryingHow to test performance and not die trying
How to test performance and not die trying
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intento
 
Organización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.jsOrganización de aplicaciones web con Backbone.js
Organización de aplicaciones web con Backbone.js
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
 
Component Based Software Development
Component Based Software DevelopmentComponent Based Software Development
Component Based Software Development
 
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDesarrollo de Software Basado en Componentes
Desarrollo de Software Basado en Componentes
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 

Recently uploaded

Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing ToolsOld Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Benjamin Bischoff
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
Inflectra
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
3610stuck
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
quanhoangd129
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
jealousviolet
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
norina2645
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
shanihomely
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
quanhoangd129
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
quanhoangd129
 
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
andrehoraa
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
singhlata50dh
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
simran hot girls
 
Empowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - GrawlixEmpowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - Grawlix
Aarisha Shaikh
 
03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching
quanhoangd129
 
04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching
quanhoangd129
 
08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching
quanhoangd129
 
How to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at ScaleHow to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at Scale
Anchore
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
Zyple Software
 

Recently uploaded (20)

Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing ToolsOld Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
Old Tools, New Tricks: Unleashing the Power of Time-Tested Testing Tools
 
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical SystemsInflectraCON 360: Risk-Based Testing for Mission Critical Systems
InflectraCON 360: Risk-Based Testing for Mission Critical Systems
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
Mumbai Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service A...
 
01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching01. Ruby Introduction - Ruby Core Teaching
01. Ruby Introduction - Ruby Core Teaching
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
 
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
Celebrity Girls Call Mumbai 🛵🚡9910780858 💃 Choose Best And Top Girl Service A...
 
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Russian Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
 
07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching07. Ruby String Slides - Ruby Core Teaching
07. Ruby String Slides - Ruby Core Teaching
 
05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching05. Ruby Control Structures - Ruby Core Teaching
05. Ruby Control Structures - Ruby Core Teaching
 
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
PathSpotter: Exploring Tested Paths to Discover Missing Tests (FSE 2024)
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
 
Empowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - GrawlixEmpowering Businesses with Intelligent Software Solutions - Grawlix
Empowering Businesses with Intelligent Software Solutions - Grawlix
 
03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching03. Ruby Variables & Regex - Ruby Core Teaching
03. Ruby Variables & Regex - Ruby Core Teaching
 
04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching04. Ruby Operators Slides - Ruby Core Teaching
04. Ruby Operators Slides - Ruby Core Teaching
 
08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching08. Ruby Enumerable - Ruby Core Teaching
08. Ruby Enumerable - Ruby Core Teaching
 
How to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at ScaleHow to Secure Your Kubernetes Software Supply Chain at Scale
How to Secure Your Kubernetes Software Supply Chain at Scale
 
SAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple SoftwareSAP implementation steps PDF - Zyple Software
SAP implementation steps PDF - Zyple Software
 

Single page applications

  • 2. Agenda 1. Motivation 2. Introduction 3. Examples 4. Architecture 5. Advantages and disadvantages 6. Tools 7. Demo
  • 3. Motivation (1) One of the main aspects that influence user experience is load time. We use many techniquest to make it quicker: Minimize scripts and CSS Combine images in a single sprite Delay JavaScript execution Handle static files separately (CDN) Resource cache
  • 4. Motivation (2) However, even with cache the browser must: Re-parse and execute CSS and JavaScript code. Download and parse the whole page HTML. Even when only a little part changed. Rebuild the DOM tree. Render the UI. The user sees the page being constructed as he waits.
  • 5. Motivation (3) To sum up, SPA is an answer to the following questions: ¿How can we achieve a more efficient behavior? ¿Can we only load what's new or necessary? ¿How can we improve user experience?
  • 6. Introduction (1) What is a SPA? It is a new approach to building web applications. The whole source code is either loaded initially or afterwards dynamically, without reloading the page. Navigation is resolved on the client side. Server calls are done asynchronously. UI is built on the client side.
  • 7. Introduction (2) What is NOT a SPA Join all webpages for the site and load them statically. Black or white, hybrid approaches do exist. A silver bullet: it might not be a good idea for some projects.
  • 8. Introduction (3) What can a SPA do? Show URL changes and navigate forward and backward. Manipulate the DOM on the client side. Wait for the view to load before showing it. Store previously loaded pages on the client.
  • 11. Advantages and disadvantages (1) Advantages Faster and slicker UI. Easier maintenance. Better load distribution. The beginning of the development process is faster. UI is simply another client. Great for testing. Perfect approach to combine with mobile applications.
  • 12. Advantages and disadvantages (2) Disadvantages The initial load can be slow. SEO can become complex. Requires JavaScript to be enabled. Requires additional JavaScript knowledge. Breaks analytics, ads and widgets conventions.
  • 13. Advantages and disadvantages (3) Other aspects We move non-critic business logic to the client. Our code used to be90% C#/VB and 10% JS. Now it will be 50/50. This isn't necessarily an advantage or disadvantage, but we will need a different set of tools to maintain good practices.
  • 14. Tools (1) Client side development
  • 15. Tools (2) Knockout.js Created by Steve Anderson ASP.NET PM for Microsoft. Uses MVVM, a design pattern created by John Smith Microsoft MVP for his work in WPF. It can be even used when we are not developing SPA. Included with MVC's default templates.
  • 16. Tools (3) Server side development En MVC, nuestros controladores pasan a ser ApiControllers para definir un API RESTful. Implementamos una sola vista (layout). No vamos a utilizar Razor para renderizar las vistas. Vamos a ver un template para Visual Studio que trae un proyecto pre-configurado para SPA (Hot Towel SPA).
  • 17. Demo (1) Start from John Papa's Hot Towel SPA template Tour through at Durandal's main components Analyzing each component in depth takes too long. We take a look at how the RESTful API is implemented Exposes user data. We add a new functionality (sessions). Tour through client code. Mention the most important libraries.
  • 20. If you want to know more