Slide 1
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
873
On Slideshare
873
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • (better screenshots tomorrow) Aiming for improving the performance and user experience of data-intensive components. Later AJAX functionality added to the datagrid product. These early developments allowed our customers to enjoy the benefits of the AJAX without knowing or understanding its essence. With the growing adoption of AJAX we outlined a complete product strategy for the development of software components that will minimize the intricacies of AJAX development and allow regular developers to create highly interactive and responsive web-applications.
  • Applications were monolithic. Mainframes introduced the concept of network based architecture, desktops adapted that later on. But still applications were monolithic
  • Multiple clients, multiple web servers – Welcome WWW
  • P2P applications, richer demands on older infrastructure, IE became the standard browser, but The HTML Donkey which was invented before I was born was still the backbone of all this complexity.
  • A wide-spread opinion is that AJAX development is quite difficult. And this is true. Why? – list and talk about a few reasons.
  • Demo 1: telerik AJAX Panel - switch PowerPoint to an opened browser. Show a sample page with an asp.calendar and a textbox. Click a date - the textbox is populated with the selected date (with postback) - switch to an opened VS project (in design mode). Drag an AJAX Panel on the page. Drag the calendar and the textbox in the Panel. Build and run the app. - switch to the browser and click the calendar. The textbox is populated with AJAX.   Notes: I want to have this calendar and textbox with Outlook skin. (see the attached screenshot 1) This will be preset. The Panel will have also a preset (default) loading template that will show a "Loading..." message and/or animated GIF with no code required. I think this demo should take no more than 3 minutes although I will time it exactly once I have the app set-up by the dev team (should be tomorrow).
  • Demo 2: telerik AJAX Manager - switch PowerPoint to an opened browser. Show a sample page with a telerik treeview, grid, and preview area (DIV or something). It should look similar (but simpler) to the HelpDesk. Default Outlook skin as well. (see the attached screenshot 2) - click a treeview node - the grid and preview area will be reloaded (with postback). Click a grid item - the preview area only will be reloaded. - switch to an opened VS project (in design mode). Drag an AJAX Manager on the page. Drag a LoadingTemplate control on the Page. Open the AJAX Manager visual builder. - (see screenshot 3) From the builder dialog select the treeview as the initiator of the callback, then select the grid and the DIV (preview area) as areas that need to be updated. - Then select the Grid as as a second initiator of callback. Select the DIV as an area that needs to be updated. Close the builder and run the app. - Switch to the browser. Click a treeview node - the grid and preview area will be reloaded (with AJAX this time). Click a grid item - the preview area only will be reloaded with AJAX.   Notes: This demo should take about 5 minutes. Again it does not require a single line of code - just drag and drops and wizards so it should not bore non-ASP.NET attendees. It should look like the helpDesk. This way, at the end when we show the actual HelpDesk it will look like a natural evolution from the previous 2 demos, as they look like parts of the HelpDesk. I guess this will make the easy implementation of the HelpDesk much more believable.
  • Demo 3: telerik HelpDesk sample application - this demo should not include any VS development - just a browser demo. - switch to the browser and briefly talk about what people see on the screen - a sample support/helpdesk system. It has an outlook Look-and-Feel and includes most of the telerik UI components (datagrid, panelbar, treeview, menu, tab, etc - just hover with the mouse over these elements. - then make 5-8 clicks showing that stuff gets updated entirely with AJAX. Don't dig further explaining how it was made or what exactly is the business logic of the app.   Notes: this demo should take about 2-3 minutes. It will be just a show-off and should not include technical details.
  • Lets brand this slide better.

Transcript

  • 1. Real-World AJAX Seminar - March 13, 2006 Bringing the Richness and Responsiveness of Desktop Applications to the Web Sahil Malik telerik Technical Evangelist Microsoft MVP
  • 2. Who is telerik
    • t elerik 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.
    • 70s – 95 – Monolithic Applications
    The Challenge of Architecture CIO IT Worker
  • 5.
    • 95 – 00 – The Web Explosion
    The Challenge of Architecture CIO IT Worker
  • 6.
    • 00 – Recently – Bastardizing HTML
    The Challenge of Architecture CIO and IT Worker
  • 7. The HTML Donkey The HTML Donkey Today’s Applications Customer + Management + IT Workers
  • 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
      • It’s 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 Built-in AJAX support in data-intensive components AJAX Panel AJAX Manager 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 Offering Demo
  • 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 can’t 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.
    Click this To update this Click this To update this ...and this Click this To update this
  • 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.
    Click this To update this ...and this
  • 26. The telerik AJAX Manager – how it works
    • Drop the AJAX Manager on the form and open the visual builder.
    • Select a page element that needs to initiate the AJAX request
    • Select which element(s) has to be updated.
    1 1 2 2 3 3
  • 27. The telerik AJAX Manager Demo
  • 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 that’s easy).
    Click this To update this
  • 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
    • Don’t believe it? See for yourself.
  • 30. The telerik HelpDesk Sample Application Demo
  • 31. Built-in AJAX support in other telerik 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.
    Built-in AJAX support in data-intensive components
  • 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