210 likes | 315 Views
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.
E N D
Using EWD tore-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 Browser Cut & paste source Copy JS & CSS Files Edit pages into EWD format
Detaching the Web UI Existing System Copy JS & CSS Files Edit pages into EWD format Browser receives identical pages Dynamically-generated HTML pages Browser EWD Run-time Javascript & CSS files Same or different Web server
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 Event Container Page Page Fragment XMLHttpRequest Fetch Page Fragment Fetch data Pre-page Script Pre-page Script EWD State & Session Management EWD Server
EWD: Ajax Application Flow Replaces DOM content Event Container Page Page Fragment Fetch 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 Hard-coded “mocked” Data Original page captured in browser
Then replace with real back-end EWD Page EWD Session Proper EWD “Back-end” Web service db or
Then replace with real back-end EWD Page EWD Session Proper EWD “Back-end” Front-end remains unchanged. It doesn’t know or care what is manipulating the Session data at the back-end Web service db or
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 EWD Session Proper EWD “Back-end” Web service db
Conclusions • EWD provides a proven technology-agnostic 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