A Business Case for Ajax with Google Web Toolkit. Bruce Johnson Google, Inc.

Size: px

Start display at page:

Download "A Business Case for Ajax with Google Web Toolkit. Bruce Johnson Google, Inc."

Clyde Parsons
5 years ago
Views:

1 A Business Case for Ajax with Google Web Toolkit Bruce Johnson Google, Inc.

2 Topics A Simpler-Than-Possible Explanation of GWT Investing in Ajax Why Ajax, Anyway? Risks Unique to Ajax How GWT Changes Things Q & A 2

3 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 3

4 Topics A Simpler-Than-Possible Explanation of GWT Investing in Ajax Why Ajax, Anyway? Risks Unique to Ajax How GWT Changes Things Q & A 4

5 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... 5

6 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 6

7 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 7

8 Topics A Simpler-Than-Possible Explanation of GWT Investing in Ajax Why Ajax, Anyway? Risks Unique to Ajax How GWT Changes Things Q & A 8

9 Why Ajax? IT Benefits Traditional HTML Stateless HTML View Browser User action New HTML page Stateful Server Ajax Events handled locally Stateful JavaScript UI Browser Remote procedure call Data only, not HTML Stateless (i.e. any) Server

10 Why 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 drafts in the background Auto-completion of contact names while typing Multi-step wizards without confusing history entries 10

11 Why Ajax? Usability Benefits "Do not use your browser's Back button" What if I do click Back? Ajax solves this! 11

12 Why 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 12

13 Why 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! 13

14 To 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 14

15 Topics A Simpler-Than-Possible Explanation of GWT Investing in Ajax Why Ajax, Anyway? Risks Unique to Ajax How GWT Changes Things Q & A 15

16 Ajax 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 16

17 Ajax 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 17

18 New 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 18

19 Spelling 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 19

20 Topics A Simpler-Than-Possible Explanation of GWT Investing in Ajax Why Ajax, Anyway? Risks Unique to Ajax How GWT Changes Things Q & A 20

21 GWT 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 :-) 21

22 Code 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); } 22

23 Demo Hello, AJAX

24 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 24

25 Rich 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 25

26 Usability: 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 Demo "KitchenSink" shows history, bookmarking, and widgets 26

27 Simple & 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. the word to check the list of alternatives, if any */ String[] suggest(string word) } Client and server speak the same language (Java) Demo "DynaTable" loads records dynamically 27

28 Efficiency: Bandwidth and Startup Time Traditional HTML GWT First Run GWT Other Runs Bytes Transferred Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Page 7 28

29 Not 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 29

30 Documentation Included Getting Started Guide Widget Gallery Developer Guide Class Reference 30

31 Growing 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 31

32 Did I Mention Tools? Instantiations GWT Designer WYSIWYG Layout 32

33 Did I Mention Tools? Instantiations GWT Designer Internationalization 33

34 Summary: 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! 34

35 Q&A

Taming AJAX with GWT. Scott Blum. Scott Blum Taming AJAX with GWT Page 1

Taming AJAX with GWT. Scott Blum. Scott Blum Taming AJAX with GWT Page 1 Taming AJAX with GWT Scott Blum Scott Blum Taming AJAX with GWT Page 1 Overview Why AJAX? Why GWT? How GWT Works Add GWT to your App Advanced Techniques Summary Q & A Scott Blum Taming AJAX with GWT Page