1 / 20

Using EWD to re-purpose a UI

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.

jason
Download Presentation

Using EWD to re-purpose a UI

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using EWD tore-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 Dynamically-generated HTML pages Existing System Browser Javascript & CSS files

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

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

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

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

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

  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” Web service db or

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

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

  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

More Related