®

IBM Software Group

Building Rich Internet Applications Using JavaScript IBM Software Group Emerging Technology Dan Gisolfi Laurent Hasson

© 2005 IBM Corporation

IBM Software Group

Key Messages ƒ IBM has been working with RIA based technology for over 3yrs and has assets and experience with Ajax-like communication patterns ƒ A robust RIA framework should implement a full MVC client-side architecture including Data and Event models as well as flexibility with respect to backend infrastructure. ƒ One benefit of a client-side MVC architecture is that it allows widgets from multiple UI component libraries to communicate and share a common data model. ƒ IBM is driving the industry towards reusable and accessible JavaScript widgets ƒ An open source RIA framework could benefit from contributions derived from a number of exiting efforts such as Laszlo, JSL, Rico, etc.

2

IBM Software Group

User Experience Technology Spectrum Improved Manageability and Deployment

Server-Centric Computing

Reach

Common Rich Enhanced Browser Browser Browser Rich Internet Applications Traditional Device Dependent Web Browsers HTML XHTML WML

Rich

Richness and Function

Web Browsers without

Dynamically supplemented

Plug-ins

Web Browsers

ECMA-Script

Applets

DOM

Plug-in

DHTML

Flash

Locally Managed Application

Managed Native Application

Locally deployed Service Applications

Remotely deployed Service Applications

OSGi Bundles

OSGi Bundles

Quicken

Client Server Computing

Native Application

Traditional Client Applications No Standard deployment model

MS-Money Application Container

Browser

UI Rendering

Browser

Programming Model

Server Side

Platform Native

OS

Platform Native

Client Side

OS 3

IBM Software Group

Observations of RIA Framework Requirements ƒ Consistent programming model ƒ Simplification of technical details based on roles ƒ Common tooling environment, regardless of role to reduce cost and learning curve for developers ƒ Support for open standards and long term vendor commitment ƒ Flexible tooling to support common MVC architecture

Developer Experience

User Experience

ƒ Real-time Data Monitoring ƒ Rich Web Application UI Experience (Rich or Ultra-Rich) ƒ Eliminate page refreshes ƒ Improve the nature of user interactions with Web Applications

Client Application TCO ƒ ƒ ƒ ƒ

Reduce Network Traffic (less round trips) Increase Web Application Manageability Increase Web Application Reach (broader platforms) Offload computations from server to client (reduce processing drag)

4

IBM Software Group

In order to enable the full potential of rich internet applications we need to establish a zero-footprint JavaScript-based client-side MVC architecture. ƒ JavaScript  JavaScript is found on over 50% of all web sites today,  It is the common enabling technology for UI Widget devdelopment regardless of scripting language( PHP, JSP, ASP, etc)  New web applications are being created to render custom widgets modeling rich desktop componentry based on JavaScript  JavaScript is a broadly supported by browsers

ƒ Rich Internet Applications  Requires best qualities of desktop, web and communication software whereby the following activities are all addressed independently of the server-side infrastructure ƒ Computations are performed client-side, ƒ Data is sent and retrieved in the background asynchronously with respect to user interactivity ƒ Redraws sections of a screen with refreshing page ƒ Uses audio and video in a tightly integrated manner

ƒ MVC Architecture  Web applications typically implement a struts-like server-centric Model-2 MVC architectures pattern  Current browsers do not contain the necessary MVC pattern components to enable RIAs

ƒ Accessibility  HTML does not provide adequate markup to support accessible dynamic content.  Current negative position of W3C WAI on JavaScript has dramatically affected the ability for persons with disabilities to access web content in spite of the pervasiviness of JavaScript. 5

IBM Software Group

RIA Frameworks: Conceptual Model Server-side Processing ƒ

Data Abstraction

Server-side Processing

Data Mediation

ƒ ƒ

Distributed Data Model ƒ Distributed Data Model

Events

Data Model ƒ

UI Controls

Rich Internet Application Framework Components

ƒ ƒ

Communications ƒ

Browser Container

Expected data format agreed upon by server and client side processing models

Client-side framework components that collectively comprise an MVC architecture ƒ

Binders

Ability to connect to wide variety of data services Leverage server-side abstraction layers for data-store independence Mange transformation between inbound/outbound data format on the wire

Event Model ƒ Supporting client side processing of user interactions and remote data updates Data Model ƒ Client-side data model and distributed data API Binders ƒ Client-side adapters for model, view and controls UI Controls ƒ Accessible and extendable UI widget library that is bound to a specific clientside data model Communications ƒ HTTP Back Channel ƒ Web Services ƒ Web Messaging (Real-time Push) 6

