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 • resume app state • execute app logic Browser • update model • find view • update session • generate page Server
Current Browser
Current Browser Java
Current Browser HTML Java
Java HTML JavaScript Current Browser
Java HTML JavaScript CSS Current Browser
Java HTML JavaScript CSS Current JSP Browser
Current JavaScript Browser HTML Java CSS JSP HTML page
Current Java String hql = "from Person p where p.age > :age"; Query q = session.createQuery(); q.setInteger("age", 33); List people = q.list(hql); JavaScript Browser HTML Java JSP CSS <table> <% for (Person p : people) { %> JSP <tr> <td>p.getName()</td> <td>p.getAge()</td> </tr> <% } %> </table>
Current JSP <% if (request.getParameter("age") != null) { age=Integer.parseInt(request.getParameter(“age”)); } JavaScript Browser String hql = "from Person p where p.age > :age"; HTML Java Query q = session.createQuery(); q.setInteger("age", age); CSS List people = q.list(hql); %> JSP <table> <% for (Person p : people) { %> <tr> <td>p.getName()</td> <td>p.getAge()</td> </tr> <% } %> </table>
Current JavaScript var onClick = function () { $.ajax({ url: ‘/people/’, dataType: ‘json’, JavaScript Browser data: { age: 33 }, success: function (data) { HTML Java var rows = []; $.each(data, function (person) { CSS rows.push(‘<tr><td>’ + person.name + ‘</td><td>’ + person.age +‘</td></tr>’); JSP } $(‘#peopletable > tbody:last’).append( ‘’.join(rows)); } }
MVC
MVC View Browser Controller, Model Server
MVC View Browser Controller, Model ? Server
MVC View Browser Controller, Model REST Server
MVC Single page web application REST Server
MVC HTML <html> <head> <link type="text/css" href="someframework.css"> <script src=”someframework.js”></script> <script src=”myapp.js”></script> </head> Single page web application <body> </body> </html> REST Server
MVC Single page web application REST Server
MVC Single page web application REST Server
Case: Valvomo
Valvomo Browser Server Transit API Paratransit System
Valvomo Browser Single page UI Server RESTful API Transit API Paratransit System
Valvomo Web Browser Application HTML Server Valvomo Web Transit API Application Paratransit System
Valvomo Browser JSON Server Transit API Paratransit System
DEMO
Pros • browsers • mobile devices • programmatic clients • HTTP • Accessible API
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
Pros • Accessible API • responsibilities are easier to assign • Reusable API • data validation • error handling • Decoupling • localization
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
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
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
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
Cons • some server frameworks have REST support • MVC support on • Framework support client depends solely on the chosen toolkit
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
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
Future work • Authentication • Flexible authorization configuration • per resource • per request method • representations per auth level?
Thank You
Recommend
More recommend
