davide montesin - sasabus html5 & related java free software

SASAbus HTML5 & related Java free software

by Davide Montesin <d@vide.bz>

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 1 / 37

The project

Name: SASAbus HTML5

Url: http://html5.sasabus.org

License: Affero GPL

Source code: https://github.com/davidebz

Programming languages: Java, HTML5, CSS3

Developing time: 3 months (summer 2013)

Frontend: 7'000 lines of code

Backend: 4'000 lines of code

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 2 / 37

SASA open data

http://opensasa.info

License: CC-3.0-BY-SA-NC

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 3 / 37

Team

SASAbus community: community@sasabus.org. Join us!

Davide Montesin - SASAbus HTML5/Java developer

Markus Windegger - SASA database & Android app

Giulia Rosso - design

Iryna Dorosh - design

Virginia Mazzocco - design

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 4 / 37

Motivation: an android app is not enough

Before this project only an Android app existed for SASA open data

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 5 / 37

Goal: an app for everybody

We wanted to reach more citizens and tourists

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 6 / 37

Native or HTML5

Which way: native or HTML5?

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 7 / 37

Native: powerful but expensive

High integration with the phone

Each platform needs a new development process and programminglanguage skills: Java, Objective-C, a Mac ...

Code reuse is difficult: approximately the costs are: app * platform

Each platform has its own look & feel: can't be a simple one-to-onecopy

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 8 / 37

HTML5: easier

Runs anywhere there is a HTML5 capable browser: smartphones,tables, pc

One development process/team

Common web skills are enough: HTML5, CSS3, Javascript + a serverside language

Limited integration with the phone ... but ... (see next slides)

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 9 / 37

HTML5 & geolocation

An HTML5 app may knows the position of the user

navigator.geolocation.getCurrentPosition(on_position_ready);

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 10 / 37

HTML5 & CSS3

An HTML5 app can be responsive using CSS3 media query

@media only screen and (min-width: 940px) { ... }

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 11 / 37

HTML5 & localstore / offline

An HTML5 app can work offline and store data in the browser

Space is limited: about 5Mbyte.

(remember that 1 Javascript char uses 2 bytes)

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 12 / 37

HTML5: caniuse

As for traditional web projects, first check cross browser support

http://caniuse.com

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 13 / 37

We choose HTML5

HTML5 features are adequate in this case

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 14 / 37

Menu

The implemented functions

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 15 / 37

Responsive

Two fluid layout based on browser width: small (<940px) & big (>=940px)

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 16 / 37

Easy: lines, bus stops with precalculated departures

Each bus stop shows precalculated departures based on date / time!

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 17 / 37

Easy: favourites, news, route calculations

The app can calculate the best route between two bus stops

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 18 / 37

Map: geolocalization, bus stops, lines, ...

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 19 / 37

Parking: real-time free slots

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 20 / 37

A look under the hood

Which technologies have been used?

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 21 / 37

Overview of the actual system

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 22 / 37

Classic or innovative technologies?

Follow a classic or an innovative way?

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 23 / 37

Classic architecture: HTML, JS, D-HTML

A UI component is realized with different technologies / skills :-(

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 24 / 37

Web frameworks

Ways to reduce complexity and fragmentation

Server side framework

The code executes server side. Often and additional clientframework is required for events handling and ajax

The code executes server side. Framework sends incrementalupdates to the client

Client side frameworks: jquery, yui, ecc..

page can't be indexed by search engines

Use the same programming language on both sides

Javascript: with some libraries it is possible to run Javascript codeserver side too

Java: can be converted to Javascript with GWT

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 25 / 37

We decided to use Java on both sides

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 26 / 37

The power of UI inherintance and composition

Java UI components/object in the SASAbus HTML5 app

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 27 / 37

GWT - http://www.gwtproject.org

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 28 / 37

How does GWT works?

GWT translates Java code into the equivalent Javascript code

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 29 / 37

GWT: client, server, shared and serialization

In a GWT project Java objects can run

server only: this code will run only server side: i.e. servlets

client only: this code will run only client side: i.e. Window, Location

shared: this code can run both server or client side

this data objects can be serialized and transmitted over thenetwork from one side to the other (i.e. bus stops)

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 30 / 37

GWT limitations

Unfortunately GWT UI stock objects don't run server side (even ifwith GWT it is possible to exchange shared objects)

GWT app can't be indexed by search engines

GWT uses a proprietary protocol to exchange Java objects betweenserver and browser

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 31 / 37

DM libraries: DMWeb

I have created a library of UI widget to resolve the GWT limitationsabout server side UI

DMWeb: UI components run BOTH server and client side andprovide HTML for SEO!

License: LGPL v3

Source code: http://github.com/davidebz

Infos: http://www.davide.bz

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 32 / 37

SEO: With DMWeb HTML5 app are indexed

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 33 / 37

DM libraries: DMXmlJson

I have created a framework which converts/serializes java objects toXml or Json. This framework is compatible with GWT, J2SE and Android

License: LGPL v3

Source code: http://github.com/davidebz

Infos: http://www.davide.bz

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 34 / 37

Future steps!

Integration of the services

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 35 / 37

Workshop afternoon at 15.00

USING the app: how to use the app, examples of searching fordepartures, routing and map

DEVELOPER: Let's install the development software and play withit!

install the development environment as VirtualBox VM

query the sasa open data database: list of lines, bus stops, and soon...

convert Java objects to xml and json with dm-xml-json library

create a small HTML5 web app with server and client side codeusing GWT + DMWeb

run the SASAbus HTML5 project in development mode

analyse the SASAbus HTML5 project

make some changes to the project, i.e. fix some translations, addtrain stations, ...

Workshop will be held in italian

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 36 / 37

Thank you!

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND SASAbus HTML5 & related Java free software - TIS innovation park South Tyrol 37 / 37