SlideShare a Scribd company logo
1 of 21
Download to read offline
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 & RXJS: examples and use cases
Angular & RXJS: examples and use casesAngular & RXJS: examples and use cases
Angular & RXJS: examples and use casesFabio Biondi
 
Asynchronous javascript
 Asynchronous javascript Asynchronous javascript
Asynchronous javascriptEman Mohamed
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js SimplifiedSunil Yadav
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentationritika1
 
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBootPUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBootJosué Neis
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3 ArezooKmn
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JSCakra Danu Sedayu
 
Building RESTful applications using Spring MVC
Building RESTful applications using Spring MVCBuilding RESTful applications using Spring MVC
Building RESTful applications using Spring MVCIndicThreads
 
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSRafael Casuso Romate
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVCNathaniel Richand
 
Node.Js: Basics Concepts and Introduction
Node.Js: Basics Concepts and Introduction Node.Js: Basics Concepts and Introduction
Node.Js: Basics Concepts and Introduction Kanika Gera
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with SpringJoshua Long
 

What's hot (20)

Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesAngular & RXJS: examples and use cases
Angular & RXJS: examples and use cases
 
Express JS
Express JSExpress JS
Express JS
 
Asynchronous javascript
 Asynchronous javascript Asynchronous javascript
Asynchronous javascript
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentation
 
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBootPUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBoot
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Express node js
Express node jsExpress node js
Express node js
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
 
Angular
AngularAngular
Angular
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
 
Building RESTful applications using Spring MVC
Building RESTful applications using Spring MVCBuilding RESTful applications using Spring MVC
Building RESTful applications using Spring MVC
 
Solid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJS
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
Vue.js
Vue.jsVue.js
Vue.js
 
Node.Js: Basics Concepts and Introduction
Node.Js: Basics Concepts and Introduction Node.Js: Basics Concepts and Introduction
Node.Js: Basics Concepts and Introduction
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
REST APIs with Spring
REST APIs with SpringREST APIs with Spring
REST APIs with Spring
 
Angular 11
Angular 11Angular 11
Angular 11
 

Viewers also liked

Single Page WebApp Architecture
Single Page WebApp ArchitectureSingle Page WebApp Architecture
Single Page WebApp ArchitectureMorgan Cheng
 
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
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Jollen Chen
 
Building single page applications
Building single page applicationsBuilding single page applications
Building single page applicationsSC5.io
 
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
 
Single Page Application Best practices
Single Page Application Best practicesSingle Page Application Best practices
Single Page Application Best practicesTarence DSouza
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page ApplicationCodemotion
 
Islamic Fashion Festival
Islamic Fashion FestivalIslamic Fashion Festival
Islamic Fashion FestivalVili 48
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core ConceptsFabio Biondi
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus Inc.
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2FITC
 

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 Build Single Page Apps with Knockout.js

CloudStack UI
CloudStack UICloudStack UI
CloudStack UIShapeBlue
 
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 2017Ivan 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 pptPankaj Patel
 
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_7YrsKiran 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 APPROACHcscpconf
 
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 approachcsandit
 
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.docxwrite31
 
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
 
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applicationsManish 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 2022Katy Slemon
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
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 StartupsZimbleCode
 
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
 
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISONSTATISTICAL ANALYSIS FOR PERFORMANCE COMPARISON
STATISTICAL ANALYSIS FOR PERFORMANCE COMPARISONijseajournal
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx75waytechnologies
 

Similar to Build Single Page Apps with Knockout.js (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...
 
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
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
 

More from Diego Cardozo

El proximo billon de usuarios
El proximo billon de usuariosEl proximo billon de usuarios
El proximo billon de usuariosDiego Cardozo
 
The next billion users
The next billion usersThe next billion users
The next billion usersDiego Cardozo
 
Troubleshooting Ecommerce Performance
 Troubleshooting Ecommerce Performance Troubleshooting Ecommerce Performance
Troubleshooting Ecommerce PerformanceDiego Cardozo
 
Cranking It Up - SuiteWorld 2017
Cranking It Up  - SuiteWorld 2017Cranking It Up  - SuiteWorld 2017
Cranking It Up - SuiteWorld 2017Diego Cardozo
 
Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Speed Thrills - Suiteworld 2016
Speed Thrills - Suiteworld 2016Diego Cardozo
 
Performance in the cloud
Performance in the cloudPerformance in the cloud
Performance in the cloudDiego 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 intentoDiego Cardozo
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die tryingDiego 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 intentoDiego 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 tryingDiego 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 intentoDiego 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.jsDiego Cardozo
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.jsDiego Cardozo
 
Component Based Software Development
Component Based Software DevelopmentComponent Based Software Development
Component Based Software DevelopmentDiego Cardozo
 
Desarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDesarrollo de Software Basado en Componentes
Desarrollo de Software Basado en ComponentesDiego Cardozo
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page ApplicationsDiego 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

Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odishasmiwainfosol
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Velvetech LLC
 
PREDICTING RIVER WATER QUALITY ppt presentation
PREDICTING  RIVER  WATER QUALITY  ppt presentationPREDICTING  RIVER  WATER QUALITY  ppt presentation
PREDICTING RIVER WATER QUALITY ppt presentationvaddepallysandeep122
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commercemanigoyal112
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky
 
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdfInnovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdfYashikaSharma391629
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 
Xen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfXen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfStefano Stabellini
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based projectAnoyGreter
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationBradBedford3
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfAlina Yurenko
 

Recently uploaded (20)

Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...
 
PREDICTING RIVER WATER QUALITY ppt presentation
PREDICTING  RIVER  WATER QUALITY  ppt presentationPREDICTING  RIVER  WATER QUALITY  ppt presentation
PREDICTING RIVER WATER QUALITY ppt presentation
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commerce
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort ServiceHot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
 
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdfInnovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdf
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 
Xen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfXen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdf
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based project
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion Application
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
 

Build Single Page Apps with Knockout.js

  • 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