Beyond the MVC:  EWD and Design-oriented Web Development  Rob Tweed M/Gateway Developments Ltd
Web Application Development <ul><li>The industry-accepted state of the art: </li></ul><ul><ul><li>The equivalent of expect...
Web Application Development <ul><li>One of the great developments in computing was the development of high-level programmi...
Web Application Development <ul><li>One of the great developments in computing was the development of high-level programmi...
Web Applications <ul><li>Programs that: </li></ul><ul><ul><li>Generate HTML  </li></ul></ul><ul><ul><li>Are accessed via H...
Web Applications <ul><li>Or….web pages: </li></ul><ul><ul><li>That have some content fetched from a database </li></ul></u...
Web Applications <ul><li>Programs that generate HTML </li></ul><ul><ul><li>Actually what happens! </li></ul></ul><ul><li>W...
Web Applications <ul><li>Programs that generate HTML </li></ul><ul><ul><li>Actually what happens! </li></ul></ul><ul><li>W...
Web Application Development <ul><li>The industry is focused on web applications being programs that generate HTML </li></u...
Why web development toolsets? <ul><li>The web was never designed as an application platform: </li></ul><ul><ul><li>Statele...
Why web development toolsets? <ul><li>Programmer’s responsibility to: </li></ul><ul><ul><li>Create the illusion of a sessi...
Why web development toolsets? <ul><li>Rather than everyone re-inventing wheels, tools have developed that automate these m...
Web Application: MVC View Web Page 1 Step 1: User decides what to do: eg clicks button  or link
Web Application: MVC View Web Page 1 Step 2: URL sent to controller Controller
Web Application: MVC View Web Page 1 Step 3: URL analysed and mapped to corresponding business logic Controller Business l...
Web Application: MVC View Web Page 1 Step 4: Business logic selects next view Controller Business logic URL map View Datab...
Web Application: MVC View Web Page 1 Step 5: View is generated Controller Business logic URL map View Web Page 2 Database ...
Web Application: MVC View <ul><li>Web pages are programmatically-generated markup = the “view” </li></ul><ul><li>The URL i...
What’s the problem? <ul><li>Design </li></ul>
What’s the problem? <ul><li>Design: the single most important criterion that determines whether or not a web application w...
What’s the problem? <ul><li>Design: the single most important criterion that determines whether or not a web application w...
The “Eh?” Team <ul><li>Design: the single most important criterion that determines whether or not a web application will b...
What’s the problem <ul><li>To make matters worse: </li></ul>
The “Eh?” Team again <ul><li>Little discipline applied by MVC environment </li></ul><ul><li>MVC “plumbing” isn’t automated...
The industry solution? <ul><li>AjaxWorld:  Yakov Fain (Farata Systems), Mar 30, 2008: </li></ul><ul><ul><li>Do We Need to ...
The industry solution? <ul><li>They don’t actually have one </li></ul>
What’s the problem again? <ul><li>Web application development tools are the equivalent of assembler: </li></ul><ul><ul><li...
Design-oriented development
“ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
Web Application Web Page 1 From a designer’s point of view: Database Step 1: Run a method that fetches the data needed for...
Web Application Web Page 1 From a designer’s point of view: Step 2: Display the page
Web Application Web Page 1 From a designer’s point of view: Step 3: User decides what to do: eg clicks button  or link
Web Application Web Page 1 From a designer’s point of view: Database Step 4: Method called that validates and saves data i...
Web Application Web Page 1 From a designer’s point of view: Step 5: Move to next page Next Page Web Page 2
Web Application From a designer’s point of view: Repeat the process…. Web Page 2 Database fetchData2()
Design-focused Web Applications <ul><li>Page content and navigation is the primary focus </li></ul><ul><ul><li>No programm...
“ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
Design-focused Web Applications Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch ...
Great idea but can it be done?
Great idea but can it be done? <ul><li>Yes! </li></ul><ul><li>Enterprise Web Developer (EWD) </li></ul>
EWD’s view of a web Application Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch ...
EWD’s Ajax Framework <ul><li>Event-driven DOM manipulation: </li></ul><ul><ul><li>replacement of innerHTML </li></ul></ul>...
EWD’s view of a web Application Container Page Fetch data Pre-page Script EWD State & Session Management Cach é/ GT.M  Ser...
EWD’s view of a web Application Container Page Fetch Page Fragment Page  Fragment Fetch data Event Replaces DOM content Pr...
EWD’s view of a web Application Container Page Fetch Page Fragment Page  Fragment Fetch data Event Replaces DOM content Pr...
EWD’s view of a web Application Container Page EWD State & Session Management Cach é/ GT.M  Server
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot;  prepageScript=“fetchFormData”  > <html> <head> <title>EWD W...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Work...
The “A” Team <ul><li>Designer stays in control throughout the lifecyle </li></ul><ul><li>Designer doesn’t need to have any...
Interfacing design and programming <ul><li>Clearly need a conceptual interface through which the designer and programmer c...
The EWD Session EWD Page EWD Session Database Provides the interface between the designer and the programmer Programmer Us...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot;  prepageScript=“fetchFormData”  > <html> <head> <title>EWD W...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Wor...
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Wor...
Security Management <ul><li>EWD’s compiler and run-time automatically tokenises all URLs </li></ul><ul><ul><li>Randomly-ge...
Custom Tags <ul><li>EWD’s functionality can be extended by defining XML-based custom tags </li></ul><ul><li>You define the...
Multi-lingual Deployment <ul><li>EWD’s compiler can automatically detect all text in a page </li></ul><ul><ul><li>Creates ...
Design-focused Development <ul><li>Immediate benefits: </li></ul><ul><ul><li>Much higher productivity compared with conven...
Conclusions <ul><li>Design-focused web application development is an essential step forwards </li></ul><ul><li>EWD is uniq...
 
