Web 2.0 Web 2.0 and AJAX and AJAX

Soetam RizkySoetam Rizky

Mimbar Ilmiah Mimbar Ilmiah 24 Januari 200724 Januari 2007

Web 2.0 ?

Web 2.0 ?

Web 2.0: “The Web as platform”Web 2.0: “The Web as platform”

Social Software:Social Software:Services for the ‘World Live Web’ Services for the ‘World Live Web’

Processes: human-technologyProcesses: human-technology

(cyber)Social interactions(cyber)Social interactions

Web 2.0 ?

Tim O’Reilly characteristics :• Web as platform• Harnessing collective intelligence• Primacy of data (sources)• Continuous maintenance/improvement • Lightweight programming models• SW above the level of single device• Rich user experiences

Web 2.0 ?

“Web 1.0” “Web 2.0”DoubleClick Google AdSenseOfoto FlickrMp3 NapsterBritannica Online WikipediaEvite Upcoming.org,

EVDBDirectories (taxonomy)

Tagging (folksonomy)

Personal websites BloggingStickiness Syndication

Web 2.0 ?

• Freeing of data--allowing it to be exposed, discovered and manipulated in a variety of ways distinct from the purpose of the application originally used to gain access

• Will not necessarily require new technologies (except in the Library environment)

Web 2.0 ?• Web Services

– SOAP (Simple Object Access Protocol)– REST (Representational State Transfer)– Data Representations : XML

• Organic web services– Ajax (Javascript and XML)

• Think syndication, not coordination• Design for hackability and

remixability

Web 2.0 ?

Web 2.0 ? Sample : flickr.com• On February 10th, 2004, Flickr was

launched at the Emerging Technology Conference

• On February, 2005 :– Over 2 million users– Over 93 million photos– 368 TB of hard disk space (376,832 GB)

• Another sample : myspace.com, the biggest and most crowded site nowadays

Web 2.0 ?

•Collaboration•Aggregation

– Use the data you have– Create new avenues of exploration– Present new views on old information

•Open APIs•Open content

Web 2.0 ?

• Data is more abundant and centralized.

• “Google may know where you are.”• Privacy erodes slowly.• Global, legal, political, social,

cultural angles.• Recent development examples:

– federal judge intends to require Google to turn over some search data (3/14/06).

– Google’s censor search results in China.– MySpace.com: ground for predators.

Web 2.0 !

Web 2.0 !

AJAX ?

AJAX ?

AJAX ?

Adaptive Path – Jesse James GarrettEssay published on Adaptive Path web site on 18 Feb 2005

• Asynchronous JavaScript + XML• A term used by Adaptive Path when

describing the approach to clients

http://www.adaptivepath.com/publications/essays/archives/000385.php

AJAX ?• Send an receive only the data you

need– Think chatty, not chunky

• Only update portions of the page that need to be updated

• Asynchronous, so users can continue to work while the page is updated, and more data is fetched

AJAX ?Not a technology…its several

• Standards-based presentation using XHTML and CSS

• Dynamic display and interaction using the Document Object Model (DOM)

• Data interchange and manipulation using XML and XSLT … or JSON

• Asynchronous data retrieval using XMLHttpRequest

• And Javascript binding everything together

AJAX ?

• No Javascript IDE Intellisense.• Bookmarking.• Back Button.• Downlevel browsers.• Debugging Javascript.• Doing too much at the client.

– I’ll just save these 50,000 records on the client and not have to go back to the server for the next page of records…………..

Before AJAX

• Dirty Web Pages• Too many Server Postbacks• Plug ins needed for interactive

experience

After AJAX

• Nice and Clean• Rich User Interfaces• Fewer “Full Page” Postbacks

ASP .NET AJAX ?

A FRAMEWORK FOR BUILDING RICHER, A FRAMEWORK FOR BUILDING RICHER, MORE INTERACTIVE, MORE MORE INTERACTIVE, MORE

PERSONALIZED WEB EXPERIENCESPERSONALIZED WEB EXPERIENCES

ASP .NET AJAX ?

• Formerly known as ATLAS• First public preview released

September 2005 Early release to solicit feedback and comments

• Changed to ASP .NET AJAX since September 2006

• Will be integrated with Visual Studio 2008

ASP .NET AJAX ?

• Framework that integrates client scripts, AJAX and ASP.NET 2.0 to provide rich client based web pages, which includes:– Client (JavaScript) Libraries– Server Controls– Client Control Toolkit

• Helps eliminate much of the tedious client side coding necessary to create AJAX type applications.

ASP .NET AJAX ?• 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

Server-Centric Programming Model

ASP.NET

Application Services

Page Framework,

Server Controls

Atlas Script FrameworkClient

Application Services

Component/UIFramework,

Controls

Browser

PresentationPresentation(HTML/CSS)(HTML/CSS)

ASP.NET Application

PagesPages

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

Input Data

Updated UI + Behavior

Initial Rendering (UI + Behavior)

Client-Centric Programming Model

Browser

PresentationPresentation(HTML/CSS)(HTML/CSS)

““Atlas”Atlas”ServiceServiceProxiesProxiesUI BehaviorUI Behavior

(Script)(Script)

ASP.NET

Application Services

Page Framework,

Server Controls

ASP.NET Application

PagesPages

WebWebServicesServices

Atlas Script FrameworkClient

Application Services

Component/UIFramework,

Controls

Initial Rendering (UI + Behavior)

Data

Data

ASP .NET AJAX Control Toolkit

• Separate download from core ASP .NET AJAX – Great library of free ASP .NET AJAX enabled

controls– Download from http://ajax.asp.net/ and also

http://www.codeplex.net

• Developed using a collaborative source model– All source freely available with modification license– Both Microsoft & non-Microsoft developers can

contribute

• Already contains some really cool controls– About 25 useful controls and will always be

increased

Only ASP .NET AJAX ?

• Anthem .NET by Jason Diamond• Magic AJAX• AJAX Pro• SAJAXAnd many more…

Javascript Framework

Also considered as AJAX Framework, e.g :

• Scriptaculous, Prototype, openRico (also known as “mother of Javascript Framework)

• Qooxdoo• Turbo AJAX• JQuery• MooFx And many more….

Summary ( I )

• Web 2.0 hard to define, but very far from just hype– Culmination of a number of web trends

• Importance of Open Data– Allows communities to assemble unique tailored

applications

• Importance of Users– Seek and create network effects

• Browser as Application Platform– Huge potential for new kinds of web applications

Summary ( II )• ASP .NET AJAX provides a rich Ajax

programming framework• Rich built-in integration with

ASP.NET– Server Controls– Web and Application Services

• Rich client-side JavaScript framework model– Build rich mashups and gadgets

• Rich extensibility model for component developers

Check Real online AJAX samples atwww.soetamrizky.netwww.soetamrizky.info