Google Web Toolkit in Practice

Transcript

1. Google Web Toolkit in Practice Detroit Google Developers Group June

   25, 2013 iRule Alex Boyd

2. Title iRule • iruleathome.com Alex Boyd Who is iRule?

3. Google Web Toolkit Pronounced 'gwit' What is GWT? History of

   GWT Who uses it?

4. Title iRule • iruleathome.com Alex Boyd Front End Web Framework

   For RIA

5. Title iRule • iruleathome.com GWT 1.0.0 – 2006 •  Web

   2.0 •  Huge Java ecosystem •  Hole in Javascript toolset •  jQuery started January 2006 GWT 1.3 – 2007 •  First Open Source Release GWT 2.0 – 2009 •  DevMode, CssResources, ClientBundle Alex Boyd GWT History GWT 2.2 / 2.3 – 2011 •  Better AppEngine Integration •  GWT Designer •  HTML5 Support GWT 2.5 – 2013 •  Super Dev Mode •  Closure Compiler •  Google Relinquishes Control GWT 2.5.1 – Current

6. Title iRule • iruleathome.com Alex Boyd Who uses it?

7. How GWT works Compilation / Result Browser Loading

8. Alex Boyd Compilation and Result iRule • iruleathome.com

9. Alex Boyd Browser Loading iRule • iruleathome.com Load HTML Host

   Page | | |____ Load Bootstrap JS File | | |____ Load Browser Specific JS File

10. How iRule uses GWT Builder Manager Mobile

11. iRule • iruleathome.com Alex Boyd Builder

12. Title iRule • iruleathome.com Alex Boyd Builder Resizable Sections Menu

    Bar Tree Drag and Drop Tabs

13. Title iRule • iruleathome.com Alex Boyd Manager

14. Title iRule • iruleathome.com Alex Boyd Mobile

15. The Beauty of GWT Productivity for developers, performance for users

    Advantages

16. Title iRule • iruleathome.com Alex Boyd Cross Browser Compatibility

17. Title iRule • iruleathome.com Alex Boyd Familiar Tools / Language

18. Title iRule • iruleathome.com Alex Boyd Familiar Tools Debug Integration

    Code completion Compile-time errors

19. Title iRule • iruleathome.com Alex Boyd Dynamic Reusable Widgets http://gwt.googleusercontent.com/samples/Showcase/Showcase.html

20. Title iRule • iruleathome.com Alex Boyd GWT UI Designer

21. Title iRule • iruleathome.com Alex Boyd GWT Internationalization https://developers.google.com/web-toolkit/tools/ gwtdesigner/features/gwt/internationalization

22. Title iRule • iruleathome.com Alex Boyd GWT / GAE Integration

23. Title iRule • iruleathome.com Alex Boyd Code Obfuscation

24. Title iRule • iruleathome.com Alex Boyd Embedded Resources CSS /

    Images •  Syntax validation •  Minification •  Constants •  Functions •  Obfuscation CSS Pitfalls of Traditional Images •  Large overhead •  Useless freshness checks •  Blocking HTTP connections

25. Title iRule • iruleathome.com Alex Boyd JavaScript Native Interface

26. GWT : The Bad Disadvantages

27. Title iRule • iruleathome.com Alex Boyd Learning Curve

28. Title iRule • iruleathome.com Alex Boyd Compilation Speed / Debug

29. Title iRule • iruleathome.com Alex Boyd Large DOM tree

30. Title iRule • iruleathome.com Alex Boyd Search Engine Indexing ???

    ??? ???

31. Anatomy of a GWT Application Project Generation Project Structure Hello

    World! Application

32. Title iRule • iruleathome.com Alex Boyd Project Generation Maven

33. Title iRule • iruleathome.com Alex Boyd Project Generation Google Plugin

    for Eclipse

34. Title iRule • iruleathome.com Alex Boyd Project Structure |-­‐src  

         |-­‐main              |-­‐java                    |-­‐com.irule.helloworld                          |-­‐client                                |-­‐GreetingService.java                                |-­‐HelloWorld.java                          |-­‐server                                |-­‐GreetingServiceImpl.java                          |-­‐shared                                |-­‐FieldVerifier.java              |-­‐resources                    |-­‐com.irule.helloworld                          |-­‐HelloWorld.gwt.xml              |-­‐webapp                    |-­‐WEB-­‐INF                          |-­‐web.xml                    |-­‐HelloWorld.css                    |-­‐HelloWorld.html   |-­‐pom.xml     Maven Google Plugin for Eclipse |-­‐src        |-­‐com.irule.helloworld              |-­‐client                    |-­‐GreetingService.java                    |-­‐HelloWorld.java              |-­‐server                    |-­‐GreetingServiceImpl.java              |-­‐shared                    |-­‐FieldVerifier.java              |-­‐HelloWorld.gwt.xml   |-­‐war        |-­‐WEB-­‐INF              |-­‐web.xml        |-­‐HelloWorld.html        |-­‐HelloWorld.css      

35. Alex Boyd Code – Where it all begins iRule •

    iruleathome.com

36. Alex Boyd Code – HTML Page iRule • iruleathome.com

37. Alex Boyd Result iRule • iruleathome.com

38. Powered by GWT Smart GWT Ext GWT MGWT / gwt-phonegap

39. Alex Boyd Smart GWT iRule • iruleathome.com

40. Alex Boyd Sencha GXT iRule • iruleathome.com

41. Alex Boyd MGWT / gwt-phonegap iRule • iruleathome.com

42. Future of GWT Openness, Simplicity, Speed, Interoperability, Mobility

43. Alex Boyd Committee Goals iRule • iruleathome.com Openness •  More

    Direct Committers •  CI Server •  GWT Steering mailing list Simplify •  Cleanup old code - Bye, bye IE6! •  Break GWT into smaller modules Speed •  Improve compile time •  Faster DevMode / SuperDevMode •  Better speed profiling tools Interoperability •  Simplify JSNI •  Better hybrid app support ( GWT and native JS ) Mobility •  Mobile browser support •  Packaged Apps