Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Aplicaciones Web SPA con WebAPI y TypeScript

517 vues

Publié le

Aplicaciones Web SPA con WebAPI y TypeScript

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aplicaciones Web SPA con WebAPI y TypeScript

  1. 1. Aplicaciones Web SPA con WebAPI y TypeScript Luis Guerrero luis.guerrero@microsoft.com @guerrerotook
  2. 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. 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. 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. 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. 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. 7. LESS
  8. 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. 9. IntelliSense para JavaScript y jQuery
  10. 10. To-do demo
  11. 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. 12. Demo Software stack 12
  13. 13. Todo Demo Arquitecture - Infrastructure North Europe West Europe Traffic Manager Round Robin API Management Document DB Storage Blob User Internet

×