Rich UI – A Sneak Peek

decorumgroveInternet and Web Development

Aug 7, 2012 (5 years and 1 month ago)

540 views

®


© 2009 IBM Corporation

IBM Software Group

Application Modernization via migration to
Rational’s EGL




Todd Britton

IBM Rational

Application Transformation & Migration

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Agenda


Business Realities



EGL Review



Automated Migration



Demo

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Problems that IBM i customers encounter

Reality …


business and regulatory needs are highly dynamic


major investments in existing applications … they:


“run the business” and took years, sometimes decades, to build


are “stuck” in their current environment (green screens, etc…)


MUST be leveraged while advancing! … evolve or die


Customers need …


a modern, “real” web user interface


Need latest “web 2.0” capabilities to compete, but the technology curve is very steep


Too hard to train new users in 5250 screens


“Screen scraping” is good, but is not adequate as a strategic solution



flexibility


Need to be able to deploy to other platforms as business needs change


Transition to a service
-
oriented architecture easily and quickly


New applications purchased on Linux, AIX, Windows…need to be able to integrate with them



to leverage existing skills


Used to high productivity with RPG and IBM i…don’t want to give that up


Need to leverage skills & knowledge of current developers most effectively for the future

Applications

Teams

People

without …


Taking 5 years


Breaking the bank


Incurring significant risk

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Problems that IBM i customers encounter

1. Need a modern, “real” web user interface


Options

4

Pro’s:


Easy to create/maintain


“legacy” data entry folks have it all memorized

Con’s:


“The business” views as “out of touch”


Can’t extend to web and specialized devices


Hard to train new users

Leave as Green Screen

Pro’s:


Quick ROI and Web UI

Con’s:


Maintenance activities take you back to DDS


Don’t integrate well with new web applications

“Screen Scrape” to achieve Web UI

Pro’s:


High quality results

Con’s:


Large work effort to achieve results


Might require different developers for UI

Re
-
factor RPG and build new web UI

Pro’s:


Result is true Web 2.0 UI … DDS goes away


Quick results and high quality


Refactor and enrich UI as desired

Con’s:


No Green screen alternative for those die hards…

Migrate RPG/DSPF to EGL/EGL RUI

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language





WebSphere


USS


Linux


Batch


CICS


IMS

System z





WebSphere


Tomcat


Native


Windows, Linux, Unix

Business Logic



IE


Firefox


Safari

Browser



WebSphere


Tomcat


IBM i Integrated Web Server


Native i5/OS


Native i5/OS

IBM i

Problems that IBM i ISV’s and some customers encounter

2. Need Platform Flexibility

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Problems that IBM i ISV’s and some customers encounter

3. Leverage Business
-
aware Developers for Web 2.0

RPG/COBOL developers …

they know the business

EGL



Leverage them for Web 2.0!

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

EGL

Solution to these problems


EGL is a true cross
-
platform, cross
-
tier language
targeted at all types of developers and applications


Traditional, procedural, object
-
oriented, Web, SOA, etc.


Web 2.0 built in


SOA built in



The goal of EGL is to shield developers from
complexities that are unnecessary for building
business applications.



EGL is an excellent target language for evolving
existing, traditional applications in RPG, COBOL
and many other languages

Machine

Code

Assembly

Language

C++/C#

COBOL

EGL

RPG

Java

PhP

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

8


Build end
-
to
-
end Web 2.0 quickly with a single language


Fully extensible


Use a language that is easy to learn


Benefit from productive development


Use Ajax without any of its complexities


Use a rich, extensible widget library


Debug web applications in an Eclipse IDE


Consume any type of web service

EGL

Web 2.0 built in

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

EGL

Web 2.0 in EGL is much more productive

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas
-
microsoft
-
com:vml">


<head>


<meta http
-
equiv="content
-
type" content="text/html; charset=UTF
-
8"/>


<title>Google Maps API Example: Simple Geocoding</title>


<script src="http://maps.google.com/maps?file=api&amp;v=2.x


<script type="text/javascript">



var map = null;


var geocoder = null;



function initialize() {


if (GBrowserIsCompatible()) {


map = new GMap2(document.getElementById("map_canvas"));


map.setCenter(new GLatLng(37.4419,
-
122.1419), 13);


geocoder = new GClientGeocoder();


}


}



function showAddress(address) {


if (geocoder) {


geocoder.getLatLng(


address,


function(point) {


map.setCenter(point, 13);


var marker = new GMarker(point);


map.addOverlay(marker);


marker.openInfoWindowHtml(address);


}


);


}


}


</script>


</head>



<body onload="initialize()" onunload="GUnload()">


<form action="#" onsubmit="showAddress(this.address.value); return false">


<p>


<input type="text" size="60" name="address" value="1600 Pennsylvania Ave,
Washington DC" />


