Developing Rich Internet Applications using AJAX and...

Developing Rich Internet Applications

using AJAX and Atlas

Adnan Farooq HashmiMVP –Windows SDKUser Group Leader, Core.NETSpeaker – INETA Pakistan www.pkblogs.com/coredotnet

Participation

VideoODEO Convergence

MINT

SIXDEGREES

SKYPE JABBER

ITUNES

GTALK

VIDEOCASTING

The Buzzzzzz

Web2.0Economy

Usability

Design

StandardizationRemixability

Focus on Simplicity

MicroformatsWeb Standards

CSS-Design

Joy of UseAJAX

The Long Tail

Affilication

WikisFolksonomy

RecommendationSocial Software

Blogs

Audio

MobilityRSS OpenAPIs

DataDriven

COLLABORATION WIDGETS

SHARINGPAGERBANK

USER CENTEREDPERPETUAL BETA

LIVELINESS

TRUST

FOAF

XFNVCAGGREGATION

IMPODCASTING

DATA INSIDE SEOGRANULARITY MODULARITY SIMPLICITY

SEMANTICXHTML ACCESSIBILITY

WIFIUMTSXML

SYNDICATIONSOAP REST RUBYONTAILS

COSTPERCLICK

TAGTAGGERTAGGLING CLOUDALICIOUS

TAGCLOUDFLOCK DELICIOUS

FLICKRSTUMBLEUPON

DIGG SQUIDOOEBAY

43THINGSNINGSOFLOW LINKEDIN

OPENBC ORKUTUPCOMING FRIENDSTERPLANZO BLOGGER

TYPEPADWORDPRESS TECHNORATI

MEASUREMAPREAD.IOLASTFMIPODDER

BIT TORRENT

CREATIVECOMMONS

VIMEOYOUTUBE

CASTPOST

GOOGLE MAPSA9 PLAZES

YAHOO MAPSTAGCLOUD

BLOGLINESNEWSGATORFEEDSTER

FEEDBURNERMYYAHOO

ROJO

AMAZONGOOGLE MAPS

GMAPS MASHUPS TECHNORATIGOOGLE NEWSBUZZTRACKER GOOGLE A9 ICEROCKETINORDER WINK

ROLLYOTREADMAPPER

PUBSUB

BASECAMP

CHALK.ITBACKPACK

REMEMBERTHEMILKTADALIST

GTD GMAILGOOGLE MAPS KIKOGOOGLE

RSSREADER GOOGLE IG UNWIELDYZIMBRA MEEBO

PROTOPAGEZOOZIO

NETVIBESLIVE.COM

FLICKRFOTOLIABLINKSALE ETSY

EBAYAMAZON MTURK

ITUNES

ADSENSE

SIMPLEBITS

STYLEGALA

CSSBEAUTY9RULES

ZENGARDEN

WASPALISTAPART

FIREFOX

MICROFORMATS.ORG

Web 2.0

Term coined in late 2004Rich User ExperienceProgrammability• The Web as a Platform• Offering content as services and APIs and not just web pages

User Experience (UX)

ResponsivenessInteractivityPersonalizationConnectedImmersive

AJAX

“Asynchronous JavaScript and XML”Term coined in April 2005Applied to web applicationsAn approach to communicate with back‐end web services

AJAX

Allows asynchronous communication with server without refreshing whole pageUses JSON & REST for communication

AJAX

CSS for StylesJavaScript for Behavior}DHTML

AJAX – XmlHttp

Originally developed by MicrosoftActiveX control inside IESend and receive data as XML (POX/REST), JSON, or plain textCan be used in any scripting language

open ( method, URL )send ( content )

JSON

Abbr. for JavaScript Object NotationLightweight protocol used in AJAX communicationMore lightweight then XML

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”}

}

Atlas

A framework for building  a newgeneration of richer, more interactive

highly personalized,standards basedweb applications

Atlas

NaukriWithoutAtlas.NETNaukriAtlas.NET

Developing with Atlas

Atlas Programming Model

Server-Centric Client-Centric

Update Panel

Control Extenders

JavaScript XML Script

Atlas – Server Centric

NaukriAtlas.NET

UI + Behavior

Input Data

Pages

UI Behavior (Managed Code)

Browser

Server Application

Presentation (HTML/CSS)

Atlas – Client Centric

NaukriAtlas.NET

a) Initia

l Renderin

g

(UI + Behavior)

Pages

UI Behavior (Managed Code)

Server Application

Browser

Presentation (HTML/CSS)

b) Data

c) Data

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

A couple of examples

Hotmail LiveLive.comPageflakes.comGoogle.com/igGoogle Spreadsheets

Getting Started with Microsoft Atlas

Select Project Template

Enter Project Name

Added by default

<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

“Atlas” Script Manager

<!–- Simple Syntax --><atlas:ScriptManager

ID=“ScriptManager1”runat=“server”EnablePartialRendering=“true” />

Allows Incremental Loading

“Atlas” Script Manager

<!–- Scripts & Services --><atlas:ScriptManager … ><Scripts>…

</Scripts><Services>

…</Services>

</atlas:ScriptManager>

JavaScript to add

Web Services to consume

“Atlas” Script Manager

<!–- Including External Scripts --><atlas:ScriptManager ID=“…” runat=“server”><Scripts>

<atlas:ScriptReference Name=“…” />

<atlas:ScriptReference Path=“xyz.js” />

</Scripts></atlas:ScriptManager>

“Atlas” Script Manager

<!–- Consuming Web Services --><atlas:ScriptManager ID=“…” runat=“server”><Services>

<atlas:ServiceReferencePath=“MyService.asmx” />

</Services></atlas:ScriptManager>

Server‐Centric Development with “Atlas” and ASP.NET

“Atlas” Server Controls

Update PanelControl Extenders• Drap‐and‐drop• Popups• Auto‐complete• Cascading dropdown lists [Country‐City]

“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

“Atlas” Server Controls

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

“Atlas” Server Controls

<atlas:Update Panel … />• Easily define updatable regions of a page• Server roundtrips become asynchronous• “Atlas” handles all infrastructure

“Atlas” Update Panel

<atlas:UpdatePanel ID=“…” runat=“server”><ContentTemplate>

<!-- This content can be dynamically updated! -><asp:Calendar ID=“cal1” runat=“server”/>

</ContentTemplate></atlas:UpdatePanel>

Update Panel

Client‐Centric Development with “Atlas”

Client‐Centric Development

Page UI loads only onceData communicated between server and browser kept to a minimumHighly responsiveUI logic created using JavaScript 

Client‐Centric Development

“Atlas”Script Framework

JavaScript (Programmatically)

XML-Script (Declaratively)

Client‐Centric Development

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

Atlas Control Extenders

Included inside Atlas Control Toolkit• AtlasControlToolkit.dll• Microsoft.AtlasControlExtender.dll

Extend existing control’s functionality using pre‐developed DHTML

More Demos…

Control ExtendersWeb PartsUI Glitz

if time permits…

Important URLs

http://www.pkblogs.com/coredotnethttp://atlas.asp.nethttp://www.programmableweb.comhttp://www.live.comhttp://www.pageflakes.comhttp://spreadsheets.google.com