1. The Easiest Way to Write Web Applications Jordi Sastre IT Architect, PSC May 2012

2. © 2012 Progress Software Corporation. All rights reserved. 2 Introduction  Methodology to write simple but powerful web applications  Based on a true story  It’s not about what my code does, but what your code will do when you write it

3. © 2012 Progress Software Corporation. All rights reserved. 3 Agenda  Background  Technical Concepts  WebSpeed Best Practice  Demos  Summary

4. © 2012 Progress Software Corporation. All rights reserved. 4 Background: Once upon a time in PSC-IT…  Numerous WebSpeed applications  Quick to develop and deploy  Different teams, people and coding techniques  Challenging to support and enhance

5. © 2012 Progress Software Corporation. All rights reserved. 5 Background: Requirements  Single web development methodology  AppServer as a preferred choice for accessing data  Separation of HTML and ABL  No recompilation after HTML change  Ability to get the HTML from a Content Management System  Easy to support and maintain

6. © 2012 Progress Software Corporation. All rights reserved. 6 Background: Web Technologies  WebSpeed: CGI wrapper, ABL with embedded HTML SpeedScript, HTML with embedded ABL Mapped Objects, separates ABL and HTML, but at a price They all require recompilation after any ABL or HTML change  Non WebSpeed: New architectures Mixed technologies Low level programming Give up the benefits of OpenEdge ABL Constrained by the framework itself

7. © 2012 Progress Software Corporation. All rights reserved. 7 Agenda  Background  Technical Concepts  WebSpeed Best Practice  Demos  Summary

8. © 2012 Progress Software Corporation. All rights reserved. 8 Technical Concepts: OpenEdge Reference Architecture

9. © 2012 Progress Software Corporation. All rights reserved. 9 Technical Concepts: Service Oriented Architecture http://en.wikipedia.org/wiki/Service-oriented_architecture

10. © 2012 Progress Software Corporation. All rights reserved. 10 Technical Concepts: Model-View-Controller (MVC) “Model-View-Controller is the concept introduced by Smalltalk's inventors (Trygve Reenskaug and others) of encapsulating some data together with its processing (the model) and isolate it from the manipulation (the controller) and presentation (the view) part that has to be done on a User Interface.” http://c2.com/cgi/wiki?ModelViewController

11. © 2012 Progress Software Corporation. All rights reserved. 11 Technical Concepts: Business Logic Separation Client Logic Client Logic Client Logic Client Logic Data Users

12. © 2012 Progress Software Corporation. All rights reserved. 12 Technical Concepts: Business Logic Separation Client Logic Client Logic Client Logic Client Logic Server Logic Server Logic Client Logic Client Logic Data Users

13. © 2012 Progress Software Corporation. All rights reserved. 13 Client Logic Client Logic Technical Concepts: Business Logic Separation  Robust data integrity protected from the clients  Server logic in only one place  Server logic is simple (no UI distractions)  Server logic available to multiple clients  Client logic deals with visual elements only  Client logic is simple (no SL distractions) Client Logic Client Logic Server Logic Server Logic Client Logic Client Logic Data Users

14. © 2012 Progress Software Corporation. All rights reserved. 14 Technical Concepts: Presentation Logic Separation Server Logic Server Logic Client Logic Client Logic Data HTML CSS JS HTML CSS JS Users

15. © 2012 Progress Software Corporation. All rights reserved. 15 Technical Concepts: Presentation Logic Separation  ABL and HTML might be coded by different developers  No ABL recompilation on HTML changes  ABL is simple (mainly data mapping and front end validation)  HTML is simple (just a page layout) Server Logic Server Logic Client Logic Client Logic Data HTML CSS JS HTML CSS JS Users

16. © 2012 Progress Software Corporation. All rights reserved. 16 Technical Concepts: Can WebSpeed do it?  How to separate client and server logic? WebSpeed (.w) for client logic, no database access ABL backend (.p) for server logic and data access, available from AppServer or different directory  How can the HTML and ABL be separate? Perl’s lwp-request or ABL gets the HTML from a CMS URL ABL reads HTML and streams it to the WebSpeed output  How can the HTML and ABL exchange data? Tags embedded in the HTML HTML conventions for ABL parsing

17. © 2012 Progress Software Corporation. All rights reserved. 17 Requirements Review  Single web development methodology  AppServer as a preferred choice for accessing data  Separation of HTML and ABL  No recompilation after HTML change  Ability to get the HTML from a Content Management System  Easy to support and maintain

18. © 2012 Progress Software Corporation. All rights reserved. 18 Requirements Review  Single web development methodology WebSpeed CGI wrapper with tags to map data fields  AppServer as a preferred choice for accessing data  Separation of HTML and ABL  No recompilation after HTML change  Ability to get the HTML from a Content Management System  Easy to support and maintain

19. © 2012 Progress Software Corporation. All rights reserved. 19 Requirements Review  Single web development methodology WebSpeed CGI wrapper with tags to map data fields  AppServer as a preferred choice for accessing data OpenEdge AppServer  Separation of HTML and ABL  No recompilation after HTML change  Ability to get the HTML from a Content Management System  Easy to support and maintain