<input type="submit" value="Go!" />


</p>


<div id="map_canvas" style="width: 500px; height: 300px"></div>


</form>


</body>

</html>

handler

MyRuiHandler
type

RUIhandler { initialUI = [ addressForm, map ] }



addressField
TextField

{ text = "1600 Pennsylvania Ave, Washington DC", width = 250
};



goButton
Button

{ text = "Go!", onClick ::= goButton_clicked };


addressForm
Box

{ children = [ addressField, goButton ] };



map
GoogleMap

{ width = "500px", height = "300px" };



function

goButton_clicked (e
Event

in)


addresses String[] = [ addressField.text ];


map.showAddresses(addresses, addresses);


end

end

HTML and JavaScript

EGL Rich UI

All code, including UI
and controller logic,
is written completely
in EGL.

The complexity of the
Google Map APIs are
hidden from the
developer, so the
developer can focus on
the actual business
requirement and not
technical complexities.

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Web 2.0

The proper balance

Client

Server

Mainframe computing

“Dumb” green screen clients

Omnipotent big mainframe servers

Client
-
server computing

“Smart” Personal Computer clients

Simple file and database servers

Web (1.0) computing

Light Web Browser clients

Rich application and database servers

Web 2.0 computing

Rich Internet Application clients

Lighter application and database servers

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

EGL

SOA built in


Service part:


a generatable part containing code that will be accessed:

-

from EGL code by way of a local or TCP/IP connection (
EGL Service
).

-

from any code by way of an HTTP connection (
EGL Web service
).



Interface part:


Used to access external services as EGL services or simply to provide
separation of concern.


At development time…


Focus on the business logic


Implement SOA design elements: services and interfaces


Leverage existing business developers for new SOA development


Ignore deployment targets/technology while coding/testing

Deploy EGL services…

To any platform (
Java to WAS/Tomcat, COBOL to CICS, i5/OS )


As a Web service (uses SOAP)


As a private service (uses CICS ECI or TCP)

Leverage external web services…


EGL Interfaces


represent external web services


are created via import from WSDL


allow the EGL developer to stay within the context of EGL programming

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Batch
Processes

Text UI

Web

Web 2.0

Reports

SOA





WebSphere


USS


Linux


Batch


CICS


IMS

System z





WebSphere


Tomcat


Native


Windows, Linux, Unix

EGL Business Logic

Program

Handler

Service



IE


Firefox


Safari

Browser



WebSphere


Tomcat


IBM i Integrated Web Server


Native i5/OS


Native i5/OS

IBM i

EGL

Provides Ultimate Platform Flexibility

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

EGL

Leveraging RPG skills


Short learning curve to learn EGL


Procedural language with standard programming constructs


2 Weeks to understand basics and start building applications


1 Month to get proficient and productive


Only prerequisite is procedural programming experience

COBOL to Java

C++ to Java

Cost (total expenses and losses)

$57,000

$23,000

Time (Duration of migration)

12 months

5 months

Time/COBOL developer’s time

100%

40%

Risk (Probability of Failure)

60%

5%

Probability of Success

40%

95%

Data on Migration to “Professional” Java Skills


from other languages

*Source: Gartner Group Study

RPG

EGL

Externally Described Files

Records

Field References

Data Items

Procedural

Procedural

Program

Program

Subroutine

Function

Service Program

Service

EGL

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

14

RMEi: Rational Migration Extension for IBM i

Transform your legacy applications…

*

RPG

COBOL

RMEi

Conversion Tooling

Integrated

Intel Server

Blade Server

EGL


Common Language for the Power Platform


Web 2.0 enable and Service Enable

* Future

Achieves:

1.
Modern, “real” Rich web UI

2.
If needed, also Platform Flexibility

3.
Easy transition for RPG developers

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

15

Modernize Past Development Investments

Transform your legacy applications…

HPS
/
AppBuilder

*

RPG

Ideal

Enterprise

COBOL

EGL

… *

RMEi

RMEn

RMEca

Testing, Remediation,
Deployment

Conversion Tooling

z


CICS

z


IMS

z


Linux

z


zAAP

z


WAS

i


WAS

i


Native

Linux

AIX

Windows

* = Future Capability

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Rational Migration Extension

Philosophy


Low risk


Procedural to procedural; OO to OO


Lateral move first, enhancements follow (if desired)


Frequent deliveries of running applications (Agile processes)



Short timeframes


High level of automation … “factory” approach



Reasonable cost


High level of automation … “factory” approach


Low cost resources where it makes sense



Easy Maintainability


Leverage existing, extensive investments in current applications and developers


EGL and EGL Rich UI as targets for procedural sources


Java as target for OO sources



High Flexibility


EGL allows broad deployment flexibility

