A Business Case for Ajax with Google Web Toolkit - Bruce Johnson Google, Inc.
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
A Business Case for Ajax with
Google Web Toolkit
Bruce Johnson
Google, Inc.
Topics
A Simpler-Than-Possible Explanation of GWT
Investing in Ajax
Why Ajax, Anyway?
Risks Unique to Ajax
How GWT Changes Things
Q&A
Copyright 2007 Google Inc. 2
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 Java, both client-side UI
code and server-side business logic
Isn’t that called an applet?
No JVM required; GWT converts your working Java application into
an equivalent pure JavaScript application
So, GWT is a compiler?
GWT’s Java-to-JavaScript compiler is a big part of it, but there’s
really a lot more to the story than that…
Copyright 2007 Google Inc. 3
Topics
A Simpler-Than-Possible Explanation of GWT
Investing in Ajax
Why Ajax, Anyway?
Risks Unique to Ajax
How GWT Changes Things
Q&A
Copyright 2007 Google Inc. 4
Ajax Buzz Abounds
Media
Books, Blogs, Podcasts, Magazines, Classes, Conferences
Industry
Startups, Venture Funding, New Products
Your Company?
Your boss? Your employees? Your customers? Your salespeople?
You?
Surely you've at least fiddled with JavaScript and DHTML
Thus begins the slippery slope...
Copyright 2007 Google Inc. 5
Engineer's View of the Slippery Slope
Product management and engineering decide to add script…
I begin experimenting with JavaScript
Cool! The boss loves it. I’m even having a bit of fun writing it.
All is well in the world now…maybe I’ll get a raise!
The salespeople love it
We’re an AJAX shop?
Oh yeah, we can’t just support Internet Explorer
Wait, this is hard
I hate browsers with all my heart
I quit – find another sucker to maintain this spaghetti
Copyright 2007 Google Inc. 6
To Be Crystal Clear
It is very easy to slip into making a
poorly planned Ajax investment
...but you'll live
with the consequences
for a long, long time
Copyright 2007 Google Inc. 7
Topics
A Simpler-Than-Possible Explanation of GWT
Investing in Ajax
Why Ajax, Anyway?
Risks Unique to Ajax
How GWT Changes Things
Q&A
Copyright 2007 Google Inc. 8
Why Ajax? IT Benefits
01100110
Traditional 01111001
01101011
HTML
User action
Stateless
HTML View Stateful
Server
Browser
New HTML page
011001101101
111110010100
011010111101
110011010110
Ajax 0110
0111
Remote procedure call
Events Stateful Stateless
handled JavaScript UI (i.e. any)
locally
Browser Server
Data only, not HTML
0110
1001
1011
Copyright 2007 Google Inc. 9Why Ajax? Product Benefits
A goldmine for sales and marketing
Fully buzzword compliant :-)
TCO talking points
You or your customer can host without undue extra complication
No installation reduces the barrier to adoption
Prospects are "one click away" from becoming customers
Apples-to-apples now vs. desktop apps
Spyware and virus fears reinforce this competitive advantage
Add desktop-like functionality to web apps
Auto-saving email drafts in the background
Auto-completion of contact names while typing
Multi-step wizards without confusing history entries…
Copyright 2007 Google Inc. 10Why Ajax? Usability Benefits
"Do not use your browser's Back button"
What if I do click Back?
Ajax solves this!
Copyright 2007 Google Inc. 11Why Ajax? User Benefits
Better performance than traditional web apps
Sending deltas makes a huge difference in startup speed
No blank "loading" pages reduces abandonment risk
Take advantage of fast client CPU instead of overloading servers
Better functionality with the familiar web style
The web is popular for a reason: simplicity
When done properly, Ajax apps are like HTML web apps, just better
Better deployment and security than installed binaries
Everyone appreciates not having to install software
The mantra we teach our parents: surfing = good; installing = bad
Universal access
Crucial applications are no longer tied to a particular computer
In principle, cross-browser portability
Copyright 2007 Google Inc. 12Why Ajax? More Usability Benefits
"Don't hit reload or we'll charge you twice!"
What if the network hangs? What should I do?
Ajax solves this!
Copyright 2007 Google Inc. 13To Be Crystal Clear
Ajax is more than a fad
because it genuinely benefits
all* stakeholders
Ajax will be important
for many years to come
* not counting developers
Copyright 2007 Google Inc. 14Topics
A Simpler-Than-Possible Explanation of GWT
Investing in Ajax
Why Ajax, Anyway?
Risks Unique to Ajax
How GWT Changes Things
Q&A
Copyright 2007 Google Inc. 15Ajax Risks – Product Risks
Poor Usability
No history
No bookmarks
Frozen browser chrome and pegged user CPUs
Poor Browser Portability
Hard to test
Either wrap every single browser-related call (heavy)...
Or be paranoid about every line of code (risky)
Poor Speed
Startup time is an extremely huge sacrifice...probably not worth it
Large scripts run more slowly
Worst: Maintainability and efficiency are conflicting scripting goals
Copyright 2007 Google Inc. 16Ajax Risks – Development Risks
Poor Tool Support
Limited IDE support
Debugging = window.alert()
Profilers? Code coverage? Findbugs? …
Quality Risks
New categories of runtime-only bugs
Poor JS reuse model encourages "from scratch" or copy/paste
Browsers are a moving target
Long-Term Risks
Hard to schedule (e.g. unexpected browser quirks)
Spaghetti risk
Poor documentation
Hard for large teams to work on the same code base
Hard enough to find one Ajax guru
Copyright 2007 Google Inc. 17New Kinds of Bugs!
JavaScript is a dynamically typed language
Type errors can only be found at runtime by QA, or by…
ME!
(This was my old bank)
There’s a reason static type checking was invented
That's why IDEs can't do code completion for JS
Copyright 2007 Google Inc. 18Spelling Bugs
typos + expandos = bug-o-s
Imagine this gem on line 5912 of your script
x.compnent = document.getElementById("x");
// a spelling(!) bug that will bite much later
Yes, there’s a reason static type checking was invented
Java didn't have this problem
And reuse is a good way to not write bugs
And don’t forget code completion
And this starts to matter a lot for big projects
Copyright 2007 Google Inc. 19Topics
A Simpler-Than-Possible Explanation of GWT
Investing in Ajax
Why Ajax, Anyway?
Risks Unique to Ajax
How GWT Changes Things
Q&A
Copyright 2007 Google Inc. 20GWT Requirements Laundry List
Make great AJAX apps that are still very webby
History, Bookmarks, a working Back button...
Leverage the Java language, developers and technologies
IDEs, debugging, JUnit, findbugs, and profiling
Eliminate browser-specific coding with low overhead
Facilitate reuse at the Java language level via jars
Fast, simple remote procedure calls with rich semantics
Scalability…server-side session state is a big drain
Basically: the impossible…
Unless you translate Java into JavaScript :-)
Copyright 2007 Google Inc. 21Code Sample – Hello, AJAX
Demo time...
public 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);
}
}
Copyright 2007 Google Inc. 22Demo Hello, AJAX
Wow, That’s So Much Easier
Redefining the problem has been fruitful
Session state? All client, not a server issue
Avoids round trips for UI event handling
Deployment? No fancy server, just compiled JS
Leverage for the biggest AJAX headaches
Our Mantra: Solve the problem once & wrap it in a class
History? Create a History class
Cross-browser? Create an abstract DOM class
RPC? Create an all-Java RPC mechanism
Copyright 2007 Google Inc. 24Rich UI: Widgets and Layout
Build (or reuse!) widgets
Written in straight Java
Code without worrying about browser portability
Separate UI style from logic
Widgets are styled with CSS
Automatically load the right CSS for your widgets
Demo
"Mail" is a desktop-style application
Copyright 2007 Google Inc. 25Usability: History and Bookmarks
History is the first thing to go in most AJAX apps
With GWT, it's easy and works well with MVC
History.addHistoryListener(myController);
History support leads to bookmark support
http://google.com/gulp.html#beta_carroty
Demo
"KitchenSink" shows history, bookmarking, and widgets
Copyright 2007 Google Inc. 26Simple & Powerful Client/Server: RPC
Many 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 language (Java)
Demo
"DynaTable" loads records dynamically
Copyright 2007 Google Inc. 27Efficiency: Bandwidth and Startup Time
Traditional HTML GWT First Run GWT Other Runs
90000
80000
70000
60000
Bytes Transferred
50000
40000
30000
20000
10000
0
Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7
Copyright 2007 Google Inc. 28Not Enough Time to Demo Everything
JUnit integration
Works in hosted mode (i.e. debuggable Java)
Work in web mode (i.e. tests the compiler output)
JavaScript Native Interface
Write JavaScript by hand
Easily integrate with existing JS libraries
Internationalization support
Highly optimized
Externalized string ids are checked during compilation
Automatic, dynamic dependency inclusion
External CSS
External JS
Copyright 2007 Google Inc. 29Documentation Included
Getting Started Guide Widget Gallery
Developer Guide Class Reference
Copyright 2007 Google Inc. 30Growing GWT Community
Community and Support
Over 4600 members on the developer forum and growing
Books and articles
Meta-sites (e.g. gwtPowered.org)
Libraries and Applications
GWT Widgets on SourceForge
25 projects on Google Code Project Hosting
Diverse products built completely with GWT
Web-based conferencing (dimdim.com)
Virtual flashcards (notetwonote.com)
Texas Hold 'em with live chat (gpokr.com)
Tools, Tools, Tools
IntelliJ IDEA plug-in for GWT
WindowBuilderPro GUI designer for GWT
VistaFei for GWT
Googlipse, an open source Eclipse plug-in for GWT
Copyright 2007 Google Inc. 31Did I Mention Tools?
Instantiations GWT Designer
WYSIWYG Layout
Copyright 2007 Google Inc. 32Did I Mention Tools?
Instantiations GWT Designer
Internationalization
Copyright 2007 Google Inc. 33Summary: Ajax and GWT
Ajax is a double-edged sword…
And it's an investment either way
Lots of rewards, lots of risks
Leverage is needed to use Ajax well with minimum risk
PhD in browser quirks is no longer a hiring prereq
Turn Ajax development into software engineering
We will share our best work and ideas with you, and we
hope you will return the favor
Much more to come…see you online!
Copyright 2007 Google Inc. 34Q&A
You can also read
