El documento habla sobre las aplicaciones web de una sola página (SPA) y las tecnologías asociadas como TypeScript, WebAPI y frameworks front-end. Explica que las SPA permiten crear una aplicación web completa en un solo archivo HTML que carga y descarga secciones dinámicamente mediante servicios web RESTful, a diferencia del modelo tradicional de cliente-servidor con intercambio de HTML. También cubre herramientas como Browser Link y TypeScript para facilitar el desarrollo front-end de SPA.

1. Aplicaciones Web SPA con
WebAPI y TypeScript
Luis Guerrero
luis.guerrero@microsoft.com
@guerrerotook

2. Servidor y cliente
• Las aplicaciones web han evolucionado para convertirse
en algo más complejo que un componente de servidor
que responde HTML y el navegador solamente dibuja ese
HTML.
• Ahora el cliente tiene una mayor importancia y los
componentes de cliente en JavaScript son los
responsables de la navegación e interacción del usuario.
• Además los dispositivos móviles también han hecho que
el diseño web evolucione en nuestras características
como el diseño responsive.

3. Servidor
• Actualmente hay muchas tecnologías en las que se
pueden crear aplicaciones web en el servidor:
• ASP.NET MVC + WebAPI + Entity Framework
• MEAN Stack: Mongo + Express + Angularjs + Node.js
• Python: Phyton + Django + sqlite3
• Todas estas plataformas están perfectamente
soportadas en Visual Studio

4. Técnicas a la hora de hacer sitios webs
• Cliente/Servidor: es el patrón más conocido de todos,
permite que el servidor genere HTML dinámica en base a la
navegación del usuario. En cliente se utiliza CSS para diseñar
y JavaScript para añadir más interacción en la web, pero todo
está controlado desde el servidor. Se hace postback.
• Single Page Application (SPA): es una nueva técnica que
permite crear el sitio web en una única página en HTML,
cargando y descargando las diferentes secciones de la
misma, el control lo tiene el navegador que va solicitando
diferentes secciones. Se utiliza un sistema de plantillas y los
datos se exponen a través de servicios web RESTful con
JSON.

5. SPA
• SPA permite crear toda la lógica en un único HTML y
tener ficheros json con los datos que las vistas utilizan
para mostrar los datos.
• El servidor únicamente es una capa de servicios RESTful que
devuelven JSON o CSS/Javascript minificado.
• Por la parte de cliente se suelen usar frameworks MVC para
desarrollar las aplicaciones, los más famosos son: AngularJS,
Backbone.js, Knockout
• Por la parte del servidor se suele utilizar WebAPI para crear
una API RESTfull con una respuesta en JSON o XML.

6. Browser Link
• Permite conectar los navegadores con Visual Studio
para poder sincronizar la visualización de elementos
en tiempo real.
• Junto con Web Essentials 2013 puede ser una
herramienta muy potente para actualizar e
identificar código en cliente.
• Permite saber qué etiquetas de HTML/CSS están
disponibles en qué navegador.

7. LESS

8. TypeScript y los TypeDefinitions
• TypeScript es un
lenguaje que te permite
trabajar con JavaScript
pero desde un lenguaje
orientado a objetos. Al
final de todo TypeScript
genera JavaScript que
puede ser ejecutado en
cualquier navegado.

9. IntelliSense para JavaScript y jQuery

10. To-do demo

11. 11
Todo Demo Arquitecture - Software
Document DB Azure Storage
Node.js
Express
TodoMVC App
TypeScript
jQuery AngularJS
Microsoft Azure
Visual Studio Node.js Tools
TypeScript Definitions for jQuery and AngularJS

12. Demo
Software stack
12

13. Todo Demo Arquitecture - Infrastructure
North Europe
West Europe
Traffic Manager
Round Robin
API Management
Document DB Storage Blob
User Internet