10 mejores trucos para el desarrollo para ASP.NET
Gonzalo “chalalo” Pérez C.Microsoft MVP [email protected]@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://[email protected]@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://[email protected]@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://[email protected]@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://[email protected]@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://[email protected]@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://[email protected]@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://[email protected]@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://[email protected]@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://[email protected]@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.
© 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.