Real-World AJAX Seminar - March 13, 2006

1
Bringing the Richness and Responsiveness of
Desktop Applications to the Web
Sahil Maliktelerik Technical Evangelist
Microsoft MVP

• Real-World AJAX Seminar - March 13, 2006

2
Who is telerik

• telerik is a leading vendor of reusable UI
  components for the Microsoft .NET Framework
• Helping developers deliver more than expected
• Industry-best products with numerous awards like
  r.a.d.editor and r.a.d.grid

3
Who is telerik (cont.)

• We implemented AJAX features in some of our
  components (treeview and combobox) even before
  this technology had a name (back in 2004)
• We called it Load On Demand

4
The Challenge of Architecture

• 70s 95 Monolithic Applications

5
The Challenge of Architecture

• 95 00 The Web Explosion

6
The Challenge of Architecture

• 00 Recently Bastardizing HTML

7
The HTML Donkey
8
Welcome AJAX

• Rich applications in Modern Browsers
• No issues with installation
• No issues with trust boundaries, Certificates,
  etc. etc.
• Built upon existing infrastructure TCP/IP, XML,
  HTTP, SSL, etc.
• No more dreaded page refreshes.

9
Candid Photo of Mr. HTML
10
CIO and IT Worker
BUT. . .
11
AJAX is Hard !!!
12
Why is AJAX hard?

• Requires extensive JavaScript skills
  client-side scripting is at the heart of AJAX
  apps
• Its like debugging multi-threaded JavaScript.
• Breaks the normal page life cycle.
• Every browser wants to do AJAX differently.
• Possible security issues (With IE).

13
Making AJAX Easy !!
14
The telerik AJAX framework
15
The telerik AJAX framework
AJAX Panel
AJAX Manager
Built-in AJAX support in data-intensive components
Auxiliary AJAX components Timer, ImageMap
16
The telerik AJAX Panel what it is

• Universal AJAX-enabling container
• Causes any ASP.NET component(s) placed inside the
  panel to start making AJAX callbacks instead of
  traditional postbacks
• The content of the Panel is updated automatically
  after the server response

AJAX Panel
17
The telerik AJAX Panel how it works

• The AJAX Panel fools the components inside it
  and makes them think that a normal postback has
  taken place.
• Neither the page nor the individual controls know
  that this is actually an AJAX request.

AJAX Panel
18
The telerik AJAX OfferingDemo
19
Did you see ... ?

• Any JavaScript?
• Any code at all?
• Any learning curve?

20
The telerik AJAX Panel benefits

• As a result you get all the benefits of AJAX
• Swift performance
• No page refreshes
• Better user experience
• Without struggling with the traditional drawbacks
  of AJAX
• Broken page life-cycle
• Form data not sent to the server
• Corrupt ViewState

AJAX Panel
21
The telerik AJAX Panel more benefits

• Due to the fact that the controls think they work
  in their natural mode (postback mode)
• Values are properly reflected on the server
• Page life-cycle is preserved
• Control ViewState is preserved
• Any JavaScript inside the Panel is preserved and
  properly executed (needed for elements with rich
  client-side functionality).

AJAX Panel
22
The telerik AJAX Panel ..
and more benefits

• You can wrap more than one page elements in 1
  panel to have them updated at once
• You can wrap whole web-pages and make them work
  in AJAX mode
• You can wrap and AJAX-enable components with rich
  client-side functionality

AJAX Panel
23
The telerik AJAX Panel Design

• The AJAX Panel affects only the content that is
  enclosed in it. In other words, you cant update
  content that is in another AJAX panel or
  elsewhere on the page.
• This is where the telerik AJAX Manager comes into
  play

AJAX Panel 1
AJAX Panel 2
AJAX Panel 3
24
The telerik AJAX Manager what is it

• Most web-sites require advanced interactivity
  between the page elements (e.g. click one element
  and update the content of another)

• Advanced web-applications (e.g. E-mail systems,
  CRM, etc.) require even more complex behavior

• Implementing such inter-activity with AJAX is a
  real nightmare and extremely time consuming.

25
The telerik AJAX Manager what is it

• Telerik AJAX Manager is a component that defines
  and controls the interconnection among page
  elements, i.e. which element updates other(s).
• This is done completely in a declarative manner
  or in design time with a convenient visual
  builder.

26
The telerik AJAX Manager how it works

1. Drop the AJAX Manager on the form and open the
   visual builder.
2. Select a page element that needs to initiate the
   AJAX request
3. Select which element(s) has to be updated.

27
The telerik AJAX ManagerDemo
28
The telerik AJAX Manager benefits

• You do not have to modify the logic of your
  application
• if you have a postback-based app you only have to
  place the AJAX manager and define the
  interconnections among the page elements
• All other benefits found in the AJAX Panel
• page life-cycle is preserved
• form data (values) are reflected on the server
• ViewState is preserved
• client scripts are preserved (you still have to
  wrap 3rd party components into AJAX Panels but
  thats easy).

29
The telerik AJAX Manager when to use

• The telerik AJAX Manager allows developers to
  build very sophisticated AJAX-enabled web
  applications, similar to Outlook Web Access
• Dont believe it? See for yourself.

30
The telerik HelpDesk Sample ApplicationDemo
31
Built-in AJAX support in other telerik components
Built-in AJAX support in data-intensive components

• Data-intensive telerik components (grid,
  combobox, treeview, etc.) have build-in AJAX
  support
• Allows you to work with huge data structures
  without degradation in performance
• Changing behavior from non-AJAX to AJAX is as
  easy as setting a property.

32
Customer spotlight Mobilis Technologies
AJAX-enabled Web Workflow Application Framework
Featuring telerik r.a.d.controls
http//www.MobilisTech.com
33
The telerik clients
34
Thank you

• Live demos and slides from this presentation
  available at
• www.telerik.com/AjaxSeminar