IBM Software Group

RIA Frameworks: Example Open Source Component Technologies

PDO

Server-side Processing

Server-side Processing ƒ ƒ

JSON for PHP

PDO is an example data abstraction layer for PHP5 JSON for PHP provides a PHP adapter API for generating and processing JSON data streams

Distributed Data Model Distributed Data Model

ƒ

Expected data format agreed upon by server and client side processing models

Client-side framework components that collectively comprise an MVC architecture

Events

JSON Binders UI Controls Ajax

ƒ Rich Internet Application Framework ƒ Components

Data Model ƒ Instead of using XML Data Island, JavaScript Opject Notation offers an example of a language neutral data model Communications ƒ Ajax: The Asynchronous JavaScript+XML communication pattern (aka: XML-RPC) has gained recent popularity

Browser Container

7

IBM Software Group

RIA Frameworks: IBM’s Rich Browser Framework (RBF) Server-side Independent JavaScript-based RIA Framework ƒ

Data Abstraction

Server-side Processing ƒ

Data Mediation

JSL Events

JSDO

Distributed Data Model

ƒ

JSDO JSL Binders Accessible Widgets

Communication Services

ƒ

Rich Internet Application Framework Components

ƒ

Event Model ƒ Customized DOM Event extensions to supporting client side processing of user interactions and remote data updates Data Model ƒ JavaScript Data Object format expected for all inbound/outbound wire formats. Binders ƒ Client-side adapters for model, view and controls. These binders establish a tight coupling between the components of the framework in order to achieve a robust client-side MVC architecture. UI Controls ƒ Accessible and extendable UI widget library that are bound to a specific clientside data model. This widget library can be extended to provide components the richen the user experience Communications ƒ HTML Back Channel (XML-RPC) ƒ Web Services communications through the ubiquitous Flash conduit ƒ Web Messaging (Real-time Push)

Browser Container

8

IBM Software Group

RBF: Server-side Independence Data Abstraction ƒ

Service Data Objects

Server-side Processing

JSDO Mediators & DiffHandlers JSDO

Distributed Data Model

Service Data Objects ƒ An open source specification that provided a data programming architecture which unifies data programming across data source types, provides robust support for common application patterns, and enable applications, tools, and frameworks to more easily query, view, bind, update, and introspect data. ƒ SDO has been implemented in: ƒ Java by IBM ƒ PHP by IBM & Zend (target PHP5.1)

JSL Events

Data Mediation & Change Management

ƒ

JSDO JSL Binders RBF Accessible Widgets

Communication Services Browser Container

Rich Internet Application Framework Components ƒ

Mediators ƒ These programmatic adapters insure that the wire format of a inbound or outbound transaction from/to the client is in JSDO format. ƒ Supported Languages ƒ Java ƒ PHP ( IBM target PHP5.1) DiffHandlers ƒ This server-side processing mechanism manages the synchronization of updates between the server and client data models ƒ Supported Languages ƒ Java ƒ PHP ( IBM target PHP5.1)

9

IBM Software Group

JavaScript Library (JSL): MVC Projection server

JSF Page model data bind

JSF Tags own

Java code

browser 3

page

HTML

JavaScript

control 2 control 2a control 2b control 3

JavaScript Library render

(JSL)

4

JSDO

1

model

data

Service Data Objects for JavaScript JavaScript implementation of EClass and EObject (EMF)

OBF JSF Components “Mediator”

page runtime

2

JSPR

services

SDO/Bean

data source

JavaScript Page Runtime

page

JSCL JavaScript Control Library

bindings events

control 2 control 2a control 2b control 3

controls View Layout (HTML)

10

IBM Software Group

JavaScript Library (JSL): Server Integration

JSF Page model data bind

browser

New pa g

own

e

page control 2 control 2a control 2b control 3

JavaScript Library (JSL) SDO4JS

model

data

OBF JSF Components

Service Data Objects for JavaScript

JavaScript Page Runtime

A

Diff, UI State

services

HTTP SaveUIState ModelDiff ModelMerge

B

MergeDa a ta

JSCL JavaScript Control Library

controls ta

Web Serv ices D

page

control 2 control 2a control 2b control 3

C

or D iff

M er geD ata HT TP

data source

DiffProcessor SDO/Bean

