legacy tui to egl/web application modernization
DESCRIPTION
Legacy TUI to EGL/Web Application Modernization. Enterprise Modernizations. State of Affairs of Legacy Applications. Applications are text-based, monolithic, inflexible Architecture is single-tier Tools, language and platform are antiquated Domain knowledge buried deep inside source - PowerPoint PPT PresentationTRANSCRIPT
Copyright 2008, Synchrony Systems, Inc.
Legacy TUI to EGL/WebApplication Modernization
Enterprise Modernizations
Copyright 2008, Synchrony Systems, Inc.
Page 2
State of Affairs of Legacy Applications
Applications are text-based, monolithic, inflexibleArchitecture is single-tierTools, language and platform are antiquatedDomain knowledge buried deep inside sourcePressures to modernize; fear of risks, costs, complexity
Copyright 2008, Synchrony Systems, Inc.
Page 3
The Need
Move to browser-based rich UI and Web 2.0Refactor into component architecture and SOAExtract application software assetsAccelerate EGL adoptionManage risk, cost and complexity of modernization
Copyright 2008, Synchrony Systems, Inc.
Page 4
The Solution
Analysis to generate modernization planText forms transformation metricsProgram flow transformation metricsTransformation challenges metrics
Technology enabled modernization to EGL/WebInversion of controlUI Facelift
JSFRich UI
Business logic refactoringSOA Enablement
Copyright 2008, Synchrony Systems, Inc.
Page 5
The Result
Improved architectureSingle language; multiple deployment targetsNo middleware or proprietary runtime componentsSOA enabled
Improved language and platformFull integration with EGLModern IDE – RBDNative look and feel (JSF or Rich UI)
Copyright 2008, Synchrony Systems, Inc.
Page 6
Modernization Roadmap
Terminal
(EGL TUI3270/5250)
Host
(EGL Programs/Display Logic
Business LogicData Access)
Web Browser
(EGL/JSFFacelift)
App Server
(EGL Handlers/Display Logic
Business LogicData Access)
Web Browser
(EGL/JSFFacelift)
App Server
(EGL Handlers/Display Logic)
Host
(EGL Services/Business Logic
Data Access)
Web Browser
(Rich UI Facelift/RUI Handlers
Display Logic)
Host
(TUI Programs/COBOL
RPGNatural)
Terminal
(TUI3270/5250)
Host/App Server
(EGL Services/Business Logic
Data Access)
Monolithic LegacyHost Architecture
Monolithic EGLHost Architecture
JSF Single-tier Architecture
SOA/JSF Multi-tierArchitecture
SOA/RUI Multi-tier Architecture
Copyright 2008, Synchrony Systems, Inc.
Page 7
Modernization Roadmap
Host
(TUI Programs/COBOL
RPGNatural)
Terminal
(TUI3270/5250)
Monolithic LegacyHost Architecture
Terminal
(EGL TUI3270/5250)
Host
(EGL Programs/Display Logic
Business LogicData Access)
Monolithic EGLHost Architecture
Web Browser
(EGL/JSFFacelift)
App Server
(EGL Handlers/Display Logic
Business LogicData Access)
JSF Single-tier Architecture
Web Browser
(EGL/JSFFacelift)
App Server
(EGL Handlers/Display Logic)
Host
(EGL Services/Business Logic
Data Access)
SOA/JSF Multi-tierArchitecture
Web Browser
(Rich UI Facelift/RUI Handlers
Display Logic)
Host/App Server
(EGL Services/Business Logic
Data Access)
SOA/RUI Multi-tier Architecture
Copyright 2008, Synchrony Systems, Inc.
Page 8
Critical Web Transition
Host
(TUI Programs/COBOL
RPGNatural)
Terminal
(TUI3270/5250)
Monolithic LegacyHost Architecture
Terminal
(EGL TUI3270/5250)
Host
(EGL Programs/Display Logic
Business LogicData Access)
Monolithic EGLHost Architecture
Web Browser
(EGL/JSFFacelift)
App Server
(EGL Handlers/Display Logic
Business LogicData Access)
JSF Single-tier Architecture
Web Browser
(EGL/JSFFacelift)
App Server
(EGL Handlers/Display Logic)
Host
(EGL Services/Business LogicData Access)
SOA/JSF Multi-tierArchitecture
Web Browser
(Rich UI Facelift/RUI HandlersDisplay Logic)
Host/App Server
(EGL Services/Business LogicData Access)
SOA/RUI Multi-tier Architecture
TUI forms → web pagesTUI programs → JSF HandlersMonolithic → web modelHost → application server
Preserve execution sequenceMaintain program stateRetain transactions
Copyright 2008, Synchrony Systems, Inc.
Page 12
UI Facelift
Improve on “text based” UI look and feelLinks replace selection entry fieldsToolbars and buttons replace function keysStyles, colors and graphics highlight logical screen areas
Copyright 2008, Synchrony Systems, Inc.
Page 13
Program Flow
“main” Function Page request handler
Submit function
User interacts with form
TUI Program (sequential) Web Application (event-driven)
program initialization
validate
form initialization
converse
forward
Return
input loop
redisplay
program initialization
form initialization
validate
forward
Return
redisplay
onConstruction
onPreRender
Display
Submit
User interacts with page
Copyright 2008, Synchrony Systems, Inc.
Page 14
Implementation Differences
TUI Web
Program flow Sequential Event-driven
Presentation Text-based HTML/JSF/RUI
Copyright 2008, Synchrony Systems, Inc.
Page 16
EGL Modernization Toolset
AnalyticsApplication knowledge miningModernization scenarios, metrics, estimates
Rules-based transformationBulk transformation of monolithic application flow to web modelBusiness logic extraction into servicesFacelift of Text UI to JSF/Rich UI
Copyright 2008, Synchrony Systems, Inc.
Page 17
T3 Transformation Approach
Source code rewritingTransformation scripting languageGeneric transformation rulesApplication specific transformation rules
Web page generationPattern matching languageGenerate JSP pages with smart layoutGeneric and application specific layout transformation rules
Rules-basedReusableReplayableCustomizable to customer requirement
Copyright 2008, Synchrony Systems, Inc.
Page 18
T3 Primary Components
AnalysisIdentify common characteristics of TUI formsIdentify common program structures of TUI programs
Program flow transformationGeneration of JSF page handlersEGL program transformation to use JSF/RUI formsGenerate submit functions
Function-key toolbar linksMenu selection links
Transformation of state management
Text UI transformationGrouping fields according to common usage patternsConversion of text forms to web pages
Copyright 2008, Synchrony Systems, Inc.
Page 19
T3 Block Diagram
Transformation Rules
EGL TUI Code EGL Web CodeEGL Source
Transformation Engine
JSP Web PageForm GenerationEngine
Form GenerationRules
Form specifications
(e.g. 3270,5250, DDS)
Web ApplicationTUI Application
Legacy Code(Cobol, RPG,
Natural Adabas)
T3 Primary Components
Copyright 2008, Synchrony Systems, Inc.
Page 20
T3 – EGL Transformation
Transformation scripts
Transformation script writtenin our own
transformation language
Debugging log of transformation actions
Resulting EGL code generated by the selected
transformation action
Copyright 2008, Synchrony Systems, Inc.
Page 21
T3 – Transformation Results Overview
EGL source filesto be transformed
EGL source code of the selected file
Abstract syntax treeof EGL code
Transformed EGL source
Copyright 2008, Synchrony Systems, Inc.
Page 22
T3 – TUI Form Pattern Matching
EGL TUI forms to be generated
as JSP
The fields on the selected TUI
form
Colors indicatewhich fields are
matched by each pattern
Facelift patterns
Pattern matchinglanguage
Embedded scriptto generate
JSP for matchingfields
Debugginginformation
Copyright 2008, Synchrony Systems, Inc.
Page 23
T3 – Facelift Generation Preview
A view of the resulting
web page
Copyright 2008, Synchrony Systems, Inc.
Page 25
Text Forms Transformation
JSP/JSF page Data Record
Text Form
Page Handler
Copyright 2008, Synchrony Systems, Inc.
Page 26
Extracting JSP/JSF Page from Text Form
Layout is extracted from text form specificationJSF components are bound to fields in data records
JSP/JSF page Data Record
Text Form
Page Handler
Copyright 2008, Synchrony Systems, Inc.
Page 27
Converting Text Form to Data Record
One data record per text formProvides data displayed by JSF pageProvides data to be processed by handlerContains presentation fields to control appearance (color, enabled/disabled state, etc.)
JSP/JSF page Data Record
Text Form
Page Handler
Copyright 2008, Synchrony Systems, Inc.
Page 28
JSF Page Handler
One page handler per formHolds data record used JSF pageHandles requests to display the pageHandles requests to process page when submitted
JSP/JSF page Data Record
Text Form
Page Handler
Copyright 2008, Synchrony Systems, Inc.
Page 29
UI FaceliftHeader AreaHeader Area
Input AreaInput Area
Selection AreaSelection Area
Message AreaMessage Area
Navigation AreaNavigation Area
Copyright 2008, Synchrony Systems, Inc.
Page 30
Layout Areas – Target UI
Header AreaHeader Area
Input AreaInput Area
Selection AreaSelection Area
Message AreaMessage Area
Navigation AreaNavigation Area
Copyright 2008, Synchrony Systems, Inc.
Page 31
Behavior Mapping - Example
Description options are maintainedSelection codes are embedded into link logicText borders are replaced with graphic bordersInput fields are removed (hidden)
Copyright 2008, Synchrony Systems, Inc.
Page 32
Resizable Layout
Expected web browser behaviorSupport multiple monitor sizes
Copyright 2008, Synchrony Systems, Inc.
Page 34
Centralized Style Information
Simplified maintenanceCustomization of lookUse style sheets (CSS) and page templates (JTPL)
Copyright 2008, Synchrony Systems, Inc.
Page 35
Core Program Logic Transformations
Convert flow from monolithic to webSplit functions at the converse statementReplace control flow statements with navigation statementsRemove 'input loops‘Connect logic to JSF lifecycle events
Convert TUI artifacts to JSF equivalentsTUIPrograms to JSF Handlers‘Use form’ statements‘Set’ statements
Create handler functionsPF Keys Menu selections
Copyright 2008, Synchrony Systems, Inc.
Page 36
Support Components
Native EGL libraries (NavLib & FormLib)Handle program control flowProvide state managementEncapsulate JSF/HTML widget style interactions
Custom Style SheetProject set-up and configuration
Data source configurationProject build filesApplication deployment descriptor
Copyright 2008, Synchrony Systems, Inc.
Page 37
Multiple Forms
A single TUIProgram converses multiple formsFor floating forms and or help forms
Transformed to use JSF dialog panels
For independent forms Split into multiple JSFHandlersEach form is a separate web page
Copyright 2008, Synchrony Systems, Inc.
Page 38
Co-dependent Multiple Forms
Maintain a single JSF HandlerManage internal page display state
Multiple form submitsAJAX refreshes
Multiple UI paradigmsMerged screens into single web pageNotebook model – JSF tab group panelWizard model
Copyright 2008, Synchrony Systems, Inc.
Page 39
Open Cursors – Challenges
Programs that keep an open database cursor across converse statements
Open statement, perhaps with ‘forUpdate’ clauseRetrieve one or more rows from the databaseConverse form, show the retrieved dataAfter converse use the cursor for:
Getting more dataReplacing or deleting the current row
Cursors don’t remain open across web page renderings
When the from is submitted the cursor can no longer be used
Copyright 2008, Synchrony Systems, Inc.
Page 40
Open Cursors – Solutions
For programs that show one record at a timePre-fetch the records into a dynamic arrayKeep an index for the currently displayed recordMove data to the form based on the currently indexed recordUpdate or Delete the current record as a separate DB transaction
The record must specify a primary key
For programs that page through a table of several records
Define a record to hold displayed dataPre-fetch rows into a dynamic array of these recordsUse a JSF DataTable to display many rows of data
For large record setsImplement programmatic paging using EGL and DB positioning options
Copyright 2008, Synchrony Systems, Inc.
Page 42
Phase I EGL Modernization Recap
TUI forms transformed to web pagesAll text programs transformed to JSF HandlersMonolithic programs transformed to web modelDeployed on single web tier
Copyright 2008, Synchrony Systems, Inc.
Page 43
Phase II – SOA Enablement
Starting point – EGL/Web ApplicationSingle tier deployment
Extract business logic/data access to EGL ServicesBusiness logic/data access extracted into ‘stateless’ functions
Requires analysis of variable/data usagePass required data as arguments to functions
Put functions into servicesCreate interfaces for the servicesJSF Handlers are modified to invoke service functions
EGL Services are deployed to host platformMulti tier deployment