Web 2 0 AJAX and REST in Web

Web 2. 0, AJAX, and REST in Web. Sphere Portal Thomas Schaeck, Distinguished Engineer Chief Architect Lotus Quickr and Web 2. 0 Portal Development Stephan Hesmer Architect and Team Lead Web 2. 0 Portal Development Session 4236

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. . . 3

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 site, they don‘t just consume – Few content editors – Every user is a content editor and rater – Web site provides content and applications for users – Web site provides content, applications, and collective contributions of all users – View-only markup – Semantically tagged markup – Only human users – Humans and applications as „users“ – Accumulates relatively small amounts of information and content – Accumulates huge amounts of information and content – Fixed categories / Taxonomy – Flexible. Tagging / Folksonomy – Unidirectional – Bi-directional App Web Site App Data App 4

Observations § Web 2. 0 consists of social and technical aspects § The social aspects of Web 2. 0 are much more fundamental than the technologies § 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 § 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 You. Tube for $1, 65 bn) § 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 5

What is AJAX ? § AJAX is the acronym for Asynchronous Java. Script 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: J 2 EE, PHP, ASP. Net, Ruby on Rails, etc. AJAX involves existing technology & standards: Java. Script 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 6

AJAX compared to classic Web UIs service Browser Server In the typical web application, each request causes a complete refresh of the browser page Browser Server 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 7

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 8

Web 2. 0 Concepts that interesting for enterprise use § § § Self-establishing Communities collaborating around topics of common interest Support User Contribution, treat users as co-authors, leverages their skills 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 Situational Development of applications through line of business users AJAX to enable rich, interactive, highly responsive Web UI Use of Semantic Tags and Microformats to enable dynamic augmentation with contextual menus or information 9

Web 2. 0 in Web. Sphere Portal

IBM Web. Sphere Portal is the User Interface to SOA Other Clients Rich Clients Mobile Client Other Clients Presentation Services Web Browser MS Office & Windows e. Forms Xforms 11

Web. Sphere Portal 6 Overview Web. Sphere • Instant messaging • Team Rooms • Electronic Forms • Workflow Builder Web. Sphere • Web Content Management • Portal Document Manager • Workflow Engine Web. Sphere • 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 12

Web. Sphere Portal – An Example § § w 3 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 13

