ASP.NET AJAX: Patrones ASP.NET AJAX: Patrones Speaker Cargo Empresa
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
Page Page Framework,Framework,Server Server ControlsControls
BrowserBrowser
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
Server ApplicationServer Application
PagesPagesPagesPages
UI BehaviorUI Behavior(Managed(ManagedCode)Code)
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
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
““Atlas”Atlas”ServiceServiceProxiesProxies
““Atlas”Atlas”ServiceServiceProxiesProxies
UI BehaviorUI Behavior(Script)(Script)
UI BehaviorUI Behavior(Script)(Script)
ASP.NETASP.NET
Application Application ServicesServicesApplication Application ServicesServices
Page Page Framework,Framework,Server Server ControlsControls
Page Page Framework,Framework,Server Server ControlsControls
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
Server ApplicationServer Application
PagesPagesPagesPages
UI BehaviorUI Behavior(Managed(ManagedCode)Code)
UI BehaviorUI Behavior(Managed(ManagedCode)Code)
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
PresentationPresentation(HTML/CSS)(HTML/CSS)
PresentationPresentation(HTML/CSS)(HTML/CSS)
““Atlas”Atlas”ServiceServiceProxiesProxies
““Atlas”Atlas”ServiceServiceProxiesProxies
UI BehaviorUI Behavior(Script)(Script)
UI BehaviorUI Behavior(Script)(Script)
Server ApplicationServer Application
PagesPagesPagesPages
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
© 2005 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.