Developers
GWT History, Present & Future Daniel Kurka Software Engineer Developers
2
GWT 3
mgwt gwt-phonegap 4
5
GWT Day History, Present and Future of GWT, Daniel Kurka, Google GWT Team Papick G. Taboada - GWT - Architectures and Lessons learned - Client-Server-Kommunikation mit dem Command Pattern Eintauchen in MVP und Internationalisierung, Andreas Hubmer GWT - write once run everywhere, Katharina Fahnenbruck 6
GWT 7
GWT toolbox to write Javascript apps in Java clientside framework write, run, test & debug in Java with all the tools not swing for browsers! 8
Dev Mode 9
GWT Compiler compiles Java to Javascript one Javascript per Browser generated Javascript is highly efficient 100 lines of Javascript => use Javascript after that GWT is better in execution speed & size 10
Performance dead code removal inlining renaming zipping secure caching that works! 11
Example 12
Example Shape s = new Circle(2); // radius 2 12
Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); 12
Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: 12
Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 12
Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 double a = (s.radius * s.radius * Math.PI); 12
Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 double a = (s.radius * s.radius * Math.PI); gets optimized to (constant removal): 12
Example Shape s = new Circle(2); // radius 2 double a = s.getarea(); Inlining to: Circle s = new Circle(2); // radius 2 double a = (s.radius * s.radius * Math.PI); gets optimized to (constant removal): double a = 12.5663706143591; 12
deferred binding like reflection at compile time select the implementation per browser => Javascript only contains relevant parts to the specific client 13
What about Javascript? like assembler in C: private native void dosomething()/*-{ //your js code... }-*/; 14
http://google-web-toolkit.googlecode.com/files/google-web-toolkit-what-why-and-how-javazone-2006.pdf
GWT 16
GWT 17
GWT JavaScript 18
GWT JavaScript Browsers 19
JavaScript the fun part do not get me wrong I like JavaScript but there are some problems lets take a look at them 20
Double equals http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3 21
Demo 22
functional programming language has its problems you need to learn it in order to use it can be lots of fun 23
GWT 24
Understand how the browser works 25
26
A browsers job present a web resource - request it from a server - analyze it - display it defined by standards, WC3 Committee (HTML spec, CSS spec,..) for a long time browsers did not conform to the spec this what HTML5 changed 27
High level structure User Interface Browser engine Data Persistence Rendering engine Networking JavaScript Interpreter UI Backend 28
Rendering engine 29
Parsing HTML to construct the DOM tree 30
Parsing HTML to construct the DOM tree Render tree construction 31
Parsing HTML to construct the DOM tree Render tree construction Layout of the render tree 32
Parsing HTML to construct the DOM tree Render tree construction Layout of the render tree Painting the render tree 33
Webkit HTML Style Sheets 34
Webkit HTML HTMLParser Style Sheets 35
Webkit HTML HTMLParser DOM Tree Style Sheets 36
Webkit HTML HTMLParser DOM Tree Style Sheets CSS Parser 37
Webkit HTML HTMLParser DOM Tree Style Sheets CSS Parser Style rules 38
Webkit HTML HTMLParser DOM Tree Attachment Style Sheets CSS Parser Style rules 39
Webkit HTML HTMLParser DOM Tree Attachment Render tree Style Sheets CSS Parser Style rules 40
Webkit HTML HTMLParser DOM Tree Layout Attachment Render tree Style Sheets CSS Parser Style rules 41
Webkit HTML HTMLParser DOM Tree Layout Attachment Render tree Painting Style Sheets CSS Parser Style rules 42
Webkit HTML HTMLParser DOM Tree Layout Attachment Render tree Painting Display Style Sheets CSS Parser Style rules 43
Webkit DOM HTML HTMLParser DOM Tree Layout Attachment Render tree Painting Display Style Sheets CSS Parser Style rules 44
Layout thrashing 45
Order of execution JavaScript parsing model is synchronous script tag blocks parsing (needs to be fetched and executed) - defer, async speculative parsing => prefetch resources stylesheets are treated different (can not alter the DOM) - they block initial painting PageSpeed - great tool to help you with this! - https://developers.google.com/speed/ 46
Rendering Engine Threads single threaded for almost anything network IO is in a different thread main thread does everything either execute layout engine or javascript 47
Performance 48
Performance understand the platform different kind of performances - startup - runtime - javascript performance - layout engine performance 49
GWT helps you building on the web platform you have to understand the underlying platform GWT is not about hiding the web GWT makes the web a better place for developers and users - better development tools - faster apps 50
History 51
Why? 52
2005 53
The future of the web? 54
Flash 55
Silverlight 56
JavaScript had major flaws in 2005 no real tooling (alert debugging) no people with knowledge of the language Google needed a better tool 59
Java lots of tools many developers but: no web apps in Java 60
What if? 61
Leverage the Java ecosystem reuse knowledge reuse all the tools, like IDEs many developers 62
Why don t we compile Java to JavaScript 63
basic idea 64
GWT is not about hiding the web GWT does not hide the web brings tools and engineering to the platform GWT wants to make the web a better place for developers and users 65
The web is a great platform does not depend on one company reaches every device is build on standards has evolved so fast in the last years 66
GWT is massive GWT 1.0 (2006) GWT 1.3 (2007) First Open Source Release, OSX support GWT 1.4 (2007) JUnit and ImageBundle GWT 1.5 (2008) Java 1.5 support, Overlay Types, DOM API, CSS Themes, Linkers GWT 1.6 (2009) EventHandlers, EMMA Support, WAR support, Parallelized Builds GWT 1.7 (2009) Newer browser support, IE8, GPE and AppEngine GWT 2.0 (2009) DevMode, DraftCompile, UIBinder, LayoutPanel, CodeSplitter, ClientBundle, CssResource GWT 2.1 (2010) RequestFactory, Editor Framework, Validation, MVP, Cell Widgets GWT 2.2 (2011) GWT Designer, HTML5 support GWT 2.3 (2011) Better AppEngine integration GWT 2.4 (2011) Maven and RequestFactory enhancements GWT 2.5 (2012) Super Dev mode, massive compiler improvements, Source maps, massive speed improvements, Elemental 67
Present 68
Today SDK downloaded over a million times 100,000+ active developers deep integration with many tools like Eclipse, IntelliJ, String STS/Roo Used by many Google products such as Adwords, Flights, Blogger, Wallet and many more Fun things: GwtQuake, Angry Birds for the web GWT is a mature, high quality code base 69
GWT 2.5 New Compiler Optimizations Closure Compiler Integration Code Splitter Improvements Better Stack Traces with SourceMaps Real Time Compiles with SuperDevMode UiBinder and CellWidget updates I18N and ARIA/Accessibility improvements Elemental - High performance, feature complete, HTML5 70
Ray Cromwell, Google I/O 2012
Ray Cromwell, Google I/O 2012
Ray Cromwell, Google I/O 2012
Ray Cromwell, Google I/O 2012
Ray Cromwell, Google I/O 2012
Source maps Bidirectional Mapping between Source Language and Compiled JavaScript Supported by GWT, Closure, CoffeeScript Emerging standard for Javascript cross-compilers Permits de-obfuscation of Javascript Allows GWT to construct more accurate Java stack traces when something goes wrong Chrome only for now, Firefox support on the way 76
Super Dev mode Fast Refresh without Browser Plugins Compile to Javascript in seconds (typically less than 10) Source level Java debugging right in your Browser supporting mobile browser debugging for Chrome and Mobile Safari 77
UiBinder and CellWidget enhancements Support for rendering CellWidget Cells via UiBinder templates - introduces new tagging interface UiRenderer associated with.ui.xml file - GWT.create() on UiRenderer generates implementation - Rather than bind elements, it is invoked like I18N Message or SafeHtmlTemplate classes - Returns HTML with values from Java objects substituted into it UiBinder construction/instantiation improvements - New IsRenderable/RenderablePanel - Binds a UI in a 2-pass process First generate all HTML collecting it into a large string Second install it into the DOM via innerhtml and bind elements to fields - Significantly reduce latency and improve rendering speed - Case Study: Orkut. Startup latency reduced by 20%, rendering speed 300% faster 78
Elemental Auto-generated completely from actual WebIDL browser files used by JS engines - Don t wait for hand wrappers, track the actual browser vendor specs/source 100% JavaScript overlay types behind Java interfaces which melt away after compilation Practically zero overhead Every HTML5 feature supported, even the bleeding edge - WebGL, WebAudio, WebSockets, WebRTC, Web Intents, Shadow DOM, File API, etc New Collection classes optimized for size and performance - map directly to underlying JS collections with no overhead New JSON library, no wrappers, no overhead, high performance - Collections and JSON work on server in non-gwt/non-js environments too Excellent thin library for direct mobile device development or desktop 79
GWT Steering committee To make contributing features or fixes to GWT as effortless as possible Maintain a high level of quality you ve come to expect Allow the community a greater level of participation in GWT s future Google goes from gatekeeper to a peer amongst equals Responsible for setting project Guidelines, Policies, and Philosophy Determines who gets direct commit access to the master branch Sets overall future roadmap 80
GWT Steering committee members Ray Cromwell (Google) Artur Signell (Vaadin) Colin Alworth (Sencha, GXT) Mike Brock (RedHat, Errai/JBoss) Thomas Broyer (individual contributor) Stephen Haberman (Bizo) Daniel Kurka (Google) Christian Goudreau (Arcbees, GWTP Library) Konstantin Solomatov (JetBrains, IntelliJ) 81
Open source improve community feedback get people involved we happily accepted many contributions and plan to do so in the future feel free to contact us 82
gwtproject.org community driven home for GWT build with GWT (GWTQuery) everyone can edit and update using normal contribution workflow contribute via markdown & git http://www.gwtproject.org/makinggwtbetter.html#webpage 83
Issue tracker closed around 2500 issues fast responding to new issues fixed many issues for GWT 2.6 84
Future 85
Tick-tock two releases per year expect GWT 2.6 sometime in December, maybe at GWT.create? it is done when it is done, high quality 86
Incremental compile Only compile the changes you need to compile Makes a significant impact on your round trip time Biggest change to the GWT compiler ever Experimental in GWT 2.6, Ready with GWT 3.0 87
Java 8 support Java 8 will reset the Java eco system boiler plate will melt away, especially in GWT code already got a prototype using Java 8 committed to get it out asap after Java 8 release 88
JS interop use any JavaScript library in GWT without JSNI no more hand wrapping no more extra price merge the closure AST with GWT compile JavaScript and Java code together will allow GWT developers to consume web compontents 89
JavaScript speedups Run GWT code as d8 benchmarks understand how this impacts VM performance make all GWT code run faster recent improvement 6x for Arrays (benchmark, FF) 90
first class mobile support 91
GWT has a bright future many new things coming this year and next year watch out for GWT 3.0 @Google IO 2014 great participation from the community updating GWT to be a great tool for the next years 92
GWT 93
Java ecosystem is large GWT is an important part of that ecosystem closes the loop for great web front ends used by many people world wide used in many Google products we continue to invest one of the best tools out there 94
GWT vs. Dart Google is a big company with many engineers each team chooses their tools some like JavaScript, some like GWT, some like Dart Google is not one tools fits all Dart has great ideas and they help GWT GWT inspired some ideas in Dart Google loves friendly competition, it makes our tools better! If you like... -... JavaScript use Closure or Angular -... Java use GWT -... something new try Dart more choice is good! 95
Who else? dependency injection IDE support code splitting CSS optimizations Java tool support client side templating integrate with all other JavaScript run very fast be as small as possible testing tools with code coverage a big community with many support OS projects make your app faster with a recompile 96
97
12-13th Dec. - San Francisco 17-18th Dec. - Frankfurt community organized about 60 talks, including many talks from the GWT team http://www.gwtcreate.com 98
Community 99
Daniel Kurka www.m-gwt.com gplus: google.com/+danielkurka twitter: @dankurka
Developers
10 ways to improve your GWT app 102
1. Blocking is bad Avoid blocking script tags GWT knows how to load async => use it Inline Resources and inject them (if you really need external JS, CSS) 103
//Inline the resource public interface Bundle extends ClientBundle { @Source("your.js") TextResource yourjs(); } //in your code Bundle bundle = GWT.create(Bundle.class); String script = bundle.yourjs().gettext(); ScriptInjector.fromString(script).inject(); 104
2. HTTP Batching Browser only have a certain amount of parallel connections Use batching to get more throughput different ways 105
Batching with GWT RPC use the command pattern e.g. gwt-dispatch use Scheduler.scheduleFinally to do batching 106
Batching with RequestFactory don t call fire immediately call fire at last batching support across different context 107
3. Batch DOM updates reduces flickering use Scheduler.scheduleFinally() 108
4. Make Async stuff Sync GWT.runAsync is hard to read AsyncProxy records all calls while getting the actual object and replays them 109
5. Change DOM offscreen some browser repaint on update (IE) manipulate of screen to reduce repaints be faster 110
6. RPC type explosion GWT RPC generates Serializers for every type compile time increase, script size increase use plain DTOs without Polymorphism use concrete types (e.g. ArrayList instead of List) black list unwanted types (Issue 4438) 111
7. Use HTML where possible widgets are slower than pure HTML use widgets only where necessary use CellWidgets if possible combine HTML and widgets in UiBinder 112
8. Code splitting code splitting can dramatically reduce startup time combine it with AsyncProxy Activities as a code splitting point (automated, see Issue 5129) 113
9. Compiler tricks tune the compiler for your project set variables while developing (e.g. user agent safari) 114
-XdisableClassMetadata no class meta data e.g. no java.util.class.getname() save space if you don t need it 115
-XdisableCastChecking JavaScript errors if you do things wrong no warnings no instanceof 116
Tune compilereport <set-property name="compiler.stackmode" value="strip"/> <set-configuration-property name="cssresource.obfuscationprefix" value="emtpy"/> <set-configuration-property name="compiler.enum.obfuscate.names" value="true"/> 117
10. Prefer GWT libs instead of wrappers GWT can only optimize on Java code wrapping means no optimizations prefer complete GWT implementations 118
Daniel Kurka www.m-gwt.com gplus: daniel-kurka.de/+ twitter: @dankurka
Developers