Gwt create2013 Frankfurt: How we built a million dollar business with GWT
Devfest09 Cschalk Gwt
-
Upload
chris-schalk -
Category
Technology
-
view
1.439 -
download
0
description
Transcript of Devfest09 Cschalk Gwt
![Page 1: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/1.jpg)
![Page 2: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/2.jpg)
Google Web Toolkit: A technical overview Chris Schalk
Con: Gabriel Praino
DevFest 2009 November 17th, 2009
![Page 3: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/3.jpg)
3
Agenda
• AJAX: what it is and why it's important • Introducing GWT • GWT advantages • GWT 2.0 features • Who’s using GWT • Q&A
![Page 4: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/4.jpg)
4
AJAX... uh... what?
• Also known as Asynchronous JavaScript And XML • JavaScript can issue asynchronous server requests • JavaScript can manipulate the user interface
![Page 5: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/5.jpg)
5
The AJAX architectural shift
![Page 6: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/6.jpg)
6
The AJAX slippery slope
• Experiment with “a bit of script” • Everybody loves it! More! • When did we became an AJAX shop? • Attempt to port to something other than Internet Explorer • Wait... this is hard! • Result: “A tangled mess!”
![Page 7: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/7.jpg)
7
GWT’s Mission
"GWT's mission is to radically improve the web experience for users by
enabling developers to use existing Java tools to build no-compromise
AJAX for any modern browser."
![Page 8: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/8.jpg)
8
Google Web Toolkit at a glance
• Write code in the JavaTM language using your favorite Java IDE
• Debug as bytecode against a special browser (hosted mode) • Cross-compile into standalone optimized JavaScript (web
mode) • No browser plugins / no obligatory server-side machinery • Includes extensive cross-browser libraries
• User interface (DOM, widgets, ...)
• Client/server communication (XHR, RPC, JSON, ...)
• App infrastructure (history, timers, unit testing, i18n, a11y, ...)
• External services (Gadgets, Gears, Google Maps, ...)
• JavaScript integration • JavaScript Native Interface (JSNI)
• Fully open source under Apache 2.0
![Page 9: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/9.jpg)
9
What is GWT?
![Page 10: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/10.jpg)
10
How it works
Code against Java UI libraries
Google Web Toolkit Weekly Report 09/01/2008 - 09/08/200 Google Web Toolkit Weekly Report 09/01/2008 - 09/08/200
![Page 11: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/11.jpg)
11
How it works
Code against Java UI libraries
The compiler translates Java source to highly-optimized JS
![Page 12: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/12.jpg)
12
How it works
Code against Java UI libraries
The compiler translates Java source to highly-optimized JS
Generates browser-compliant JS + HTML files
![Page 13: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/13.jpg)
Key concepts
Productivity for you
Performance for your users
![Page 14: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/14.jpg)
Custom JavaScript per browser
![Page 15: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/15.jpg)
Demo: Getting started building GWT apps
![Page 16: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/16.jpg)
GWT Advantages
![Page 17: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/17.jpg)
17
GWT Advantages – Faster Ajax applications
• The efficient code you wish you could write, but will get slammed by cross-browser issues for trying to run it
Faster-than-you-would-write-by-hand code
public static void onModuleLoad(){ Button b = (new Button()).Button(); b.setText("Click me!"); }
public static final void onModuleLoad(){ final Button b = Button.$Button(new Button()); DOMImplIE6.$setInnerText(b.element, ”Click me!"); }
E.g.
– a variation for IE6 would be:
![Page 18: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/18.jpg)
18
GWT Advantages – Faster Ajax applications
– Another variation: Faster-than-you-would-write-by-hand code
function onModuleLoad(){ var b; b = $Button(new Button()); $setInnerText(b.element, 'Click me!'); }
![Page 19: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/19.jpg)
19
GWT Advantages – Faster Ajax applications
– Another variation Faster-than-you-would-write-by-hand code
function onModuleLoad(){ var b; b = $Button(new Button()); $setInnerText(b.element, ’Click me!'); }
• You could have written this by hand, but: – You would have to change it for every other browser
![Page 20: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/20.jpg)
20
GWT Advantages – Faster Ajax applications
• Why give the user more than they asked for?
• Users only download what they need to run your application
• Made possible through the technique of deferred binding
Deferred binding
![Page 21: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/21.jpg)
21
GWT Advantages – Faster Ajax applications
• A technique that lets the compiler make different bindings for your application at compile-time and choose the right one later
• The application bootstrap process selects the correct binding when loading your application
Deferred binding
![Page 22: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/22.jpg)
22
GWT Advantages – Faster Ajax applications
Deferred binding illustrated
![Page 23: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/23.jpg)
23
GWT Advantages – No more memory leaks
• Provided you only code in GWT
• Chances are, you may need to write a small bit of JavaScript Native Interface (JSNI) or interoperate with JavaScript code
• In those cases, you can prevent memory leaks by being careful – See Joel Webber’s
article on “DOM events, memory leaks, and you” – http://code.google.com/p/google-web-toolkit/wiki/DomEventsAndMemoryLeaks
• In every other case, GWT has got your back
Preventing memory leaks
![Page 24: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/24.jpg)
24
GWT Advantages – History support
• GWT offers History support (RSH implementation) History support for your GWT applications
tabPanel.add(new HTML("<h1>Page 1 Content</h1>"), " Page 1 "); tabPanel.add(new HTML("<h1>Page 2 Content</h1>"), " Page 2 "); tabPanel.addTabListener(new TabListener() { @Override public void onTabSelected(SourcesTabEvents sender, int tabIndex) { // Push an item onto the history stack History.newItem("page" + tabIndex); }
History.addHistoryListener(new HistoryListener() { public void onHistoryChanged(String historyToken) { if(tokenIsValid(historyToken)) { tabPanel.selectTab(getTabIndex(historyToken)); } } };
E.g.
![Page 25: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/25.jpg)
25
GWT Advantages – Faster development
• Code refactoring with IDE tools greatly improve developer speed!
Faster development with IDEs and code support
Google Plugin for Eclipse – Support both GWT and App Engine
![Page 26: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/26.jpg)
26
GWT Advantages – Faster development
• You can also thoroughly test your Ajax application using a combination of: – Standard JUnit TestCase – GWTTestCase
– HTMLUnit tests – Selenium tests
Faster development with IDEs and code support
![Page 27: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/27.jpg)
27
GWT Advantages – Debugging in bytecode
• Debugging in hosted mode allows for rapid testing • Running against JS bytecode in memory
Debugging with hosted mode
![Page 28: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/28.jpg)
28
Summary of development advantages
• Optimized, high performance Ajax applications
• As a developer, you don’t have to worry about: – Browser quirk headaches – Memory leaks
– History support
• Code reuse through design patterns
• Faster development using IDEs and other Java tools
• Debugging in bytecode
![Page 29: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/29.jpg)
GWT Tools and Widgets
![Page 30: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/30.jpg)
Google Plugin for Eclipse
http://code.google.com/eclipse/
![Page 31: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/31.jpg)
Widget libraries
• GWT (http://code.google.com/webtoolkit/)
• Incubator (http://code.google.com/p/google-web-toolkit-incubator/)
• Smart GWT (http://code.google.com/p/smartgwt/)
• GWT-Ext (http://code.google.com/p/gwt-ext/)
• IT Mill Toolkit (http://www.itmill.com/)
• GWT mosaic (http://code.google.com/p/gwt-mosaic/)
• Ext GWT (http://extjs.com/products/gxt/)
• Advanced GWT Components (http://advanced-gwt.sourceforge.net/)
![Page 32: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/32.jpg)
New features coming in GWT 2.0
![Page 33: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/33.jpg)
33
GWT 2.0: More advantages
• Hosted mode becomes “development mode” • Code splitting • Client bundle • Declarative UI in XML (UiBinder) • … and much more
![Page 34: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/34.jpg)
34
Code Splitting: Big scripts, big problems
• Problem: Initial download can be slooooow – Some apps becomes bigger over time – Parsing through initial script can cause UI to hang – Current day browsers have a two connection limit
• Solution: Split up the script!
![Page 35: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/35.jpg)
35
Developer-guided code splitting with runAsync
public void onMySettingsLinkClicked() {
GWT.runAsync(new RunAsyncCallback() {
public void onSuccess() { new MySettingsDialog().show(); }
public void onFailure(Throwable ohNo) { // indicate that something went wrong, // usually a connectivity or server problem }
Split point
Runs after a short (but improbable) delay
Runs if required script cannot be downloaded
![Page 36: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/36.jpg)
runAsync() Helps Apps Startup More Quickly
26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar
Siz
e of
Initi
al J
avaS
crip
t Dow
nloa
d (K
B)
375
750
1125
1500
0
7x Decrease In Initial Download Size with runAsync()
1400 KB
200 KB
1125
![Page 37: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/37.jpg)
37
ImageBundle revisited
• Each <img> tag is one HTTP roundtrip • Bundle them up!
• 11 HTTP roundtrips become 1
![Page 38: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/38.jpg)
38
Declarative UIs with UiBinder
• Build your UI in declarative XML
<!-- UserDashboard.ui.xml --> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:my='urn:import:com.my.app.widgets' >
<g:HTMLPanel> <my:WeatherReport ui:field='weather'/> <my:Stocks ui:field='stocks'/> <my:CricketScores ui:field='scores' /> </g:HTMLPanel> </ui:UiBinder>
![Page 39: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/39.jpg)
Who's using GWT?
![Page 40: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/40.jpg)
Google Wave
![Page 41: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/41.jpg)
Google Health
![Page 42: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/42.jpg)
Mobile
![Page 43: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/43.jpg)
Google Web Toolkit
Large GWT Apps - Lombardi Blueprint
![Page 44: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/44.jpg)
Google Web Toolkit
Large GWT Apps – ContactOffice
![Page 45: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/45.jpg)
Google Web Toolkit
Large GWT Apps - scenechronize
![Page 46: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/46.jpg)
46 Google Web Toolkit
Many more in the GWT App Gallery http://gwtgallery.appspot.com/
![Page 47: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/47.jpg)
Learn more
code.google.com/webtoolkit
![Page 48: Devfest09 Cschalk Gwt](https://reader033.fdocuments.us/reader033/viewer/2022052523/5559526bd8b42a98708b4708/html5/thumbnails/48.jpg)
Q&A
Muchas Gracias!