The Easiest Way to Write
Web Applications
Jordi Sastre
IT Architect, PSC
May 2012
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
2
© 2012 Progress Software Corporation. All rights reserved.
Agenda
 Background
 Technical Concepts
 WebSpeed Best Practice
 Demos
 Summary
3
© 2012 Progress Software Corporation. All rights reserved.
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
4
© 2012 Progress Software Corporation. All rights reserved.
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
5
© 2012 Progress Software Corporation. All rights reserved.
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
6
© 2012 Progress Software Corporation. All rights reserved.
Agenda
 Background
 Technical Concepts
 WebSpeed Best Practice
 Demos
 Summary
7
© 2012 Progress Software Corporation. All rights reserved.
Technical Concepts: OpenEdge Reference Architecture
8
© 2012 Progress Software Corporation. All rights reserved.
Technical Concepts: Service Oriented Architecture
http://en.wikipedia.org/wiki/Service-oriented_architecture
9
© 2012 Progress Software Corporation. All rights reserved.
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
10
© 2012 Progress Software Corporation. All rights reserved.
Technical Concepts: Business Logic Separation
Client
Logic
Client
Logic
Logic
Users
11
© 2012 Progress Software Corporation. All rights reserved.
Data
Technical Concepts: Business Logic Separation
Client
Client
Client
Logic
Logic
Logic
Server
Logic
Users
12
© 2012 Progress Software Corporation. All rights reserved.
Data
Technical Concepts: Business Logic Separation
 Robust data integrity
protected from the clients
Server
Logic
Client
Client
Client
Logic
Logic
Logic
 Server logic in only one place
 Server logic is simple (no UI
distractions)
 Server logic available to
multiple clients
Data
Users
 Client logic deals with visual
elements only
 Client logic is simple (no SL
distractions)
13
© 2012 Progress Software Corporation. All rights reserved.
Technical Concepts: Presentation Logic Separation
HTML
CSS JS
Client
Logic
Server
Logic
Users
Data
14
© 2012 Progress Software Corporation. All rights reserved.
Technical Concepts: Presentation Logic Separation
HTML
CSS JS
Client
Logic
Server
Logic
Data
Users
 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)
15
© 2012 Progress Software Corporation. All rights reserved.
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
16
© 2012 Progress Software Corporation. All rights reserved.
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
17
© 2012 Progress Software Corporation. All rights reserved.
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
18
© 2012 Progress Software Corporation. All rights reserved.
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
19
© 2012 Progress Software Corporation. All rights reserved.
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
20
© 2012 Progress Software Corporation. All rights reserved.
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
21
© 2012 Progress Software Corporation. All rights reserved.
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
22
© 2012 Progress Software Corporation. All rights reserved.
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)
23
© 2012 Progress Software Corporation. All rights reserved.
Agenda
 Background
 Technical Concepts
 WebSpeed Best Practice
 Demos
 Summary
24
© 2012 Progress Software Corporation. All rights reserved.
Architecture
Presentation
Control
Data
WebSpeed
CMS
AppServer
1
3 8
2
<page>.w
7
<service>.p
<page>.html
GET
Static web
css js gif
49
6
Web Server
10
5
Web
Browser
25
© 2012 Progress Software Corporation. All rights reserved.
POST
Data
Build include file with WebSpeed flow
Start
GetFields
GetPageProperties
METHOD
GET
POST
Redirect?
Y
N
GetHTML
DisplayHTML
RedirectPage
End
26
© 2012 Progress Software Corporation. All rights reserved.
Build include file with WebSpeed flow
Start
GetFields
GetPageProperties
METHOD
GET
POST
Redirect?
Y
N
<webpage>.ini
<webpage>.html
GetHTML
DisplayHTML
<webpage>.w
27
© 2012 Progress Software Corporation. All rights reserved.
RedirectPage
End
Build include file with WebSpeed flow
Start
GetFields
GetPageProperties
Initialize
METHOD
POST
ProcessPost
DisplayPage
<webpage>.html
GetHTML
DisplayHTML
<webpage>.w
28
© 2012 Progress Software Corporation. All rights reserved.
Y
N
GET
<webpage>.ini
Redirect?
MergeHTML
RedirectPage
End
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.
END.
RUN GetHTML.
/* Get HTML from Content Management or file
RUN DisplayHTML.
/* Insert data in HTML and display web page
QUIT.
END PROCEDURE.
29
© 2012 Progress Software Corporation. All rights reserved.
*/
*/
*/
*/
*/
*/
*/
Build the program for my web page
/* webpage.w */
CREATE WIDGET-POOL.
{wsbp.i "webpage.ini"}
RUN ProcessWebRequest.
30
PROCEDURE Initialize:
RETURN "".
END PROCEDURE.
/* App logic always peformed */
PROCEDURE ProcessPost:
RETURN "".
END PROCEDURE.
/* App logic on page submit */
PROCEDURE DisplayPage:
RETURN "":
END PROCEDURE.
/* App logic on display page */
PROCEDURE MergeHTML:
RETURN "".
END PROCEDURE.
/* App logic on HTML lines */
© 2012 Progress Software Corporation. All rights reserved.
Agenda
 Background
 Technical Concepts
 WebSpeed Best Practice
 Demos
 Summary
31
© 2012 Progress Software Corporation. All rights reserved.
Demo
 Demo 1
