0
SASAbus HTML5 & related Java free software
by Davide Montesin <d@vide.bz>

(C) 2013 Davide Montesin <d@vide.bz> - License:...
The project

Name: SASAbus HTML5
Url: http://html5.sasabus.org
License: Affero GPL
Source code: https://github.com/davidebz...
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...
Team
SASAbus community: community@sasabus.org. Join us!

Davide Montesin - SASAbus HTML5/Java developer
Markus Windegger -...
Motivation: an android app is not enough
Before this project only an Android app existed for SASA open data

(C) 2013 Davi...
Goal: an app for everybody
We wanted to reach more citizens and tourists

(C) 2013 Davide Montesin <d@vide.bz> - License: ...
Native or HTML5

Which way: native or HTML5?
(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & ...
Native: powerful but expensive

High integration with the phone
Each platform needs a new development process and programm...
HTML5: easier
Runs anywhere there is a HTML5 capable browser: smartphones,
tables, pc
One development process/team
Common ...
HTML5 & geolocation
An HTML5 app may knows the position of the user

navigator.geolocation.getCurrentPosition(on_position_...
HTML5 & CSS3
An HTML5 app can be responsive using CSS3 media query

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

(C)...
HTML5 & localstore / offline
An HTML5 app can work offline and store data in the browser

Space is limited: about 5Mbyte.
(rem...
HTML5: caniuse
As for traditional web projects, first check cross browser support

http://caniuse.com
(C) 2013 Davide Monte...
We choose HTML5
HTML5 features are adequate in this case

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SAS...
Menu

The implemented functions

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & related Java...
Responsive
Two fluid layout based on browser width: small (<940px) & big (>=940px)

(C) 2013 Davide Montesin <d@vide.bz> - ...
Easy: lines, bus stops with precalculated departures
Each bus stop shows precalculated departures based on date / time!

(...
Easy: favourites, news, route calculations
The app can calculate the best route between two bus stops

(C) 2013 Davide Mon...
Map: geolocalization, bus stops, lines, ...

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & ...
Parking: real-time free slots

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & related Java f...
A look under the hood
Which technologies have been used?

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SAS...
Overview of the actual system

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & related Java f...
Classic or innovative technologies?

Follow a classic or an innovative way?

(C) 2013 Davide Montesin <d@vide.bz> - Licens...
Classic architecture: HTML, JS, D-HTML
A UI component is realized with different technologies / skills :-(

(C) 2013 Davide...
Web frameworks
Ways to reduce complexity and fragmentation
Server side framework
The code executes server side. Often and ...
We decided to use Java on both sides

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & related...
The power of UI inherintance and composition

Java UI components/object in the SASAbus HTML5 app
(C) 2013 Davide Montesin ...
GWT - http://www.gwtproject.org

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & related Java...
How does GWT works?
GWT translates Java code into the equivalent Javascript code

(C) 2013 Davide Montesin <d@vide.bz> - L...
GWT: client, server, shared and serialization

In a GWT project Java objects can run
server only: this code will run only ...
GWT limitations

Unfortunately GWT UI stock objects don't run server side (even if
with GWT it is possible to exchange sha...
DM libraries: DMWeb
I have created a library of UI widget to resolve the GWT limitations
about server side UI

DMWeb: UI c...
SEO: With DMWeb HTML5 app are indexed

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & relate...
DM libraries: DMXmlJson
I have created a framework which converts/serializes java objects to
Xml or Json. This framework i...
Future steps!
Integration of the services

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & re...
Workshop afternoon at 15.00
USING the app: how to use the app, examples of searching for
departures, routing and map
DEVEL...
Thank you!

(C) 2013 Davide Montesin <d@vide.bz> - License: CC BY NC ND

SASAbus HTML5 & related Java free software - TIS ...
Upcoming SlideShare
Loading in...5
×

Davide Montesin - SASAbus HTML5 & related Java Free Software

503

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
503
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of " Davide Montesin - SASAbus HTML5 & related Java Free Software"

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×