10 mejores trucos para el desarrollo para ASP.NET

Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NETchalalo@Hotmail.com@chalalo

ASP.NET msdn

Agenda (son más de 10)

SignalRBlundeScriptWeb ToolsSoportes LessModernizr y detección de característicasKnockout.JS y MVVMNuevas Plantillas SPAPage InspectorPruebas de CargaGit en Visual Studio 2012ASP.NET Web API

SignalRConexiones en tiempo Real

Los usuarios requieren información actualizada.. AHORA!

Notificaciones en Tiempo RealAplicaciones ColaborativasTwitter – live searches/updatesNuevo CorreoJuegos InteractivosChats

SignalR

HTTP es un Viejo amigo… No fue ideado para comunicaciones en tiempo real

La Web se basa en request-response La Web no mantiene estados

Tenemos 3 opciones para el tiempo real(entre otras)

Polling periodicos Long Polling HTML5 WebSockets, HTML5 al rescate!

Poll mediante ajax en intervalos de tiempoGran cantidad de peticiones “absurdas”Gasto excesivo de recursos y ancho de banda.Ej: 1 petición por minuto, 500 usuarios conectados, 30.000 peticiones en una hora, 720.000 al día...

CLIENTE #1

CHAT SERVER

GET/Mensajes

(vacío)

GET/Mensajes

(vacío)

GET/Mensajes

“Hola que tal!”

GET/Mensajes

(vacío)

Intervalodel polling

Polling Periódico

SignalR

Utiliza peticiones HTTP para crear conexiones “pseudopersistentes” Servidor espera hasta que exista algún evento/mensaje disponible para enviar al cliente.Retorna lo anterior como respuesta a la petición original y cierra la conexiónEl cliente realiza una nueva petición inmediatamente y se repite el proceso.No es una tecnología push, pero puede ser usada cuando este no está diponible

CLIENTE #1

CHAT SERVER

GET/Mensajes

“Hola que tal!”

GET/Mensajes

“como te va?”

Long Polling

SignalR

Biblioteca desarrollada por Damian Edwards y Dadiv Fowler del Team ASP.NET, totalmente Open Source Ofrece una visión a muy alto nivel de la comunicación entre el servidor y los múltiples clientes que se encuentren a él conectados.Negocia automaticamente los transportes e irá haciando fallbacks, desde WebSockets hasta long polling.Posibilidad de hacer push hacia el cliente.

Ahora si, SignalR

Conexiones Persistentes y HubsPersistentConnectionPuede comunicar 1..N clientesEs un IHttpHandlerRequiere un ruta a ser definidaLimitado al envío de mensajesNosotros defenimos el protocolo

Hubs

Puede comunicar 1..N clientesAbstraccion sobre conexiones persistentesMapeo automático de ruta (/signalr/hubs)Puede enviar mensajes y llamar métodosSignalR define el protocolo

SignalR

Fallback de SignalR

Long Pollings

Forever Frames

Server Sent Events

WebSockets

DEMO

SignalR y conexiones persistentes, tablero de dibujoGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

SIGNALR

 Bundling y OptimizationLas pagina web tienen varias referencias externas…

CSS, Imágenes y Javascript..Cada vez más librerías, pollyfils, etc

 Bundling y Optimization

Bundling combina los request CSS y Javascript Minificacion comprime los archivo antes de enviarlos.

Web Tools 2012Instalación Online/OfflineDisponible para versiones ExpressNovedades:

EditorColor de sintaxis para CoffeScript, Mustache, HandleBars y Jrender Soporte para intellinsense y validación para LESSIntellinsense para binding de Knoukout.jsCSS Auto Sync – Live updates en Page InspectorPegar JSON como clase

Web Tools 2012Browsers

Soporte para extender el soporte a emuladores móviles.

Todas las librerías de jQuery, jQueryUI, jQuery Validator, Modernizr, Knoukout y varios paquetes nuget, han sido actualizadasASP.NET

Soporte Odata en ASP.NET Web APISignalR incluido con full soporteFriendly URLs para webforms (no mas .aspx)Soporte para Webform en móviles, precios.aspx -> precios.mobile.aspxUpdate a SPA y FAT

DEMO

Soporte LessBrowsers –JSON CopyOdata para Web API(*)Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

WEB TOOLS

16

¿Que podemos hacer para trabajar hoy con HTML5?.

Modernizrhttp://www.modernizr.com/

No se detecta HTML5.Se detectan cualidades de

HTML5.

La mejor librería de detección de caractetísticas detecta:

Todas las características principales de HTML5Todas las principales características de CSS3

Incluye HTML5 Shim para el soporte de tag semánticosAdopción generalizadaUpdates continuosSe incluye con ASP.NET MVC 4

Que son?Normalmente JavaScript CSS y HTML y CSS

¿Qué permiten hacer?Proporcionan la tecnología que nosotros, los desarrolladores, esperaríamos que el navegador ofreciera nativamente.Provee características que faltan

