Web2.0 Ajax and REST in WebSphere Portal

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 „ 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 Web Site Web Site Data Data 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 A synchronous J avaScript a nd X ML 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 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 „ Re presentational S tate T ransfer“ 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 Other Clients Web Browser Rich Clients Mobile Client Presentation Services eForms Xforms Other Clients

WebSphere Portal 6 Overview Instant messaging Team Rooms Electronic Forms Workflow Builder WebSphere Portal Extend Web Content Management Portal Document Manager Workflow Engine WebSphere Portal Enable 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 Portal Server

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 Openness Critical enabler: Standards based access to integration and innovation Thin Clients Mobile Clients Rich Clients Security-Rich Composite application or view, that assembles and delivers services in the form of portlets in the context of a business process role-based composite applications in context process- driven

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 Eyebrow /breadcrumb (text below business unit or product name): 14pt Arial Regular, light gray R128 | G128 | B128 Text slide with single quote or statement Singe quote on page: 28pt Arial Italic, teal R204 | G 255 | B153 Reference: 20pt Arial, Regular black

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 Tag s 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 WebSphere Portal Portal Services User Service Persistence Service Contacts Service Domino Mail Services Calendar Services Sametime Portlet Service Awareness Service Conference Service IM Service Quickr Documents 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 Connections Persona, Community Services Activity, Blog Services Internet Services Maps …

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 Browser Cache Browser Cache Proxy Cache Produced Services REST Service REST Service REST Service Data Store(s) DS 1 Consumed Services Public APIs (Local) ... Application Logic Service 2 Service 1 Service n ... DS 2 DS n ... AJAX Views AJAX Views AJAX Fragments (e.g. Portlets) AJAX Views AJAX Views Expeditor Plugins Web Browser AJAX Views Expeditor Expeditor Plugins Local App Code (if co-located) Application User Interface Application Services Project to Expeditor Project to Browser REST SyncML REST

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 Fragments from WP Portlets or any other URL WSRP Services

Client Side Aggregation in Web Browser Portal Pages Portlet Settings Portal Navigation Tree based on Access Control and Personalization Navigation REST Service (Atom) Page REST Service Portlet Settings REST Service Portlet Access REST Service Theme Client Side Aggregation Enabled Theme User Profiles User Profiles REST /Web Service Portlets

Semantic Tags, Context Menus and Drag&Drop Conference Participants ... IBM ST Thomas Schaeck ST 5 Technology Park Dr 555-5555 ST Westford, MA ST Group ST Locations ST‘ 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

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 IBM Portlet for Google Gadgets Google 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 Feed Consumer Connections (Activities, Blue Pages, Social Bookmarks, Blogs) AJAX Fragment Consumer 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) Connections Portlets MyPlaces Portlet Feed Service HTML+Dojo+JS Fragments (from J2EE,.NET,PHP, HTTP or other Server) WebSphere Application Server Classic JSR 168 Portlets AJAX enabled JSR 168 Portlets WSRP Consumer WSRP Service

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

Web2.0 Ajax and REST in WebSphere Portal

More Related Content

What's hot (19)

Viewers also liked (10)

Similar to Web2.0 Ajax and REST in WebSphere Portal (20)

More from Munish Gupta (9)

Recently uploaded (20)

Web2.0 Ajax and REST in WebSphere Portal