asp .net ajax: patrones

ASP.NET AJAX: PatronesASP.NET AJAX: Patrones

SpeakerCargoEmpresa

Objetivos de la sesiónObjetivos:

Diseño de aplicaciones ASP.NET AJAX que efectivamente usen técnicas AJAX

Mejores prácticas recomendadas para integrar características ASP.NET AJAX con nuevas/existentes aplicaciones ASP.NET

Asunciones:Familiaridad con ASP.NET 2.0

Algún conocimiento de ASP.NET AJAX

Consideraciones:ASP.NET AJAX puede mejorar cualquier aplicación ASP.NET 2.0 nueva/existente

El uso de las técnicas AJAX debe ser de manera inteligente

ASP.NET AJAX 1.0

Es un marco de trabajo gratuito para crear páginas web más eficientes, más interactivas y con ricos elementos visuales

Extiende ASP.NET 2.0

El marco de trabajo posee dos (2) componentes: Servidor y Cliente

Brinda soporte a los navegadores más populares

Soporte técnico del producto 24x7

Tecnologías que conforman AJAX

JavaScript

Document Object Model (DOM)

Dynamic HTML (DHTML)

XmlHttpRequest *

Modelo de apps centradas en el Servidor

ASP.NETASP.NET

Application Application ServicesServicesApplication Application ServicesServices

Page Page Framework,Framework,Server Server ControlsControls


BrowserBrowser

PresentationPresentation(HTML/CSS)(HTML/CSS)


Server ApplicationServer Application

PagesPagesPagesPages

UI BehaviorUI Behavior(Managed(ManagedCode)Code)


Input Data

Updated UI + Behavior

Initial Rendering (UI + Behavior)

Patrones comunes AJAX

Actualizaciones parciales

Validaciones

Componentes del lado del Cliente con capacidades de animación

Componentes del lado del Cliente con interacción con servicios web

Controles extendidos y controles personalizados

BrowserBrowser



““Atlas”Atlas”ServiceServiceProxiesProxies


UI BehaviorUI Behavior(Script)(Script)


ASP.NETASP.NET

Application Application ServicesServicesApplication Application ServicesServices



Microsoft AJAX LibraryMicrosoft AJAX Library

Client Client Application Application ServicesServices

Client Client Application Application ServicesServices

Component/UIComponent/UIFramework,Framework,ControlsControls

Component/UIComponent/UIFramework,Framework,ControlsControls





Modelo de apps centradas en el ClienteASP.NET AJAX

Initial Rendering (UI + Behavior)

Data

Data

Actualización Parcial (UpdatePanel)UpdatePanel1 Col1 Col2 Col3 Col4

UpdatePanel2

Button1

Button2

Button3

Button3

UpdatePanelMejores Prácticas

Usar con el control UpdateProgress control para proveer retroalimentación visual sobre el contexto asíncrono

Usar Triggers para actualizar los controles hijos de un panel basado en eventos externos al panel

Usar el atributo ChildrenAsTriggersControla tanto los controles hijos como los triggers que lo actualizan

Otras consideracionesWeb Parts

OK: Update Panel en Content Web Parts

No OK: Content Web Parts en Update Panels

Otros controles que NO funcionan dentro del UpdatePanelTreeView, Menu, FileUpload

No se pueden modificar o enviar cookies en una actualización parcial

UpdatePanelConsideraciones de rendimiento

El UpdatePanel se ejecuta en el ciclo de vida a página completa en la actualización

El ViewState se transmite para todos los controles contenidos en el UpdatePanel

Deshabilite el ViewStateDivide la página en múltiples UpdatePanelsConsidere remplazar el UpdatePanel con Web Services y JavaScript donde un alto rendimiento sea necesario

Update Panel

NameTitleGroup

Lineamientos

Estar al tanto de las latencias del servidorMantener el esquema al que el usuario esta acostumbradoBuscar oportunidades de cachingBuscar oportunidades de batchingSolo actualizar partes de la pagina que sea importantesNo sobre utilizar los controles

Validación

Mejores prácticasNunca confíe en el input del cliente

No haga validaciones de datos sensibles al contexto localmente

Use validación del Cliente para:Forzar reglas de entrada de datos (Ej: contraseñas fuertes)

Filtros (Ej: Edición de mascaras)

ASP.NET AJAX Control Toolkit Validation Control

Provee ambiente pre-construido de validación

Ambiente del lado del ClienteMejores prácticas

Implementación de método dispose() para todos los contextos, evitando los “memory leaks”

Use las funciones de la Librería Microsoft AJAX siempre que sea posible para compatibilidad entre navegadores

El contexto del lado del Cliente están escritos en JavaScriptLas librerías MS AJAX provee orientación a objetos:

Namespaces

Herencia

Propiedades gets/sets

Eventos

Extendiendo Controles del Servidor

Mejores prácticasRehusar complementos del ASP.NET AJAX Control Toolkit. Ej:

AutoComplete, Animations, Modal Popups, Drag/Drop

Los complementos aumentan las capacidades existentes de los controles con JavaScript del lado del cliente

Ej: Agregar Auto Save al contexto en un control formulario

El cliente JavaScript esta empaquetado en un control servidor

Validación

NameTitleGroup

Servicios Web y Script de ClienteEl script de Cliente se comunica con

el servidor vía servicios web

Los proxies son automáticamente generados

Los servicios de membrecía y de perfilamiento de ASP.NET usan AJAXBrowserBrowser









Web ServiceWeb ServiceWeb ServiceWeb ServiceResponse

Web Service Call

Servicios Web

NameTitleGroup

ResumenAplicar AJAX en sus aplicaciones para mejorar la interactividad y reducir la latenciaHaga:

Dividir la UI en múltiples Update Panels para restringir el tráfico a la región activa sobre la página

Use pistas visuales para explicar comportamientos asíncronos

Provea información cuando las funcionalidades de AJAX no estén disponibles

NO Haga:Aplicar AJAX en cualquier parte de manera indiscriminada

Usar AJAX para navegación entre páginas

Ignorar las pruebas en múltiples navegadores

Recursos

http://www.asp.net – Código, ejemplos, descargas, fuentes y más!!!

http://forums.asp.net/1022/ShowForum.aspx– Foros de desarrollo ASP .NET

http://www.codeplex.com

http://channel9.msdn.com

http://www.asp.net/

http://forums.asp.net/1022/ShowForum.aspx

http://forums.asp.net/1022/ShowForum.aspx

http://www.codeplex.com/

asp .net ajax: patrones

Documents