• Minimum HTML file
• Empty webpage.w
• WSBP tags
 Demo 2
• Form fields
32
© 2012 Progress Software Corporation. All rights reserved.
Demo 1 & 2
33
© 2012 Progress Software Corporation. All rights reserved.
Demo 1 & 2
 WSBP Tags
• [[WSBP-MESSAGE]]
 Form fields
• HTML
– <input type="text" name="Login" value="">
– <input type="submit" name="Submit" value="Button 1">
• ABL
– GetFieldValue("Login")
– SetFieldValue("Login","guest")
34
© 2012 Progress Software Corporation. All rights reserved.
Build include file with WebSpeed flow
Start
GetFields
GetPageProperties
Initialize
METHOD
POST
ProcessPost
DisplayPage
<webpage>.html
GetHTML
DisplayHTML
<webpage>.w
35
© 2012 Progress Software Corporation. All rights reserved.
Y
N
GET
<webpage>.ini
Redirect?
MergeHTML
RedirectPage
End
wsbp.i Internal Procedures: GetPageProperties
<webpage>.ini
CM-URL=C:/_WORK/WSBP/<PRGNAME>.html
APPSERVER=MyAppSrv
DATABASE=-db ..\WSBP\Database\sports2000 -1
LOGFILE=C:/_WORK/OE110/WSBP.log
LOGLEVEL=TRACE
wsbp.i
PROCEDURE GetPageProperties:
PROCEDURE GetFields:
PROCEDURE GetHTML:
PROCEDURE DisplayHTML:
<webpage>.w
GetProp()
SetProp()
36
© 2012 Progress Software Corporation. All rights reserved.
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.
wsbp.i Internal Procedures: GetFields
<webpage>.html
<html><head></head>
<body>
<form method="POST">
wsbp.i
GET-VALUE
[[WSBP-MESSAGE]]
<input type="text" name="Login" value="">
</form>
</body>
</html>
<webpage>.w
GetFieldValue()
SetFieldValue()
37
© 2012 Progress Software Corporation. All rights reserved.
PROCEDURE GetPageProperties:
PROCEDURE GetFields:
PROCEDURE GetHTML:
PROCEDURE DisplayHTML:
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.
wsbp.i Internal Procedures: GetHTML
<webpage>.html
<html><head></head>
<body>
<form method="POST">
[[WSBP-MESSAGE]]
<input type="text" name="Login" value="">
</form>
</body>
</html>
<webpage>.w
GetFieldValue()
SetFieldValue()
38
© 2012 Progress Software Corporation. All rights reserved.
wsbp.i
PROCEDURE GetPageProperties:
PROCEDURE GetFields:
PROCEDURE GetHTML:
PROCEDURE DisplayHTML:
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
wsbp.i Internal Procedures: DisplayHTML
<webpage>.html
<html><head></head>
<body>
<form method="POST">
[[WSBP-MESSAGE]]
<input type="text" name="Login" value="">
</form>
</body>
</html>
<webpage>.w
GetFieldValue()
SetFieldValue()
39
© 2012 Progress Software Corporation. All rights reserved.
wsbp.i
PROCEDURE GetPageProperties:
PROCEDURE GetFields:
PROCEDURE GetHTML:
PROCEDURE DisplayHTML:
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
Demo
 Demo 3
• Access to data logic
• Automatic tables
 Demo 4
• CSS and images
 Demo 5
• HTML low level manipulation
40
© 2012 Progress Software Corporation. All rights reserved.
Demo 3
41
© 2012 Progress Software Corporation. All rights reserved.
Demo 4
42
© 2012 Progress Software Corporation. All rights reserved.
Demo 5
43
© 2012 Progress Software Corporation. All rights reserved.
Demo 3, 4, 5
 <webpage>.w does not deal with database tables
 TEMP-TABLE to transfer data between <webpage>.w and
<service>.p
 Automatic tables with [[WSBP-TABLE]]
 CSS and images
 HTML line level manipulation
44
© 2012 Progress Software Corporation. All rights reserved.
Demo
 Demo 6
• Include files
• AJAX
• Web Services
45
© 2012 Progress Software Corporation. All rights reserved.
Demo 6
 http://www.openjs.com/scripts/jx/
46
© 2012 Progress Software Corporation. All rights reserved.
AJAX
Presentation
Control & Management
Data
WebSpeed
demo6.html
1
2
GetOanda
Rate.w
demo6.w
TopLogo.html
GET
Static web
css js gif
3
6
Web Service
Web Server
Web
Browser
© 2012 Progress Software Corporation. All rights reserved.
POST
7
8 4
47
5
Oanda
AJAX
 Small change to the architecture
 No POST
 Asynchronous mechanism improves presentation
 JavaScript coding
48
© 2012 Progress Software Corporation. All rights reserved.
Demo
 Demo 7
• Mashup
49
© 2012 Progress Software Corporation. All rights reserved.
Demo 7
50
© 2012 Progress Software Corporation. All rights reserved.
Google Maps
 JavaScript provided by Google
 Display or hide HTML blocks
 Enable links in HTML table
51
© 2012 Progress Software Corporation. All rights reserved.
Agenda
 Background
 Technical Concepts
 WebSpeed Best Practice
 Demos
 Summary
52
© 2012 Progress Software Corporation. All rights reserved.
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
53
© 2012 Progress Software Corporation. All rights reserved.