Portals are the way to provide governed business mashups combining public information, enterprise apps and data Rich Clients composite applications role-based processdriven Thin Clients in context Mobile Clients Critical enabler: Openness Security-Rich Composite application 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 14

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 Web. Sphere 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 § Web. Sphere Portlet Factory can generate AJAX Portlets with incremental update and autocomplete § IBM is strongly engaged in Dojo (see http: //dojotoolkit. org/ ) as major contributor 15

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 Web. Sphere 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 C 2 A/Property Broker and Drag & Drop based on Semantic Tags integrated with server side property broker and C 2 A 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 § Integration with Lotus Quickr and Lotus Connections, adding Web 2. 0 collaboration and social networking to the portal environment 17

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 § Web. Sphere Portal’s Web 2. 0 Client Side Aggregation uses these services as well 18

Emerging WPLC Services&Feeds and Application Examples Product: Common PIM Portlets for Mail and Calendar Access Calendar Services Mail Services Domino IM Service Custom Situational Application: Simple AJAX Mail / Cal summary views with awareness Conference Service Awareness Service Activity, Blog Services Geneva Portlets, Notes Plugin, Sametime Plugin, Desktop Integration Persona, Community Services Team Space Services Documents Services Custom Situational Application: Problem tracking application allowing to see author presence and location in map and contact via IM Connections Quickr Search Service Contacts Service Persistence Service Product: Web. Sphere Portal Client Side Aggregation Sametime Portal Services Web. Sphere Portal Portlet Service User Service Maps … Internet Services 19

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 Web. Sphere 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 Java. Script § Fragments can use public Java. Script interfaces to conveniently invoke Web. Sphere Portal’s REST-style Web services 20

Web 2. 0 Fragment Programming Model Web 2. 0 Fragment Semantic Tags Dojo Widget Markup Java. Script 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 21

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 Java. Script 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 23

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 24

Semantic Tags, Context Menus and Drag&Drop Conference Participants. . . IBMST Thomas Schaeck. ST 5 Technology Park Dr Westford, MAST 555 -5555 ST Click to dial Group. ST D&D Locations. ST‘ 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 26

Semantic Tags (Portal-Independent Technology) 27

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 Java. Script § 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 28

AJAX RSS/Atom Feed Consumption directly from Origin 29

Google Gadget Integration § Enable customers to easily integrate Google Gadgets into portal pages From an end user perspective, Google Gadgets integrated in Web. Sphere 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 30

Google Gadget Integration – A Gadget integrated in Web. Sphere Portal as a portlet 31

Google Gadget Integration – Selecting a Gadget to integrate into Web. Sphere Portal as a portlet 32

AJAX Portlets using Dojo 33

Web 2. 0 Portal Architecture WSRP Service Classic JSR 168 Portlets AJAX enabled JSR 168 Portlets Feed Service WSRP Consumer AJAX Feed Consumer HTML+Dojo+JS Fragments (from J 2 EE, . NET, PHP, HTTP or other Server) AJAX Fragment Consumer Lotus Quickr Lotus Connections My. Places Portlet Connections Portlets (Wikis, Blogs, Lists, Doc Libs, Discussions) (Activities, Blue Pages, Social Bookmarks, Blogs) 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) Web. Sphere Portal Foundation Web. Sphere Application Server 34

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 Web. Sphere Portal already today in WP 6 provides Web 2. 0 capabilities and leverages Web 2. 0 technologies such as AJAX § Future releases of Web. Sphere Portal will add more Web 2. 0 features and expand use of AJAX and REST § Web. Sphere Portal will integrate with Lotus Quickr and Lotus Connections Web 2. 0 Portal + Web 2. 0 Collaboration + Social Networking 35

Demo

Lotus training and certification § Training is available for technical and end user audiences in multiple delivery formats (including classroom, e-learning and blended learning). – See the IBM Worldwide Training Finder to locate courses by technology area and delivery format. § The IBM Education Pack offers a flexible prepaid discount program that lets companies lock in savings now for a full year of training. § Need help identifying how to build your skill set? Training paths will help identify the right course options and formats to best meet your education needs. Key Education Links IBM WW Training finder http: //www. ibm. com/products/finder/us/fin ders? pg=trfinder IBM Education Packs http: //www. ibm. com/training/edpack Training paths http: //www-142. ibm. com/software/swlotus/services/cweeducation. nsf/wdocs/skills roadmaps Lotus Professional Certification http: //www. lotus. com/certification § Demonstrate your expertise, formally solidify your credentials, and increase your marketability by achieving your IBM professional certification. 37

Education Offering Information Portal Composite application and integration services IBM Web. Sphere Portal http: //www-142. ibm. com/software/sw-lotus/services/cweeducation. nsf/wdocs/portalofferings IBM Web. Sphere Portlet Factory http: //www-142. ibm. com/software/sw-lotus/services/cweeducation. nsf/wdocs/portalofferings IBM Lotus Expeditor http: //www-142. ibm. com/software/sw-lotus/services/cweeducation. nsf/wdocs/portalofferings IBM Lotus Mobile Connect https: //www-304. ibm. com/jct 09002 c/isv/spc/events/lotus_mobileconnect. html 38

Questions and Answers

© IBM Corporation 2007. All Rights Reserved. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. The following are trademarks of the International Business Machines Corporation in the United States and/or other countries. For a complete list of IBM trademarks, see www. ibm. com/legal/copytrade. shtml AIX, CICSPlex, DB 2 Universal Database, i 5/OS, IBM, the IBM logo, IMS, i. Series, Lotus, OMEGAMON, OS/390, Parallel Sysplex, pure. XML, Rational, RCAF, Redbooks, Sametime, System i 5, System z , Tivoli, Web. Sphere, and z/OS. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. Intel and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries. UNIX is a registered trademark of The Open Group in the United States and other countries. Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. 40