Upcoming SlideShare
Loading in...5
×

Beyond The MVC

1,151

Published on

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,151
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Beyond The MVC"

  1. 1. Beyond the MVC: EWD and Design-oriented Web Development Rob Tweed M/Gateway Developments Ltd
  2. 2. Web Application Development <ul><li>The industry-accepted state of the art: </li></ul><ul><ul><li>The equivalent of expecting programmers to use assembler and for database developers to access disc blocks </li></ul></ul>
  3. 3. Web Application Development <ul><li>One of the great developments in computing was the development of high-level programming languages </li></ul>
  4. 4. Web Application Development <ul><li>One of the great developments in computing was the development of high-level programming languages </li></ul><ul><ul><li>By adding a level of abstraction, they provide an illusion </li></ul></ul><ul><ul><li>You can describe what you want to do at a much higher conceptual level </li></ul></ul><ul><ul><li>How it all works in machine code is looked after for you </li></ul></ul><ul><ul><ul><li>How it actually works may be very different from the conceptual abstraction </li></ul></ul></ul>
  5. 5. Web Applications <ul><li>Programs that: </li></ul><ul><ul><li>Generate HTML </li></ul></ul><ul><ul><li>Are accessed via HTTP </li></ul></ul>
  6. 6. Web Applications <ul><li>Or….web pages: </li></ul><ul><ul><li>That have some content fetched from a database </li></ul></ul><ul><ul><li>Whose flow is determined in part by the user’s interaction and/or content in the database </li></ul></ul>
  7. 7. Web Applications <ul><li>Programs that generate HTML </li></ul><ul><ul><li>Actually what happens! </li></ul></ul><ul><li>Web pages: </li></ul><ul><ul><li>That have some content fetched from a database </li></ul></ul><ul><ul><li>Whose flow is determined in part by the user’s interaction and/or content in the database </li></ul></ul>
  8. 8. Web Applications <ul><li>Programs that generate HTML </li></ul><ul><ul><li>Actually what happens! </li></ul></ul><ul><li>Web pages: </li></ul><ul><ul><li>That have some content fetched from a database </li></ul></ul><ul><ul><li>Whose flow is determined in part by the user’s interaction and/or content in the database </li></ul></ul><ul><ul><li>Conceptual view only </li></ul></ul>
  9. 9. Web Application Development <ul><li>The industry is focused on web applications being programs that generate HTML </li></ul><ul><ul><li>Web application development is the exclusive domain of programmers </li></ul></ul><ul><ul><li>Give them the design </li></ul></ul><ul><ul><li>They’ll make it work for you </li></ul></ul>
  10. 10. Why web development toolsets? <ul><li>The web was never designed as an application platform: </li></ul><ul><ul><li>Stateless </li></ul></ul><ul><ul><ul><li>No built-in concept of a meaningful ongoing dialogue between browser and web server </li></ul></ul></ul><ul><ul><li>HTTP protocol </li></ul></ul><ul><ul><ul><li>Simple request/response protocol </li></ul></ul></ul><ul><ul><ul><li>Wide open, simple URL + name/value pair structure </li></ul></ul></ul><ul><ul><ul><li>Inherently insecure and open to abuse </li></ul></ul></ul>
  11. 11. Why web development toolsets? <ul><li>Programmer’s responsibility to: </li></ul><ul><ul><li>Create the illusion of a session </li></ul></ul><ul><ul><li>Provide the navigation between generated pages in response to user activity </li></ul></ul><ul><ul><li>Provide a consistent and adequate layer of security around the URL requests within a session </li></ul></ul>
  12. 12. Why web development toolsets? <ul><li>Rather than everyone re-inventing wheels, tools have developed that automate these mechanisms </li></ul><ul><li>Almost all are based on the concept of the Model View Controller (MVC) </li></ul>
  13. 13. Web Application: MVC View Web Page 1 Step 1: User decides what to do: eg clicks button or link
  14. 14. Web Application: MVC View Web Page 1 Step 2: URL sent to controller Controller
  15. 15. Web Application: MVC View Web Page 1 Step 3: URL analysed and mapped to corresponding business logic Controller Business logic URL map
  16. 16. Web Application: MVC View Web Page 1 Step 4: Business logic selects next view Controller Business logic URL map View Database (model)
  17. 17. Web Application: MVC View Web Page 1 Step 5: View is generated Controller Business logic URL map View Web Page 2 Database (model)
  18. 18. Web Application: MVC View <ul><li>Web pages are programmatically-generated markup = the “view” </li></ul><ul><li>The URL is the focus of attention </li></ul><ul><li>Closely reflects how it actually works </li></ul><ul><ul><li>Only a very slight level of abstraction </li></ul></ul><ul><li>Totally programmer orientated paradigm </li></ul><ul><ul><li>Focuses on the how </li></ul></ul><ul><ul><li>The what and the design gets lost in a ton of code </li></ul></ul>
  19. 19. What’s the problem? <ul><li>Design </li></ul>
  20. 20. What’s the problem? <ul><li>Design: the single most important criterion that determines whether or not a web application will be successfull </li></ul>
  21. 21. What’s the problem? <ul><li>Design: the single most important criterion that determines whether or not a web application will be successfull </li></ul><ul><li>In the MVC paradigm: </li></ul><ul><ul><li>Designer storyboards the application </li></ul></ul><ul><ul><li>Design agreed </li></ul></ul><ul><ul><li>Handed over to programmers </li></ul></ul>
  22. 22. The “Eh?” Team <ul><li>Design: the single most important criterion that determines whether or not a web application will be successfull </li></ul><ul><li>In the MVC paradigm: </li></ul><ul><ul><li>Designer storyboards the application </li></ul></ul><ul><ul><li>Design agreed </li></ul></ul><ul><ul><li>Handed over to programmers </li></ul></ul><ul><ul><li>From this point onwards, designer can no longer participate in the life-cycle of the application </li></ul></ul><ul><ul><ul><li>What the programmers develop is incomprehensible </li></ul></ul></ul>
  23. 23. What’s the problem <ul><li>To make matters worse: </li></ul>
  24. 24. The “Eh?” Team again <ul><li>Little discipline applied by MVC environment </li></ul><ul><li>MVC “plumbing” isn’t automated: </li></ul><ul><ul><li>How to submit, post and validate forms is left to each programmer </li></ul></ul><ul><ul><li>In-page coding is a free-for-all </li></ul></ul><ul><ul><li>Cut, paste and modify components </li></ul></ul><ul><li>1 or more years later, nobody can understand their own code, let alone another developer’s </li></ul><ul><ul><li>Quicker to rewrite pages than figure out how they work </li></ul></ul>
  25. 25. The industry solution? <ul><li>AjaxWorld: Yakov Fain (Farata Systems), Mar 30, 2008: </li></ul><ul><ul><li>Do We Need to Teach Designers Programming? </li></ul></ul><ul><ul><li>“ Adobe invited professors from different schools to discuss what has to change in the curriculum of Visual Design and Software Engineering disciplines so designers can understand programming better and software developers would be better at designing the user experience” </li></ul></ul><ul><ul><li>“ Do we need to breed new creatures called d-e-s-i-g-n-o-p-e-r and d-e-v-i-g-n-e-r? “ </li></ul></ul><ul><ul><li>“ Developers are from Mars; designers are from Venus” </li></ul></ul>
  26. 26. The industry solution? <ul><li>They don’t actually have one </li></ul>
  27. 27. What’s the problem again? <ul><li>Web application development tools are the equivalent of assembler: </li></ul><ul><ul><li>Marginally less of an abstraction than machine code </li></ul></ul><ul><li>Web application development needs to be abstracted </li></ul><ul><ul><li>Design-focused paradigm </li></ul></ul><ul><ul><li>Automate the MVC right out of the equation </li></ul></ul>
  28. 28. Design-oriented development
  29. 29. “ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
  30. 30. Web Application Web Page 1 From a designer’s point of view: Database Step 1: Run a method that fetches the data needed for the page fetchData()
  31. 31. Web Application Web Page 1 From a designer’s point of view: Step 2: Display the page
  32. 32. Web Application Web Page 1 From a designer’s point of view: Step 3: User decides what to do: eg clicks button or link
  33. 33. Web Application Web Page 1 From a designer’s point of view: Database Step 4: Method called that validates and saves data into database saveData()
  34. 34. Web Application Web Page 1 From a designer’s point of view: Step 5: Move to next page Next Page Web Page 2
  35. 35. Web Application From a designer’s point of view: Repeat the process…. Web Page 2 Database fetchData2()
  36. 36. Design-focused Web Applications <ul><li>Page content and navigation is the primary focus </li></ul><ul><ul><li>No programming code in pages </li></ul></ul><ul><li>“ Fetch data” method called when page loads </li></ul><ul><li>“ Save/validate” methods linked with user-triggered events (eg submit buttons) </li></ul><ul><li>Technical stuff should “just work”: </li></ul><ul><ul><li>Invocation of methods </li></ul></ul><ul><ul><li>Session and security management </li></ul></ul>
  37. 37. “ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
  38. 38. Design-focused Web Applications Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch save save save
  39. 39. Great idea but can it be done?
  40. 40. Great idea but can it be done? <ul><li>Yes! </li></ul><ul><li>Enterprise Web Developer (EWD) </li></ul>
  41. 41. EWD’s view of a web Application Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch save save save
  42. 42. EWD’s Ajax Framework <ul><li>Event-driven DOM manipulation: </li></ul><ul><ul><li>replacement of innerHTML </li></ul></ul><ul><li>Page fragments </li></ul><ul><ul><li>EWD pages that just contain the replacement markup </li></ul></ul><ul><ul><li>Pre-page and action scripts </li></ul></ul><ul><li>Just specify 3 key things: </li></ul><ul><ul><li>Event </li></ul></ul><ul><ul><li>Page fragment name </li></ul></ul><ul><ul><li>Target Id </li></ul></ul>
  43. 43. EWD’s view of a web Application Container Page Fetch data Pre-page Script EWD State & Session Management Cach é/ GT.M Server Front-end technology (WebLink, PHP, CSP etc)
  44. 44. EWD’s view of a web Application Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script Pre-page Script EWD State & Session Management Cach é/ GT.M Server XMLHttpRequest
  45. 45. EWD’s view of a web Application Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script EWD State & Session Management Cach é/ GT.M Server
  46. 46. EWD’s view of a web Application Container Page EWD State & Session Management Cach é/ GT.M Server
  47. 47. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html>
  48. 48. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Pretty normal web page apart from <ewd:config> tag
  49. 49. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd“> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Method that will fetch data for this page
  50. 50. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd“ > <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Use EWD’s virtual MVC
  51. 51. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*“ ></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Data values automatically populate the forms at run-time No programming in the page
  52. 52. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Method that will validate and save data if this button is clicked
  53. 53. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d“ ></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Next page to display if no errors occur during validation. Equivalent to selecting next view
  54. 54. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd &quot;>Log out</a> </body> </html> Next page if hyperlink clicked
  55. 55. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Note: No coding in the page No language-specific constructs apart from call-outs to pre-page and action scripts
  56. 56. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> EWD will compile this page to the technology of your choice (eg PHP, JSP etc) EWD will look after handling the appropriate MVC run-time environment for your selected technology
  57. 57. The “A” Team <ul><li>Designer stays in control throughout the lifecyle </li></ul><ul><li>Designer doesn’t need to have any knowledge of programming, business logic or database structure/content </li></ul><ul><li>Programmer just focuses on business logic to fetch/validate/process/save data </li></ul><ul><ul><li>doesn’t waste any time on the “plumbing” </li></ul></ul><ul><ul><li>Isolated from design issues </li></ul></ul><ul><ul><li>Standardised processes </li></ul></ul><ul><ul><li>Discipline occurs because it’s the line of least resistance during development </li></ul></ul>
  58. 58. Interfacing design and programming <ul><li>Clearly need a conceptual interface through which the designer and programmer can inter-operate </li></ul><ul><li>This is provided by the “EWD Session” </li></ul>
  59. 59. The EWD Session EWD Page EWD Session Database Provides the interface between the designer and the programmer Programmer Using APIs provided By EWD Designer Using special syntax to refer to Session values or EWD custom tags
  60. 60. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Programmer creates session variable in pre-page script setSessionValue()
  61. 61. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Designer uses the session variable in the page
  62. 62. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> When form is submitted EWD will automatically persist username as a session variable. Value will be whatever was typed by the user <?= #username ?> can be used by designer in any other page
  63. 63. Security Management <ul><li>EWD’s compiler and run-time automatically tokenises all URLs </li></ul><ul><ul><li>Randomly-generated character strings </li></ul></ul><ul><li>Controller rejects URLs with invalid tokens </li></ul><ul><li>Tokens provide pointer to the user’s session </li></ul><ul><li>Completely automatic </li></ul>EWD creates at runtime, eg: <a href=“Example1b.php?ewd_token=U3FPqTKSi6tr7kMtT8bNMhmG2iMnT1&n=qXLT6jwFvlSUhO4ZBRu7Ol1leYVjCp&quot;> Designer just specifies: <a href=“Example1b.ewd”>
  64. 64. Custom Tags <ul><li>EWD’s functionality can be extended by defining XML-based custom tags </li></ul><ul><li>You define the XML DOM transformations that the compiler will make to a page when encountering an instance of your custom tag </li></ul><ul><li>Hugely powerful </li></ul><ul><li>Has been used to create very easy-to-use custom tags for ExtJS, Emprise JS Charts, Dojo and YUI </li></ul><ul><ul><li>Describe what you want, eg a grid </li></ul></ul><ul><ul><li>Not how , ie the associated complex Javascript </li></ul></ul><ul><li>Further encourages standardisation and discipline because they save time </li></ul>
  65. 65. Multi-lingual Deployment <ul><li>EWD’s compiler can automatically detect all text in a page </li></ul><ul><ul><li>Creates and maintains text/phrase database </li></ul></ul><ul><ul><li>Substitutes call-backs in run-time page </li></ul></ul><ul><ul><li>Just get text/phrases translated </li></ul></ul><ul><ul><li>At run-time, call-backs in page retrieve translated text </li></ul></ul><ul><li>Developers continue to design using their native language </li></ul><ul><ul><li>No impact on development </li></ul></ul><ul><ul><li>Can be done retrospectively for existing EWD pages </li></ul></ul><ul><li>Built-in contextual review mode </li></ul>
  66. 66. Design-focused Development <ul><li>Immediate benefits: </li></ul><ul><ul><li>Much higher productivity compared with conventional techniques </li></ul></ul><ul><ul><li>Applications are focused on design requirements </li></ul></ul><ul><ul><ul><li>designer retains control throughout the life-cycle </li></ul></ul></ul><ul><ul><li>Cuts out all the complexity of Ajax </li></ul></ul><ul><ul><li>Integrates with most UI/widget libraries </li></ul></ul><ul><ul><ul><li>Leverage “best of breed” instead of reinventing wheels </li></ul></ul></ul><ul><ul><li>Significantly lower maintenance than conventional techniques </li></ul></ul><ul><ul><ul><li>Because you just describe the what , not the how </li></ul></ul></ul><ul><ul><ul><li>Build an “A” team, not an “eh?” team! </li></ul></ul></ul>
  67. 67. Conclusions <ul><li>Design-focused web application development is an essential step forwards </li></ul><ul><li>EWD is unique in being the only toolset that has adopted this approach </li></ul><ul><li>Create an “A” team and leave your “Eh?” team behind! </li></ul>

×