Tips aspnet

44
10 mejores trucos para el desarrollo para ASP.NET Gonzalo “chalalo” Pérez C. Microsoft MVP ASP.NET [email protected] @chalalo ASP.NET msdn

Transcript of Tips aspnet

Page 1: Tips aspnet

10 mejores trucos para el desarrollo para ASP.NET

Gonzalo “chalalo” Pérez C.Microsoft MVP [email protected]@chalalo

ASP.NET msdn

Page 2: Tips aspnet

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

Page 3: Tips aspnet

SignalRConexiones en tiempo Real

Los usuarios requieren información actualizada.. AHORA!

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

Page 4: Tips aspnet

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!

Page 5: Tips aspnet

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

Page 6: Tips aspnet

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

Page 7: Tips aspnet

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

Page 8: Tips aspnet

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

Page 9: Tips aspnet

SignalR

Fallback de SignalR

Long Pollings

Forever Frames

Server Sent Events

WebSockets

Page 10: Tips aspnet

DEMO

SignalR y conexiones persistentes, tablero de dibujoGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

SIGNALR

Page 11: Tips aspnet

 Bundling y OptimizationLas pagina web tienen varias referencias externas…

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

Page 12: Tips aspnet

 Bundling y Optimization

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

Page 13: Tips aspnet

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

Page 14: Tips aspnet

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

Page 15: Tips aspnet

DEMO

Soporte LessBrowsers –JSON CopyOdata para Web API(*)Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

WEB TOOLS

Page 16: Tips aspnet

16

¿Que podemos hacer para trabajar hoy con HTML5?.

Modernizrhttp://www.modernizr.com/

No se detecta HTML5.Se detectan cualidades de

HTML5.

Page 17: Tips aspnet

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

Page 18: Tips aspnet

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

Page 19: Tips aspnet

Microsoft Confidential

19

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

¿Evolución?www.html5readiness.com

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

Page 20: Tips aspnet

DEMOModernizr y la detección de característicasGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

HTML5

Page 21: Tips aspnet

El Patrón MVVM

VIEWMODEL

VISTA Modelo

Binding

Commands

Page 22: Tips aspnet

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

Page 23: Tips aspnet

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

Page 24: Tips aspnet

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:

Page 25: Tips aspnet

DEMO

Iniciando con MVVM y Knockout.jsGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

MVVM

Page 26: Tips aspnet

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

Page 27: Tips aspnet

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

Page 28: Tips aspnet

DEMO

Single Page Application

Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

SPA

Page 29: Tips aspnet

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

Page 30: Tips aspnet

DEMO

Page InspectorLoad TestGonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

ASP.NET

Page 31: Tips aspnet

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)

Page 33: Tips aspnet

DEMO

GIT y Visual Studio 2012Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

GIT

Page 34: Tips aspnet

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

Page 35: Tips aspnet

Si queremos constuir una Web API

+ASP.NET MVC

WCF Web HTTPWCF REST Starter KitWCF Web API

Page 36: Tips aspnet

Si queremos constuir una Web API

ASP.NET Web API

Page 37: Tips aspnet

demo

Plantilla en ASP Web API en Visual Studio 2012Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

Page 38: Tips aspnet

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

Page 39: Tips aspnet

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

Page 40: Tips aspnet

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]

Page 41: Tips aspnet

demo

ASP.NET Web API

Gonzalo “chalalo” Pérez C.Microsoft MVP ASP.NEThttp://[email protected]@chalalo

Page 42: Tips aspnet

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.

Page 43: Tips aspnet

Gonzalo “chalalo” Pérez C.Microsoft MVP [email protected]@chalalo

MSDN ¿PREGUNTAS?

Page 44: Tips aspnet

© 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.