¡Cuando se utilizan?Se utilizan para generar la llamada “fallback Gracefully” o imitar una funcionalidad.

Polyfills

Microsoft Confidential

19

¿Puedo usarlo?http://www.caniuse.com

¿Evolución?www.html5readiness.com

¿Y para Móviles?www.mobilehtml5.org

DEMOModernizr y la detección de característicasGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

HTML5

El Patrón MVVM

VIEWMODEL

VISTA Modelo

Binding

Commands

El Patrón MVVM

Conceptos ImportantesBindings Declarativos – Inicialmente para xaml2 way UI binding, Cambios en el ModeloVista producen cambios en la Vista

Cambios en la Vista producen cambios en el ModeloVista

ModeloVista solo para la vista ¿? Ej: Clase Persona..

Vas a utilizar todos los miembros de la clase para una vista específica?Evita llenarse de Objetos Genéricos

Implementa patron ObservableCollection

Knockout.js• Biblioteca 100% Javascript Open Source • 40k Minimizado(*)• Reducido a 14kb cuando se usa

compresión http• Cross-browser• Sin dependencias• Web con tutoriales y ejemplos • Aporte de la comunidad

http://knockoutjs.com

Knockout.js

6+ 2+

Ayuda a implementar este modelo MVVM. Permite:• Realizar Binding Declarativos• Refresco automático de los elementos del UI, cuando se actualiza el

modelovista, nuestra UI se actualiza automáticamente• Tracking de Dependencias: detecta los cambios realizados en la vista o en

el modelo y es capaz de propagarlos .• Plantillas: permite  generar rápidamente plantillas en función de los datos

del modelovista.Compatibilidad con browsers y versiones:

DEMO

Iniciando con MVVM y Knockout.jsGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

MVVM

Single Page Application (SPA)

Incluido en Web Tools 2012.2 (Plantilla para MVC4)Aplicaciones que cargan en una sola pagina HTML y tienen actualizaciónes de página mediante Ajax.

CLIENTE

SERVER

HTML AJAX JSON

Single Page Application (SPA)No hay cambios de URL, solo #Template DisponibleUso de HTML5,CSS3Uso de Knouckout.js para bindingGran experencia de usuarioCorren en cualquier devicePueden trabajar offlineSkill en JavascriptDificultad para los SEOMas complejos para desarrollar

DEMO

Single Page Application

Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

SPA

Page Inspector y Pruebas de Carga

Excelente para inspeccionar tu sitio (WebFoms o MVC) en tiempo real

Puedes hacer cambios onfly

Nueva herramienta complete de Load Test

Informes de rendimiento e indicadores claves

DEMO

Page InspectorLoad TestGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

ASP.NET

Git-tf

Que es GIT?Sistema de control de versions DistribuidosExcelente para trabajar local/offline

Que es git-tf?Una herramienta que permite utilizar Git y compartir tu trabajobajo TFS.

TFS Version Control

Git Repo

http://gittf.codeplex.com

git-tf

Any Git enabled client tool

TFS Server

Client (any OS)

GIT en Visual Studio 2012

Visual Studio 2012 Update 2 CTP 4Visual Studio Tools for Git

DEMO

GIT y Visual Studio 2012Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

GIT

Requerimientos de Web API framework

Necesita un modelo de programación basado y enfocado en HTTP.

Facilidad para mapear recursos a Uris e implementar una interfaz uniforme

Soporte para formatos enriquecidos y negociación de contenido sobre HTTP.

Liviano, testeable y escalable

Si queremos constuir una Web API

+ASP.NET MVC

WCF Web HTTPWCF REST Starter KitWCF Web API

Si queremos constuir una Web API

ASP.NET Web API

demo

Plantilla en ASP Web API en Visual Studio 2012Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

Características ASP.NET Web API

De ASP.NET MVC

ASP.NET RoutingModel bindingValidationFiltersLink generationTestabilityIoC integration (Inversión de Control)Plantillas de VSScaffolding

De WCF Web API

Moderno modelo de programación HTTPHttpClientSoporte para tareas asincronasFormato y negociación de contenidoServer-side query compositionCreate custom help pagesSelf-hostTracing

http://www.asp.net/web-api

Para implementar una Web API…Derivar desde ApiController … a diferencia que con MVC

Implementar nuestras acciones.Mapear las acciones hacia los metodos HTTP.

Crear nombre de método con prefijo del metodo HTTP deseado - PostComentario

Utilizar verbos [HttpGet/Post/Put/Delete]

demo

ASP.NET Web API

Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://www.chalalo.clchalalo@hotmail.com@chalalo

Routing

Mapear una URI hacia nuestros ApiControllersEj. api/{controller}/{id}

{controller} + “Controller” = ApiController

Se pueden adaptar al uso de valores por defecto y restricciones de rutas.

Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NETchalalo@Hotmail.com@chalalo

MSDN ¿PREGUNTAS?

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be

a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS

PRESENTATION.