1. Using EWD to re-purpose a UI Rob Tweed

2. 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

3. 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é

4. 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

5. Detaching the Web UI Existing System Browser Dynamically-generated HTML pages Javascript & CSS files

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

7. 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

8. 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

9. 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

10. EWD: Ajax Application Flow Container Page Fetch data Pre-page Script EWD State & Session Management EWD Server Front-end

11. 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

12. 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

13. EWD: Ajax Application Flow Container Page EWD State & Session Management EWD Server

14. 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

15. How the Session decouples the back-end EWD Page EWD Session EWD “Back-end”

16. Hard-wire with mocked data EWD Page EWD Session Hard-coded “mocked” Data Original page captured in browser

17. Then replace with real back-end EWD Page EWD Session Proper EWD “Back-end” db Web service or

18. 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

19. 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

20. 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