Powerful Google developer tools for immediate impact! (2023-24 C)
Davide Montesin - SASAbus HTML5 & related Java Free Software
1. 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
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. Native: powerful but expensive
High integration with the phone
Each platform needs a new development process and programming
language 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-one
copy
(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
9. 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 server
side 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. Web frameworks
Ways to reduce complexity and fragmentation
Server side framework
The code executes server side. Often and additional client
framework is required for events handling and ajax
The code executes server side. Framework sends incremental
updates 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 code
server 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
26. 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
27. 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
28. 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
29. 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
30. 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 the
network 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
31. GWT limitations
Unfortunately GWT UI stock objects don't run server side (even if
with 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 between
server 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
32. DM libraries: DMWeb
I have created a library of UI widget to resolve the GWT limitations
about server side UI
DMWeb: UI components run BOTH server and client side and
provide 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
33. 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
34. DM libraries: DMXmlJson
I have created a framework which converts/serializes java objects to
Xml 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
35. 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
36. Workshop afternoon at 15.00
USING the app: how to use the app, examples of searching for
departures, routing and map
DEVELOPER: Let's install the development software and play with
it!
install the development environment as VirtualBox VM
query the sasa open data database: list of lines, bus stops, and so
on...
convert Java objects to xml and json with dm-xml-json library
create a small HTML5 web app with server and client side code
using 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, add
train 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
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