ID506: Web 2.

0, AJAX, and REST in IBM WebSphere

Portal
Thomas Schaeck, STSM

Lead Architect Quickr and WebSphere Portal Web 2.0

Stephan Hesmer

WebSphere Portal Web 2.0 Architect and Lead Developer

®
What is Web 2.0, AJAX and REST ?

®
What is Web 2.0 ?

 A term coined by Tim O‘Reilly

(see http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html )

 Increasingly used for next generation

World Wide Web Applications and Services

 Web 2.0 has many aspects:

Business Models that survived and have promise for the future
Approaches such as services instead of products, the Web as a
platform, ...
Concepts such as folksonomies, syndication, participation,
reputation, ....
Technologies such as AJAX, REST, Tags, Microformats, ...
And many others ...
 How do Web 2.0 Sites differ from „Web 1.0“
Sites ?
 Strict „Web 1.0“ site  Modern „Web 2.0“ site
 „Web Master“ runs web site, users consume  Users collectively contribute to the web
 Few content editors site, they don‘t just consume
 Web site provides content and applications  Every user is a content editor and rater
for users
 View-only markup  Web site provides content, applications,
 Only human users and collective contributions of all users
 Accumulates relatively small amounts of  Semantically tagged markup
information and content  Humans and applications as „users“
 Fixed categories / Taxonomy
 Accumulates huge amounts of
 Unidirectional
information and content
 FlexibleTagging / Folksonomy
 Bi-directional

App

App
Web Web
Site Site
App

Data
Data App
Observations
 Web 2.0 consists of social and technical aspects
 The social aspects of Web 2.0 are much more fundamental
than the technologies

 Web 2.0 Sites can derive huge value from their user
community if they achieve critical mass
 Some Web 2.0 companies have achieved extremely high
market captialization (Google ($109,66 bn) bought YouTube
for $1,65 bn)

 The Web 2.0 Site itself often only provides the

infrastructure and guidelines for user participation

 The community then adds value to the site, e.g. by writing

articles, posting videos, sharing bookmarks, etc

 Typically, these Web 2.0 sites have APIs for use by

developers of mashup applications acting as multipliers

 Web 2.0 user interfaces typically apply the AJAX technology

in order to achieve more responsive UIs
What is AJAX ?
 AJAX is the acronym for Asynchronous JavaScript and XML

 The purpose is to create more dynamic and responsive web pages

 It is also about building web clients in a Service Oriented Architecture
that can connect to any kind of server: J2EE, PHP, ASP.Net, Ruby on Rails, etc.
 AJAX involves existing technology & standards: JavaScript and XML
 Pattern: Page view displayed in a web browser retrieves data or markup
fragments
from a service and refreshes just a part of the page
 AJAX is non-trivial, it requires deep and broad skills in web development ...
... but the benefits to be gained can be huge compared to classic web applications
 AJAX enables major improvements in responsiveness and performance of web
applications, e.g. used at Yahoo! Mail, Google Maps, live.com, and others
 AJAX is NOT hype – it is very real and very useful for highly interactive
applications
AJAX compared to classic Web UIs

servic
e

Browser Server Browser Server

In the typical web application,
each request causes a complete
refresh of the browser page
An Ajax application begins the same way.
After the initial page loads, Javascript code
retrieves additional data in the background
and updates only specific sections of the
page

 Ajax forces you to think about discrete services.

 It may drive requirements for new services from your IT department
What is REST ?
 REST is the acronym for „Representational State Transfer“

 It is the architectural model on which the World Wide Web is based

 Principles of REST
 Resource centric approach
 All relevant resources are addressable via URIs
 Uniform access via HTTP – GET, POST, PUT, DELETE
 Content type negotiation allows retrieving alternative representations from same URI

 REST style services

 are easy to access from code running in web browsers, any other client or servers
 very popular in the context of AJAX
 can take full advantage of the WWW caching infrastructure
 can serve multiple representations of the same resource

 More info: http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm

