GWT nie idź tą drogą

case studygwt-based standalone app

Rafał Rybacki, 12.12.2013

GWT /ˈɡwɪt/

Java web develpment framework:

● asynchronous remote procedure calls

● cross-browser portability

● UI abstraction

● history management

● internationalization

hello world

hello underground

Release notes

1.0 2.0 2.5.1

2009IE8, FF3

● GWT Developer Plugin

● UiBinder● Code Splitting

2006IE7, FF2,

jQuery 1.0

11.2013

... ... ...

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

... ...

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 testowe

● standardy Java w web dev

GWT/Java JavaScript Web Browser

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 and Places

web app xxxWebView

Web Browser iOS, Android, AIR

clie

ntse

rver

clie

nt

RPC

Dev tools

Activities and Places

Google Guice, GinGwtQuery

jaxb4gwt

moc

kito

hamcre

st

fest-assertionsjscs

svid

eo.jsgu

ava-

gwt

jQue

ry

GFlot

symja

Activities and Places

index.html#place1 index.html#place2 index.html#place3

Activity 1 Activity 2 Activity 3

Activities:

Places:

GWT - zależności

● Produkcja○ Google Gin○ GwtQuery○ guava-gwt○ jaxb4gwt

● Testy○ mockito, hamcrest, fest-assertions, reflections

Ż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

● prosta w użytkowaniuvar elem = document.getElementById('swiffycontainer');var stage = new swiffy.Stage(elem, swiffyobject);stage.start();

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

Performance - GWT vs JavaScriptSortowanie tablicy 10 000 intów.

t [s]

Kontenery

Kontenery

web browser browser widget

Android● WebView

iOS● UIWebView

Windows● WebView

Adobe AIR● StageWebView

hybrid framework

● PhoneGap● Titanium● Intel App

Framework● MoSync● ...

Android - WebView

● Kontrolki○ WebView (Android SDK)○ StageWebView (AIR)○ Android Browser

● Niespodzianki○ HTML5 video○ Web Storage○ IFrame

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

iOS - UIWebView

● UIWebView vs Safari

● Niespodzianki iOS 6 ○ optymalizacje

○ String.hashCode() -XdisableCastChecking

○ <arg value="-XenableClosureCompiler"/>

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ń

● zapytania i odpowiedzi

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://….....

Offline

Aplikacja GWT offline (file://...)

1. same origin policy

○ JSONP zamiast XHR

2. GWT

○ modyfikacja linkera

GWT offline - JSONP (StringP)

content.xml content.xml.jsloadContent(

“<content>

value

</content>”);

<content>

value

</content>

GWT - linker

kodJava

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

● XS - cross-site

● XSIFrame - cross-site, kod osadzany w iframe

GWT linker dla offline

● XSIFrameLinker + obsługa <script>

1. Klasa linkera

2. Szablon

3. Definicja wgwt.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 caseTypeScript

DSLJavaScript

kompilacja

Tester

Developertesty

E2E Test

Przyszłość

Przyszłość GWT

Roadmap principles:● Openness and Simplicity● Speed● Interoperability● Mobility● Reliability● Embeddability

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ęzyk w zastosowaniu klient-serwer

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ów HTML

○ WebView, StageWebView

● dziwne błędy

● każda platforma zaskakuje w inny sposób

GWT dziś?

● JavaScript się ucywilizował○ angularJs, karma, jasmine, biblioteki

● Internet Explorer się cywilizuje

● HTML5 zaczyna działać

Nie koniecznie.

JavaScript dziś?

● JS czy native mobile?○ rich content, szablony, style

○ native look and feel

To zależy.

Dziękuję.