Aplicaciones Web SPA con WebAPI y TypeScriptLuis Guerreroluis.guerrero@microsoft.com@guerrerotook

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.

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

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.

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.

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.

LESS

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.

IntelliSense para JavaScript y jQuery

To-do demo

11

Todo Demo Arquitecture - Software

jQuery AngularJS

TypeScript

TodoMVC App

Express

Node.js

Document DB Azure StorageM

icro

soft

Azu

re

Vis

ual Stu

dio

Node.js

Tools

TypeScript Definitions for jQuery and AngularJS

DemoSoftware stack

12

Todo Demo Arquitecture - Infrastructure

North Europe

West Europe

Traffic ManagerRound Robin

API Management

Document DB Storage Blob

User Internet