Ajax Intro

Berwick •Heights • Software

Slide 1

© 2006 Berwick Heights Software

Building Web Applications with Ajax

Building Quality Into Enterprise Software

Stuart [email protected]

Berwick •Heights • SoftwareBuilding Quality Into Enterprise Software



Slide 2




About the Speaker

Owner of Berwick Heights Software, Inc., providing firms that are developing web services, web-enabled applications or enterprise software with the expertise necessary to create robust, secure and maintainable software solutions using Microsoft .Net.

Job:

http://www.berwickheights.com/blogBlog:Web Applications, Web ServicesEnterprise SoftwareDatabase DesignData MigrationC#, ASP.Net, ADO.Net, C++, COM, ATL, XML

Technical:

http://www.berwickheights.comWeb Site:[email protected]:

Stuart JonesName:


Slide 3




Web Site Resources

http://www.berwickheights.com/blog – search for Ajax Links

Links to websites withAjax information:

http://www.berwickheights.com/blog – search for Ajax Bibliography

Ajax Bibliography:

http://www.berwickheights.com/talksDownload Demos and PowerPoint:


Slide 4




What You’ll Learn

• What is Ajax?• How to implement web applications using Ajax• The benefits and drawbacks of Ajax• Ajax Frameworks and Toolkits• Example Ajax Applications


Slide 5




History of Web Applications

• Static pages with links• Send data from browser to server and process

parameters (CGI)• Server Technologies: ASP, JSP, ColdFusion• Client Technologies: ActiveX, Java Applets, Flash• Standardized web clients using DHTML

(JavaScript, CSS)


Slide 6




Web Applications in the New Millennium

• Bandwidth increases• Browsers capabilities increase and become more

compatible with one another• Rediscovery of XMLHTTPRequest object

– Allows asynchronous messages between browser and web server

– No need to refresh entire web page for dynamic data


Slide 7




What Is Ajax?

• Ajax: Asynchronous JavaScript and XML• Term coined by Jesse James Garrett in his article

Ajax: A New Approach to Web Applications (Feb 2005)

• Combines four technologies:– JavaScript– Cascading Style Sheets (CSS)– Web page DOM– Asynchronous communication with web server


Slide 8




Ajax Application

Receive response from web server asynchronously and update HTML DOM using JavaScript

Refresh page when web server responds with new HTML page

Send data to web server asynchronously

Post data to web server

Ajax ApplicationClassic Web Application


Slide 9




Rethinking Web Application Paradigms


Slide 10




Rethinking Web Application Paradigms


Slide 11




Application Design Postures

Software usability expert Alan Cooper has come up with four application design postures:

– Sovereign– Transient– Daemonic– Parasitic


Slide 12




Ajax Benefits

• Same benefits as other web applications– Universal reach via Internet– Centralized administration, installation and upgrade– Browser already installed on client

• Fluid user experience and integration with work flow• Ability to create sovereign web applications that

users will want to use• Specialized legacy applications can now become

web applications


Slide 13




Example Ajax Applications

• Legacy Applications– MSDN Library Tree View– Outlook Exchange Web Client

• Popular Sites– Google Maps, Suggests, GMail– Flickr– del.icio.us

• Custom Solutions– Digital Parts ActiveGuard Alert View– TelAthena Call Center Web Agent


Slide 14




Web 2.0

• Ajax-enabled• User generated content• Social networking• Mashups• New ways to generate revenue


Slide 15





Slide 16




Drawbacks of Using Ajax

• Must know many different technologies – JavaScript, CSS, XML on client side– C#, Java, PHP, SQL on server side

• Hard to develop, debug and maintain dynamic web applications

• Development environments for DHTML programming (Debuggers, IDEs) are not as good

• Browser compatibility (although this continues to improve)


Slide 17




Ajax Implementation Problems

• Browser back button• Bookmarking• Error handling• Accessibility for the disabled• Memory leaks (especially if sovereign application)• Ajax requires good discipline on part of development team


Slide 18




Implementing Asynchronous Communication

• XMLHTTPRequest object• Hidden IFrames• Use a framework


Slide 19




Client-Side Frameworks (Pure JavaScript)

• Cross-Browser Libraries– Sarissa– Prototype

• User Interface Helpers– Rico– Script.aculo.us– Dojo– Mochikit


Slide 20




Server-Side Frameworks

• Microsoft.Net-Based– Ajax.Net– Atlas

• Java-Based– DWR– JSON-RPC (also works with Python, Ruby and Perl)

• Ruby on Rails (supports Prototype lib out of box)• See www.ajaxpatterns.org/frameworks


Slide 21




Source: Ajaxian.com 2006 Survey


Slide 22




Things to Keep in Mind When Developing Ajax Apps

• Responsiveness• Robustness• Consistency• Simplicity• Multi-user environments• Security• JavaScript Miseries

– Performance– Memory usage

Ajax Intro

Technology

Transcript of Ajax Intro