MOVE10: Darwin or Big Bang? 1 MOVE-10: Darwin or Big Bang? SMAT-Team Tobago Thomas Hutegger & Pheona Job [email protected] [email protected]

MOVE10: Darwin or Big Bang? 1

MOVE-10: Darwin or Big Bang?

SMAT-Team Tobago

Thomas Hutegger & Pheona Job

[email protected] [email protected]

A Darwinian Case Study of a WebSpeed Application's Evolution


Goals For This Session

We chose to evolve the application step by step

Goal: Seeds for thought:

•What where the goals of each step

•Harvest and build

•Advantages of newer architecture (using ProDataSets)


Agenda

• Three Modernization Main QuestionsOverview of Example Application Architecture

• Version 0 (Legacy Code)

• Version 1 (some UI/BL separation)

• Version 2 (BL GUI ready)


Agenda

➔ Three Modernization Main QuestionsOverview of Example Application Architecture

• Version 0 (Legacy Code)



• Version 3 (GUI Module)


Three Modernization Main Questions

• How to reuse as much as possible of the existing application?

• How to integrate programs of the old and the new architecture within one application, so they can run in parallel?

• How to design the new architecture, so future modernization efforts can be implemented easily, and with maximum code-reuse?


Example Application

• V9 (later V10), WebSpeed

• Three Layers– HTML/Java-Script– WebSpeed Framework– 4GL

• Who is using WebSpeed?


WebSpeed Architecture

Web Server(Apache) Agent

Progress

ServerBrowser(Opera)

Client

IntranetInternet

C/S

DB


WebSpeed Round Trip

Agent

Read Datafrom Page

Save Datato DB

Get Data from DB

Create NextHTML Page

Name-ValuePairs

HTML

Web

-Ser

ver

C/S

DB


Complexities with WebSpeed

• Non-4GL expertise needed (HTML,JavaScript,...)

• Testing/Debugging– White screen (severe error, server-log)– Restart of Agents (to pick up changed programs)

• “Stateless” client– context management– Flat character-only data-structure (name-value pairs)


Tasks of Framework

• Converts name-value pairs into temp-table

• Requires data for HTML page in temp-tables

• Merges data with HTML page template (plain text)

• Sends merged page to web-stream (i.e. WebServer)

• ... or to a file (for testing purposes)


Framework

Agent

Read Datafrom Page

Save Datato DB

Get Data from DB

Create NextHTML Page

Name-ValuePairs

HTML

Web

-Ser

ver

Fram

ewor

k

HTML saved in plain OS text file

Provide Name-ValuePairs Temp-Table

Sim

ulat

ing

Tes

t Pro

gram

X

X

C/S

DB


Observations –> Basic Concept

• 3 Event-types submit a page:– View (first request [menu], refresh, change in filter

values, request details...)– Print (providing what and how to print)– Save (providing data to save, Ids to delete)

• Posting page can be – Same as next page (next instance, save&refresh,...)– Different from next page (browser->viewer,...)


Example – Invoices Overview/Detail

• View-Event – Invoice Overview– Stuff page-data into

context

• Prepare Page – Invoice Detail– Get data from context– Select and move data

from DB into Temp-Tables

– Framework merges temp-table data into HTML page


Example – Update Invoice Data

• Save-Event – Invoice Detail– Get data from page– Update the DB

accordingly– Put (some) data into

context





Example – Print Invoice

• Print-Event – Invoice Detail– Get identifying data

from page– Run print program– Stuff all page-data into

context





Agenda

✔ Three Modernization Main QuestionsOverview of Example Application Architecture

➔ Version 0 (Legacy Code)




Architecture Overview – Version 0

Agent

PPO.psaveEvent

PPO.p preparePage

1 Name-ValuePairs

6 temp-tables

Web

-Ser

ver

Fram

ewor

k

2 ttDataIn 3 Data & Context

4 preparePage

5 Data &Context7 HTML

DB


Main-Issues – Version 0

• Duplication of code– Drop-downs, pages with similar data, ...

• Fields as parameters

• No specialization is possible

• GUI module would require reprogramming and further code-duplication

• QA: several steps testable only in one block

➔ UI/BL separation


Agenda

