Download Experiences on a Design Approach for Interactive Web Applications

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
page
20
page
21
page
22
page
23
page
24
page
25
page
26
page
27
page
28
page
29
page
30
page
31
page
32
page
33
page
34
page
35
page
36
page
37
page
38
page
39
page
40
page
41
page
42
page
43
Document related concepts
no text concepts found
Transcript 
Experiences on a
Design Approach for
Interactive Web
Applications
Experiences on a
Design Approach for
Interactive Web
Applications
Janne Kuuskeri
Tampere University of Technology
Stratagen Systems
Current
Browser
Server
Current
Browser
GET /myapp/index.html
Server
Current
Browser
GET /myapp/userlist.html
Server
Current
Browser
POST /myapp/userdata
Server
Current
Browser
• resume app state
•execute app logic
•update model
•find view
•update session
•generate page
Server
Current
Browser
Current
Browser
Java
Current
Java
HTML
Browser
Current
Java
HTML
ipt
JavaScr
Browser
Current
Java
HTML
CS
S
ipt
JavaScr
Browser
Current
Java
HTML
CS
S
ipt
JavaScr
Browser
JSP
Current
Java
HTML
HTML page
S
CS
JSP
ipt
JavaScr
Browser
Java
Current
JSP
S
CS
<table>
<% for (Person p : people) { %>
<tr>
<td>p.getName()</td>
<td>p.getAge()</td>
</tr>
<% } %>
</table>
Java
JSP
HTML
Browser
ipt
JavaScr
String hql = "from Person p where p.age > :age";
Query q = session.createQuery();
q.setInteger("age", 33);
List people = q.list(hql);
Current
JSP
Java
<table>
<% for (Person p : people) { %>
<tr>
<td>p.getName()</td>
<td>p.getAge()</td>
</tr>
<% } %>
</table>
JSP
S
CS
String hql = "from Person p where p.age > :age";
Query q = session.createQuery();
q.setInteger("age", age);
List people = q.list(hql);
%>
HTML
Browser
ipt
JavaScr
<%
if (request.getParameter("age") != null) {
age=Integer.parseInt(request.getParameter(“age”));
}
JavaScript
Current
Java
S
CS
JSP
HTML
Browser
ipt
JavaScr
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));
}
}
MVC
MVC
Browser
Server
View
Controller, Model
MVC
Browser
Server
View
Controller, Model
?
MVC
Browser
Server
View
Controller, Model
REST
MVC
Single page web application
Server
REST
HTML
MVC
<html>
<head>
<link type="text/css" href="someframework.css">
<script src=”someframework.js”></script>
<script src=”myapp.js”></script>
</head>
<body>
</body>
</html>
Single page web application
Server
REST
MVC
Single page web application
Server
REST
MVC
Single page web application
Server
REST
Case:Valvomo
Browser
Server
Valvomo
Transit API
Paratransit
System
Browser
Server
Valvomo
Transit API
Paratransit
System
Single page UI
RESTful API
Valvomo Web
Application
Browser
HTML
Server
Transit API
Paratransit
System
Valvomo Web
Application
Browser
Valvomo
JSON
Server
Transit API
Paratransit
System
DEMO
Pros
• Accessible API
• browsers
• mobile devices
• programmatic clients
• HTTP
Pros
• can have several
• Accessible API
• Reusable API
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
Pros
• Accessible API
• Reusable API
• Decoupling
• responsibilities are
easier to assign
• data validation
• error handling
• localization
Pros
• Accessible API
• Reusable API
• Decoupling
• Application flow / state
• unambiguously assign
responsibilities for state
handling
• server is responsible
for resources and their
states
• application (client) is
responsible for the
application flow and
state
Pros
• Accessible API
• Reusable API
• Decoupling
• Application flow / state
• Development model
• 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
Pros
• Accessible API
• Reusable API
• Decoupling
• Application flow / state
• Development model
• Testing
• 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
Pros
• Accessible API
• Reusable API
• Decoupling
• Application flow / state
• Development model
• Testing
• Network traffic
• 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)
Cons
• some server
• Framework support
frameworks have REST
support
• MVC support on
client depends solely on
the chosen toolkit
Cons
• single page web
• Framework support
• Search engine support
applications are difficult
to crawl and index
• RESTful API could be
crawled and indexed but
difficult to rank
Cons
• highly dynamic
• Framework support
• Search engine support
• Accessibility
JavaScript UIs require
extra work to be
accessible for the
visually impaired
• some JavaScript
toolkits offer support
for accessibility
Future work
• Authentication
• Flexible authorization configuration
• per resource
• per request method
• representations per auth level?
Thank You
Related documents