Web 2.0 Concepts that are interesting for enterprise use
 Self-establishing Communities collaborating around topics of common business interest
 Support User Contribution, treat users as co-authors and leverages their skills better
 Accumulation of user knowledge to make apps smarter the more people use them
 Enable users to add value by adding meta data, e.g. rate, tag, bookmark, comment
 Allow users to Take Control and let them make applications most useful to them

 Separate User Interface from Services to make services re-usable

 Fine grained access to data supporting mashups
 Mashups combining existing services into new, useful applications joining information
 Situational Development of applications through line of business can help make
businesses more agile
 AJAX to enable rich, interactive, highly responsive Web UI
 Use of Semantic Tags and Microformats to enable dynamic augmentation with
contextual menus or information
Web 2.0 in WebSphere Portal

®
IBM WebSphere Portal is the User Interface to
SOA

Other Clients MS Office &

Windows
Presentation Services

Web
Browser

Rich
Clients
Other Clients

Mobile
Client

eForms
Xforms
WebSphere Portal 6 Overview
WebSphere
• Instant messaging • Electronic Forms
• Team Rooms • Workflow Builder

WebSphere
•Web Content Management •Workflow Engine
•Portal Document Manager

WebSphere
• Presentation • Admin • Composite Applications
• Customization • Single sign on • Cluster Support
• Application • Search • Application Server
aggregation • Personalization • Database
• Java Portlet API • Portlet Generation • LDAP Directory Server
• Use of 100’s of Tool (Portlet
portlets Factory)
• WSRP support
WebSphere Portal – An Example
 w3 portal for all IBM employees
 > 300,000 users
 Portlets provide essential information
 Highly personalized - displays the right
info to the right users at the right time

 End-user customizable - users can create

custom pages

 Has become a key tool for every IBMer

 Major productivity gain
Targeted info delivery to users
Users can easily find the apps they need
Portals are the way to provide governed business
mashups combining public information, enterprise apps
and data

Rich Clients composite applications

role-based
process-
Thin Clients driven

in context

Mobile Clients Security-Rich Composite application

Critical enabler:
Openness
or view, that assembles and delivers
services in the form of portlets
in the context of a business process

Standards based access to integration and innovation

Web 2.0 / AJAX / REST in WP and related Products -
Today

 WP 6 allows User Contribution to portal sites through both WCM and PDM
 WP 6 enables Situational Development through Composite Application Templates
and through Lotus Designer / Portlet Factory / Forms Designer

 WP 6 allows users Taking Control of their pages and choose content (if allowed by
admin)

 Custom AJAX Portlets can be written today to run on WebSphere Portal,

e.g. using the Dojo framework and widgets or the AJAX support in RAD

 WP 6.0 exploits AJAX for context menus, search menu, and some admin portlets
 WebSphere Portlet Factory can generate AJAX Portlets with incremental update and