✔ Three Modernization Main QuestionsOverview of Example Application Architecture

✔ Version 0 (Legacy Code)➔ Version 1 (some UI/BL separation)



Architecture Overview – Version 1

Agent

PPO.psaveEvent

PPO.p preparePag

e9 temp-tables

Fram

ewor

k

2 ttDataIn 4 Data & Context

5 preparePage

7 Data &Context

BL.p saveTT

createTT

3 ttSave

3 ttSave

3 ttSave

8 ttXxx

8 ttXxx

6 get data

6 get data

DB

testBl.p “Frontend” “Backend”

HTML saved in plain OS text file

Provide Name-ValuePairs Temp-Table

Sim

ulat

ing

Tes

t Pro

gram

X

X

Name-ValuePairs

HTML

Web

-Ser

ver


Improvements

• Separated DB access from Front-End specifics– Allow programmer's specialization (“backend” -

“frontend”)– Programs less cluttered –> easier debug-able and

maintainable

• Test DB-Access separately

• Use Temp-Tables, instead of single parameters– adding/deleting fields impacts end-points only, but not

the plumbing


Separation of DB-Access & Front-End

• Create new structured Procedure for DataAccessObject

• Moved some existing procedures from PageProcessObject

• Extracted code-parts into new procedures

• Run DataAccessObject as super-procedure


Testing the DB-Access Procedures

Procedures tested before usage in Page-Process-Object

/* call BL procedure */RUN createTtDmsSpList IN TARGET-PROCEDURE ( "*" /* Service Provider ID Filter */ , "tour*" /* Service Provider Name Filter */ , "*" /* Service Provider Type Filter */ , "valueLabel,ServiceProviderId" /* sorting */ , INPUT-OUTPUT TABLE ttDmsSpList ).

/* display the results */RUN displayTt IN TARGET-PROCEDURE ( "Service Providers - List Data" , TEMP-TABLE ttDmsSpList:HANDLE , YES /* output to screen? */ ) .


Using Temp-Table

/* retrieve the data from the page */RUN retrievePageData IN TARGET-PROCEDURE ( OUTPUT lcFormId ,OUTPUT lcFormIdFilter ,OUTPUT lcFormState ,OUTPUT lcNextformState ,OUTPUT lcEvent ,OUTPUT lcPpo ,OUTPUT lcNextPpo ,OUTPUT lcPpoProcess ,OUTPUT lcNextPpoParams ,OUTPUT lcPpoParams ,OUTPUT lcNextFormId ,OUTPUT lcSkipCondition ,OUTPUT lcSkipEvent ,OUTPUT llValidData ,INPUT-OUTPUT TABLE ttMessage ).)

• After (one temp-table):• Before (separate parameters):

/* retrieve the data from the page */RUN retrievePageData IN TARGET-PROCEDURE ( OUTPUT lcFormIdFilter ,OUTPUT llValidData ,INPUT-OUTPUT TABLE ttMessage , OUTPUT TABLE ttSaveSywEt ).)


Agenda

✔ Three Modernization Main Questions✔ Overview of Example Application Architecture✔ Version 0 (Legacy Code)✔ Version 1 (some UI/BL separation)➔ Version 2 (BL GUI ready)


Main Issues – Version 1

• Back-end not GUI ready

• Performance– Drop-Downs– Codes, non-changing data could be cached– TT parameter improvements in V10

• Front-End– UI data structure <> DB data structure– Component-ize pages (code reuse)


Version 2 Focus

• Back-End– Use OpenEdge Reference Architecture– Use ProDataSets

• Front End– Move to card-oriented pages (reuse cards on several

pages)– More Javascript (drop-downs)


OpenEdge Reference Architecture

Data accessabstracted from

storage

Common business logic with

advanced models

Separated presentationand integration layers

OERA


WebSpeed Implementing The OpenEdge Reference Architecture

Data Access Object

Business Entity

Agent Read DataFrom Page

DB

Create Next HTML Page

Web-Server

OERA


OpenEdge Reference Architecture with WebSpeed

Client

GUIProcedure

Validations

Server

DataAccessObjectxxdo.pBusiness

Entityxxbe.p

Super

WebSpeedClient(PPO) Save

Get

Bro

