GWT . Create
A Fast and Lightweight Future
Ray Cromwell
https://plus.google.com/+RayCromwell
Welcome
State of the Community
State of GWT
GWT 3.0 and Beyond
State of the Community
•

700+ attending GWT.create

•

3x increase in external contributions (patches)

•

Thousands of G...
Looking for Sexy?

Cool New Products using GWT
Google Shopping Express
New Google Sheets
Google Sheets
•

First in a new generation of hybrid apps

•

Shares logic between Server, Android, Web, and iOS
via Java ...
Google Sheets
•

Much faster than predecessor
•

Larger Sheets

•

Local client formula evaluation

•

Offline

•

Faster,...
State of GWT
•

GWT 2.6
•
•

Reduced Code Size

•
•

Java 7

Better CodeSplitter

Ambitious plan for upcoming improvements
What’s Happened Since
2006
•

JS a lot faster

•

Browsers much more capable

•

Less incompatibility between latest versi...
Kraken 2200% Faster
Capabilities
•

Multimedia: Video, Audio, Camera, Microphone,
WebRTC, Canvas, SVG, WebGL, …

•

I/O: Sockets, FileSystem, ...
Compatibility
Mobile Expectations
•

About 50% of web traffic is now mobile

•

Native apps have influenced consumers to
expect jank-fre...
GWT 3.0 And Beyond

Fast and Lightweight
Lightweight Syntax

Full Java 8 language support
No Lambda
Button b = new Button("Click Me",
new ClickHandler() {
public void onClick(ClickEvent e) {
alert("Hello!");
}
})...
With Lambda

Button b = new Button("Click Me",
(e) -> alert("Hello"));
Vs Javascript

var b = new Button("Click Me",
function(e) { alert("Hello"); });
Lightweight Js Interop

•

Call Javascript without JSNI

•

