Podsumowanie doświadczeń dotyczących aplikacji opartej o Google Web Toolkit uruchamianej online, offline i na platformach mobilnych. Refleksje o miejscu GWT dziś i potencjale na rozwój w najbliższym czasie (2013). Prezentacja ze spotkania Trójmiasto Java User Group w grudniu 2013.

1. GWT
nie idź tą drogą
case study
gwt-based standalone app
Rafał Rybacki, 12.12.2013

2. GWT /ˈɡwɪt/
Java web develpment framework:
● asynchronous remote procedure calls
● cross-browser portability
● UI abstraction
● history management
● internationalization

3. hello world

4. hello underground

5. Release notes
1.0 2.0 2.5.1
2009
IE8, FF3
● GWT Developer
Plugin
● UiBinder
● Code Splitting
2006
IE7, FF2,
jQuery 1.0
11.2013
... ... ...

6. Release notes
2.6.0
RC1
3.0
11.2013
● Java 7
● Super Dev Mode
● IE6/7
I/O 2014
● Faster development
● In an open setting
● modern, and mobile, web
● fewer surprises
● More Java compatibility
● Easier Interoperability
with the Rest the World
... ...

7. GWT dziś
GWT Steering Committee przejął władzę
● od 2012
● Google, Vaadin, Sencha, RedHat,
Arcbees, Jetbrains
●

8. GWT - obietnice (1)
● cross-browser compatibility
● optymalizacja kodu JavaScript
● dojrzałe środowisko developerskie i testowe
● standardy Java w web dev
GWT/Java JavaScript
Web
Browser

9. GWT - obietnice (2)
● programiści Java
● open-source, wsparcie Google, społeczność
● brak alternatyw w 2009 - IE8, iOS3

10. Zastosowanie GWT
Client-server app Standalone component
MySQL
Spring
GWT
Activities and Places
Hibernate
GWT
Activities and Places
web app xxxWebView
Web Browser iOS, Android, AIR
clientserver
client
RPC

11. Dev tools
Activities and
PlacesGoogleGuice,GinGwtQuery
jaxb4gwt
mockito
ham
crest
fest-assertions
jscss
video.js
guava-gwt
jQuery
GFlot
symja

12. Activities and Places
index.html#place1 index.html#place2 index.html#place3
Activity 1 Activity 2 Activity 3
Activities:
Places:

13. GWT - zależności
● Produkcja
○ Google Gin
○ GwtQuery
○ guava-gwt
○ jaxb4gwt
● Testy
○ mockito, hamcrest, fest-assertions, reflections

14. Życie z GWT

15. Widgety
Słabe:
○ MenuBar
○ PopupPanel
Praktyczne - proste:
○ FlowPanel
○ AbsolutePanel
○ Canvas

16. Kompilacja
● Czas kompilacji
○ zmniejszyć liczbę permutacji
○ <collapse-all-properties/>
○ -draftCompile

17. GWT <-> JavaScript

18. JavaScript Interop
● Google Swiffy
● CreateJs
● Video.js
web browser
GWT app (JavaScript) JavaScript lib

19. Google Swiffy
● eksport animacji z Adobe Flash
● obiekt JavaScript, animacja w SVG
● waga ~450kB dla 10 sek animacji
● prosta w użytkowaniu
var elem = document.getElementById('swiffycontainer');
var stage = new swiffy.Stage(elem, swiffyobject);
stage.start();

20. CreateJs
● easelJs, tweenJs, soundJs, preloadJs
● eksport z Flash z możliwością dodania kodu
JavaScript
● złożone rozwiązanie, trudniejsze w
utrzymaniu od Swiffy

21. Performance - GWT vs JavaScript
Sortowanie tablicy 10 000 intów.
t [s]

22. Kontenery

23. Kontenery
web browser browser widget
Android
● WebView
iOS
● UIWebView
Windows
● WebView
Adobe AIR
● StageWebView
hybrid framework
● PhoneGap
● Titanium
● Intel App
Framework
● MoSync
● ...

