Transcript Using EWD to re

Using EWD to
re-purpose a UI
Rob Tweed
The Concept
• You have an existing well-designed and
functional web user interface
• You want to re-purpose it to work with:
– a different database ; or
– a set of web services
• ….without a major re-write
The EWD Solution
• EWD was designed to use a “story-board”
as a starting point
– Design the application as a series of “static”
pages
– “Script-up” the pages
• Pre-page script to fetch data needed by a page
• In-page scripts to create loops
– Table rows
– EWD is not restricted to working with Caché
Existing App = Storyboard
• The browser just needs to be sent the
correct HTML and Javascript in order for
the UI to work
• Run the existing application to provide the
storyboard
• Copy and edit the pages to create EWD
versions
Detaching the Web UI
Dynamically-generated
HTML pages
Existing
System
Browser
Javascript & CSS files
Detaching the Web UI
Dynamically-generated
HTML pages
Existing
System
Copy JS &
CSS Files
Edit pages into
EWD format
Browser
Cut & paste source
Detaching the Web UI
Existing
System
Copy JS &
CSS Files
Edit pages into
EWD format
EWD
Run-time
Dynamically-generated
HTML pages
Browser receives
identical pages
Browser
Same or different
Web server
Javascript & CSS files
How much effort required?
• All the difficult part is already done:
– Javascript UI control logic, styling etc
• Back-end processing is usually relatively trivial:
– Locate and re-format the data needed by the UI
– Validate and save data from forms
• EWD looks after the security and session management
automatically
• Very rapid, incremental process
– Initial version can be up and running in less than an hour
– Needs no knowledge of existing application logic
• Just simple deductive logic to identify variable data
• Add “scripts” to supply and process the variable data
• Change URLs to refer to new EWD pages
EWD’s Ajax Framework
• Can further enhance the application using
EWD’s “fragment”-based Ajax architecture
– Break the pages into the constituent building
blocks
– Remove redundant repetitive transmission of
content
– Change the UI from page-refresh mode to a
more highly performant and slick Ajax UI
• Allows a team to collaborate easily and
efficiently
EWD: Ajax Application Flow
Front-end
Container
Page
Fetch
data
Pre-page
Script
EWD State & Session Management
EWD Server
EWD: Ajax Application Flow
Replaces DOM content
Container
Page
Event
XMLHttpRequest
Fetch
Page
Fragment
Page
Fragment
Fetch
data
Pre-page
Script
Pre-page
Script
EWD State & Session Management
EWD Server
EWD: Ajax Application Flow
Replaces DOM content
Container
Page
Event
Fetch
Page
Fragment
Page
Fragment
Fetch
data
Pre-page
Script
EWD State & Session Management
EWD Server
EWD: Ajax Application Flow
Container
Page
EWD State & Session Management
EWD Server
Pre-page scripts and Session
• EWD Pre-page script allows each
fragment to fetch its data
– Directly from a database ; or
– Via a web service call
• EWD uses an intermediate persistent data
layer known as the “Session”
– The Session decouples EWD from the
physical database
How the Session decouples the
back-end
EWD Page
EWD
Session
EWD
“Back-end”
Hard-wire with mocked data
EWD Page
EWD
Session
Original page
captured in
browser
Hard-coded
“mocked”
Data
Then replace with real back-end
EWD Page
Proper
EWD
“Back-end”
EWD
Session
db
or
Web service
Then replace with real back-end
EWD Page
Front-end remains unchanged.
It doesn’t know or care what is
manipulating the Session data at
the back-end
Proper
EWD
“Back-end”
EWD
Session
db
or
Web service
Next stage
The person writing the back-end logic
doesn’t need to know anything about
the front end. Just needs to know the
required Session data structures
EWD Page
Proper
EWD
“Back-end”
EWD
Session
db
Web service
Conclusions
• EWD provides a proven technologyagnostic solution for re-purposing and
further enhancing a web-based UI
• Produces a slick Ajax front end that can be
grafted seamlessly onto any back-end
• Allows team-work
• It’s a very fast and efficient approach:
– An existing application can be re-factored to
EWD in hours