autocomplete

 IBM is strongly engaged in Dojo (see http://dojotoolkit.org/ ) as major contributor

Disclaimer

The following includes material that is

directional in nature and does not imply any
product plan commitment on the part of IBM.

Screenshots in this presentation are from

prototypes and likely to change significantly
by the time products are released
 New Web 2.0 Work under development for WebSphere
Portal

 REST Services to open up portal for mashup applications – services for server
persistence, portlet settings and user profile access to simplify Web 2.0 application
development

 AJAX Portlet Programming Model Extensions based on Dojo+IBM Extensions

 Client Side Aggregation and Customization using REST Services for better UX and
improved performance

 AJAX Client Side Feed Consumption to enable highly efficient integration of

information through feeds (Atom and RSS)

 Semantic Tags to allow smart markup to enable value add by portal, e.g. dynamic
menus

 Client Side C2A/Property Broker and Drag & Drop based on Semantic Tags
integrated with server side property broker and C2A support to enable cross-portlet
interaction locally in the browser as well as with server side code

 Sample AJAX Portlets with source showcasing the new capabilities to demonstrate
and give samples to customers for how to exploit all the above

 Integration, Aggregation and Customization of Google Gadgets

REST style Web Services exposing Portal to
Mashups
 Goals:
 Separate portal user experience from portal data
 Expose relevant data separately for use by other apps ( Mashups)

 Public REST style Web services for

 Access to Navigation Node Hierarchy
 Access to Page Definitions
 Access to User Profiles
 Access to generic Content Persistence
 Access to markup fragments of individual portlets

 Mashups can use these services to implement custom

applications leveraging portal infrastructure services

 WebSphere Portal’s Web 2.0 Client Side Aggregation uses

these services as well
Emerging WPLC Services&Feeds and Application
Examples
Calendar Services
Product: Domino
Common PIM Portlets Mail Services
for Mail and Calendar Access

IM Service
Custom Situational Application: Conference Service Sametime
Simple AJAX Mail / Cal summary
views with awareness Awareness Service

Activity, Blog Services

Connections
Geneva Persona, Community Services
Portlets, Notes Plugin,
Sametime Plugin, Desktop Integration
Team Space Services
Quickr
Documents Services
Custom Situational Application:
Problem tracking application Search Service
allowing to see author presence
and location in map and contact via IM Contacts Service

Persistence Service WebSphere

Portal Services Portal
Product:
WebSphere Portal Portlet Service
Client Side Aggregation
User Service

Maps Internet Services

…
Web 2.0 Fragment Model

 Simple and extensible Web 2.0 fragment programming

model

 Agnostic of how fragments are generated, may be

 generated by portlets on WebSphere Portal
 generated by PHP code on Web.0 or PHP servers
 generated by .NET servers

 Can start simple, with option to grow more sophisticated

 Basic fragments – HTML only
 Slightly more advanced – add use of Semantic Tags
 More advanced – add use of Dojo and custom JavaScript

 Fragments can use public JavaScript interfaces

to conveniently invoke WebSphere Portal’s REST-style Web
services
Web 2.0 Fragment Programming Model

Web 2.0 Fragment

Semantic Tags

Dojo Widget Markup

JavaScript Functions

REST Calls to Portal Services

User Profile Access
Settings Access
Persistence Service Access

REST Calls to other Services,

e.g. other WPLC services
Weather Info, News, Sports, …
CRM, HR, … Services
etc
Application Architecture Pattern
Application User Interface
Expeditor
AJAX
AJAX
Expeditor Project to Expeditor Expeditor
Views
Plugins Views
Plugins
Web Browser
Browser Cache Project to
AJAXAJAX
AJAX Browser AJAX Local
Views
Views
Views Fragments App Code
(e.g. Portlets) (if co-located)

Browser Cache
SyncML Application Services
REST
REST
Public APIs (Local)

REST Service Service 1

REST Service Produced Application Consumed Service 2
Proxy
... Services Logic Services ...
Cache
REST Service Service n

Data Store(s)
DS 1 DS 2 ... DS n
Web 2.0 Client Side Aggregation

 Browser-side Aggregation, Navigation and Customization

 Superior user experience
 Highly reactive and direct user interface
 Many actions possible without server roundtrips
 Avoids page flickering

 Accesses and manipulates portal information through REST services

 Renders XML obtained from the server on the browser side
 Implemented using AJAX, XML, Dojo, and JavaScript
 Improved performance and scalability through
 Reduced server side processing - offloads rendering to browser
 Reduced bandwidth requirements between server and browser
 Reduced client-side processing – mostly fragment reloads, few page reloads
 Improved cachability, all artifacts can be cached independently
AJAX based Client Side Aggregation in the Web
Browser

REST-accessible Markup Fragments

from WP Portlets or any other URL

Atom / RSS Feeds

Services created with Google Gadgets

WSRP Services
Client Side Aggregation in Web Browser
Client Side Aggregation
Theme
Enabled Theme

Navigation Portal Navigation

REST Service (Atom) Tree based on
Access Control and
Personalization

Page Portal
REST Service Pages

Portlet Access
REST Service Portlets

Portlet Settings Portlet

REST Service Settings

User Profiles User

REST /Web Service Profiles
 Semantic Tags, Context Menus and Drag&Drop
Conference Participants

...

IBMST Thomas SchaeckST 5 Technology Park Dr 555-5555ST

Westford, MAST
Click to dial

GroupST D&D LocationsST‘ D&D

 Extensible set of tag types such as person, address, phone number,

document, ... is used to mark content elements with types (semantic
tagging)

 Behaviours like e.g. context menus, annotations, highlighting, drag & drop,
etc can be applied to everything that is semantically tagged
Semantic Tags (Portal-Independent
Technology)
AJAX based RSS/Atom Feed Consumption

 Allow simple consumption and display of Feeds in portal

pages
 Atom feeds
 RSS feeds

 Implemented using AJAX, Dojo and JavaScript

 Gets settings defining the feed to display from portal
 Retrieves feeds from origin servers via AJAX proxy
 Renders feeds in the browser rather than causing server
load
AJAX RSS/Atom Feed Consumption directly from
Origin
 Google Gadget Integration
 Enable customers to easily integrate Google
Gadgets into portal pages
From an end user perspective, Google
Gadgets integrated in WebSphere Portal
behave just like local portlets: viewable and
customizable like any local portlet
 If allowed by admin, users can drag Generic
Gadget Portlets on their pages and select
Gadgets to display from the Gadget Catalog
Gadget Portlet initially lets user select the Gadget to
display from the Gadget Catalog
Gadget Portlet then displays the selected Gadget
User can view and customize the selected gadget like
any local portlet

 Administrators can pre-define Gadget

Portlets for the portlet palette
Generic Gadget Portlet is pre-configured by the admin
to connect it to a certain gadget, e.g. an admin could
create a “Map Portlet” by creating a Gadget Portlet
and connecting it to the Google Maps Gadget
Users can then select such pre-configured Gadget
Portlets from the palette and drag them onto their
pages like any local portlet
Google Gadget Integration – A Gadget integrated in
WebSphere Portal as a portlet
Google Gadget Integration – Selecting a Gadget to
integrate into WebSphere Portal as a portlet
IBM Portlet for Google Gadgets Architecture

Google RSS Feed

listing
available gadgets

Configuration
Mode

IBM Portlet
for Customize Customize
Google Gadgets Mode Mode
Google
Gadget
View View
Mode Mode
AJAX Portlets using Dojo
Web 2.0 Portal Architecture
HTML+Dojo+JS Quickr Connections
WSRP Feed Fragments (Wikis, Blogs, (Activities,
Blue Pages,
Service Service (from J2EE,.NET,PHP, Lists, Doc Libs, Social Bookmarks,
Discussions) Blogs)
HTTP or other Server)

Classic AJAX enabled

WSRP AJAX Feed AJAX Fragment MyPlaces Connections
JSR 168 JSR 168
Consumer Consumer Consumer Portlet Portlets
Portlets Portlets

AJAX Programming Model Extensions

(Dojo Framework & Widgets + AJAX.0 + REST accessor JS functions + Semantic Tags + Client Side Click-2-Action)

REST style Portal Services

(Persistence, User Profiles, Portlet Settings, Navigation, Pages, etc)

WebSphere Portal Foundation

WebSphere Application Server

Conclusion
 Web 2.0 is important for the enterprise
 AJAX and REST are important technologies related to Web 2.0
 IBM uses Web 2.0 concepts and technologies sucessfully in its
intranet

 WebSphere Portal already today in WP 6 provides Web 2.0

capabilities and leverages Web 2.0 technologies such as AJAX

 Future releases of WebSphere Portal will add more Web 2.0

features and expand use of AJAX and REST

 WebSphere Portal will integrate with Lotus Connections and

Lotus Quickr