24. Android - WebView
● Kontrolki
○ WebView (Android SDK)
○ StageWebView (AIR)
○ Android Browser
● Niespodzianki
○ HTML5 video
○ Web Storage
○ IFrame

25. Browser surprises
● Android 4.0
○ błąd w interpretacji ścieżek dla audio z file://
● Android 4.1
○ Touch Event + Mouse Event
● Android 4.4
○ Chromium

26. iOS - UIWebView
● UIWebView vs Safari
● Niespodzianki iOS 6
○ optymalizacje
○ String.hashCode() -XdisableCastChecking
○ <arg value="-XenableClosureCompiler"/>

27. Kontener - komunikacja
● komunikacja przez URL
○ app://html-2-air
○ index.html#air-2-html

28. Komunikacja - audio, video
● ograniczona przepustowość zmian URL
○ jedna zmiana URL trwa 200-300ms
● buforowanie zdarzeń
● zapytania i odpowiedzi

29. AIR - komunikacja - rozwiązanie
HTML AIR
INIT a.mp3
PLAY a.mp3
END b.mp3
...
air://INIT(a.mp3)
http://localhost/index.html#ON_INIT(a.mp3)
INIT b.mp3
...
http://localhost/index.html#ON_END(b.mp3)
air://…..
...

30. Offline

31. Aplikacja GWT offline (file://...)
1. same origin policy
○ JSONP zamiast XHR
2. GWT
○ modyfikacja linkera

32. GWT offline - JSONP (StringP)
content.xml content.xml.js
loadContent(
“<content>
value
</content>”);
<content>
value
</content>

33. GWT - linker
kod
Java
kod
JavaScript
*.nocache.js
*.js
*.html
*.gwt.rpc
plikikompilacja
linkowanie

34. GWT - linker
Linkery w GWT:
● IFrame - kod w *.html w iframe (default)
● SingleScript - jeden monolityczny plik z kodem
● XS - cross-site
● XSIFrame - cross-site, kod osadzany w iframe

35. GWT linker dla offline
● XSIFrameLinker + obsługa <script>
1. Klasa linkera
2. Szablon
3. Definicja w
gwt.xml

36. Testy

37. ● The Future of GWT Survey 2012
UI Test

38. Test
● unit test
○ JUnit
○ GWTTestCase
● e2e
○ Karma
○ Angular Scenario
unit
e2e
acc

39. E2E Test
test case
TypeScript
DSL
JavaScript
kompilacja
Tester
Developer
testy

40. E2E Test

41. Przyszłość

42. Przyszłość GWT
Roadmap principles:
● Openness and Simplicity
● Speed
● Interoperability
● Mobility
● Reliability
● Embeddability

43. Super Dev Mode
GWT/Java JavaScript
Web
Browser
Standard Dev Mode:

44. Super Dev Mode
GWT/Java JavaScript
Web
Browser
Super Development Mode:

45. Super Dev Mode

46. Warto?

47. GWT - plusy
● Java - type safety, biblioteki, przyzwyczajenie
● JUnit
● abstrakcja od problemów na poziomie HTML
● jeden język w zastosowaniu klient-serwer

48. GWT - minusy
● far from the metal
● brak pokrycia części funkcjonalność JS
przez GWT
● niepewna przyszłość

49. JavaScript for standalone - plusy
● Create Once Run Everywhere
● single codebase:
○ web
○ desktop
○ mobile
● działa

50. JavaScript for standalone - minusy
● utrudnione znajdowanie błędów, debugging
○ AIR, mobile
● słabe wsparcie dla komponentów HTML
○ WebView, StageWebView
● dziwne błędy
● każda platforma zaskakuje w inny sposób

51. GWT dziś?
● JavaScript się ucywilizował
○ angularJs, karma, jasmine, biblioteki
● Internet Explorer się cywilizuje
● HTML5 zaczyna działać
Nie koniecznie.

52. JavaScript dziś?
● JS czy native mobile?
○ rich content, szablony, style
○ native look and feel
To zależy.

53. Dziękuję.