Developing Rich Internet Applications

Size: px

Start display at page:

Download "Developing Rich Internet Applications"

Hilary Flora McCoy
5 years ago
Views:

1 Developing Rich Internet Applications using AJAX and Atlas Adnan Farooq Hashmi MVP Windows SDK User Group Leader, Core.NET Speaker INETA Pakistan

2 The Buzzzzzz TADALIST GOOGLE GOOGLE MAPS KIKO GTD GMAIL TAGTAGGER RSSREADER GOOGLE IG UNWIELDY ZIMBRA MEEBO TAGGLING CLOUDALICIOUS Focus on Simplicity PROTOPAGE TAGCLOUD ZOOZIO Wikis FLOCK DELICIOUS WIDGETS COLLABORATION NETVIBES Joy of Use STUMBLEUPON FLICKR LIVE.COM Folksonomy SHARING 43THINGS DIGG SQUIDOO PAGERBANK Usability AJAX FLICKR NING EBAY Recommendation USER CENTERED BLINKSALE FOTOLIA SOFLOW LINKEDIN FOAF ETSY PERPETUAL BETA OPENBC ORKUT Social Software SIXDEGREES The Long Tail EBAY UPCOMING FRIENDSTER XFN TRUST PLANZO BLOGGER Blogs Participation Economy AMAZON MTURK AGGREGATION TYPEPAD VC ITUNES TECHNORATI WORDPRESS Affilication Web2.0 MINT LASTFM COSTPERCLICK READ.IO ADSENSE MEASUREMAP IPODDER PODCASTING IM SKYPE GTALK JABBER Audio ODEO LIVELINESS SIMPLEBITS ITUNES Convergence DATA INSIDE SEO VIMEO BIT TORRENT Video Design STYLEGALA VIDEOCASTING GRANULARITY MODULARITY YOUTUBE WIFI SYNDICATION SIMPLICITY 9RULES CASTPOST Mobility UMTS Remixability SOAP CSSBEAUTY REST RUBYONTAILS GOOGLE MAPS XML CREATIVECOMMONS A9 PLAZES RSS OpenAPIs Standardization ZENGARDEN YAHOO MAPS TAGCLOUD BLOGLINES SEMANTIC CSS-Design NEWSGATOR AMAZON DataDriven XHTML ACCESSIBILITY FEEDSTER WASP GOOGLE MAPS FEEDBURNER MYYAHOO ROJO GOOGLE NEWS BUZZTRACKER CHALK.IT GMAPS MASHUPS TECHNORATI GOOGLE A9 ICEROCKET INORDER WINK ROLLYO TREADMAPPER PUBSUB BASECAMP BACKPACK REMEMBERTHEMILK Web Standards Microformats ALISTAPART FIREFOX MICROFORMATS.ORG

3 Web 2.0 Term coined in late 2004 Rich User Experience Programmability The Web as a Platform Offering content as services and APIs and not just web pages

4 User Experience (UX) Responsiveness Interactivity Personalization Connected Immersive

5 AJAX Asynchronous JavaScript and XML Term coined in April 2005 Applied to web applications An approach to communicate with back end web services

6 AJAX Allows asynchronous communication with server without refreshing whole page Uses JSON & REST for communication

7 AJAX CSS for Styles JavaScript for Behavior} DHTML

8 AJAX XmlHttp Originally developed by Microsoft ActiveX control inside IE Send and receive data as XML (POX/REST), JSON, or plain text Can be used in any scripting language open ( method, URL ) send ( content )

9 JSON Abbr. for JavaScript Object Notation Lightweight protocol used in AJAX communication More lightweight then XML

10 JSON Example class Conference { string Title; string Venue; } <?xml version="1.0"?> <Conference> <Title>PDC 2006</Title> <Venue>Pearl Continental</Venue> </Conference> { Conference { Title : PDC 2006, Venue : Pearl Continental } }

11 Atlas A framework for building a new generation of richer, more interactive highly personalized, standards based web applications

12 Atlas NaukriWithoutAtlas.NET NaukriAtlas.NET

