Web 2.

0: Where
Rich Meets Reach
P.N. Anantharaman
Director – Engineering
Platform Technologies (Flex/AIR/Coldfusion)
12 Aug 2008

1
2006 Adobe Systems Incorporated. All Rights Reserved.
 Adobe
revolutionizes
how the world
new
engages with ideas
image and information
 Applications have evolved

Global
2004
RICH INTERNET
WEB APPLICATIONS APPLICATIONS
REACH

1998

1992
Local
MAINFRAME CLIENT/SERVER

Text UI RICH Integrated media GUI

2007 Adobe Systems Incorporated. All Rights Reserved.

Technical characteristics of RIAs

Rich + Reach

Local Processing + Hosted Services

Content /Application/Communication

Declarative Languages + Scripting

Designer + Developer Collaboration

2007 Adobe Systems Incorporated. All Rights Reserved.

Widest Reach in the World

10+ years of consistent,

high quality experience,
regardless of OS
Consistently reaching
more desktops and
devices than any other
OS or runtime

Flash has 99% reach

on connected PCs and
8 million installs per day.

2007 Adobe Systems Incorporated. All Rights Reserved.

Outline

ƒ Web 1.0 evolution and key technologies

ƒ Web 2.0 Overview
ƒ RIA basics

2007 Adobe Systems Incorporated. All Rights Reserved.

Web 1.0 Evolution and Key technologies

2007 Adobe Systems Incorporated. All Rights Reserved.

Internet/Web Evolution

ƒ DARPA/ARPA (Advanced Research Projects Agency)

ƒ Defense program during the cold war era
ƒ Goal: Command and control network that would survive a nuclear war
ƒ Problems: Circuit switched networks (eg, telephone) are vulnerable as loss of one
line or a switch may hamper the communication
ƒ Solution: Distributed, packet switched networks

ƒ The number of machines, networks and users increased dramatically

after the advent of TCP/IP – the Internet
ƒ TCP/IP Reference model and the protocol is the glue that holds internet together
ƒ Growth of universal services on top of TCP/IP infrastructure (Application layer)
ƒ E-mail
ƒ File transfer
ƒ Remote login
ƒ World Wide Web (WWW)

Web is the application while Internet is the infrastructure

2007 Adobe Systems Incorporated. All Rights Reserved.

Web 1.0

ƒ The web (CERN lab, Tim Berners-Lee1989) grew out of the need to
have large internationally dispersed teams of scientists to collaborate
constantly by exchanging reports, drawings and other documents
ƒ The Web is an architectural framework for accessing linked documents
and applications spread out over thousands of machines all over the
Internet
ƒ Up to early 90’s the Internet was largely populated by academic,
government and industrial researchers
ƒ Researchers -> Commercial applications -> Social applications

ƒ Web becomes the mechanism to distribute and deliver any information,

not just scientific research reports
ƒ Product information, stock prices, communication to employees….

ƒ Evolution of browsers, html and Javascript

2007 Adobe Systems Incorporated. All Rights Reserved.

Web Access model

ƒ Distributed, linked documents and applications over the Internet served

primarily through the http protocol
ƒ Client (Browser), Server (Website) model
ƒ Clients access the servers through URL
ƒ URL specifies the protocol, web server name (or IP), port number on the host
machine, file name to retrieve, optional query string
ƒ DNS converts destination addresses (eg, www.ananth.info) to IP address (eg,
65.36.166.120)

ƒ Clients are by and large access and rendering devices, servers have
the content, business logic and the presentation logic.

2007 Adobe Systems Incorporated. All Rights Reserved.

Web access sequence

ƒ The browser determines the URL

ƒ The browser asks DNS for IP Address (eg, www.adobe.com)
ƒ DNS replies with the IP Address
ƒ The browser makes TCP connection to port 80 on the specified IP
Address returned by DNS
ƒ Browser send a GET command over HTTP
ƒ The server sends the document
ƒ The TCP connection is released
ƒ The browser displays the retrieved document
ƒ The browser fetches and displays the image files

2007 Adobe Systems Incorporated. All Rights Reserved.

Web Access and Proxy

HTTP Request
HTTP Browser HTTP Server
HTTP Response

FTP Request
HTTP Browser FTP Server
FTP Response

HTTP Request HTTP Request

HTTP Browser HTTP Proxy Server HTTP Server
HTTP Response HTTP Response

Hands on opportunity: Build a filter/translator in the proxy

2007 Adobe Systems Incorporated. All Rights Reserved.

HTTP Methods

ƒ HTTP protocol consists of 2 distinct items: A set of requests, A set of

responses. Some key methods are:
ƒ GET – Request a web page
ƒ HEAD – Request to read a page header
ƒ PUT – Request to store a web page
ƒ POST – Append to a named resource
ƒ DELETE – deletes a resource

ƒ Web 1.0 Characteristics

ƒ Page metaphor
ƒ Synchronous
ƒ Smaller set of UI controls
ƒ Mostly text oriented
ƒ One way traffic, not participative

2007 Adobe Systems Incorporated. All Rights Reserved.

Web 1.0 technologies

