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

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

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

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

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

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

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

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

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

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

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? Perls 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

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

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

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

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

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

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

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)

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

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

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

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

"" 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.">

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.

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

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:

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

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:

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:

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

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

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

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

Documents

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