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 Existing System Browser Dynamically-generated HTML pages Javascript & CSS files

Detaching the Web UI Existing System Browser Dynamically-generated HTML pages Cut & paste source Edit pages into EWD format Copy JS & CSS Files

Detaching the Web UI Existing System EWD Run-time Browser Dynamically-generated HTML pages Javascript & CSS files Same or different Web server Edit pages into EWD format Copy JS & CSS Files Browser receives identical pages

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 Container Page Fetch data Pre-page Script EWD State & Session Management EWD Server Front-end

EWD: Ajax Application Flow Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script Pre-page Script EWD State & Session Management XMLHttpRequest EWD Server

EWD: Ajax Application Flow Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content 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” db Web service or

Then replace with real back-end EWD Page EWD Session Proper EWD “Back-end” db Web service Front-end remains unchanged. It doesn’t know or care what is manipulating the Session data at the back-end or

Next stage EWD Page EWD Session Proper EWD “Back-end” db Web service 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

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