Google Web Toolkit

Embed Size (px)

DESCRIPTION

This deck explains the _why_ of GWT

Text of Google Web Toolkit

Google Web ToolkitPerformance and Interoperability

Bruce Johnson Google, Inc.

TopicsBorrowing Trouble with Ajax Google Web Toolkit Does What? Productivity Interoperability Performance, Performance, Performance Parting Thoughts

2

The Slippery Slope of AjaxProduct management and engineering decide to add script I begin experimenting with JavaScriptCool! The boss loves it and it's fun! Maybe Ill get a raise!

The salespeople love it Were an Ajax shop? Oh yeah, we cant just support Internet Explorer Waitthis is hard I hate browsers with all my heart I quit find another sucker to maintain this spaghetti3

State of the ArtThe world of Ajax is crazy and nigh unmanageable You need regexs to list all the technologies on one pageHTTPS?, [DX]?HTML, CSS[1-3] DOM Level[0-3] (Java|ECMA|J|VB)Script (X|VR?|Math)ML SVG, Canvas, Macromedia Flash JSONP?, SOAP, XML-RPC

Poor interoperation and consistency across browsers JavaScript is too flexible for big projects and team projects Yet browsers are an unbeatable way to distribute appsMacromedia and Flash are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries.

4

To Be Crystal Clear

It is very easy to slip into building a poorly planned Ajax code base ...but you'll live with the consequences for a long, long time

5

Hello? Software Engineering?Hey, what happened to all that software engineering stuff we figured out in the last few decades? Static type checking? Design patterns? Unit testing?

Code reuse?

IDEs?!?! Debugging?!?!How can we restore some sanity?6

Requirements Laundry ListAjax features with web usability Use the Java language, developers and technologiesTM

Debugging, JUnit, findbugs, profiling, coverage, javadoc Eliminate browser-specific coding with very low overhead Simple reuse via jars Rich remote procedure call (RPC) semantics Minimum size and maximum speed, especially at startup Great scalability Basically: the impossible Unless you compile Java source into JavaScript :-)Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. 7

TopicsBorrowing Trouble with Ajax Google Web Toolkit Does What? Productivity Interoperability Performance, Performance, Performance Parting Thoughts

8

What is Google Web Toolkit (GWT)?What is GWT?A set of tools for building AJAX apps in the Java language

What makes GWT interesting?Write, run, test, and debug everything in a Java environment Client-side UI code and server-side business logic

Isnt that called an applet?No JVM required GWT converts your working Java source into pure JavaScript

GWT is a compiler?GWTs Java-to-JavaScript compiler is a big part of it, but theres really a lot more to the story than that

9

Code Sample Hello, AJAXWithout further adopublic class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickListener() { public void onClick(Widget sender) { Window.alert("Hello, Ajax"); } }); } } RootPanel.get().add(b);

10

DemoHello, Ajax

Wow, Thats So Much EasierRedefining the problem has been fruitful Session state? All clientnot a server issue UI event handling? All clientno round trips Deployment? Use any web serverjust copy compiled JS Leverage for the biggest Ajax headachesMantra: Solve the problem once & wrap it in a class History? Create a History class Cross-browser? Create a DOM class RPC? Create an all-Java RPC mechanism

And having a true compiler is a huge win12

TopicsBorrowing Trouble with Ajax Google Web Toolkit Does What? Productivity Interoperability Performance, Performance, Performance Parting Thoughts

13

Have Your Cake XOR Eat It?"Powerful" Languages with Dynamic Typing "Weaker" Languages with Static Typing

JavaScript

Java

Why switch from a "powerful" dynamic language to a "weaker" static language?It depends on what you mean by "powerful" Tools and static analysis Flexibility and (arguably) less typing in a plain text editor

Static languages

Dynamic languages

14

Stop Bugs Before They Starttypos + expandos = bug-o-s Imagine this gem on line 5912 of your scriptx.compnent = document.getElementById("x"); // a "spelling bug" that will bite much later

Theres a reason static type checking was invented Java source instead of JS = fewer bugs to begin with Reuse is a good way to not write bugs Dont forget code completion This starts to matter a lot for big projects And then, of course, there are the tools15

Interactive Source BrowsingInteractive source browsing is the new pink

16

Code Completion+ is the other new pink

17

Great DebuggingPowerful debugging with breakpoints, etc. is the other, other new pink

18

Automated RefactoringRefactoring tools do, in fact, rock

19

Demo"Hello, Ajax" Reloaded Debugging and Refactoring

