Jordi Sastre IT Architect PSC May 2012 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 ID: 382322
Download Presentation The PPT/PDF document "The Easiest Way to Write Web Application..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
The Easiest Way to Write Web Applications
Jordi Sastre
IT Architect, PSC
May 2012Slide2
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
itSlide3
Agenda
Background
Technical Concepts
WebSpeed Best Practice
Demos
SummarySlide4
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 enhanceSlide5
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 maintainSlide6
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
itselfSlide7
Agenda
Background
Technical Concepts
WebSpeed Best Practice
Demos
SummarySlide8
Technical Concepts: OpenEdge Reference ArchitectureSlide9
Technical Concepts: Service Oriented Architecture
http://en.wikipedia.org/wiki/Service-oriented_architectureSlide10
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?ModelViewControllerSlide11
Technical Concepts: Business Logic Separation
Client
Logic
Client
Logic
Logic
Data
UsersSlide12
Technical Concepts: Business Logic Separation
Client
Logic
Client
Logic
Server
Logic
Client
Logic
Data
UsersSlide13
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
Server
Logic
Client
Logic
Data
UsersSlide14
Technical Concepts: Presentation Logic Separation
Server
Logic
Client
Logic
Data
HTML
CSS JS
UsersSlide15
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
Client
Logic
Data
HTML
CSS
JS
UsersSlide16
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 parsingSlide17
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 maintainSlide18
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 maintainSlide19
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 maintainSlide20
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 maintainSlide21
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 maintainSlide22
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 maintainSlide23
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)Slide24
Agenda
Background
Technical Concepts
WebSpeed Best Practice
Demos
SummarySlide25
Architecture
WebSpeed
<page>.w
<page>.html
CMS
Static web
css
js gif
Web Browser
Web Server
AppServer
<service>.p
Presentation
Control
Data
GET
POST
Data
1
3
4
5
6
7
2
8
9
10Slide26
Build include file with WebSpeed flow
GetHTML
RedirectPage
Start
End
GetFields
METHOD
Redirect?
N
Y
GetPageProperties
DisplayHTML
GET
POSTSlide27
Build include file with WebSpeed flow
GetHTML
RedirectPage
Start
End
GetFields
METHOD
Redirect?
N
Y
GetPageProperties
DisplayHTML
GET
POST
<webpage>.w
<webpage>.html
<
webpage
>.iniSlide28
Build include file with WebSpeed flow
GetHTML
DisplayPage
MergeHTML
ProcessPost
RedirectPage
Start
End
GetFields
METHOD
Redirect?
N
Y
GetPageProperties
DisplayHTML
Initialize
<webpage>.w
<webpage>.html
<
webpage
>.ini
GET
POSTSlide29
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.Slide30
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.Slide31
Agenda
Background
Technical Concepts
WebSpeed Best Practice
Demos
SummarySlide32
Demo
Demo 1
Minimum HTML file
Empty
webpage.w
WSBP tags
Demo 2
Form fieldsSlide33
Demo 1 & 2Slide34
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
")Slide35
Build include file with WebSpeed flow
GetHTML
DisplayPage
MergeHTML
ProcessPost
RedirectPage
Start
End
GetFields
METHOD
Redirect?
N
Y
GetPageProperties
DisplayHTML
Initialize
<webpage>.w
<webpage>.html
<
webpage
>.ini
GET
POSTSlide36
wsbp.i Internal Procedures: GetPageProperties
CM-URL=C:/_WORK/WSBP/<PRGNAME>.html
APPSERVER=
MyAppSrv
DATABASE=-db ..\WSBP\Database\sports2000 -1
LOGFILE=C:/_WORK/OE110/WSBP.log
LOGLEVEL=TRACE
<webpage>.
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.
GetProp
()
SetProp
()
<webpage>.w
PROCEDURE
GetPageProperties
:
PROCEDURE
GetFields
:
PROCEDURE
GetHTML
:
PROCEDURE
DisplayHTML
:Slide37
wsbp.i Internal Procedures: GetFields
<html><head></head>
<body>
<form method="POST">
[[WSBP-MESSAGE]]
<
input type="text" name="Login" value="">
</form>
</body>
</html>
<webpage>.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.
GetFieldValue
()
SetFieldValue
()
<webpage>.w
PROCEDURE
GetPageProperties
:
PROCEDURE
GetFields
:
PROCEDURE
GetHTML
:
PROCEDURE
DisplayHTML
:
GET-VALUESlide38
wsbp.i Internal Procedures: GetHTML
<html><head></head>
<body>
<form method="POST">
[[WSBP-MESSAGE]]
<input type="text" name="Login" value="">
</form>
</body>
</html>
<webpage>.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
GetFieldValue
()
SetFieldValue
()
<webpage>.w
PROCEDURE
GetPageProperties
:
PROCEDURE
GetFields
:
PROCEDURE
GetHTML
:
PROCEDURE
DisplayHTML
:Slide39
wsbp.i Internal Procedures: DisplayHTML
<html><head></head>
<body>
<form method="POST">
[[WSBP-MESSAGE]]
<input type="text" name="Login" value="">
</form>
</body>
</html>
<webpage>.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
GetFieldValue
()
SetFieldValue
()
<webpage>.w
PROCEDURE
GetPageProperties
:
PROCEDURE
GetFields
:
PROCEDURE
GetHTML
:
PROCEDURE
DisplayHTML
:Slide40
Demo
Demo 3
Access to data logic
Automatic tables
Demo 4
CSS and images
Demo 5
HTML low level manipulationSlide41
Demo 3Slide42
Demo 4Slide43
Demo 5Slide44
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 manipulationSlide45
Demo
Demo 6
Include files
AJAX
Web ServicesSlide46
Demo 6
http://www.openjs.com/scripts/jx/Slide47
AJAX
WebSpeed
demo6.w
demo6.html
Static web
css
js gif
Web Browser
Web Server
GetOandaRate.w
Presentation
Control & Management
Data
GET
POST
Oanda
1
3
4
2
Web Service
5
6
7
AJAX
TopLogo.html
8Slide48
AJAX
Small change to the architecture
No POST
Asynchronous mechanism improves presentation
JavaScript codingSlide49
Demo
Demo 7
MashupSlide50
Demo 7Slide51
Google Maps
JavaScript provided by Google
Display or hide HTML blocks
Enable links in HTML tableSlide52
Agenda
Background
Technical Concepts
WebSpeed Best Practice
Demos
SummarySlide53
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 simpleSlide54