13 Developing with Atlas Atlas Programming Model Server-Centric Client-Centric Update Panel Control Extenders JavaScript XML Script

14 Atlas Server Centric Server Application Browser Presentation (HTML/CSS) UI + Behavior Input Data Pages UI Behavior (Managed Code) NaukriAtlas.NET

15 Atlas Client Centric Browser Presentation (HTML/CSS) a) Initial Rendering (UI + Behavior) c) Data b) Data Server Application Pages UI Behavior (Managed Code) NaukriAtlas.NET

16 Server v/s Client Centric Server Centric Web Apps Work with existing Server Application Model Keep core UI/application logic on server Improve latency, interactivity, personalization Client Centric Browser Apps Fully exploit DHTML in presentation tier Use AJAX for data, services, composition Enable new immersive experience

17 A couple of examples Hotmail Live Live.com Pageflakes.com Google.com/ig Google Spreadsheets

18 Getting Started with Microsoft Atlas

20 Select Project Template Enter Project Name

21 Added by default

22 <atlas: ScriptManager /> Added to.aspx file(s) Atlas Script Manager Server Control to handle all script callbacks Allows developers to specify Script files to Include in the webpage Web Services to Consume

23 Atlas Script Manager <! - Simple Syntax --> <atlas:scriptmanager ID= ScriptManager1 runat= server EnablePartialRendering= true /> Allows Incremental Loading

24 Atlas Script Manager <! - Scripts & Services --> <atlas:scriptmanager > <Scripts> </Scripts> <Services> </Services> </atlas:scriptmanager> JavaScript to add Web Services to consume

25 Atlas Script Manager <! - Including External Scripts --> <atlas:scriptmanager ID= runat= server > <Scripts> <atlas:scriptreference Name= /> <atlas:scriptreference Path= xyz.js /> </Scripts> </atlas:scriptmanager>

26 Atlas Script Manager <! - Consuming Web Services --> <atlas:scriptmanager ID= runat= server > <Services> <atlas:servicereference Path= MyService.asmx /> </Services> </atlas:scriptmanager>

27 Server Centric Development with Atlas and ASP.NET

28 Atlas Server Controls Update Panel Control Extenders Drap and drop Popups Auto complete Cascading dropdown lists [Country City]

29 Atlas Server Controls Easy to use in ASP.NET Application UI and core logic still runs on server No need to master JavaScript and Asynchronous programming AJAX enable existing ASP.NET sites

30 Atlas Server Controls Uses AJAX in the background to reduce full roundtrips Incremental UI updates Examples: data navigation and editing, form validation, auto refresh

31 Atlas Server Controls <atlas:update Panel /> Easily define updatable regions of a page Server roundtrips become asynchronous Atlas handles all infrastructure

32 Atlas Update Panel <atlas:updatepanel ID= runat= server > <ContentTemplate> <!-- This content can be dynamically updated! -> <asp:calendar ID= cal1 runat= server /> </ContentTemplate> </atlas:updatepanel>

33 Update Panel

34 Client Centric Development with Atlas

35 Client Centric Development Page UI loads only once Data communicated between server and browser kept to a minimum Highly responsive UI logic created using JavaScript

36 Client Centric Development Atlas Script Framework JavaScript (Programmatically) XML-Script (Declaratively)

37 Client Centric Development

38 More Atlas Server Controls Atlas Client Libraries Reusable piece of interactive functionality Attached to HTML UI declaratively or in code Examples Drag and drop Popups Auto complete Easily extensible

39 Atlas Control Extenders Included inside Atlas Control Toolkit AtlasControlToolkit.dll Microsoft.AtlasControlExtender.dll Extend existing control s functionality using pre developed DHTML

40 More Demos Control Extenders Web Parts UI Glitz if time permits

41 Important URLs

WIMS 2.0: Converging IMS and Web 2.0 New multimedia services for telecom networks

WIMS 2.0: Converging IMS and Web 2.0 New multimedia services for telecom networks, REFERENCE ARCHITECTURES FOR NEW NETWORKS PLATFORMS David Lozano, David Moro UNIVERSIDAD POLITÉCNICA DE MADRID, DEPARTEMENT