@JsInterface, @JsProperty
Js Library Sample
function MyClass() {
this.answer = 42;
}
MyClass.prototype.whatIsTheAnswer = function() {
return "The an...
Without JsInterface
interface MyClass {
int getAnswer();
String whatIsTheAnswer();
}
final class MyClassImpl extends JavaS...
With JsInterface
@JsInterface
interface MyClass {
@JsProperty
int getAnswer();
String whatIsTheAnswer();
}
Zero Work Interop

Could we make this even easier?
Zero Work Interop
•

Closure Compiler annotated Javascript

•

Typescript annotated JavaScript

•

Drop in and go
•

Autom...
Demo
Using External JS Libraries

•

Must be un-minified to have predictable symbols

•

Live in separate JS execution context
...
The World Today
Host Html Page
<script src=“angular.js”>
<script src=“angular.js”>

GWT Module IFrame
GWT Source
GWT Sourc...
Radically Better Interop
•

Combine JS and Java as single source tree

•

Globally Optimize Together

•

Output single, op...
The World Tomorrow
Host Html Page
<script src=“angular.js”>
<script src=“angular.js”>

GWT Module IFrame
GWT Source
GWT So...
The World Tomorrow
GWT Module IFrame
<script src=“angular.js”>
<script src=“angular.js”>

GWT Source
GWT Source

GWT
GWT
C...
Radically Better Interop
•

Javascript library subject to optimizations
together with Java code

•

Smallest code size pos...
Web Components
•

Web Native Templates

•

Custom HTML Elements

•

Encapsulated DOM and CSS
•

•

(Shadow DOM and Scoped ...
Web Components
•

Ecosystem of reusable widgets/components

•

New Interop will make them easy to consume

•

Future of wh...
Fire and Forget CodeSpliting
•

CodeSplitter allows code to be not be loaded
until needed

•

Reduces initial download siz...
Current Problem
•

Tedious

•

Brittle

•

Lack of Control
Next-Gen CodeSplitter
•

Choose to force a split point manually

•

Automatically merge fragments

•

Multiple leftover fr...
Back to Basics
Simplicity
•

Radically Simpler Interop with JavaScript

•

Targeting Modern Browser Capabilities

•

Emphasis on Mobile
Fast
•

Improvements to Arrays

•

Improvements to CodeGen

•

Improvements to Layout

•

Improvements to Compilation Spee...
Improvements to Arrays
•

Faster Creation

•

TypedArrays for numeric primitives
•

new int[64] => new Int32Array(64)
Improvements to CodeGen
•

Tune JS output for Modern JS VMs

•

Output asm.js-like code for increased
performance

•

Smal...
Improvements to Layout
•

“Native” Layout vs JS layout

•

CSS3 support through GssResource

•

Avoid constructs which “ja...
Faster Compilation
•

Significantly faster incremental/modular draft
compilation
•

•

Speed proportional to # of changed ...
Improvements to
SuperDev Mode
SuperDev Mode
•

Faster refresh

•

Better debugging

•

IDE integration?
Fast
•

Faster Roundtripping in Compile cycle

•

Faster JS execution speed

•

Faster browser rendering
When?
•

GWT 3.0 tentatively scheduled for mid 2014.

•

Disclaimer: Not everything will make it for 3.0

•

Get Involved!
Upcoming SlideShare
Loading in …5
×

Gwtcreatekeynote

204
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
204
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gwtcreatekeynote

  1. 1. GWT . Create A Fast and Lightweight Future Ray Cromwell https://plus.google.com/+RayCromwell
  2. 2. Welcome State of the Community State of GWT GWT 3.0 and Beyond
  3. 3. State of the Community • 700+ attending GWT.create • 3x increase in external contributions (patches) • Thousands of Googlers using it • ~100k users of SDK
  4. 4. Looking for Sexy? Cool New Products using GWT
  5. 5. Google Shopping Express
  6. 6. New Google Sheets
  7. 7. Google Sheets • First in a new generation of hybrid apps • Shares logic between Server, Android, Web, and iOS via Java code. • Cross compiled with GWT and j2objc • Web UI marries Closure Compiler JS and shared Java via GWT code. • Android and iOS UIs marry Java and Obj-C UI with shared Java.
  8. 8. Google Sheets • Much faster than predecessor • Larger Sheets • Local client formula evaluation • Offline • Faster, smoother, scrolling • Supported on all 3 platforms at once.
  9. 9. State of GWT • GWT 2.6 • • Reduced Code Size • • Java 7 Better CodeSplitter Ambitious plan for upcoming improvements
  10. 10. What’s Happened Since 2006 • JS a lot faster • Browsers much more capable • Less incompatibility between latest versions
  11. 11. Kraken 2200% Faster
  12. 12. Capabilities • Multimedia: Video, Audio, Camera, Microphone, WebRTC, Canvas, SVG, WebGL, … • I/O: Sockets, FileSystem, LocalStorage, IndexDB, TypedArrays, Blobs, Web Workers, Geolocation, … • Layout/Rendering: Flexible Box Model, Web Animations, Scoped CSS, Shadow DOM, GPU accelerated drawing and compositing
  13. 13. Compatibility
  14. 14. Mobile Expectations • About 50% of web traffic is now mobile • Native apps have influenced consumers to expect jank-free experience
  15. 15. GWT 3.0 And Beyond Fast and Lightweight
  16. 16. Lightweight Syntax Full Java 8 language support
  17. 17. No Lambda Button b = new Button("Click Me", new ClickHandler() { public void onClick(ClickEvent e) { alert("Hello!"); } });
  18. 18. With Lambda Button b = new Button("Click Me", (e) -> alert("Hello"));
  19. 19. Vs Javascript var b = new Button("Click Me", function(e) { alert("Hello"); });
  20. 20. Lightweight Js Interop • Call Javascript without JSNI • @JsInterface, @JsProperty
  21. 21. Js Library Sample function MyClass() { this.answer = 42; } MyClass.prototype.whatIsTheAnswer = function() { return "The answer to life, the universe, and everything is ..." + this.answer; }
  22. 22. Without JsInterface interface MyClass { int getAnswer(); String whatIsTheAnswer(); } final class MyClassImpl extends JavaScriptObject implements MyClass { public native int getAnswer() /*-{ return this.answer; }-*/; } public native String whatIsTheAnswer() /*-{ return this.whatIsTheAnswer(); }-*/;
  23. 23. With JsInterface @JsInterface interface MyClass { @JsProperty int getAnswer(); String whatIsTheAnswer(); }
  24. 24. Zero Work Interop Could we make this even easier?
  25. 25. Zero Work Interop • Closure Compiler annotated Javascript • Typescript annotated JavaScript • Drop in and go • Automatically generate JsInterface declarations from typed JS
  26. 26. Demo
  27. 27. Using External JS Libraries • Must be un-minified to have predictable symbols • Live in separate JS execution context • Dead or Unused library code not removable
  28. 28. The World Today Host Html Page <script src=“angular.js”> <script src=“angular.js”> GWT Module IFrame GWT Source GWT Source GWT GWT Compiler Compiler Compiled JS Compiled JS
  29. 29. Radically Better Interop • Combine JS and Java as single source tree • Globally Optimize Together • Output single, optimized application
  30. 30. The World Tomorrow Host Html Page <script src=“angular.js”> <script src=“angular.js”> GWT Module IFrame GWT Source GWT Source GWT GWT Compiler Compiler Compiled JS Compiled JS
  31. 31. The World Tomorrow GWT Module IFrame <script src=“angular.js”> <script src=“angular.js”> GWT Source GWT Source GWT GWT Compiler Compiler Closure Closure Compiler Compiler Compiled JS Compiled JS
  32. 32. Radically Better Interop • Javascript library subject to optimizations together with Java code • Smallest code size possible • Type-checking between JS and Java
  33. 33. Web Components • Web Native Templates • Custom HTML Elements • Encapsulated DOM and CSS • • (Shadow DOM and Scoped CSS) Kind of like runtime native version of UiBinder
  34. 34. Web Components • Ecosystem of reusable widgets/components • New Interop will make them easy to consume • Future of where Web authoring is headed • We want to be ready for it
  35. 35. Fire and Forget CodeSpliting • CodeSplitter allows code to be not be loaded until needed • Reduces initial download size • Shared code “leftovers fragment” inhibits benefits
  36. 36. Current Problem • Tedious • Brittle • Lack of Control
  37. 37. Next-Gen CodeSplitter • Choose to force a split point manually • Automatically merge fragments • Multiple leftover fragments
  38. 38. Back to Basics
  39. 39. Simplicity • Radically Simpler Interop with JavaScript • Targeting Modern Browser Capabilities • Emphasis on Mobile
  40. 40. Fast • Improvements to Arrays • Improvements to CodeGen • Improvements to Layout • Improvements to Compilation Speed
  41. 41. Improvements to Arrays • Faster Creation • TypedArrays for numeric primitives • new int[64] => new Int32Array(64)
  42. 42. Improvements to CodeGen • Tune JS output for Modern JS VMs • Output asm.js-like code for increased performance • Smaller code with Closure Backend
  43. 43. Improvements to Layout • “Native” Layout vs JS layout • CSS3 support through GssResource • Avoid constructs which “jank” browsers
  44. 44. Faster Compilation • Significantly faster incremental/modular draft compilation • • Speed proportional to # of changed files Split Local/Global Optimizer
  45. 45. Improvements to SuperDev Mode SuperDev Mode • Faster refresh • Better debugging • IDE integration?
  46. 46. Fast • Faster Roundtripping in Compile cycle • Faster JS execution speed • Faster browser rendering
  47. 47. When? • GWT 3.0 tentatively scheduled for mid 2014. • Disclaimer: Not everything will make it for 3.0 • Get Involved!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×