Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GWT
nie idź tą drogą
case study
gwt-based standalone app
Rafał Rybacki, 12.12.2013
GWT /ˈɡwɪt/
Java web develpment framework:
● asynchronous remote procedure calls
● cross-browser portability
● UI abstract...
hello world
hello underground
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....
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
●...
GWT dziś
GWT Steering Committee przejął władzę
● od 2012
● Google, Vaadin, Sencha, RedHat,
Arcbees, Jetbrains
●
GWT - obietnice (1)
● cross-browser compatibility
● optymalizacja kodu JavaScript
● dojrzałe środowisko developerskie i te...
GWT - obietnice (2)
● programiści Java
● open-source, wsparcie Google, społeczność
● brak alternatyw w 2009 - IE8, iOS3
Zastosowanie GWT
Client-server app Standalone component
MySQL
Spring
GWT
Activities and Places
Hibernate
GWT
Activities an...
Dev tools
Activities and
PlacesGoogleGuice,GinGwtQuery
jaxb4gwt
mockito
ham
crest
fest-assertions
jscss
video.js
guava-gwt...
Activities and Places
index.html#place1 index.html#place2 index.html#place3
Activity 1 Activity 2 Activity 3
Activities:
P...
GWT - zależności
● Produkcja
○ Google Gin
○ GwtQuery
○ guava-gwt
○ jaxb4gwt
● Testy
○ mockito, hamcrest, fest-assertions, ...
Życie z GWT
Widgety
Słabe:
○ MenuBar
○ PopupPanel
Praktyczne - proste:
○ FlowPanel
○ AbsolutePanel
○ Canvas
Kompilacja
● Czas kompilacji
○ zmniejszyć liczbę permutacji
○ <collapse-all-properties/>
○ -draftCompile
GWT <-> JavaScript
JavaScript Interop
● Google Swiffy
● CreateJs
● Video.js
web browser
GWT app (JavaScript) JavaScript lib
Google Swiffy
● eksport animacji z Adobe Flash
● obiekt JavaScript, animacja w SVG
● waga ~450kB dla 10 sek animacji
● pro...
CreateJs
● easelJs, tweenJs, soundJs, preloadJs
● eksport z Flash z możliwością dodania kodu
JavaScript
● złożone rozwiąza...
Performance - GWT vs JavaScript
Sortowanie tablicy 10 000 intów.
t [s]
Kontenery
Kontenery
web browser browser widget
Android
● WebView
iOS
● UIWebView
Windows
● WebView
Adobe AIR
● StageWebView
hybrid f...
Android - WebView
● Kontrolki
○ WebView (Android SDK)
○ StageWebView (AIR)
○ Android Browser
● Niespodzianki
○ HTML5 video...
Browser surprises
● Android 4.0
○ błąd w interpretacji ścieżek dla audio z file://
● Android 4.1
○ Touch Event + Mouse Eve...
iOS - UIWebView
● UIWebView vs Safari
● Niespodzianki iOS 6
○ optymalizacje
○ String.hashCode() -XdisableCastChecking
○ <a...
Kontener - komunikacja
● komunikacja przez URL
○ app://html-2-air
○ index.html#air-2-html
Komunikacja - audio, video
● ograniczona przepustowość zmian URL
○ jedna zmiana URL trwa 200-300ms
● buforowanie zdarzeń
●...
AIR - komunikacja - rozwiązanie
HTML AIR
INIT a.mp3
PLAY a.mp3
END b.mp3
...
air://INIT(a.mp3)
http://localhost/index.html...
Offline
Aplikacja GWT offline (file://...)
1. same origin policy
○ JSONP zamiast XHR
2. GWT
○ modyfikacja linkera
GWT offline - JSONP (StringP)
content.xml content.xml.js
loadContent(
“<content>
value
</content>”);
<content>
value
</con...
GWT - linker
kod
Java
kod
JavaScript
*.nocache.js
*.js
*.html
*.gwt.rpc
plikikompilacja
linkowanie
GWT - linker
Linkery w GWT:
● IFrame - kod w *.html w iframe (default)
● SingleScript - jeden monolityczny plik z kodem
● ...
GWT linker dla offline
● XSIFrameLinker + obsługa <script>
1. Klasa linkera
2. Szablon
3. Definicja w
gwt.xml
Testy
● The Future of GWT Survey 2012
UI Test
Test
● unit test
○ JUnit
○ GWTTestCase
● e2e
○ Karma
○ Angular Scenario
unit
e2e
acc
E2E Test
test case
TypeScript
DSL
JavaScript
kompilacja
Tester
Developer
testy
E2E Test
Przyszłość
Przyszłość GWT
Roadmap principles:
● Openness and Simplicity
● Speed
● Interoperability
● Mobility
● Reliability
● Embedda...
Super Dev Mode
GWT/Java JavaScript
Web
Browser
Standard Dev Mode:
Super Dev Mode
GWT/Java JavaScript
Web
Browser
Super Development Mode:
Super Dev Mode
Warto?
GWT - plusy
● Java - type safety, biblioteki, przyzwyczajenie
● JUnit
● abstrakcja od problemów na poziomie HTML
● jeden j...
GWT - minusy
● far from the metal
● brak pokrycia części funkcjonalność JS
przez GWT
● niepewna przyszłość
JavaScript for standalone - plusy
● Create Once Run Everywhere
● single codebase:
○ web
○ desktop
○ mobile
● działa
JavaScript for standalone - minusy
● utrudnione znajdowanie błędów, debugging
○ AIR, mobile
● słabe wsparcie dla komponent...
GWT dziś?
● JavaScript się ucywilizował
○ angularJs, karma, jasmine, biblioteki
● Internet Explorer się cywilizuje
● HTML5...
JavaScript dziś?
● JS czy native mobile?
○ rich content, szablony, style
○ native look and feel
To zależy.
Dziękuję.
Upcoming SlideShare
Loading in …5
×

Google Web Toolkit - nie idź tą drogą

1,006 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Google Web Toolkit - nie idź tą drogą

  1. 1. GWT nie idź tą drogą case study gwt-based standalone app Rafał Rybacki, 12.12.2013
  2. 2. GWT /ˈɡwɪt/ Java web develpment framework: ● asynchronous remote procedure calls ● cross-browser portability ● UI abstraction ● history management ● internationalization
  3. 3. hello world
  4. 4. hello underground
  5. 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. 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. 7. GWT dziś GWT Steering Committee przejął władzę ● od 2012 ● Google, Vaadin, Sencha, RedHat, Arcbees, Jetbrains ●
  8. 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. 9. GWT - obietnice (2) ● programiści Java ● open-source, wsparcie Google, społeczność ● brak alternatyw w 2009 - IE8, iOS3
  10. 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. 11. Dev tools Activities and PlacesGoogleGuice,GinGwtQuery jaxb4gwt mockito ham crest fest-assertions jscss video.js guava-gwt jQuery GFlot symja
  12. 12. Activities and Places index.html#place1 index.html#place2 index.html#place3 Activity 1 Activity 2 Activity 3 Activities: Places:
  13. 13. GWT - zależności ● Produkcja ○ Google Gin ○ GwtQuery ○ guava-gwt ○ jaxb4gwt ● Testy ○ mockito, hamcrest, fest-assertions, reflections
  14. 14. Życie z GWT
  15. 15. Widgety Słabe: ○ MenuBar ○ PopupPanel Praktyczne - proste: ○ FlowPanel ○ AbsolutePanel ○ Canvas
  16. 16. Kompilacja ● Czas kompilacji ○ zmniejszyć liczbę permutacji ○ <collapse-all-properties/> ○ -draftCompile
  17. 17. GWT <-> JavaScript
  18. 18. JavaScript Interop ● Google Swiffy ● CreateJs ● Video.js web browser GWT app (JavaScript) JavaScript lib
  19. 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. 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. 21. Performance - GWT vs JavaScript Sortowanie tablicy 10 000 intów. t [s]
  22. 22. Kontenery
  23. 23. Kontenery web browser browser widget Android ● WebView iOS ● UIWebView Windows ● WebView Adobe AIR ● StageWebView hybrid framework ● PhoneGap ● Titanium ● Intel App Framework ● MoSync ● ...
  24. 24. Android - WebView ● Kontrolki ○ WebView (Android SDK) ○ StageWebView (AIR) ○ Android Browser ● Niespodzianki ○ HTML5 video ○ Web Storage ○ IFrame
  25. 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. 26. iOS - UIWebView ● UIWebView vs Safari ● Niespodzianki iOS 6 ○ optymalizacje ○ String.hashCode() -XdisableCastChecking ○ <arg value="-XenableClosureCompiler"/>
  27. 27. Kontener - komunikacja ● komunikacja przez URL ○ app://html-2-air ○ index.html#air-2-html
  28. 28. Komunikacja - audio, video ● ograniczona przepustowość zmian URL ○ jedna zmiana URL trwa 200-300ms ● buforowanie zdarzeń ● zapytania i odpowiedzi
  29. 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. 30. Offline
  31. 31. Aplikacja GWT offline (file://...) 1. same origin policy ○ JSONP zamiast XHR 2. GWT ○ modyfikacja linkera
  32. 32. GWT offline - JSONP (StringP) content.xml content.xml.js loadContent( “<content> value </content>”); <content> value </content>
  33. 33. GWT - linker kod Java kod JavaScript *.nocache.js *.js *.html *.gwt.rpc plikikompilacja linkowanie
  34. 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. 35. GWT linker dla offline ● XSIFrameLinker + obsługa <script> 1. Klasa linkera 2. Szablon 3. Definicja w gwt.xml
  36. 36. Testy
  37. 37. ● The Future of GWT Survey 2012 UI Test
  38. 38. Test ● unit test ○ JUnit ○ GWTTestCase ● e2e ○ Karma ○ Angular Scenario unit e2e acc
  39. 39. E2E Test test case TypeScript DSL JavaScript kompilacja Tester Developer testy
  40. 40. E2E Test
  41. 41. Przyszłość
  42. 42. Przyszłość GWT Roadmap principles: ● Openness and Simplicity ● Speed ● Interoperability ● Mobility ● Reliability ● Embeddability
  43. 43. Super Dev Mode GWT/Java JavaScript Web Browser Standard Dev Mode:
  44. 44. Super Dev Mode GWT/Java JavaScript Web Browser Super Development Mode:
  45. 45. Super Dev Mode
  46. 46. Warto?
  47. 47. GWT - plusy ● Java - type safety, biblioteki, przyzwyczajenie ● JUnit ● abstrakcja od problemów na poziomie HTML ● jeden język w zastosowaniu klient-serwer
  48. 48. GWT - minusy ● far from the metal ● brak pokrycia części funkcjonalność JS przez GWT ● niepewna przyszłość
  49. 49. JavaScript for standalone - plusy ● Create Once Run Everywhere ● single codebase: ○ web ○ desktop ○ mobile ● działa
  50. 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. 51. GWT dziś? ● JavaScript się ucywilizował ○ angularJs, karma, jasmine, biblioteki ● Internet Explorer się cywilizuje ● HTML5 zaczyna działać Nie koniecznie.
  52. 52. JavaScript dziś? ● JS czy native mobile? ○ rich content, szablony, style ○ native look and feel To zależy.
  53. 53. Dziękuję.

×