ASP.NET: Future Directions Developing Rich Web Applications with “Atlas” (Part 1)

1. ASP.NET: Future Directions Developing Rich Web Applications with “Atlas” (Part 1) Shanku Niyogi PRS 312 Group Program Manager Microsoft Corporation

2. Agenda • Overview • Architecture Drilldown • Demo: Build a rich web application with “Atlas” • Networking, client-side data binding, UI behaviors, personalization • Roadmap • Part 2: Developing “Atlas” components and controls Nikhil Kothari Thursday at 11:30 - Halls C & D (Petree Hall)

3. ASP.NET “Atlas” A FRAMEWORK FOR BUILDING RICHER, MORE INTERACTIVE, MORE PERSONALIZED WEB EXPERIENCES

4. A Richer Web Experience

5. Agenda • Overview • Architecture Drilldown • Demo: Build a rich web application with “Atlas” • Networking, client databinding, UI behaviors, personalization • Roadmap • Part 2: Developing “Atlas” components and controls Nikhil Kothari Thursday at 11:30 - Halls C & D (Petree Hall)

6. “Atlas” Client Script Library Controls, Components ASP.NET “Atlas” Server Extensions App Services Bridge Component Model and UI Framework “Atlas” Client Application Services “Atlas” Server Controls Web Services Bridge Base Class Library Local Store Script Core ASP.NET 2.0 Browser Integration Page Framework, Server Controls Application Services Browser Compatibility “Atlas” Architecture HTML, Script, “Atlas” Markup “Atlas”-enabled ASP.NET Pages “Atlas” Service Proxies Web Services (ASMX or WCF) “Atlas” Client Framework and Services “Atlas” Server Framework

7. “Atlas” Client Script LibraryScript core and base class library • “Atlas” script core – a full type system for Javascript • Classes and interfaces, inheritance, virtual and abstract methods • Enumerations • Multi-cast event handlers similar to .NET • Base class library • StringBuilder, extensions to existing types • Serializers • Debugging and tracing classes • Networking

8. “Atlas” Networking • Client networking stack layered on XMLHTTP • WebRequest, WebResponse, MethodRequest classes • ASP.NET “Atlas” Web Services Bridge • Access to ASP.NET-hosted and serviced components • ASMX and WCF services, .NET objects, ASP.NET page-level services • Automatic client proxy generation • <script src=“MyService.asmx/js” /> • Integrated with ASP.NET intrinsics • Wire format: Javascript object notation { Coordinates : { X: 2.17, Y: 48.51 }, Name : "Eiffel Tower" } public class Location { public Point Coordinates; public String Name; }

9. “Atlas” Networking

10. Building Web UI with “Atlas”Components, controls, and behaviors • Reusable building blocks • Created declaratively or programmatically • Wired up through bindings and events • Manage their own lifetime • UI components • Associated with DHTML UI elements Web.Component Web.UI.Control

11. Building Web UI with “Atlas”Client-side data binding • Automatic data bindings between components Data source john User Name: Databound Controls Number of characters: 4 Transformers reshape data john_11 Alternates: 1-way or 2-way Databinding

12. Building Web UI with “Atlas”Creating and wiring up components • Programmatically… var textbox1 = new Web.UI.TextBox(document.getElement(‘Textbox1')); textbox1.initialize(); var label1 = new Web.UI.Label(document.getElement(‘Label1')); var binding1 = new Web.Binding(); binding1.set_dataContext(textbox1); binding1.set_dataPath(‘text’); binding1.set_property(‘text’); binding1.set_direction(Web.BindingDirection.In); label1.get_bindings().add(binding1); label1.initialize();

13. Building Web UI with “Atlas”Creating and wiring up components • … Declaratively (“Atlas” Declarative Script) … <script type=“text/xml-script”> <page xmlns := http://schemas.microsoft.com/xml-script/2005”> <components> <script:label targetElement=“Label1”> <bindings> <binding dataContext=“TextBox1" dataPath="text“ property="text" direction=“In”> </bindings> </script:label> <script:textBox targetElement=“TextBox1” /> </components> </page> </script> <div id="content"> <p><input type="text" id=“Textbox1" size="40" /></p> <p><span id=“Label1“ class=“MyLabel” /></p> </div>

14. Building Web UI with “Atlas”Creating and wiring up components • … Using ASP.NET server controls <atlas:ScriptManager runat=“server” id=“TextBox1” /> <atlas:TextBox runat=“server” id=“TextBox1” /> <atlas:Label runat=“server” id=“Label1” CssClass=“MyLabel”> <Bindings> <atlas:Binding DataPath=“TextBox1” Property=“Text”> </Bindings> </atlas:Label>

15. “Atlas” UI

16. Building Web UI with “Atlas”Data Editing with DataSource • Disconnected dataset-like model for Javascript • Supports batched updates • Call update to commit changes • Call select to re-select data • Optimistic concurrency • Automatically wired to DataService on server • Executes Select, Insert, Update methods on service

17. Data Editing

18. Adding Interactivity“Atlas” Behaviors • Behaviors add interactivity to any “Atlas” UI • Easily attached to a DHTML element • Built-in behaviors • Richer data presentation: tooltips, floating windows • Interactive input: autocomplete, drag and drop • Glitz: animation and visual effects • Work on all browsers

19. “Atlas” UI Behaviors

20. Agenda • Overview • Architecture Drilldown • Demo: Build a rich web application with “Atlas” • Networking, client databinding, UI behaviors, personalization • Roadmap • Part 2: Developing “Atlas” components and controls Nikhil Kothari Thursday at 11:30 - Halls C & D (Petree Hall)

21. “Atlas” Roadmap • Public developer previews and betas • http://atlas.asp.net – Atlas community site • Prototype release available now • Updates, samples, documentation on a regular basis • We want your feedback! • “Go live” Beta release sometime in 2006

22. Coming Soon: “Atlas” Wiki

23. “Atlas” RoadmapPreparing for “Atlas” • Structure your application for reuse • Separate application UI functionality into web services • Build UI components using user controls • Use CSS to style web apps • Use ASP.NET 2.0 • ASP.NET client callbacks (ICallbackEventHandler) • UI personalization • Application building-block services • Start thinking about richer web UI experiences

24. ASP.NET “Atlas” A FRAMEWORK FOR BUILDING RICHER, MORE INTERACTIVE, MORE PERSONALIZED WEB EXPERIENCES • Increased productivity • Fewer concepts, fewer lines of code • Application and UI building blocks for common scenarios • Easier to author, debug, and maintain • Clean separation of content, style, behavior, and code • Well integrated with design and development tools • Seamlessly integrated application model • Works with ASP.NET pages and server controls • Allows access to ASP.NET-hosted web services and components • Works everywhere – cross-browser, standards based

25. Community Resources • At PDC • For more information, go see • PRS420: “Atlas” Part 2 by Nikhil Kothari – Tomorrow, 11:30 • PNL06: “What’s next for the Web Platform” – Friday, 8:30 • PRSL004: “Developing gadgets for Start.com” – Friday, 12:00 • Labs: ASP.NET “Atlas” Hands-on Lab • Ask The Experts table: ASP.NET • PRS Track lounge: I’ll be there Thursday afternoon • After PDC • Check out earlier talks on conference DVD • PRS200 “Choosing the Right Presentation Technology” • PRSL002 “Case Study: How Hotmail used Atlas and ASP.NET to build a Great User Experience” • Go to http://atlas.asp.net for samples, walkthroughs, and documentation • Atlas Forums at http://atlas.asp.net/forums • Send me feedback directly to shankun@microsoft.com

26. Discussion

27. © 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.