20. © 2012 Progress Software Corporation. All rights reserved. 20 Requirements Review  Single web development methodology WebSpeed CGI wrapper with tags to map data fields  AppServer as a preferred choice for accessing data OpenEdge AppServer  Separation of HTML and ABL  No recompilation after HTML change ABL streaming and parsing HTML files  Ability to get the HTML from a Content Management System  Easy to support and maintain

21. © 2012 Progress Software Corporation. All rights reserved. 21 Requirements Review  Single web development methodology WebSpeed CGI wrapper with tags to map data fields  AppServer as a preferred choice for accessing data OpenEdge AppServer  Separation of HTML and ABL  No recompilation after HTML change ABL streaming and parsing HTML files  Ability to get the HTML from a Content Management System With Perl or ABL  Easy to support and maintain

22. © 2012 Progress Software Corporation. All rights reserved. 22 Requirements Review Single web development methodology AppServer as a preferred choice for accessing data Separation of HTML and ABL No recompilation after HTML change Ability to get the HTML from a Content Management System  Easy to support and maintain

23. © 2012 Progress Software Corporation. All rights reserved. 23 Additional Decisions  Technologies Cascading Style Sheets (CSS) for consistent look & feel JavaScript for front-end validation and advanced client functionality OpenEdge technology (Database, WebSpeed, AppServer and ABL) HTML independency  Industry standards Separation of code (OERA & MVC) Structured and reusable code (SOA)

24. © 2012 Progress Software Corporation. All rights reserved. 24 Agenda  Background  Technical Concepts  WebSpeed Best Practice  Demos  Summary

25. © 2012 Progress Software Corporation. All rights reserved. 25 Architecture WebSpeed.w.html CMS Static web css js gif Static web css js gif Web Browser Web Server AppServer.p PresentationControlData GETPOST Data 1 1 3 3 4 4 5 5 6 6 7 7 2 2 8 8 9 9 10

26. © 2012 Progress Software Corporation. All rights reserved. 26 Build include file with WebSpeed flow GetHTML RedirectPage Start End GetFields METHOD Redirect? N N Y Y GetPageProperties DisplayHTML GET POST

27. © 2012 Progress Software Corporation. All rights reserved. 27 Build include file with WebSpeed flow GetHTML RedirectPage Start End GetFields METHOD Redirect? N N Y Y GetPageProperties DisplayHTML GET POST.w.html.ini

28. © 2012 Progress Software Corporation. All rights reserved. 28 Build include file with WebSpeed flow GetHTML DisplayPage MergeHTML ProcessPost RedirectPage Start End GetFields METHOD Redirect? N N Y Y GetPageProperties DisplayHTML Initialize.w.html.ini GET POST

29. © 2012 Progress Software Corporation. All rights reserved. 29 Build include file with WebSpeed flow /* wsbp.i */ {src/web2/wrap-cgi.i} RUN GetPageProperties. PROCEDURE ProcessWebRequest: cPageMessage = "". RUN GetFields. /* Get form fields and cookies */ RUN Initialize. /* Connect AppServer, manage form fields,... */ cPageMessage = RETURN-VALUE. IF cPageMessage = "" THEN DO: IF REQUEST_METHOD = "POST" THEN DO: RUN ProcessPost. /* App logic to validate and process data */ cPageMessage = RETURN-VALUE. IF cPageMessage = "" AND cRedirectUrl <> "" THEN RUN RedirectPage. /* Redirect to next page */ END. IF cPageMessage = "" THEN DO: RUN DisplayPage. /* App logic to display data */ cPageMessage = RETURN-VALUE. END. RUN GetHTML. /* Get HTML from Content Management or file */ RUN DisplayHTML. /* Insert data in HTML and display web page */ QUIT. END PROCEDURE.

30. © 2012 Progress Software Corporation. All rights reserved. 30 Build the program for my web page /* webpage.w */ CREATE WIDGET-POOL. {wsbp.i "webpage.ini"} RUN ProcessWebRequest. PROCEDURE Initialize: /* App logic always peformed */ RETURN "". END PROCEDURE. PROCEDURE ProcessPost: /* App logic on page submit */ RETURN "". END PROCEDURE. PROCEDURE DisplayPage: /* App logic on display page */ RETURN "": END PROCEDURE. PROCEDURE MergeHTML: /* App logic on HTML lines */ RETURN "". END PROCEDURE.

31. © 2012 Progress Software Corporation. All rights reserved. 31 Agenda  Background  Technical Concepts  WebSpeed Best Practice  Demos  Summary

32. © 2012 Progress Software Corporation. All rights reserved. 32 Demo  Demo 1 Minimum HTML file Empty webpage.w WSBP tags  Demo 2 Form fields

33. © 2012 Progress Software Corporation. All rights reserved. 33 Demo 1 & 2

