1. MOVE10: Darwin or Big Bang? 1 MOVE-10: Darwin or Big Bang? SMAT-Team Tobago Thomas Hutegger & Pheona Job tmh@theNatureIsle.com ptj@smat-consulting.com A Darwinian Case Study of a WebSpeed Application's Evolution

2. MOVE10: Darwin or Big Bang? 2 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)

3. MOVE10: Darwin or Big Bang? 3 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)

4. MOVE10: Darwin or Big Bang? 4 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) Version 3 (GUI Module)

5. MOVE10: Darwin or Big Bang? 5 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?

6. MOVE10: Darwin or Big Bang? 6 Example Application V9 (later V10), WebSpeed Three Layers –HTML/Java-Script –WebSpeed Framework –4GL Who is using WebSpeed?

7. MOVE10: Darwin or Big Bang? 7 WebSpeed Architecture Web Server (Apache) Agent Progress Server Browser (Opera) Client Intranet Internet C/S DB

8. MOVE10: Darwin or Big Bang? 8 WebSpeed Round Trip Agent Read Data from Page Save Data to DB Get Data from DB Create Next HTML Page Name-Value Pairs HTML Web-Server C/S DB

9. MOVE10: Darwin or Big Bang? 9 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)

10. MOVE10: Darwin or Big Bang? 10 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)

11. MOVE10: Darwin or Big Bang? 11 Framework Agent Read Data from Page Save Data to DB Get Data from DB Create Next HTML Page Name-Value Pairs HTML Web-Server Framework HTML saved in plain OS text file Provide Name-Value Pairs Temp-Table Simulating Test Program X X C/S DB

12. MOVE10: Darwin or Big Bang? 12 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,...)

13. MOVE10: Darwin or Big Bang? 13 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

14. MOVE10: Darwin or Big Bang? 14 Example – Update Invoice Data Save-Event – Invoice Detail –Get data from page –Update the DB accordingly –Put (some) 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

15. MOVE10: Darwin or Big Bang? 15 Example – Print Invoice Print-Event – Invoice Detail –Get identifying data from page –Run print program –Stuff all 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

16. MOVE10: Darwin or Big Bang? 16 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)

17. MOVE10: Darwin or Big Bang? 17 Architecture Overview – Version 0 Agent PPO.p saveEvent PPO.p preparePage 1 Name-Value Pairs 6 temp-tables Web-Server Framework 2 ttDataIn 3 Data & Context 4 preparePage 5 Data & Context 7 HTML DB

18. MOVE10: Darwin or Big Bang? 18 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

19. MOVE10: Darwin or Big Bang? 19 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)

20. MOVE10: Darwin or Big Bang? 20 Architecture Overview – Version 1 Agent PPO.p saveEvent PPO.p preparePag e 9 temp-tables Framework 2 ttDataIn 4 Data & Context 5 preparePage 7 Data & Context BL.p saveTT createTT 3 ttSave 8 ttXxx 6 get data DB testBl.p “Frontend”“Backend” HTML saved in plain OS text file Provide Name-Value Pairs Temp-Table Simulating Test Program X X Name-Value Pairs HTML Web-Server

21. MOVE10: Darwin or Big Bang? 21 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

22. MOVE10: Darwin or Big Bang? 22 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

23. MOVE10: Darwin or Big Bang? 23 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? */ ).

24. MOVE10: Darwin or Big Bang? 24 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 ). )

25. MOVE10: Darwin or Big Bang? 25 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)

26. MOVE10: Darwin or Big Bang? 26 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)

27. MOVE10: Darwin or Big Bang? 27 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)

28. MOVE10: Darwin or Big Bang? 28 OpenEdge Reference Architecture Data access abstracted from storage Common business logic with advanced models Separated presentation and integration layers OERA

29. MOVE10: Darwin or Big Bang? 29 WebSpeed Implementing The OpenEdge Reference Architecture Data Access Object Business Entity Agent Read Data From Page DB Create Next HTML Page Web-Server OERA

