Experiences on a Design Approach for Interactive Web Applications - - PowerPoint PPT Presentation

▶
experiences on a design approach for interactive web
SMART_READER_LITE
LIVE PREVIEW

Experiences on a Design Approach for Interactive Web Applications - - PowerPoint PPT Presentation

Nov 05, 2022 162 likes •600 views

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

slide-1
SLIDE 1

Experiences on a Design Approach for Interactive Web Applications

slide-2
SLIDE 2

Experiences on a Design Approach for Interactive Web Applications

Janne Kuuskeri Tampere University of Technology Stratagen Systems

slide-3
SLIDE 3

Current

Browser Server

slide-4
SLIDE 4

Current

Browser Server

GET /myapp/index.html

slide-5
SLIDE 5

Current

Browser Server

GET /myapp/userlist.html

slide-6
SLIDE 6

Current

Browser Server

POST /myapp/userdata

slide-7
SLIDE 7

Current

Browser Server

  • resume app state
  • execute app logic
  • update model
  • find view
  • update session
  • generate page
slide-8
SLIDE 8

Current

Browser

slide-9
SLIDE 9

Current

Browser

Java

slide-10
SLIDE 10

Current

Browser

HTML Java

slide-11
SLIDE 11

Current

Browser

HTML JavaScript Java

slide-12
SLIDE 12

Current

Browser

HTML CSS JavaScript Java

slide-13
SLIDE 13

Current

Browser

HTML CSS JavaScript Java JSP

slide-14
SLIDE 14

Current

Browser

HTML CSS JavaScript Java JSP HTML page

slide-15
SLIDE 15

Current

Browser

HTML CSS 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>

slide-16
SLIDE 16

Current

Browser

HTML CSS 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>

slide-17
SLIDE 17

Current

Browser

HTML CSS 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)); } }

slide-18
SLIDE 18

MVC

slide-19
SLIDE 19

MVC

Browser Server

View Controller, Model

slide-20
SLIDE 20

MVC

Browser Server

View Controller, Model ?

slide-21
SLIDE 21

REST

MVC

Browser Server

View Controller, Model

slide-22
SLIDE 22

REST

MVC

Server

Single page web application

slide-23
SLIDE 23

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>

slide-24
SLIDE 24

REST

MVC

Server

Single page web application

slide-25
SLIDE 25

REST

MVC

Server

Single page web application

slide-26
SLIDE 26

Case: Valvomo

slide-27
SLIDE 27

Valvomo Transit API

Browser Server

Paratransit System

slide-28
SLIDE 28

Browser Server

Paratransit System

Single page UI RESTful API

Transit API Valvomo

slide-29
SLIDE 29

Browser Server

Paratransit System Valvomo Web Application

HTML

Valvomo Web Application Transit API

slide-30
SLIDE 30

Browser Server

Paratransit System

JSON

Valvomo Transit API

slide-31
SLIDE 31

DEMO

slide-32
SLIDE 32

Pros

  • browsers
  • mobile devices
  • programmatic clients
  • HTTP
  • Accessible API
slide-33
SLIDE 33

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
slide-34
SLIDE 34

Pros

  • responsibilities are

easier to assign

  • data validation
  • error handling
  • localization
  • Reusable API
  • Accessible API
  • Decoupling
slide-35
SLIDE 35

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
slide-36
SLIDE 36

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
slide-37
SLIDE 37

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
slide-38
SLIDE 38

Pros

  • REST offers minimal

HTTP overhead

  • network is utilized
  • nly 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
slide-39
SLIDE 39

Cons

  • some server

frameworks have REST support

  • MVC support on

client depends solely on the chosen toolkit

  • Framework support
slide-40
SLIDE 40

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
slide-41
SLIDE 41

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
slide-42
SLIDE 42

Future work

  • Authentication
  • Flexible authorization configuration
  • per resource
  • per request method
  • representations per auth level?
slide-43
SLIDE 43

Thank You