16

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Migration Strategy

DSPF

DSPF

DSPF

DSPF

RPG

RMEi

DSPF

DSPF

DSPF

EGL
RuiHandler

EGL

Interactive Programs:

Batch Programs:

CLP

CLP

CLP

CLP

RPG

RPG

RPG

RPG

RMEi

EGL, etc…

EGL, etc…

EGL, etc…

EGL, etc…

EGL

EGL

EGL

EGL

Platform specific


reimplement

in EGL & other technologies

Goals:


UI modernization


Service
-
oriented architecture

Goals:


Platform independence


Flexible service
-
oriented architecture

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Function
Declaration

Assignment
Statements

Date
Formatting
Function

Data access

Database
Access

Array
Lookup

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Transition from 5250 to EGL Rich UI


1. Need a modern, “real” web user interface

Original 5250

Automated Migration

to EGL/RUI

Enriched UI

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Transition from 5250 to EGL Rich UI


1. Need a modern, “real” web user interface

Doweq








Filsfl


write overlay


read sflctl


prcsfl




end

Original Program

sflctl




overlay




Original layout

Do while








Filsfl


show overlay


converse sflctl


prcsfl




end

EGL Program

sflctl




overlay




EGL RUIHandler

EGL Service

RUI Gateway

GetRelatedRows()

End

RelatedData

Automated

Migration

Automated

Migration

After migration:


UI layout, Controller logic, and business logic


migrated to EGL


controller/business logic run on server


low risk/quick results



True “Web 2.0” UI


driven by controller logic on server


enrich UI using any web 2.0 widgets



Migrated program placed in an EGL Service


Easy extensibility

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Transition from 5250 to EGL Rich UI


1. Need a modern, “real” web user interface

21

Doweq








Filsfl


write overlay


read sflctl


prcsfl




end

Original Program

sflctl




overlay




Original Layout

Do while








Filsfl


show overlay


converse sflctl


prcsfl




end

EGL Program

sflctl




overlay




EGL RUIHandler

EGL Service

RUI Gateway

Filsfl()

End


Prcsfl()

End


GetRelatedRows()

End




Sflctl

End


Overlay

End


DisplayGrid

End




EGL RUIHandler

EGL Service

GetRelatedRows()

End

RelatedData

Automated

Migration

Automated

Migration

On your schedule:


Refactor …


Move controller logic out to RUIHandler


Create “operations” in EGL business logic


Focus on flexibility and reusability

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Migration to EGL

Extra Benefit: move to SOA after migration


Service part:


a generatable part containing code that will be accessed:

-

from EGL code by way of a local or TCP/IP connection (
EGL Service
).

-

from any code by way of an HTTP connection (
EGL Web service
).



Interface part:


Used to access external services as EGL services or simply to provide
separation of concern.


At development time…


Focus on the business logic


Implement SOA design elements: services and interfaces


Leverage existing business developers for new SOA development


Ignore deployment targets/technology while coding/testing

Deploy EGL services…

To any platform (
Java to WAS/Tomcat, COBOL to CICS, i5/OS )


As a Web service (uses SOAP)


As a private service (uses CICS ECI or TCP)

Leverage external web services…


EGL Interfaces


represent external web services


are created via import from WSDL


allow the EGL developer to stay within the context of EGL programming

Refactor

migrated EGL code

EGL Program

EGL Program

EGL Service

Java

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Demo

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Rational Application Transformation Briefing Sheet

Customer:

Business:

Agri
-
business ISV

Location:

Orlando

Context:

Requirements:



Support for additional platforms (currently only support IBM i)



Can’t find RPG skills



Richer User Interfaces




Scope of problem:

5M LOC of RPG systems



Have very large and complex RPG programs


Solution:


Migrating applications to EGL



Largest RPG program migrated: 27,000 lines



Building new user interfaces in EGL RUI



First application in progress; presenting this at their User Conference in March




IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Summary


Existing RPG or COBOL apps need strategic new UI


Screen scraping good for tactical web UI


Strategic web solutions needed



EGL and EGL RUI


Easy transition for RPG/COBOL developers


Best Web 2.0 tooling on the market today



Automated migration to EGL can give you a competitive advantage


Evolve RPG and COBOL assets into Web 2.0 … strategic UI modernization solution


UI Enrichment opportunities abound


Low risk, Quick ROI


Easy transition for RPG and COBOL developers


Flexible deployment targets


Highly productive and flexible language and environment


Migrate at your own rate and pace: interactive programs only, complete applications, or entire systems



Next Steps


Run a pilot


Contact Todd Britton (
tbritton@us.ibm.com
) or one of our key partners for more details

IBM Software Group | EGL Simplify Innovation

IBM Software Group

EGL


IBM’s Newest Business Language

Thank You