JavaScript implementation of EFactory, EClass and EObject (EMF)

JSPR

render

WebService

WebMessaging (Whitewater)

11

IBM Software Group

Demo: Toto.html ƒ Standalone Code demonstration  Browser Agnostic Demo of IBM’s JavaScript Framework (JSL) with hard coded client-side data model  Key Messages ƒ Simple JavaScript based programming model ƒ Rich Data Model Definition ƒ Rich Component Definition ƒ MVC architectures ties together components and data through JavaScript events

ƒ Code Deep Dive!

12

IBM Software Group

Demo: Toto3.html ƒ Standalone Code demonstration with Accessible Widgets  Firefox 1.1 Beta with Window-Eyes v5.0 Beta with JSL Controls enabled for DHTML Accessibility (www.mozilla.org/access/dhtml)  Key Messages ƒ Reusable & Accessible UI Widgets ƒ Simple JavaScript based programming model ƒ Rich Data Model Definition ƒ Rich Accessible Component Definition compliant with W3C efforts ƒ MVC architectures ties together components and data through JavaScript events

13

IBM Software Group

Demo: stockportfolio.php ƒ JSL & PHP Integration  PHP page used instead of standalone HTML page  PHP data mediator backend implemented against MySQL database  JSL framework deployed on server as plain .js files off web root  Note: DiffHandler not yet implemented

ƒ Key Messages ƒ JSL is back-end technology neutral (JSP, ASP, PHP, Ruby, Perl, etc) ƒ Client-side JSDO generated and synced with any backend data abstraction

ƒ Code Deep Dive!

14

IBM Software Group

Demos: Laszlo / JSL Integration ƒ Servlet Example  Collaboration of Laszlo and JSL controls on the same page sharing common data and event models

ƒ Portal Example  Same collaboration within a J2EE portal infrastructure

ƒ Key Messages ƒ Generic JSL component API allows developers to use any browser friendly technology to implement UI widgets.

15

IBM Software Group

Demos: CGMI 3. HTTP Request

I-Planet Authentication and Authorization Server

ƒ Web Messaging  Delivering real-time subscription based financial market data to a broad range of consumers who are members of Smith Barney’s Access Retail Brokerage Web Site

Web Messaging Web Messaging ODC-WDO ODC-WDO

1. HTTPS

6. JS + WDO

ODC-JSL ODC-JSL

B I G I P

Modern Browser 7. HTTP

5. HTTP Response

ODC Toolkit

4. Register Profile topics For publishing

W A S

2. & 8. Authentication and Authorization

WPS + WAS S S O

LDAP ACL-DB

Login Login Module Module

Market Market Data Data Adapter Publisher

Event Broker

 Implemented using HTTP Tunneling  Note: Demo code is based on Applet, current code is part of JavaScript framework

JSP + Portlets

5b. Push

5a. Pull 9. Publish (HTTP)

SunGard Market Data

Client

DMZ

Intranet

ƒKey Messages Ajax is just one type of RIA communications (XMLHttpRequest). JSL also implements (supports) Web Services (via Flash Remoting) and Web Messaging. 16

IBM Software Group

Demos: RAD Tooling ƒ Visual Programming with JSL  Rational Application Developer v6 implements JSF. IBM’s implementation of JSF embedds our JSL

ƒ Key Messages  RAD is a sophisticated visual development IDE that demonstrates the end-2-end toolablity of the framework.

ƒ Trial Version of RAD is available @  http://www-128.ibm.com/developerworks/downloads/r/rad

17

IBM Software Group

Conclusion ƒ A complete end-2-end RIA framework is important for the industry. ƒ Such a framework needs:  Strong browser support (JS, HTML, CSS are key technologies)  To be backend agnostic (Java, PHP, ASP, Perl, etc)  To support any browser based technology for widget development (Laszlo, XUL, Flash, DHTML, etc)  To support Rich Backend connectivity ƒ XMLHttpRequest ƒ Web Service ƒ Web Messaging  To be visually toolable  To be available in the open source community so that it can be extended

ƒ OpenRBF (Open Rich Browser Framework) offers these benefits … BUT  We need support to open source it  We help to build PHP backend for it  We need help to visually tool PHP backend 18

IBM Software Group

Feedback ƒ If you have requirements desires pertaining to RIA frameworks please send us an email --- we really need your feedback  Dan Gisolfi: [email protected]  Laurent Hasson: [email protected]

19