® © 2008 ibm corporation ibm software group egl simplify innovation egl international conference...
TRANSCRIPT
®
© 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
IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation
Not Just Buzzwords
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
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
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
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)
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
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
IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation
EGL Rich UI – Simple Example (Displaying Data)
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.
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/
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:
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)
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
IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation
DEMO SCENARIO
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
IBM Software Group | EGL Simplify InnovationIBM Software Group EGL Simplify Innovation
Can You Tell The Difference
WindowsEGL Rich UI