Google Web Toolkit Can help you create amazing apps
•Transferir como PPT, PDF•
3 gostaram•1,477 visualizações
![Google Web Toolkit Can help you create amazing apps Can help you create amazing apps ,[object Object],[object Object],Fred Sauer Developer Advocate [email_address] Twitter: @fredsa](https://image.slidesharecdn.com/sfjugoct132009-gwtcanhelpyoucreateamazingapps-091014181638-phpapp01/85/sf-jug-gwt-can-help-you-create-amazing-apps-20091013-1-320.jpg)
![Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Google Web Toolkit Can help you create amazing apps
Semelhante a Google Web Toolkit Can help you create amazing apps (20)
Último
Último (20)
Google Web Toolkit Can help you create amazing apps
- 3. Google Web Toolkit Write Core Java APIs Widgets Libraries Java IDEs Debug JVM Debugging Development Mode A real browser Developer Productivity Optimize GWT Compiler Image Bundle (Sprites) CSS Magic End User Performance Run Desktop Mobile Online/Offline Gadgets
- 4. 3+ years in review May 2006 GWT 1.0 Launch at JavaOne Aug 2008 GWT 1.5 Java 5 language support Apr 2009 GWT 1.7 Dedicated IE8 support Fall 2009 GWT 2.0 LOTS of interesting stuff
- 7. No plugins required VML Flash Silverlight
- 8. What we don't want
- 9. GWT Browser-Proofs Your JavaScript Code... IE Firefox Safari Chrome Opera
- 10. Deferred Binding 14800 ms 4836 ms 1997 ms 7148 ms DOM manipulation 2469 ms 1520 ms 918 ms 2477 ms innerText=... - 1386 ms 908 ms - textContent=... 4078 ms 2053 ms 1276 ms 2876 ms Typical portable setInnerText() IE Opera Webkit (Safari) Firefox Improvement 39% 32% 29% 14%
- 11. A More Powerful Web, Made Easier
- 12. Eating our own dogfood
- 13. GWT App Gallery http://gwtgallery.appspot.com / /
- 14. GWT App Gallery http://gwtgallery.appspot.com / /
- 16. Rich ecosystem of tools and libraries + + =
- 17. Code completion and javadoc
- 18. Can you find the bug? Hint: JavaScript is a dynamic language
- 19. Catch errors at compile time Java is a static language
- 20. Feature tour
- 22. More than just a compiler Development Mode
- 23. Sprites for free 20,558 bytes 6,824 bytes 11 separate images 1 bundled image
- 29. Rich Text Area
- 30. RTL, I18N, L10N, A11Y
- 32. GUI Editing
- 34. Shameless plugs for: gwt-dnd, gwt-log, gwt-voices gwt-dnd, gwt-log, gwt-voices
- 35. Developer productivity for you for you
- 38. Development Mode Code Server Web Server Duke, the Java mascot Copyright © Sun Microsystems Inc., all rights reserved. Java Virtual Machine
- 39. Google Plugin for Eclipse
- 41. GWT Debugging in the browser
- 42. Complete Java development stack
- 43. Developer productivity on larger projects on larger projects
- 58. Compiler magic
- 63. Need for speed
- 64. Speed matters perceived as instantaneous. maintains the feeling that a single task is being carried out. limit for keeping user’s attention. 0.1 seconds 1 second 10 seconds
- 65. Another reason speed matters 2. UI Changes 3. User Learns 1. User Action Performance for your users
- 66. GWT Helps Apps Startup More Quickly 26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar Size of Initial JavaScript Download (KB) 375 750 1125 1500 0 7x Decrease In Initial Download Size with runAsync() 1400 KB 200 KB
- 67. Developer guided code splitting
- 68. Developer guided code splitting
- 69. Manual code splitting - Don't try this at home
- 72. Disappearing code that just works
- 75. Using JSON // Brittle var greeting = 'Hello, ' + p.firstName + ' ' + p.lastName; // Additional payload for user to download function getName(p) { return p.firstName + ' ' + p.lastName; } // Additional method invocation overhead var greeting = 'Hello, ' + getName(p);
- 79. ClientBundle
- 86. Gadgets
Notas do Editor
- quick survey Raise your hand if you've never written a web app using GWT … your organization maintains multiple (>1) GWT apps … uses GWT for all new web apps We have a lot to cover, so let's begin
- Hope: you've read GWT mission statement Hope: agree that we must FOCUS ON THE USER experience Part of that mission means making you, the developer, more productive
- In other words, GWT is all about… PRODUCTIVITY FOR DEVELOPERS LIKE YOU AND PERFORMANCE FOR YOUR USERS
- Google Web Toolkit 101
- OUR generators, more importantly YOUR generators
- I'd like to take a moment to talk about a widely misunderstood problem. The problem is of course: WHY IS OUR WEB SITE SO SLOOOOOOOOOW? <click through> If HTML + CSS + JavaScript + Images = 40 files, that's 50ms*40=2s Last night I pinged a few servers in Sydney; 380ms * 40 = 15s!!!
- GWT produces two classes of files: cache/nocache - *cache* => cache forever; new versions receive new file names - *nocache* => must-revalidate Raise your hand if your web server set Expires/Cache-Control headers So how do we create those perfectly cacheable *cache* files?
- When you're building real apps you need certain things to &quot;just work&quot; Constants, Messages, ConstantsWithLookup, Dictionary, Localizable, DateTimeFormat, NumberFormat
- That's the productivity, performance and speed pitch Now, let's get to know our toolkit in more detail
- ensureDebugId() - gives field consistent id for debugging purposes - completely compiled out unless gwt.enableDebugId = true - great testing without the HTML/runtime bloat for users- Your QA guys will HUG YOU for this. Everyone needs a hug, right?
- You already use some of these. Want to draw attention to this last one. Note this is a GWT Compiler argument, not a javac argument This enables assertions in your compiled (production mode) output
- What's this second one?
- We already covered -style PRETTY and -draftCompile for DEVELOPMENT. Hopefully in DEVELOPMENT you also are building just ONE PERMUTATION (i.e. one browser, one language, one logging level) - If not (or for PRODUCTION) use -localWorkers=#cores
- This is a really useful pattern for keeping your deferred code out of the initial download
- A very useful tool: - understand why your JavaScript output isn't quite as small (yet) as it could be - why initial download is large
- Now for something different. Here's a simple JavsScript object in JSON format - {} identify JavaScript objects, [] identify arrays, : for name/value pairs JSON is great - transfer data between client and server OR between servers - Subset of ECMA script so it can be parsed or eval()'d by the browser
- In JavaScript you have a couple of options 1. Write the whole thing out every time; brittle w.r.t. changes 2. Introduce function overhead Wouldn't it be great if we could have our cake and eat it too? WE CAN!
- If you're using com.google.gwt.json.JSON library, STOP Use JSO Types instead -You keep the abstractions that make you productive -Your user sees none of that code; only the benefits GREAT for federating/integrating with other systems via web hooks or RESTful interfaces
- ImageBundles are really easy to create - Declare an interface with a method for each image - That's it!
- We can of course bundle other resources as well Remember: bundle, bundle, bundle
- RFC 2397 data: URLs This cursor data: URL can be injected into your injected stylesheet at compile time - You get the convenience of a separate *.cur file - The user either gets a forever cacheable strongly named URL or an inline data: resource - YOU BOTH WIN
- Locale sensitive names so different languages can have different images Your getWidth()/getHeight() methods automatically adjust
- <set-configuration-property name=&quot;CssResource.obfuscationPrefix&quot; value=&quot;foo&quot; /> <set-configuration-property name=&quot;CssResource.obfuscationPrefix&quot; value=&quot;foo&quot; />
- How many of you are interested in gadgets? <MAYBE SKIP SECTION?> GWT makes it really easy to create them without having to resort to hand written JavaScript
- - Logging code is partially/completely compiled out in production - Mobile clients log to server - UncaughtExceptionHandler included
- Add or improve stack traces where browsers are lacking
- compiler.emulatedStack does add overhead (not for PRODUCTION) - You can just turn on recordLineNumbers (less overhead) - You can already get original method names from the symbol maps
- This stack trace came from 100% compiled JavaScript - UNKNOWN indicates this is browser land, not your JVM - short, two-letter method names shows OBFUSCATED output - Original Java class/method names injected into source - Copy/paste into your IDE stacktrace console and they are hyperlinked!