Slide 1: Atlas: AJAX Programming for the .NET 2.0 Framework .NET Webinar Series May 2006 Presented by Jason Agostoni .NET Architect jagostoni@ceiamerica.com
Slide 2: Introductions  Ryan Baker (rbaker@ceiamerica.com) – Microsoft Alliance Manager for CEI  Jason Agostoni (jagostoni@ceiamerica.com) – .NET Architect for CEI 2 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 3: .NET Webinar Series 2006 December 05 January 06 Refactoring Code in Visual Studio 2005 December 15, 2005 Visual Studio 2005 Developer Productivity Enhancements January 19, 2006 February 06 Presenting BizTalk Server 2006 February 16, 2006 March 06 April 06 Windows Workflow Services March 16, 2006 Unit Testing & Code Analysis in Visual Studio 2005 April 20, 2006 May 06 May 18, 2006 Atlas: AJAX programming for the .NET 2.0 Framework 3 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 4: CEI’s Microsoft Practice  Microsoft Gold Certified Partner – Core focus on .NET application development, EAI with BizTalk, SharePoint Portal Server 2003 customizations, and workflow implementations  Delivery practice CMMI L5 (level 5) assessed – Project and management processes – Development and quality teams – Working on eSCM certifications  All project managers are PMI certified as Project Management Professionals (PMP)  All Microsoft architects are certified MCAD or MCSD  Have worked with over 60% of the Fortune 50 4 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 5: Atlas: AJAX Programming for the .NET 2.0 Framework
Slide 6: Atlas/AJAX for .NET 2.0 The Agenda  AJAX: – Defined, Intent, Demonstration, Issues  Atlas: – Defined, Business Value, Requirements – Architecture: Client-Side, Server-Side – Demonstrations  Wrap-Up  Questions & Answers 6 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 7: AJAX
Slide 8: Atlas/AJAX for .NET 2.0 AJAX: Defined  Acronym: Asynchronous Javascript And XML  Technique: Creating highly interactive web applications – GMail, Flickr, Digg.com  Not a technology or platform, rather: – A collection of technologies: • DOM/DHTML, XmlHTTPRequest, XML,JavaScript – A methodology: • “Asynchronously retrieving data from web services using JS”  Independent of server technology – No need for ASP.Net, JSP, etc.  No specific XML Schema or Technology – REST vs. SOAP 8 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 9: Atlas/AJAX for .NET 2.0 AJAX: Intent  Web applications that behave more like rich-client apps  Increase Usability: – Easier to use – less “clicking” more “doing” – Familiar – more like “office” applications  Increase Speed: – Smaller “chunks” of data – No “round-trips”  More Interactive: – Advanced UIs (DHTML): drag/drop, context menus, shorcuts – Better visual feedback 9 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 10: Atlas/AJAX for .NET 2.0 AJAX: Intent  Replace rich-client applications – Thin-client approach – No dependencies (other than the browser, of course!) – Zero install (browser)  Replace “clunky” web applications – Low client satisfaction • “It’s slow!”…“The old way was better!”…”I miss Excel!” • “What’s with all the flashing?” – Balance between server and client resources • Memory • Network • CPU 10 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 11: Atlas/AJAX for .NET 2.0 AJAX: Evolution  Static content – Very fast … very boring!  Full round-trips – Slow, flashing, maintaining state, the “back” button  Hidden Frame – Faster, inconsistent architecture, return of the “back” button  Hidden IFrame – Initial browser compatibility problems, same issues as above  DHTML/”Heavy” JavaScript – “Remote Scripting”, Portable data – Richer client experience, trying to make a rich-client out of a browser technology 11 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 12: AJAX: A quick look!
Slide 13: Atlas/AJAX for .NET 2.0 AJAX: Issues  Browser compatibilities: IE (ActiveX), Others (built-in)  JavaScript must be enabled  “Roll your own…” – Plumbing: e.g. web services, data – State management  Handle your own visual feedback – Network latency, etc.  DOM/DHTML not 100% cross-browser – … it IS much better than before – … workarounds are easy if you START that way 13 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 14: Enter: Atlas
Slide 15: Atlas/AJAX for .NET 2.0 Enter: Atlas  Framework for encapsulating AJAX – Reduces complexity by handling: • Plumbing • Browser compatibility • Client framework – Adds server controls to leverage client framework • Reduces the need to learn the client-side APIs – Integrated with Visual Studio 2005 • Compiled assemblies • Project template • Sample applications – Not JUST for ASP.Net • Client framework independent of server framework 15 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 16: Atlas/AJAX for .NET 2.0 Atlas: Client-Side Improvements  Declarative programming model (XML)  Familiar object-oriented development – Type system, Namespaces, Events  Cross-browser – DOM/DHTML, XmlHTTPRequest vs. ActiveX XMLHTTP  Components/Controls: functionality for common behaviors – Drag/drop, auto-complete, data binding  Remote procedure/service calls – Encapsulates calling remote methods/services, callbacks, XmlHttp 16 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 17: Atlas/AJAX for .NET 2.0 Atlas: Server-side Improvements  Declarative programming model  Server controls which “emit” client-side Atlas script – Correspond closely to ASP.Net server controls – Use the same IDE designer as for ASP.Net controls – No need to learn the client-side API  Server controls to handle client-side behaviors – Hover, Click, Popup, AutoComplete  UpdatePanel Server control – Partial-page updates for a “stock” ASP.Net application  Web-services for … – Personalization, profiles and membership, roles, global-/local-ization 17 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 18: Quick Atlas Demo
Slide 19: Atlas/AJAX for .NET 2.0 Atlas: Requirements  Required – – – – Atlas Framework: http://atlas.asp.net Web browser Text editor Documentation: http://atlas.asp.net/docs/  Recommended – Visual Studio 2005/.NET Framework 2.0 – ASP.NET web server (IIS, Cassini) – Visual Studio Content (.VSI or via the .MSI): • JavaScript Client Library, Runtime (assembly), Project template  Optional – Atlas sample projects/Quick Starts 19 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 20: Atlas: On the client
Slide 21: Atlas/AJAX for .NET 2.0 Atlas: Client-side Declarative Programming  Setup bindings between client-side controls and: – Other controls, web services (WSE, ASMX), data sources  Create your HTML form using your favorite editor/designer  XML declarative syntax separates presentation and logic  No JavaScript coding required – Everything that can be done declaratively can be done via the API Form: <input id=“MyTextBox” type=“text” /> <input id=“MyButton” type=“button” /> Declarative XML: <components> <textBox id=“MyTextBox” /> <button id=“MyButton”> <click> <setProperty target=“MyTextBox” property=“text” value=“clicked” /> </click> </button> </components> 21 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 22: Atlas/AJAX for .NET 2.0 Atlas: Client-side Scripting  Same features as Declaratve XML  Adds advanced features to JavaScript: – – – – Similar O-O model to ASP.NET Server code Namespaces Types Events ScriptManager: <Services> <atlas:ServiceReference Path=“MyService.asmx” Type=“text/javascript” /> </Services> JavaScript: function callMyService() { ServiceNS.MyService.WebMethod(params…, MyCallbackFunction); } function MyCallBackFunction(result) { … = result; }  Sys namespace: – Actions, Bindings, Events  Sys.UI namespace: – Wrapper controls (Button, TextBox…) – Behaviors (Click, AutoComplete …) 22 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 23: Atlas/AJAX for .NET 2.0 Atlas: Client-side “Sugar”  Behaviors: Popup, Hover, Drag/Drop …  Validators: Required, Type, Range, RegEx, Custom  Combining “behaviors” for some UI glitz – Ex: Hover and PopUp Declarative: <control …><behaviors> <popupBehavior id=“…” parentElement=“…” positioningMode=“Absolute|Center|BottomLeft|BottomRight|TopLeft|TopRight” x=“0” y=“0” /> <hoverBehavior hoverElement=“…”> <bindings> … </bindings> <hover> … action … </hover> <unhover> … action … </unhover> </hoverBehavior> </behaviors></control> JavaScript API: pb = new Sys.UI.PopupBehavior(); pb.id = …; pb.parentElement=…; hb = new Sys.UI.HoverBehavior(); hb.hoverElement = …; 23 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 24: Client-Side Atlas
Slide 25: Atlas: On the server
Slide 26: Atlas/AJAX for .NET 2.0 Atlas: Server-Side built-in services  Built-in Web Services and Client-Side APIs for: – Extend ASP.NET 2.0 Services – Forms authentication • Sys.Services.AuthenticationService - validateUser, login, logout – Profile Data • Sys.Services.Profile, Sys.Profile class - Sys.Profile.properties.FirstName • Profile control • Can bind data declaratively or via JavaScript – Others (not fully documented): • Personalization • Globalization/Culture 26 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 27: Atlas/AJAX for .NET 2.0 Atlas: Server-side partial rendering  Create a “stock” ASP.NET page  “Wrap” certain controls in an Atlas UpdatePanel  Full post-back but only that section is re-rendered  Benefits: – Low-friction modification! – Reduces “flashing” – Reduces amount of rendering (data and drawing) – More responsive UI <atlas:ScriptManager ID="TheScriptManager" EnablePartialRendering="true" runat="server"/> <atlas:UpdatePanel ID=“…“ runat="server" Mode="Always|Conditional" RenderMode="Block|Inline"> <Triggers> <ControlValueTrigger ControlID="string" PropertyName="string"/> <ControlEventTrigger ControlID="string" EventName="string"/> </Triggers> <ContentTemplate> … ASP.NET Server Markup … </ContentTemplate> </atlas:UpdatePanel> 27 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 28: Atlas/AJAX for .NET 2.0 Atlas: Server-side control extenders  Add pre-developed client-script behaviors to server controls  AutoCompleteExtender – Adds auto complete to a TextBox (Ex. Google Suggest) – Uses a web service to retrieve matching data <atlas:AutoCompleteExtender  DragOverlayExtender – Adds drag/drop to server controls – Can interface with Profile service > ID="string" MinimumPrefixLength="3" runat="server" ServiceMethod="string" ServicePath="string" <atlas:AutoCompleteProperties Enabled="true|false" MinimumPrefixLength="" ServiceMethod="string" ServicePath="string" TargetControlID="string" /> </atlas:AutoCompleteExtender>  TimerControl – PostBacks at regular intervals – Fires server-side “Tick” event 28 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 29: Server-Side Atlas
Slide 30: Wrap-Up
Slide 31: Atlas/AJAX for .NET 2.0 Atlas: Implications  Security: Same as JavaScript policies – Can only access resources on originating server (http) – Atlas provides web service “bridge” via .asbx  Learning Curve: Depends…. – Server-side controls: There is little to learn – Client-side APIs: Need to learn framework – Declarative  Release Schedule: April CTP – Currently has a GO-LIVE license – No firm commercial release date but Q3/Q4 seems probable – Part of ASP.NET 3 31 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 32: Atlas/AJAX for .NET 2.0 Atlas: Business Case  Potential cost savings – – – – – Handles complexity of a rich web UI Better user experience = Less “guessing” and re-work Fewer server resources Same savings as other web applications: think thin-client It’s Free  Strategic – “Everybody’s doing it” – New trend in Web 2.0 – Will become part of ASP.NET 3 – Moves thought-process toward SOA 32 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.
Slide 33: More Information CEI’s Mentoring Programs Contact rbaker@ceiamerica.com for details Atlas Home http://atlas.asp.net/
Slide 34: Thank You! Questions and Answers
Slide 35: .NET Webinar Series 2006 December 05 January 06 Refactoring Code in Visual Studio 2005 December 15, 2005 Visual Studio 2005 Developer Productivity Enhancements January 19, 2006 February 06 Presenting BizTalk Server 2006 February 16, 2006 March 06 April 06 Windows Workflow Services March 16, 2006 Unit Testing & Code Analysis in Visual Studio 2005 April 20, 2006 May 06 May 18, 2006 Atlas: AJAX programming for the .NET 2.0 Framework 35 For Discussion Purposes Only | © 2005 Computer Enterprises, Inc.