Gwt.Create Keynote San Francisco

47
GWT . Create A Fast and Lightweight Future

description

GWT Keynote at GWT.create conference December 2013 in San Francisco by Ray Cromwell

Transcript of Gwt.Create Keynote San Francisco

Page 1: Gwt.Create Keynote San Francisco

GWT . CreateA Fast and Lightweight Future

Page 2: Gwt.Create Keynote San Francisco

Welcome

State of the Community

State of GWT

GWT 3.0 and Beyond

Page 3: Gwt.Create Keynote San Francisco

State of the Community

• 700+ attending GWT.create

• 3x increase in external contributions (patches)

• Thousands of Googlers using it

• ~100k users of SDK

Page 4: Gwt.Create Keynote San Francisco

Looking for Sexy?

Cool New Products using GWT

Page 5: Gwt.Create Keynote San Francisco

Google Shopping Express

Page 6: Gwt.Create Keynote San Francisco

New Google Sheets

Page 7: Gwt.Create Keynote San Francisco

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.

Page 8: Gwt.Create Keynote San Francisco

Google Sheets• Much faster than predecessor

• Larger Sheets

• Local client formula evaluation

• Offline

• Faster, smoother, scrolling

• Supported on all 3 platforms at once.

Page 9: Gwt.Create Keynote San Francisco

State of GWT• GWT 2.6

• Java 7

• Reduced Code Size

• Better CodeSplitter

• Ambitious plan for upcoming improvements

Page 10: Gwt.Create Keynote San Francisco

What’s Happened Since 2006

• JS a lot faster

• Browsers much more capable

• Less incompatibility between latest versions

Page 11: Gwt.Create Keynote San Francisco

Kraken 2200% Faster

Page 12: Gwt.Create Keynote San Francisco

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

Page 13: Gwt.Create Keynote San Francisco

Compatibility

Page 14: Gwt.Create Keynote San Francisco

Mobile Expectations

• About 50% of web traffic is now mobile

• Native apps have influenced consumers to expect jank-free experience

Page 15: Gwt.Create Keynote San Francisco

GWT 3.0 And Beyond

Fast and Lightweight

Page 16: Gwt.Create Keynote San Francisco

Lightweight Syntax

Full Java 8 language support

Page 17: Gwt.Create Keynote San Francisco

No Lambda

!Button b = new Button("Click Me", new ClickHandler() { public void onClick(ClickEvent e) { alert("Hello!"); } });

Page 18: Gwt.Create Keynote San Francisco

With Lambda

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

Page 19: Gwt.Create Keynote San Francisco

Vs Javascript

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

Page 20: Gwt.Create Keynote San Francisco

Lightweight Js Interop

• Call Javascript without JSNI

• @JsInterface, @JsProperty

Page 21: Gwt.Create Keynote San Francisco

Js Library Sample

!function MyClass() { this.answer = 42; } !MyClass.prototype.whatIsTheAnswer = function() { return "The answer to life, the universe, and everything is ..." + this.answer; } !

Page 22: Gwt.Create Keynote San Francisco

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(); }-*/; } !!!

Page 23: Gwt.Create Keynote San Francisco

With JsInterface@JsInterface interface MyClass { @JsProperty int getAnswer(); String whatIsTheAnswer(); } !!!!

Page 24: Gwt.Create Keynote San Francisco

Zero Work Interop

Could we make this even easier?

Page 25: Gwt.Create Keynote San Francisco

Zero Work Interop

• Closure Compiler annotated Javascript

• Typescript annotated JavaScript

• Drop in and go

• Automatically generate JsInterface declarations from typed JS

Page 26: Gwt.Create Keynote San Francisco

Demo

Page 27: Gwt.Create Keynote San Francisco

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

Page 28: Gwt.Create Keynote San Francisco

The World Today<script src=“angular.js”>

Host Html Page

GWT Source

GWT Compiler

Compiled JS

GWT Module IFrame

Page 29: Gwt.Create Keynote San Francisco

Radically Better Interop

• Combine JS and Java as single source tree

• Globally Optimize Together

• Output single, optimized application

Page 30: Gwt.Create Keynote San Francisco

The World Tomorrow<script src=“angular.js”>

Host Html Page

GWT Source

GWT Compiler

Compiled JS

GWT Module IFrame

Page 31: Gwt.Create Keynote San Francisco

The World Tomorrow

<script src=“angular.js”> GWT Source

GWT Compiler

Compiled JS

GWT Module IFrame

Closure Compiler

Page 32: Gwt.Create Keynote San Francisco

Radically Better Interop

• Javascript library subject to optimizations together with Java code

• Smallest code size possible

• Type-checking between JS and Java

Page 33: Gwt.Create Keynote San Francisco

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

Page 34: Gwt.Create Keynote San Francisco

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

Page 35: Gwt.Create Keynote San Francisco

Fire and Forget CodeSpliting

• CodeSplitter allows code to be not be loaded until needed

• Reduces initial download size

• Shared code “leftovers fragment” inhibits benefits

Page 36: Gwt.Create Keynote San Francisco

Current Problem

• Tedious

• Brittle

• Lack of Control

Page 37: Gwt.Create Keynote San Francisco

Next-Gen CodeSplitter

• Choose to force a split point manually

• Automatically merge fragments

• Multiple leftover fragments

Page 38: Gwt.Create Keynote San Francisco

Back to Basics

Page 39: Gwt.Create Keynote San Francisco

Simplicity

• Radically Simpler Interop with JavaScript

• Targeting Modern Browser Capabilities

• Emphasis on Mobile

Page 40: Gwt.Create Keynote San Francisco

Fast

• Improvements to Arrays

• Improvements to CodeGen

• Improvements to Layout

• Improvements to Compilation Speed

Page 41: Gwt.Create Keynote San Francisco

Improvements to Arrays

• Faster Creation

• TypedArrays for numeric primitives

• new int[64] => new Int32Array(64)

Page 42: Gwt.Create Keynote San Francisco

Improvements to CodeGen

• Tune JS output for Modern JS VMs

• Output asm.js-like code for increased performance

• Smaller code with Closure Backend

Page 43: Gwt.Create Keynote San Francisco

Improvements to Layout

• “Native” Layout vs JS layout

• CSS3 support through GssResource

• Avoid constructs which “jank” browsers

Page 44: Gwt.Create Keynote San Francisco

Faster Compilation

• Significantly faster incremental/modular draft compilation

• Speed proportional to # of changed files

• Split Local/Global Optimizer

Page 45: Gwt.Create Keynote San Francisco

Improvements to SuperDev Mode

• Faster refresh

• Better debugging

• IDE integration?

Page 46: Gwt.Create Keynote San Francisco

Fast

• Faster Roundtripping in Compile cycle

• Faster JS execution speed

• Faster browser rendering

Page 47: Gwt.Create Keynote San Francisco

When?

• GWT 3.0 tentatively scheduled for mid 2014.

• Disclaimer: Not everything will make it for 3.0

• Get Involved!