Widgets and LayoutBuild cross-browser widgets in straight Java code Constraint-based layout with panels Easily create new widgets from existing onespublic class InboxWidget extends Composite { private EmailList list = new EmailList(); private EmailPreview pvw = new EmailPreview(); // combine them together in a simple panel to // create a new, reusable composite widget }

Styled with CSS!

21

DemoThe Obligatory Mail Example Widgets and Layout

History and BookmarksHistory is the first thing to go in most AJAX apps Excruciating hidden and/or timer tricks Different solutions work best in each browser Solve it once and reuseHistory.addHistoryListener(myController);

History support leads to bookmark supporthttp://google.com/gulp.html#beta_carroty

23

DemoKitchenSink History and Bookmarks

Remote Procedure CallsMany solutions out there (JSON, XML-RPC, ) But a pure Java RPC interface sure is nice!interface SpellService extends RemoteService { /** * Checks spelling and suggests alternatives. * @param the word to check * @return the list of alternatives, if any */ String[] suggest(String word) }

Client and server speak the same languageSide benefit: Client & server can share validation code

25

DemoDynaTable Remote Procedure Calls

Usability and PerformanceDemo: User Admin Dialog Box GWT saves you round trips Very fast startup time Separation of concerns in the code Keyboard support On-the-fly font resizing Reduce server load and improve usability

27

Unit TestingJUnit integrationDirect IDE support

Run tests in hosted modeEasy to debug and analyze

Run tests in web modeIn-the-wild verification Works with a farm of remote browsers

DemoTesting the ListBox and Tree widgets28

TopicsBorrowing Trouble with Ajax Google Web Toolkit Does What? Productivity Interoperability Performance, Performance, Performance Parting Thoughts

29

Not All-or-NothingGWT does not force you to start over! Attach code to existing pages with a tag Welcome to GWTravel Services

Your Java source is loosely-coupledPanel p = RootPanel.get("reservationWizard"); Wizard wiz = new ReservationWizard(); p.add(wiz);

Works with any HTML-generating server approach30

Have Your Cake XOR Eat It? (Again)"Powerful" Languages with Dynamic Typing "Weaker" Languages with Static Typing

JavaScript

Java

Why aren't there great JavaScript tools already? Aren't they just around the corner?

31

Don't Hold Your Breath For Code CompletionImagine you want to write a JavaScript IDE// JavaScript function enhanceString() { String.prototype.usefulMethod = myUsefulMethod; } var str = window.prompt("Method name?"); eval(str)(); str.usefulMethod(); // hmmmm...

Hard (impossible, actually) in the general case But I would never write code like that!Yes, but would that new guy on your team write code like that? And if he did, when would you find out?

Maybe "best effort" code completion is good enough?If you don't mind sometimes-incorrect code completion Partially correct prompting may be the worst case32

Don't Hold Your Breath For OptimizationsImagine you want to write a JavaScript optimizer// JavaScript coolImportMechanism("bandwidth_check.js"); var MAX_PREFETCHED_IMAGES = 12; checkBandwidth(); prefetchImages(MAX_PREFETCHED_IMAGES);

Can we inline constants to shrink our script?// JavaScript coolImportMechanism("bandwidth_check.js"); checkBandwidth(); prefetchImages(12);

It depends on what checkBandwidth() doesfunction checkBandwidth() { if (thisConnectionIsSlow()) MAX_PREFETCHED_IMAGES = 2; }

Extreme flexibility has a price33

Also Don't Hold Your Breath ForComprehensive Syntax HighlightingIs it a field or a method?

RefactoringInability to analyze inability to refactor

Comprehensive Source Browsing Full Compile-time CheckingImpossible to say if a "spelling bug" is a bug or not

Machine-checkable RPC

34

To Be Crystal Clear

Extreme flexibility has a price but JavaScript is the ideal language for the browser Yes, I said it. JavaScript rocks! Why can't we just have both?!?!35

Have Your Cake AND Eat It!"Powerful" Languages Dynamic Typing "Weaker" Languages Static Typing

JSNI

JavaScript Native Interface (JSNI)Include JavaScript directly in your Java source! And you can still debug Write no-compromise JS and make it reusable Expose existing JavaScript libraries into Java projects36

Demo"Hello, Ajax" Revolutions JavaScript Native Interface (JSNI)

TopicsBorrowing Trouble with Ajax Google Web Toolkit Does What? Productivity Interoperability Performance, Performance, Performance Parting Thoughts