Rich UI – A Sneak Peek

17
® © 2008 IBM Corporation IBM Software Group EGL Simplify Innovation EGL International Conference Zurich Oct 20-21 2008 EGL Rich UI – Overview and Demonstration Sanjay Chandru Manager, Technology Ecosystem Aaron Allsbrook IT Specialist, Rational Technical Services

description

 

Transcript of Rich UI – A Sneak Peek

Page 1: Rich UI – A Sneak Peek

®

© 2008 IBM Corporation

IBM Software Group EGL Simplify Innovation

EGL International ConferenceZurich Oct 20-21 2008

EGL Rich UI – Overview and Demonstration

Sanjay ChandruManager, Technology Ecosystem

Aaron AllsbrookIT Specialist, Rational Technical Services

Page 2: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Not Just Buzzwords

Page 3: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Three software patterns driving Web 2.0

•User-driven adoption

•Value on demand•Low cost of entry•Public

infrastructure

Software as aSERVICE

Service, not software

COMMUNITYmechanisms •Recommendation

s•Social networking

features•Tagging•User comments•Community rights

management

Users add value

SIMPLEuser interface

and dataservices

•Responsive UIs (AJAX)•Feeds (Atom, RSS)•Simple extensions•Mashups (REST APIs)

Easy to use, easy to remix

Web 2.0

Page 4: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Web 2.0 technologies highlight the next pendulum swing between client and server function.

Client Server

Mainframe computing“Dumb” little green screen clientsOmnipotent big mainframe servers

Client-server computing“Smart” Personal Computer clientsSimple file and database servers

Web (1.0) computingLight Web Browser clientsRich application and database servers

Web 2.0 computingRich Internet Application clientsLighter application and database servers

TUI

CUI

JSF

RichUI

Page 5: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Forrester Research on Web 2.0

70% of Fortune 1000 companies want to standardize on deploying browser applications*

Browsers are catching up

Still, majority of CIOs say the limits of HTML stops them*

HTML is inflexible and Javascript is too complex

Businesses are forced to trade off benefits of rich client vs Web2.0 applications

EGL Rich UI intends to provide the benefits of both

* Forrester Research – Urban Myth

Page 6: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

What is RichUI

RichUI stands for Rich User Interface. This is a phrase commonly used when talking about an interface that provides dynamic rendering of its individual

parts – notably, on the client-browser, as opposed to server-side processing

It is a technology that will allow developers of any background to create rich web pages like one would see on a leading-edge, interactive site, such as: www.digg.com

www.hulu.com

You might also have heard the term: “Rich Internet Application” (RIA)– which is often used synonymously with RichUI.

The perceived benefits of RichUI or RIA include: Improved user-responsiveness

The most successful RichUI implementations can achieve almost a “Windows-desktop” look and feel to users

“Rich-er” functionality – beyond the simple rendering of HTML, to include dynamic widgets and components

Improved browser/server load-balancing – as more of the business functionality can be distributed to the desktop (browsers)

Page 7: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

EGL Web2.0 Architecture

COBOL Java

J2EE

EGL

compilation

Server

JSF

JDBC

JCL

SOA

SOA

JavaScript

EGL

compilation

Browser+

System I

System Z

AJAXProxy

The InternetPHP/ASP/J2EE/etc

The InternetPHP/ASP/J2EE/etc

Plain HTML

dojo

Silverlight

Flex

Layouts

REST/SOAP

mashups

SOA

GWT

Volta

Google Gears

Etc.

In RBD 7.0 today Tech Preview in RBD 7.1On Community Portal, 1Q08In RBD 7.51, 4Q08

• One language end-to-end: EGL• One unifying IDE: RBD• Mobility of Skills • Innovative Editing Approach

Page 8: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

EGL: Shielding Complexity

Consume Data + Logic

UI Produce

JavaScriptAJAXDojoGoogle

REST XMLSOAP JSON

SOAPXMLRESTPHP

COBOLJava RPGSQL

EGL Widget Library

IBM

Widget Writer

ISVs

Business Developers

Business Developers

EGL

Page 9: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

EGL Rich UI – Simple Example (Displaying Data)

Page 10: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Rich UI Terms and Concepts – Rich UI and SOA

Rich U.I. makes extensive use of services, and SOAservices, and SOA – Service Oriented Architecture, which is a way to modularize and deploy code so that it can be consumed anywhere in the world using any language.

There are two types of Web Service calls used by Rich U.I.

1.1. RESTful service callsRESTful service calls – A call made through the HTTP service-interface. Once the call is made, a result is passed back to the requestor in XML or JSON format.

2.2. SOAP service callsSOAP service calls - A type of service call that is more popular in enterprise. It requires the exchange of XML messages between the client and host system.

By utilizing web services, one can create a truly scalable system.

Page 11: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Terms and Concepts - continued

AJAXAJAX – Stands for Asynchronous JavaScript and XML. RichUI makes extensive (almost wholesale) use of AJAX, utilizing it whenever it makes a service call. RichUI never executes a traditional HTML Form Submit.

WidgetWidget – A widget is a graphical unit in a GUI or Internet style interface. Most widgets allow for the interaction and manipulation of data in the browser.

DOJODOJO – An open source JavaScript toolkit. The DOJO project sets out to create widgets using only JavaScript. RichUI is able to interface with DOJO code in order to pull in some of their widgets. http://dojotoolkit.org/

Page 12: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Terms and Concepts - continued

JSONJSON – JavaScript Object Notation is lightweight format used by JavaScript to exchange data. JSON is able to serialize structured data, such as arrays, and exchange it among host and client machines.

SilverlightSilverlight – is a new technology developed by Microsoft that is similar to Macromedia’s Flash. RichUI is able to interact with, and integrate with Silverlight widgets in your application:

Page 13: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

A typical RUI application might look like this:

RUI Application

RUI Handler RUI Handler

JavaScript

EGL Server Side Processes

Services

Libraries Programs

Mainframe ApplicationsMainframe Applications

DatabasesDatabases

External FilesExternal FilesAnd And MQMQ

Java or COBOL

RUIWidget(RUIHandler)

LibraryUI Logic, Service Calls

LibraryUI Logic, Service Calls

RUI Application

JSF Application

RUIWidget(RUIHandler)

Page 14: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

EGL Rich UI - Summary

Simple, declarative UI descriptions

Resulting Javascript code deploys on light-weight web server and runs in browser

One language

Simple metaphors

Customizable

Data-driven

Declarative

Page 15: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

DEMO SCENARIO

Page 16: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

UI Rendering

Event Handling

Text Validation

Service Calls

Scenario Flow

Boxes (Containers)

Buttons

Text Field

Text Label

TextField (onKeyUp)

Buttons (onClick) Text Input

(Numeric)

SOAP

Page 17: Rich UI – A Sneak Peek

IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation

Can You Tell The Difference

WindowsEGL Rich UI