Download The Client Side Model

Conchango
Architecting websites using
Microsoft ASP.net AJAX
Simon Evans
Lead Architect
http://blogs.conchango.com/simonevans
© conchango 2005
www.conchango.com
Agenda
•
•
•
•
•
•
•
•
•
•
•
•
•
Introduction
Why AJAX? Why now?
Overview of ASP.net AJAX architecture
The Server Side Model
The Client Side Model
Client Model vs Server Model
User Interface Design Considerations
Business Logic Design Considerations
Patterns for Authentication
Patterns for Presenting Data
Future Web Applications
Useful Links
Questions
© conchango 2005
www.conchango.com
Introduction
© conchango 2005
www.conchango.com
Why AJAX? Why Now?
•
Users expect more from the internet
•
•
•
•
Evolution of modern browsers
•
•
•
Demand better user experiences
Want greater depth of functionality
Want syndicated and personalised content
Stronger support for web standards (XHTML, CSS)
Ubiquitous support for XMLHTTP
AJAX frameworks
•
•
•
Address cross browser JavaScript / HTML DOM issues
Provide structure to JavaScript language
Reduce development effort
© conchango 2005
www.conchango.com
Overview of ASP.net AJAX architecture
© conchango 2005
www.conchango.com
The Server Side model
© conchango 2005
www.conchango.com
The Client Side Model
© conchango 2005
www.conchango.com
Client Model vs Server Model
Server Model
Client Model
 Reuse ASP.net features
 Easy to develop
 Quick win on existing
sites
 Richest User Experience
 Reduction in network
traffic
 Less load on servers
x Full page life cycle per
POST
x Less scalable
x Limited User Experience
x Higher financial cost
x No control over client
logic
x Lack of tooling
© conchango 2005
www.conchango.com
User Interface Design Considerations
•
•
•
•
•
Mix together client and server models on the same page
Avoid mixing the two models in templated server or client controls
Consider the effect client side AJAX service calls might have on
other rendered server side controls on the same page
Only wrap the update panel around the smallest subset of server
side controls.
Consider the effects of extra page postbacks on the scalability of
the application.
© conchango 2005
www.conchango.com
Business Logic Design Considerations
•
•
Business Logic placed on the client is not secure
Calls to AJAX web services should be considered as any other
service call in a Service Orientated Architecture
•
•
•
•
Ensure the service calls are autonomous by duplicating all client side business
logic within the service call.
Consider using Script# to generate JavaScript from C# business logic used
within the service to reduce development effort.
Consider using a subset of business rules to trap common situations on the
client, without causing significant page bloat.
Successful business logic strategy should reduce network traffic and improve
user experience.
© conchango 2005
www.conchango.com
Patterns for Authentication
•
Redirect to separate login page
•
•
Use server side login control in update panel with AJAX Toolkit
popup, or model dialog
•
•
Useful fallback mechanism
Consider sections of page requiring authentication
Use client side authentication service call
•
Limited to only updating client side HTML once authenticated
© conchango 2005
www.conchango.com
Demo:
PATTERNS FOR AUTHENTICATION
© conchango 2005
www.conchango.com
Patterns for Presenting Data (Server Side)
• Use a
DataBoundControl
(such as a GridView)
• Optional
DataSourceControl
(such as
ObjectDataSource)
• Wrap in UpdatePanel
• Apply AJAX Toolkit
Extenders
© conchango 2005
www.conchango.com
Patterns for Presenting Data (Client Side)
• Design templated
control in HTML
• Use ListItem control
(from AJAX futures
CTP)
• Bind to JSON
serialized service via
JavaScript or XMLScript
© conchango 2005
www.conchango.com
Demo:
PATTERNS FOR PRESENTING DATA
© conchango 2005
www.conchango.com
Future Web Applications
•
•
•
•
Intellisense and debugging support in “Orcas”
ASP.net AJAX support for WCF
Collaboration between ASP.net AJAX and WPF/E
Industry movements towards the client model
© conchango 2005
www.conchango.com
Useful Links
•
Web Development Helper and Script#
•
•
Fiddler
•
•
http://www.fiddlertool.com/fiddler/
ScriptDoc
•
•
http://projects.nikhilk.net/default.aspx
http://weblogs.asp.net/bleroy/archive/2006/05/01/ScriptDoc_3A00_-documentyour-Atlas-classes.aspx
ASP.net AJAX Class Browser
•
http://weblogs.asp.net/leftslipper/archive/2007/02/22/asp-net-ajax-javascriptclass-browser-take-3.aspx
© conchango 2005
www.conchango.com
Questions
Download the demo content at:
http://blogs.conchango.com/simonevans
Contact me at:
[email protected]
© conchango 2005
www.conchango.com