Experiences on aDesign Approach for  Interactive Web    Applications
Experiences on aDesign Approach for  Interactive Web    Applications           Janne Kuuskeri   Tampere University of Tech...
CurrentBrowser                    Server
CurrentBrowser            GET /myapp/index.html                          Server
CurrentBrowser           GET /myapp/userlist.html                           Server
CurrentBrowser            POST /myapp/userdata                          Server
Current                • resume app stateBrowser         •execute app logic                •update model                •fi...
CurrentBrowser
CurrentBrowser                    Java
CurrentBrowser                    HTML                           Java
Java                HTML                       ipt          JavaScrCurrent          Browser
Java                HTML                       ipt          JavaScr                           S                       CSCu...
Java                HTML                       ipt          JavaScr                           S                       CSCu...
Current                     JavaScrBrowser                               HTML                                      Java   ...
Java                         CurrentString hql = "from Person p where p.age > :age";Query q = session.createQuery();q.setI...
JSP<%                         Currentif (request.getParameter("age") != null) {   age=Integer.parseInt(request.getParamete...
JavaScript                         Currentvar onClick = function () {  $.ajax({     url: ‘/people/’,     dataType: ‘json’,...
MVC
MVCBrowser   ViewServer    Controller, Model
MVC          ViewBrowser          Controller, ModelServer    ?
MVC          ViewBrowser          Controller, ModelServer    REST
MVC         Single page web applicationServer   REST
HTML<html>                             MVC  <head>    <link type="text/css" href="someframework.css">     <script src=”som...
MVC         Single page web applicationServer   REST
MVC         Single page web applicationServer   REST
Case:Valvomo
ValvomoBrowserServer    Transit API          Paratransit            System
ValvomoBrowser                 Single page UIServer    Transit API                         RESTful API          Paratransi...
Valvomo WebBrowser                  Application                                       HTMLServer    Transit API           ...
ValvomoBrowser                 JSONServer    Transit API          Paratransit            System
DEMO
Pros                          • browsers                          • mobile devices                          • programmatic...
Pros                          • can have several                          different server• Accessible API                ...
Pros• Accessible API          • responsibilities are                          easier to assign• Reusable API            • ...
Pros• Accessible API            • unambiguously assign                            responsibilities for state• Reusable API...
Pros• Accessible API            • fewer technologies to                            worry about• Reusable API              ...
Pros• Accessible API• Reusable API              • client and server may                            be tested separately• D...
Pros• Accessible API• Reusable API              • REST offers minimal                            HTTP overhead• Decoupling...
Cons                      • some server                      frameworks have REST                      support            ...
Cons                          • single page web                          applications are difficult• Framework support     ...
Cons                          • highly dynamic                          JavaScript UIs require• Framework support         ...
Future work• Authentication• Flexible authorization configuration • per resource • per request method • representations per...
Thank You
Upcoming SlideShare
Loading in …5
×

Experiences on a Design Approach for Interactive Web Applications

1,004 views

Published on

Presentation at USENIX WebApps '11

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

No Downloads
Views
Total views
1,004
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Experiences on a Design Approach for Interactive Web Applications

  1. 1. Experiences on aDesign Approach for Interactive Web Applications
  2. 2. Experiences on aDesign Approach for Interactive Web Applications Janne Kuuskeri Tampere University of Technology Stratagen Systems
  3. 3. CurrentBrowser Server
  4. 4. CurrentBrowser GET /myapp/index.html Server
  5. 5. CurrentBrowser GET /myapp/userlist.html Server
  6. 6. CurrentBrowser POST /myapp/userdata Server
  7. 7. Current • resume app stateBrowser •execute app logic •update model •find view •update session •generate page Server
  8. 8. CurrentBrowser
  9. 9. CurrentBrowser Java
  10. 10. CurrentBrowser HTML Java
  11. 11. Java HTML ipt JavaScrCurrent Browser
  12. 12. Java HTML ipt JavaScr S CSCurrent Browser
  13. 13. Java HTML ipt JavaScr S CSCurrent JSP Browser
  14. 14. Current JavaScrBrowser HTML Java ipt CS JSP HTML page S
  15. 15. Java CurrentString hql = "from Person p where p.age > :age";Query q = session.createQuery();q.setInteger("age", 33);List people = q.list(hql); JavaScr Browser HTML JavaJSP ipt CS<table> JSP S<% for (Person p : people) { %> <tr> <td>p.getName()</td> <td>p.getAge()</td> </tr><% } %></table>
  16. 16. JSP<% Currentif (request.getParameter("age") != null) { age=Integer.parseInt(request.getParameter(“age”));} JavaScr BrowserString hql = "from Person p where p.age > :age"; HTML JavaQuery q = session.createQuery();q.setInteger("age", age);List people = q.list(hql); ipt CS%> JSP S<table><% for (Person p : people) { %> <tr> <td>p.getName()</td> <td>p.getAge()</td> </tr><% } %></table>
  17. 17. JavaScript Currentvar onClick = function () { $.ajax({ url: ‘/people/’, dataType: ‘json’, JavaScr Browser data: { age: 33 }, success: function (data) { HTML Java var rows = []; $.each(data, function (person) { rows.push(‘<tr><td>’ + person.name + ipt CS ‘</td><td>’ + person.age +‘</td></tr>’); JSP S } $(‘#peopletable > tbody:last’).append( ‘’.join(rows)); }}
  18. 18. MVC
  19. 19. MVCBrowser ViewServer Controller, Model
  20. 20. MVC ViewBrowser Controller, ModelServer ?
  21. 21. MVC ViewBrowser Controller, ModelServer REST
  22. 22. MVC Single page web applicationServer REST
  23. 23. HTML<html> MVC <head> <link type="text/css" href="someframework.css"> <script src=”someframework.js”></script> <script src=”myapp.js”></script> </head> <body> </body> Single page web application</html> Server REST
  24. 24. MVC Single page web applicationServer REST
  25. 25. MVC Single page web applicationServer REST
  26. 26. Case:Valvomo
  27. 27. ValvomoBrowserServer Transit API Paratransit System
  28. 28. ValvomoBrowser Single page UIServer Transit API RESTful API Paratransit System
  29. 29. Valvomo WebBrowser Application HTMLServer Transit API Valvomo Web Application Paratransit System
  30. 30. ValvomoBrowser JSONServer Transit API Paratransit System
  31. 31. DEMO
  32. 32. Pros • browsers • mobile devices • programmatic clients • HTTP• Accessible API
  33. 33. Pros • can have several different server• Accessible API implementations • same UI can be placed• Reusable API “on top” of another server implementation as long as it is the same API • no predefined application flow
  34. 34. Pros• Accessible API • responsibilities are easier to assign• Reusable API • data validation • error handling• Decoupling • localization
  35. 35. Pros• Accessible API • unambiguously assign responsibilities for state• Reusable API handling • server is responsible• Decoupling for resources and their states• Application flow / state • application (client) is responsible for the application flow and state
  36. 36. Pros• Accessible API • fewer technologies to worry about• Reusable API • one language for the client• Decoupling • one language (maybe even the same) for the• Application flow / state server • client and server are• Development model easier to develop in parallel
  37. 37. Pros• Accessible API• Reusable API • client and server may be tested separately• Decoupling • server API may be tested using isolated• Application flow / state HTTP request and checking the result• Development model codes and content • UI may be tested• Testing without the server or the network traffic
  38. 38. Pros• Accessible API• Reusable API • REST offers minimal HTTP overhead• Decoupling • network is utilized only when necessary• Application flow / state (no page reloads) • no data (e.g. HTML or• Development model CSS) overhead when transferring only payload• Testing data (e.g. JSON or XML)• Network traffic
  39. 39. Cons • some server frameworks have REST support • MVC support on• Framework support client depends solely on the chosen toolkit
  40. 40. Cons • single page web applications are difficult• Framework support to crawl and index • RESTful API could be• Search engine support crawled and indexed but difficult to rank
  41. 41. Cons • highly dynamic JavaScript UIs require• Framework support extra work to be accessible for the• Search engine support visually impaired • some JavaScript• Accessibility toolkits offer support for accessibility
  42. 42. Future work• Authentication• Flexible authorization configuration • per resource • per request method • representations per auth level?
  43. 43. Thank You

×