View
216
Download
2
Category
Tags:
Preview:
Citation preview
®
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 ?
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 „Web Master“ runs web site,
users consume Few content editors Web site provides content and
applications for users View-only markup Only human users Accumulates relatively small
amounts of information and content
Fixed categories / Taxonomy Unidirectional
Modern „Web 2.0“ site Users collectively contribute to the web
site, they don‘t just consume Every user is a content editor and rater Web site provides content, applications,
and collective contributions of all users Semantically tagged markup Humans and applications as „users“ Accumulates huge amounts of
information and content FlexibleTagging / Folksonomy Bi-directional
WebSite
WebSite
DataData
App
App
App
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 Architecturethat 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 fragmentsfrom 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
Browser Server Browser Server
service
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
IBM WebSphere Portal is the User Interface to SOA
MS Office &Windows
Oth
er
Clien
ts
WebBrowser
RichClients
MobileClient
Pre
sen
tatio
n
Se
rvice
s
eFormsXforms
Oth
er
Clien
ts
WebSphere Portal 6 Overview
• Instant messaging• Team Rooms
• Electronic Forms • Workflow Builder
WebSphere
•Web Content Management •Portal Document Manager
•Workflow Engine
WebSphere
• Presentation• Customization• Application aggregation• Java Portlet API• Use of 100’s of portlets• WSRP support
•Admin•Single sign on•Search•Personalization•Portlet Generation Tool (Portlet Factory)
• Composite Applications• Cluster Support• Application Server• Database• LDAP Directory Server
WebSphere
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 gainTargeted info delivery to usersUsers can easily find the apps they need
Openness
Portals are the way to provide governed business mashups combining public information, enterprise apps and data
Critical enabler:
Standards based access to integration and innovation
Thin Clients
Mobile Clients
Rich Clients
role-based
composite applications
in context
process-
driven
Security-Rich Composite application or view, that assembles and delivers
services in the form of portlets in the context of a business process
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
WebSpherePortal
Emerging WPLC Services&Feeds and Application Examples
Portal Services
User Service
Persistence Service
Contacts Service
DominoMail Services
Calendar Services
Sametime
Portlet Service
Awareness Service
Conference Service
IM Service
QuickrDocuments Services
Team Space Services
Custom Situational Application:Problem tracking application
allowing to see author presence and location in map and contact via IM
Custom Situational Application:Simple AJAX Mail / Cal summary
views with awareness
Product:WebSphere Portal
Client Side Aggregation
Search Service
Geneva Portlets, Notes Plugin,
Sametime Plugin, Desktop Integration
Product:Common PIM Portlets
for Mail and Calendar Access
ConnectionsPersona, Community Services
Activity, Blog Services
Internet ServicesMaps…
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 interfacesto 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
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
Services created with Google Gadgets
Atom / RSS Feeds
REST-accessible Markup Fragmentsfrom WP Portlets or any other URL
WSRP Services
Semantic Tags, Context Menus and Drag&DropConference Participants
...
IBMST Thomas SchaeckST 5 Technology Park Dr555-5555ST
Westford, MAST
GroupST LocationsST‘
Click to dial
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
D&D D&D
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
Google Gadget Integration Enable customers to easily integrate
Google Gadgets into portal pagesFrom 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 CatalogGadget Portlet initially lets user select the Gadget to
display from the Gadget CatalogGadget Portlet then displays the selected GadgetUser can view and customize the selected gadget
like any local portlet
Administrators can pre-define Gadget Portlets for the portlet paletteGeneric 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
IBM Portlet for Google Gadgets Architecture
IBM Portletfor
Google GadgetsGoogle Gadget
Google RSS Feed listing
available gadgets
View Mode
Customize Mode
Configuration Mode
Customize Mode
View Mode
Web 2.0 Portal Architecture
WebSphere Portal Foundation
AJAX FeedConsumer
Connections (Activities, Blue Pages,
Social Bookmarks, Blogs)
AJAX FragmentConsumer
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)
Quickr(Wikis, Blogs,
Lists, Doc Libs, Discussions)
ConnectionsPortlets
MyPlacesPortlet
FeedService
HTML+Dojo+JSFragments
(from J2EE,.NET,PHP,HTTP or other Server)
WebSphere Application Server
ClassicJSR 168 Portlets
AJAX enabledJSR 168 Portlets
WSRPConsumer
WSRPService
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
Recommended