30. MOVE10: Darwin or Big Bang? 30 OpenEdge Reference Architecture with WebSpeed Client GUI Procedure Validations Server Data Access Object xxdo.p Business Entity xxbe.p Super WebSpeed Client (PPO) Save Get Browser Web-Server Save Get C/S DB

31. MOVE10: Darwin or Big Bang? 31 Procedure Call Flow – Prepare Page PPO BE DO Request Page attachDS fill detachDS prepare Return HTML Call Flow DB

32. MOVE10: Darwin or Big Bang? 32 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

33. MOVE10: Darwin or Big Bang? 33 OpenEdge Reference Architecture and ProDataSets with WebSpeed Client GUI Procedure Validations Server Data Access Object xxdo.p Business Entity xxbe.p Super WebSpeed Client (PPO) Save Get Browser Web-Server Save Get C/S DB

34. MOVE10: Darwin or Big Bang? 34 OpenEdge Reference Architecture and ProDataSets with WebSpeed Client Server Super Save Get Web Library xxwb.p Browser Web-Server Super Save Get C/S GUI Procedure Validations Data Access Object xxdo.p Business Entity xxbe.p WebSpeed Client (PPO) DB

35. MOVE10: Darwin or Big Bang? 35 OpenEdge Reference Architecture and ProDataSets with WebSpeed Client Server Super Save Get Web Library xxwb.p Browser Web-Server Super Save Get C/S GUI Procedure Validations Data Access Object xxdo.p Business Entity xxbe.p WebSpeed Client (PPO) DB

36. MOVE10: Darwin or Big Bang? 36 Call Flow – Save and Prepare Page Page Processing Object WB Post Page attachDS fill detachDS prepare Return HTML saveTt Save BE Validate DO Super savePd Save test-ppos.p test-bes.p test-dos.p test-wbs.p Call Flow DB

37. MOVE10: Darwin or Big Bang? 37 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)

38. MOVE10: Darwin or Big Bang? 38 Caching Codes Stuff DB-data into cache Cache available? Get cached data with same version# Get version# of data in DB Can find cached data ? Get data from DB Create cache return cached data A A B B

39. MOVE10: Darwin or Big Bang? 39 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”).

40. MOVE10: Darwin or Big Bang? 40... 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.... /* hugo.p */ BY-REFERENCE Phrase 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 displayTtHugo: FOR EACH ttHugo : DISPLAY ttHugo. END.... DEFINE TEMP-TABLE Hugo FIELD... INDEX....... Execution Time: /* hugo-do.p */ /* main-block */ RUN start-super-proc(“hugo-do.p”).

41. MOVE10: Darwin or Big Bang? 41... 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.... /* hugo.p */ BY-REFERENCE Phrase 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 displayTtHugo: FOR EACH ttHugo : DISPLAY ttHugo. END.... DEFINE TEMP-TABLE Hugo FIELD... INDEX....... Execution Time: /* hugo-do.p */ /* main-block */ RUN start-super-proc(“hugo-do.p”).

42. MOVE10: Darwin or Big Bang? 42... 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.... /* main-block */ RUN start-super-proc(“hugo-do.p”). /* hugo.p */ BY-REFERENCE Phrase 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 displayTtHugo: FOR EACH ttHugo : DISPLAY ttHugo. END.... DEFINE TEMP-TABLE Hugo FIELD... INDEX....... Execution Time: /* hugo-do.p */

43. MOVE10: Darwin or Big Bang? 43 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)

44. MOVE10: Darwin or Big Bang? 44 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)

45. MOVE10: Darwin or Big Bang? 45 Questions?

46. MOVE10: Darwin or Big Bang? 46 Thank you www.smat-consulting.com tmh@theNatureIsle.comptj@smat-consulting.com

47. MOVE10: Darwin or Big Bang? 47 Seeds for Thought Number of records in main TT limited –Don't want a page with 5000 table-rows {&Out} as late as possible –Debugging easier if everything can be run in Editor Horizontal Separation of Tasks –Specialization on UI, UI management, Business-logic xx