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