The Google Web Toolkit Experience

832 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
832
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Google Web Toolkit Experience

  1. 1. Agile AJAX: The Google Web Toolkit Experience Paul Infield-Harm Daniel Wellman paul@infield-harm.org dan@danielwellman.com www.infield-harm.org blog.danielwellman.com www.cyrusinnovation.com New York • Boston
  2. 2. What is Google Web Toolkit ?
  3. 3. Java
  4. 4. Java to JavaScript compiler .java .js .js .java .java Compiler .java .java .js .js Java JavaScript
  5. 5. Why?
  6. 6. “...because there already are so many great tools out there, not to mention scads of books, articles, libraries, and expertise.” - The GWT Team
  7. 7. Demo
  8. 8. A Taste of GWT • Application, Java source, generated js • Exploratory dev in hosted mode • Making a change, test-first
  9. 9. A Taste of GWT • Application, Java source, generated js • Exploratory dev in hosted mode • Making a change, test-first
  10. 10. A Taste of GWT • Application, Java source, generated js • Exploratory dev in hosted mode • Making a change, test-first
  11. 11. A Taste of GWT • Application, Java source, generated js • Exploratory dev in hosted mode • Making a change, test-first
  12. 12. Application, Java source, generated JS
  13. 13. Exploratory dev in hosted mode
  14. 14. Making a change, test- first
  15. 15. JSNI photo by clothfairy http://www.flickr.com/photos/clothfairy/ CC BY 2.0
  16. 16. GWT and Agile Development Practices
  17. 17. Agile Development Practices • Refactoring • Performance Optimization • Test-Driven Development • Collective Code Ownership • Continuous Integration
  18. 18. Refactoring
  19. 19. Wrap Return Value Invert Boolean Safe Delete Move Instance Method Inline Constant Extract Subclass Replace Method Code Duplicates Convert To Instance Method Rename Move Inner Class to Upper Level Change Method Signature Make Method Static Copy/Clone Class Extract Method Introduce Variable Introduce Field Introduce Constant Introduce Parameter Extract Interface Inl ine Safe Delete Extract Superclass Su Intr pe Use Interface Where Possible rcl odu ass n Rename dle ct ma Pull Members Up Mid je ce ve Ob Push Members Down Par Move/Copy File Replace Inheritance with Delegation mo d am Re etho Inline Local Variable e Introduce Variable ter M Inline Method n act Ob io Convert Anonymous Class to Inner rat Ex tr Introduce Field g jec Mi tra Ex Encapsulate Fields e t ct p Replace Temp With Query Ty Cl Introduce Constant as Replace Constructor With Factory Method s JavaScript Refactorings Java Refactorings
  20. 20. Typical Java Web Template <div> <span>${title}</span> <a href="..."><img src="..."/></a> <a href="..."><img src="..."/></a> </div>
  21. 21. GWT Layout label = new Label(title); panel.add(label); upButton = new Image("..."); panel.add(upButton); removeButton = new Image("..."); panel.add(removeButton);
  22. 22. Refactored GWT new BookPanel(title);
  23. 23. Performance Optimization
  24. 24. Better “ JavaScript code than you would write by hand ” - “Making GWT Better” on GWT Project Page photo by clothfairy
  25. 25. Optimizing Compiler photo by ralphbijker
  26. 26. Name That Compile! class
Calculator
{ 



public
int
add(int
x,
int
y)
{ 





return
x
+
y; 



} } Calculator
myCalc
=
new
Calculator(); Window.alert((myCalc.add(3,
2));
  27. 27. Compiles To: alert(5)
  28. 28. Whole-Program Optimization
  29. 29. Whole-Program Optimization Compiler Java Library JavaScript
  30. 30. ... but no reflection. X employee.set("firstName", "Fred");
  31. 31. photo by Alicia Solario Simple Design
  32. 32. Test-Driven Development
  33. 33. JUnit TestNG Concordion Fit
  34. 34. Three ways to test
  35. 35. Plain JUnit @Test public
void
additionsGoToTopOfList()
{ startingWithTitles("First added"); model.addTitle("Second added"); assertThat(model.getTitles().get(0), is("Second added")); }
  36. 36. In a Real Browser
  37. 37. In the Hosted Mode Browser GWTTestCase
  38. 38. How do you test UI?
  39. 39. Model-View-Presenter View Presenter Model
  40. 40. photo by sanja gjenero Collective Code Ownership
  41. 41. Same Code on Browser and Server Java Object
  42. 42. Developers Front End Server Developers Developers
  43. 43. Code-based UI Layout HorizontalPanel panel = new HorizontalPanel(); panel.add(new TextBox()); panel.add(new Button(...)); panel.add(new Image(...); :-) Developers :-( UI Designers
  44. 44. Cross-browser CSS is still hard
  45. 45. Continuous Integration photo by wilhei
  46. 46. Build Tools
  47. 47. Build Servers Hudson
  48. 48. Static Analysis & Code Quality Tools Checkstyle
  49. 49. Image by Svilen Mushkatov When should you use GWT?
  50. 50. photo by Boby Dimitrov
  51. 51. Is this a web site or a web application? Web site Web application
  52. 52. photo by Vidiot
  53. 53. JUnit TestNG Checkstyle Concordion Fit
  54. 54. Questions? Source code for the demo available on github: http://github.com/pinfieldharm/Agile-2009-GWT-Demo References and Resources: http://tinyurl.com/agilegwt Paul Infield-Harm Daniel Wellman paul@infield-harm.org dan@danielwellman.com www.infield-harm.org blog.danielwellman.com www.cyrusinnovation.com New York • Boston

×