wse

r

Web

-Ser

ver

Save

Get

C/S

DB


Procedure Call Flow – Prepare Page

PP

O

BE

DO

Request Page attachDS<DataSet>

fill<DataSet>

detachDS

prepare<DataSet>

Return HTML

Call Flow

DB


Issues With WebSpeed

• Did record change since page was prepared?– Additionally sending complete record to page

• So it can be retrieved as “before image” record

– Using “version” field

• Total disconnect between preparing page and next post– ProDataSet content lost– No before-image temp-table possible– Standard ProDataSet update feature can't be used


OpenEdge Reference Architecture and ProDataSets with WebSpeed

Client

GUIProcedure

Validations

Server


Entityxxbe.p

Super

WebSpeedClient(PPO) Save

Get

Bro

wse

r

Web

-Ser

ver

Save

Get

C/S

DB



Client Server

Super

Save

Get

Web Libraryxxwb.pB

row

ser

Web

-Ser

ver

Super

Save

Get

C/S

GUIProcedure

Validations

DataAccessObjectxxdo.p

BusinessEntityxxbe.p

WebSpeedClient(PPO)

DB



Client Server

Super

Save

Get

Web Libraryxxwb.p

Bro

wse

r

Web

-Ser

ver

Super

Save

Get

C/S

GUIProcedure

Validations


Entityxxbe.p

WebSpeedClient(PPO)

DB


Call Flow – Save and Prepare Page

Pag

e P

roce

ssin

g O

bjec

t WB

Post Page

attachDS<DataSet>

fill<DataSet>

detachDS

prepare<DataSet>

Return HTML

saveTt<Page>Save

BE

Val

idat

eD

O

Super

SupersavePd<Page>Save

test-ppos.p

test-bes.p test-dos.p

test-wbs.p

Call Flow

DB


Improvements

• Back-end ready for GUI

• Improved overall performance– Codes and other semi-static data cached– Drop-downs filled with Javascript– BY-REFERENCE for data-structure parameters

• Moved to cards as process-unit (instead of whole page)


BY-REFERENCE Phrase

...RUN getHugo IN TARGET-PROCEDURE ( OUTPUT PARAMETER TABLE ttHugo BY-REFERENCE )....

DEFINE TEMP-TABLE Hugo FIELD ... INDEX ... .PROCEDURE displayHugo:FOR EACH ttHugo : DISPLAY ttHugo. END....

PROCEDURE getHugo:DEFINE OUTPUT PARAMETER TABLE FOR ttHugo.FOR EACH hugo NO-LOCK : CREATE ttHugo. BUFFER-COPY hugo TO ttHugo . END. /* FOR EACH hugo NO-LOCK */RUN displayHugo IN TARGET-PROCEDURE.RUN displayHugo.

PROCEDURE displayHugo:FOR EACH ttHugo : DISPLAY ttHugo. END....

DEFINE TEMP-TABLE Hugo FIELD ... INDEX ... .

/* hugo-do.p */

...

• Compile Time:/* hugo.p */

/* main-block */RUN start-super-proc(“hugo-do.p”).




/* hugo.p */

BY-REFERENCE Phrase


PROCEDURE displayTtHugo:FOR EACH ttHugo : DISPLAY ttHugo. END....


...

• Execution Time:

/* hugo-do.p */





/* hugo.p */

BY-REFERENCE Phrase




...

• Execution Time:

/* hugo-do.p */






/* hugo.p */

BY-REFERENCE Phrase




...

• Execution Time:

/* hugo-do.p */


Outlook – Version 3

• Improving Standards – How– Performance

• More “Profiler” work

• Expanding Functionality – What– Front-End

• Add GUI for certain functionalities

– Back-End• Add PDF printing (currently only RTF)


Goals For This Session

We chose to evolve the application step by step

Seeds for thought:

•What where the goals of each step

•How to harvest and build

•Advantages of newer architecture (using ProDataSets)


Questions?


Thank you

www.smat-consulting.com

[email protected] [email protected]

Documents

MOVE10: Darwin or Big Bang? 1 MOVE-10: Darwin or Big Bang? SMAT-Team Tobago Thomas Hutegger & Pheona Job [email protected] [email protected]