34. © 2012 Progress Software Corporation. All rights reserved. 34 Demo 1 & 2  WSBP Tags [[WSBP-MESSAGE]]  Form fields HTML – ABL – GetFieldValue("Login") – SetFieldValue("Login","guest")

35. © 2012 Progress Software Corporation. All rights reserved. 35 Build include file with WebSpeed flow GetHTML DisplayPage MergeHTML ProcessPost RedirectPage Start End GetFields METHOD Redirect? N N Y Y GetPageProperties DisplayHTML Initialize.w.html.ini GET POST

36. © 2012 Progress Software Corporation. All rights reserved. 36 wsbp.i Internal Procedures: GetPageProperties CM-URL=C:/_WORK/WSBP/.html APPSERVER=MyAppSrv DATABASE=-db..\WSBP\Database\sports2000 -1 LOGFILE=C:/_WORK/OE110/WSBP.log LOGLEVEL=TRACE CM-URL=C:/_WORK/WSBP/.html APPSERVER=MyAppSrv DATABASE=-db..\WSBP\Database\sports2000 -1 LOGFILE=C:/_WORK/OE110/WSBP.log LOGLEVEL=TRACE.ini wsbp.i DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR. DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR. GetProp() SetProp() GetProp() SetProp().w PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML: PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML:

37. © 2012 Progress Software Corporation. All rights reserved. 37 wsbp.i Internal Procedures: GetFields [[WSBP-MESSAGE]] [[WSBP-MESSAGE]].html wsbp.i DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR. DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR. GetFieldValue() SetFieldValue() GetFieldValue() SetFieldValue().w PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML: PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML: GET-VALUE

38. © 2012 Progress Software Corporation. All rights reserved. 38 wsbp.i Internal Procedures: GetHTML [[WSBP-MESSAGE]] [[WSBP-MESSAGE]].html wsbp.i DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR GetFieldValue() SetFieldValue() GetFieldValue() SetFieldValue().w PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML: PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML:

39. © 2012 Progress Software Corporation. All rights reserved. 39 wsbp.i Internal Procedures: DisplayHTML [[WSBP-MESSAGE]] [[WSBP-MESSAGE]].html wsbp.i DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR DEF TEMP-TABLE ttProp NO-UNDO FIELD ttKey AS CHAR FIELD ttValue AS CHAR. DEF TEMP-TABLE ttWSBPHtml FIELD ttHtmlLine AS CHAR. DEF TEMP-TABLE ttWSBPField FIELD ttFieldName AS CHAR FIELD ttFieldValue AS CHAR GetFieldValue() SetFieldValue() GetFieldValue() SetFieldValue().w PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML: PROCEDURE GetPageProperties: PROCEDURE GetFields: PROCEDURE GetHTML: PROCEDURE DisplayHTML:

40. © 2012 Progress Software Corporation. All rights reserved. 40 Demo  Demo 3 Access to data logic Automatic tables  Demo 4 CSS and images  Demo 5 HTML low level manipulation

41. © 2012 Progress Software Corporation. All rights reserved. 41 Demo 3

42. © 2012 Progress Software Corporation. All rights reserved. 42 Demo 4

43. © 2012 Progress Software Corporation. All rights reserved. 43 Demo 5

44. © 2012 Progress Software Corporation. All rights reserved. 44 Demo 3, 4, 5 .w does not deal with database tables  TEMP-TABLE to transfer data between.w and.p  Automatic tables with [[WSBP-TABLE]]  CSS and images  HTML line level manipulation

45. © 2012 Progress Software Corporation. All rights reserved. 45 Demo  Demo 6 Include files AJAX Web Services

46. © 2012 Progress Software Corporation. All rights reserved. 46 Demo 6  http://www.openjs.com/scripts/jx/

47. © 2012 Progress Software Corporation. All rights reserved. 47 AJAX WebSpeed demo6.w demo6.html Static web css js gif Static web css js gif Web Browser Web Server GetOanda Rate.w PresentationControl & ManagementData GETPOST Oanda 1 1 3 3 4 4 2 2 Web Service 5 5 6 6 7 7 AJAX TopLogo.html 8 8

48. © 2012 Progress Software Corporation. All rights reserved. 48 AJAX  Small change to the architecture  No POST  Asynchronous mechanism improves presentation  JavaScript coding

49. © 2012 Progress Software Corporation. All rights reserved. 49 Demo  Demo 7 Mashup

50. © 2012 Progress Software Corporation. All rights reserved. 50 Demo 7

51. © 2012 Progress Software Corporation. All rights reserved. 51 Google Maps  JavaScript provided by Google  Display or hide HTML blocks  Enable links in HTML table

52. © 2012 Progress Software Corporation. All rights reserved. 52 Agenda  Background  Technical Concepts  WebSpeed Best Practice  Demos  Summary

53. © 2012 Progress Software Corporation. All rights reserved. 53 Summary  WebSpeed is easy if you design it easy  Bring order to the chaotic web world  Think OERA, SOA, MVC: Separate code  Hide low level code and provide higher level functions, in libraries or include files  Load libraries as persistent procedures  Keep it simple