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