Developing a Better User Experience with "Atlas"

  • 498 views
Uploaded on

This session is a developer overview of "Atlas", Microsoft's new cross-platform/cross-browser framework for building rich, client-centric AJAX-style Web applications. Learn about data-binding, …

This session is a developer overview of "Atlas", Microsoft's new cross-platform/cross-browser framework for building rich, client-centric AJAX-style Web applications. Learn about data-binding, modernized object-oriented JavaScript techniques, and designing interactive UI, as you follow along through the construction of a mash-up.

More in: Technology
  • 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
498
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
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

Transcript

  • 1. Developing A Better User Experience With "Atlas" Shanku Niyogi Product Unit Manager UI Framework and Services Microsoft Corporation NGW014
  • 2. “Atlas” At MIX
    • Sessions
      • Monday 3:00 – NGW014 - Developing a Better User Experience with “Atlas”
      • Tuesday 1:30 – NGW052 - Designing a Better User Experience with AJAX and “Atlas”
      • Tuesday 3:00 – NGW038 - Overview of Live.com Gadgets
      • Wednesday 10:00 – NGW002 – Building Components and Services for the Programmable Web
    • Labs @ the Sandbox
  • 3. Better Web User Experiences
    • Responsive to users
    • Naturally interactive
    • Personalized for users
    • Connected to the web
    • Immersive beyond the site
  • 4. “Atlas”
    • Easy-to-use, high-productivity framework
    • Full integration with server programming model
    • World-class tools for AJAX-style applications
    • Cross-platform, works on all modern browsers
    A framework for building a new generation of richer , more interactive , highly personalized standards based Web applications
  • 5. Developing With “Atlas” Server-centric application model Browser Presentation (HTML/CSS) ASP.NET Application Services Page Framework, Server Controls “ Atlas” Script Framework C lient Application Services Component/UI Framework, Controls Server Application Pages UI Behavior (Managed Code) Input Data Updated UI + Behavior Initial Rendering (UI + Behavior)
  • 6. Developing With “Atlas” Client-centric application model Browser Presentation (HTML/CSS) “ Atlas” Service Proxies UI Behavior (Script) ASP.NET Application Services Page Framework, Server Controls “ Atlas” Script Framework Client Application Services Component/UI Framework, Controls Server Application Pages UI Behavior (Managed Code) Initial Rendering (UI + Behavior) Data Data
  • 7. Server Or Client Centric?
    • Server-centric web sites and apps
    • Work with existing server application model
    • Keep core UI/application logic on server
    • Improve latency, interactivity, personalization
    • Client-centric browser applications
    • Fully exploit DHTML in presentation tier
    • Use AJAX for data, services, composition
    • Enable new immersive experiences
    • “ Atlas” provides a great framework for both
  • 8. Server-Centric Development With “Atlas” And ASP.NET
  • 9. “Atlas” Server Controls
    • Easily build rich experiences with ASP.NET
    • Application UI and core logic still runs on server
    • Avoid need to master JavaScript and async programming
    • Use AJAX techniques to reduce full roundtrips
    • Enable incremental page UI updates
    • Examples: data navigation and editing, form validation, auto refresh
    • Fall back for down-level browsers
    • Richer interactivity for existing ASP.NET controls
    • Enrich the client UI experience of web applications
    • Examples: auto-completion, drag-and-drop, tooltips
  • 10. “Atlas” Server Controls Reducing full roundtrips
    • <Atlas:UpdatePanel> control
      • Easily define “updatable” regions of a page
      • Server roundtrips become asynchronous
      • “ Atlas” handles all the infrastructure
        • <atlas:UpdatePanel id=“u1” runat=“server”>
        • <ContentTemplate>
        • <!-- This content can be dynamically updated! ->
        • <asp:Calendar id=“cal1” runat=“server”/>
        • <ContentTemplate>
        • </atlas:UpdatePanel>
  • 11. Update Panels
  • 12. “Atlas” Server Controls Adding interactivity
    • “ Atlas” client behaviors
      • Reusable piece of interactive functionality
      • Attach to HTML UI declaratively or in code
      • Examples:
        • Drag-and-drop
        • Tooltips
        • Popups
        • Auto-complete
      • Easily extend or write your own in Javascript
  • 13. “Atlas” Server Controls Adding interactivity
    • “ Atlas” control extenders
      • Extend ASP.NET controls with “Atlas” behaviors
      • Encapsulate both client and server behavior
      • Same familiar programming model as ASP.NET server controls
      • <asp:TextBox runat=&quot;server&quot; ID=&quot;TextBox1&quot; />
      • <atlas:AutoCompleteExtender runat=&quot;server&quot; ID=&quot;AC1&quot;>
      • <atlas:AutoCompleteProperties
      • TargetControlID=&quot;TextBox1&quot;
      • ServicePath=&quot;AutoComplete.asmx“
      • ServiceMethod=&quot;GetWords&quot; Enabled=&quot;true&quot; />
      • </atlas:AutoCompleteExtender>
  • 14. Control Extenders
  • 15. Client-Centric Development With “Atlas”
  • 16. “Atlas” Script Framework
    • Scenarios
    • Mash-up and composite applications and sites
    • Components and Gadgets (Live.com, Windows Sidebar )
    • Powerful script framework
    • Rich type system and class library for Javascript
    • Component model and UI framework
    • Rich client-side data access and databinding
    • Easily integrated with server application model
    • Easily consume web services from browser
    • Script access to ASP.NET application services
    • Server-side bridge to reuse 3 rd party services
  • 17. “Atlas” Script Framework Networking
    • A networking stack for asynchronous services
      • High-level classes for requests/responses
      • Customizable behavior – batching, prioritization, queuing
      • Pluggable data format and wire protocol
        • Uses JSON (JavaScript Object Notation) and REST by default
    • Easy access to server-based services
      • Easily call server-hosted web services
      • “ Atlas” takes care of proxy generation, plumbing, serialization
      • Automatic serialization of .NET types to and from JavaScript
    • Integrated with ASP.NET application services
      • Autentication, authorization, session state, caching
  • 18. Networking
  • 19. “Atlas” Script Framework
  • 20. “Atlas” Script Framework Component and control model
    • Enables rich encapsulation and reuse
      • For UI behavior
      • For non-visual components – data, services
      • Rich client-side databinding and validation
    • Clean developer/designer workflow
      • UI defined using standard XHTML and CSS
      • Page behavior defined and attached separately
      • “ Atlas” components and controls can be declared procedurally or declaratively
  • 21. “Atlas” Script Framework Component and control model
    • Search for: <input id=“Query&quot; type=&quot;text&quot; />
    • <div id=&quot;completionList&quot;></div>
    • ........
    • function doLoad() {
    • var auto1 = new Web.UI.AutoCompleteBehavior();
    • auto1.set_completionList($(&quot;completionList&quot;));
    • auto1.set_serviceURL(&quot;AutoCompleteService. asmx &quot;);
    • auto1.set_serviceMethod(&quot;GetCompletionList&quot;);
    • auto1.set_completionSetCount(15);
    • auto1.set_completionInterval(500);
    • var txt1 = new Web.UI.TextBox( document.getElementById (‘ Query '));
    • txt1 .get_behaviors().add(auto1);
    • txt1 .initialize();
    • auto1.initialize();
    • }
  • 22. “Atlas” Script Framework Component and control model
    • Search for: <input id=“Query&quot; type=&quot;text&quot; />
    • <div id=&quot;completionList&quot;></div>
    • ........
    • <script type=&quot;text/xml-script&quot;>
    • <page xmlns:script=&quot;http://schemas.microsoft.com/xml-script/2005&quot;>
    • <components>
    • <textBox id=“Query&quot;>
    • <behaviors>
    • <autoComplete
    • completionList=&quot;completionList&quot;
    • serviceURL=&quot;AutoCompleteService.asmx&quot;
    • serviceMethod=&quot;GetWordList&quot;
    • completionSetCount=&quot;15&quot;
    • completionInterval=&quot;500&quot; />
    • </behaviors>
    • </textBox>
    • </components>
    • </page>
    • </script>
  • 23. “Atlas” Script Framework Client data
    • Enable rich client-side data scenarios
      • Rich data navigation and visualization
      • Batched data editing
    • Data components
      • Disconnected dataset for Javascript
      • Filtering, sorting, batched updates
      • Integrated with ASP.NET data service
    • ListView client control
      • Present rich data using HTML templates
  • 24. Client Components And Data
  • 25. “Atlas” Script Framework Using “Atlas” without ASP.NET
  • 26. “Atlas” Script Framework Using “Atlas” without ASP.NET
    • Use “Atlas” client script with any server
      • Get the client script files from Program Files directory after installation
    • What ASP.NET provides
      • Great integration with server-centric UI and programming model
      • Browser detection
      • Access to rich set of application services
      • Web services, proxies, and bridges
  • 27. Using “Atlas” With PHP
  • 28. How Do I Get Started?
    • “ Atlas” Community Technology Preview
      • Releases every 6-8 weeks
      • Installs on Visual Web Developer 2005 and ASP.NET 2.0 (both available for free)
      • Go Live CTP – build live sites with “Atlas” today!
    • “ Atlas” community site: http://atlas.asp.net
      • Download the latest bits
      • Tutorials, samples, forums, resources
      • ASP.NET “Atlas” Control Extender Kit and Samples
      • Source code from MIX sessions
    • We want your feedback!
  • 29. Questions?
  • 30.  
  • 31. © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.