ƒ Platform independence
ƒ Data: HTML/XML
ƒ Code: Java, Javascript and other host of scripting languages like Coldfusion, PHP, etc

ƒ Key technologies
ƒ SOAP, WSDL, XML-RPC, Session Management, Cookies etc
ƒ Client side
ƒ Browsers, plug ins, Javascript, Applets, XML, HTML, ActiveX controls
ƒ Server side
ƒ Server side scripting languages
ƒ J2EE Application servers
ƒ Database servers

2007 Adobe Systems Incorporated. All Rights Reserved.

Web 2.0 Landscape

2007 Adobe Systems Incorporated. All Rights Reserved.

Web 2.0 Core features

ƒ Web as a Technical platform

ƒ data as the driving force
ƒ network effects created by an architecture of participation
ƒ innovation in assembly of systems and sites composed by pulling
together features from distributed, independent developers (a kind of
"open source" development)
ƒ lightweight business models enabled by content and service syndication
ƒ the end of the software adoption cycle ("the perpetual beta")
ƒ software above the level of a single device, leveraging the power of The
Long Tail.
ƒ easy to pick up by early adopters

2007 Adobe Systems Incorporated. All Rights Reserved.

Web 2.0 Core features

ƒ Core features of Web 2.0

ƒ Web as a Platform
ƒ Collective Intelligence
ƒ Above the level of Single Device
ƒ Services , not packaged software
ƒ Rich User experiences

ƒ RIA
ƒ Dramatically improve user experiences

2007 Adobe Systems Incorporated. All Rights Reserved.

Introduction to AJAX

ƒ Stands for “Asynchronous JavaScript and XML “

ƒ Development technique for creating interactive

web applications

ƒ Not a new Technology but more of a Pattern

2007 Adobe Systems Incorporated. All Rights Reserved.

Motivation for AJAX

ƒ WebPages always RELOAD and never get UPDATED

ƒ Users wait for the entire page to load even if a single piece of data is
needed

ƒ Single request/response restrictions

2007 Adobe Systems Incorporated. All Rights Reserved.

Components

ƒ HTML (or XHTML) and CSS

ƒ Presenting information

ƒ Document Object Model

ƒ Dynamic display and interaction with the information

ƒ XMLHttpRequest object
ƒ Retrieving data ASYNCHRONOUSLY from the web server.

ƒ Javascript
ƒ Binding everything together

2007 Adobe Systems Incorporated. All Rights Reserved.

Uses of AJAX Paradigm

ƒ Real-Time Form Data Validation

ƒ Form data that require server-side validation can be validated in a form “before” the
user submits it.

ƒ Auto completion
ƒ A specific portion of form data may be auto-completed as the user types.

ƒ Master Details Operations

ƒ Based on a client event, an HTML page can fetch more detailed information on data
without refreshing the page.

ƒ Sophisticated UI Controls
ƒ Controls such as tree controls, menus, and progress bars may be provided without
page refreshes.

2007 Adobe Systems Incorporated. All Rights Reserved.

Flex Backgrounder

ƒ Flex leverages the Flash player installed in over 95% of client systems
ƒ Flex is a development environment to create Rich Internet Applications
ƒ RIAs combine the richness and response of desktop applications with
the broad reach of web applications to deliver a more effective user
experience
ƒ Flex development consists of:
ƒ Flex SDK - A comprehensive set of components and framework
ƒ Flex builder IDE
ƒ Livecycle Data Services or BlazeDS

ƒ Flex applications take advantage of Flash runtime to execute the client

side logic that supports sophisticated text, graphics, animation and
multimedia rendering

2007 Adobe Systems Incorporated. All Rights Reserved.

Flex based application architecture

2007 Adobe Systems Incorporated. All Rights Reserved.

LCDS RPC Access Model

2007 Adobe Systems Incorporated. All Rights Reserved.

 Adobe AIR enables web developers to
use existing technologies to build and
deploy rich Internet applications on the
desktop.

2007 Adobe Systems Incorporated. All Rights Reserved.

Why RIAs on the desktop?

Persistent connection Branded experiences

Desktop functionality Data access Efficient development

2007 Adobe Systems Incorporated. All Rights Reserved.

Adobe AIR Application Stack

HTML Flash
Cross-OS
HTML Flex Application
JavaScript Flash ActionScript HTML Integrated
XML XML Rendering
CSS Audio
Integrated DOMs
PDF Video PDF
& Scripting

File
File System
System Network
Network Notifications Application
Application Drag
Drag and
and Local
Local
Access
Access Detection
Detection
Notifications Update
Update Drop
Drop Database
Database
...
... Adobe AIR APIs

Mac, Windows, Linux & Device OS

2007 Adobe Systems Incorporated. All Rights Reserved.

Key take away

ƒ Web 2.0 will become a way of life for future web sites
ƒ User experience is an important dimension in attracting customers to
business web sites
ƒ The trend of today is to provide a seamless experience between
Browser, Desktop and Mobile experiences
ƒ AIR, Flex and other Adobe Technologies help developers build such
applications easily

2007 Adobe Systems Incorporated. All Rights Reserved.

 Better By Adobe

2007 Adobe Systems Incorporated. All Rights Reserved.