single page applications
DESCRIPTION
This presentation is about building Single Page Applications. It was written for a .NET Meetup in Uruguay, so it will also be targeted at Microsoft developers.TRANSCRIPT
![Page 1: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/1.jpg)
Single PageApplications
Diego Cardozogithub.com/diegocard/SPA-Presentation
![Page 2: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/2.jpg)
Agenda
1. Motivation
2. Introduction
3. Examples
4. Architecture
5. Advantages and disadvantages
6. Tools
7. Demo
![Page 3: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/3.jpg)
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
![Page 4: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/4.jpg)
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.
![Page 5: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/5.jpg)
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?
![Page 6: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/6.jpg)
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.
![Page 7: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/7.jpg)
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.
![Page 8: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/8.jpg)
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.
![Page 9: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/9.jpg)
Examples
GMail
This presentation
Stashy
Nogginator
![Page 10: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/10.jpg)
Architecture
![Page 11: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/11.jpg)
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.
![Page 12: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/12.jpg)
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.
![Page 13: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/13.jpg)
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.
![Page 14: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/14.jpg)
Tools (1)
Client side development
![Page 15: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/15.jpg)
Tools (2)
Knockout.js
Created by Steve AndersonASP.NET PM for Microsoft.
Uses MVVM, a design pattern created by John SmithMicrosoft MVP for his work in WPF.
It can be even used when we are not developing SPA.Included with MVC's default templates.
![Page 16: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/16.jpg)
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).
![Page 17: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/17.jpg)
Demo (1)
Start from John Papa's Hot Towel SPA template
Tour through at Durandal's main componentsAnalyzing each component in depth takes too long.
We take a look at how the RESTful API is implementedExposes user data.
We add a new functionality (sessions).Tour through client code.Mention the most important libraries.
![Page 19: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/19.jpg)
Resources
learn.knockout.com
singlepageappbook.com
todomvc.com
johnpapa.net
slideshare.net/dcslides/spa-25806613
![Page 20: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/20.jpg)
If you want to know more
![Page 21: Single page applications](https://reader033.vdocument.in/reader033/viewer/2022051610/54827c18b4af9f9b538b49f9/html5/thumbnails/21.jpg)
Questions?