GWT Features Overview<br />Andrey Mormysh<br />Java Developer<br />a.mormysh@gmail.com<br />October 15, 2011<br />www.Exig...
GWT<br />Google Web Toolkit<br />
GWT/ˈɡwɪt /<br />Google Web Toolkit<br />
GWT-based projects<br />
GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and col...
Odnoklassniki (http://www.odnoklassniki.ru) - social network</li></li></ul><li>GWT-based projects<br /><ul><li>Google Wave...
Odnoklassniki (http://www.odnoklassniki.ru) - social network
 Google Moderator (http://www.google.com/moderator) -  a tool that allows distributed communities to submit and vote on qu...
Odnoklassniki (http://www.odnoklassniki.ru) - social network
 Google Moderator (http://www.google.com/moderator) -  a tool that allows distributed communities to submit and vote on qu...
 Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale ...
Odnoklassniki (http://www.odnoklassniki.ru) - social network
 Google Moderator (http://www.google.com/moderator) -  a tool that allows distributed communities to submit and vote on qu...
 Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale ...
 Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool</li></li></ul><li>GWT-based project...
Odnoklassniki (http://www.odnoklassniki.ru) - social network
 Google Moderator (http://www.google.com/moderator) -  a tool that allows distributed communities to submit and vote on qu...
 Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale ...
 Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool
 Scenechronize (https://www.scenechronize.com/) -a production management web application for film, television and commerci...
Odnoklassniki (http://www.odnoklassniki.ru) - social network
 Google Moderator (http://www.google.com/moderator) -  a tool that allows distributed communities to submit and vote on qu...
 Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale ...
 Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool
 Scenechronize (https://www.scenechronize.com/) -a production management web application for film, television and commercials
 Whirled (http://www.whirled.com/) -social virtual world website which includes multi-player games
etc…</li></li></ul><li>Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative ...
?<br />
JSNI<br />Java Script Native Interface<br />Access JS code from Java code and vice versa<br />
JSNI<br />Java Script Native Interface<br />Access JS code from Java code and vice versa<br />Wrap your own or third-party...
 Flash objects
 etc.</li></li></ul><li>JSNI<br />Java Script Native Interface<br />Access JS code from Java code and vice versa<br />Wrap...
 Flash objects
 etc.</li></ul>Example 1:<br />public static native void alert(String msg) <br />/*-{<br />  $wnd.alert(msg);<br />}-*/;<b...
JSNI<br />Example 2:<br />package mypackage;<br />public MyClass{<br />public static int foo()<br />{ ... }    <br />publi...
Deferred binding<br />It is a pluggable compile-time type substitution and code generation mechanism.<br />
Deferred binding<br />It is a pluggable compile-time type substitution and code generation mechanism.<br />Example:<br />S...
Deferred binding<br />Goal - send exactly the right code to client, depending on<br /><ul><li> User’s browser
 Locale
 Mode (debug / production)
 Network characteristics
 etc.</li></li></ul><li>Deferred binding<br />Goal - send exactly the right code to client, depending on<br /><ul><li> Use...
 Locale
 Mode (debug / production)
 Network characteristics
 etc.</li></ul>Facilities<br /><ul><li> Make fewer Http Requests
 Eliminate dead code
 Avoid polymorphic dispatch
 Avoid synchronous XHR
Upcoming SlideShare
Loading in...5
×

CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

641

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
641
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

  1. 1. GWT Features Overview<br />Andrey Mormysh<br />Java Developer<br />a.mormysh@gmail.com<br />October 15, 2011<br />www.ExigenServices.com<br />
  2. 2. GWT<br />Google Web Toolkit<br />
  3. 3. GWT/ˈɡwɪt /<br />Google Web Toolkit<br />
  4. 4. GWT-based projects<br />
  5. 5. GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration</li></li></ul><li>GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
  6. 6. Odnoklassniki (http://www.odnoklassniki.ru) - social network</li></li></ul><li>GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
  7. 7. Odnoklassniki (http://www.odnoklassniki.ru) - social network
  8. 8. Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events</li></li></ul><li>GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
  9. 9. Odnoklassniki (http://www.odnoklassniki.ru) - social network
  10. 10. Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
  11. 11. Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.</li></li></ul><li>GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
  12. 12. Odnoklassniki (http://www.odnoklassniki.ru) - social network
  13. 13. Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
  14. 14. Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.
  15. 15. Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool</li></li></ul><li>GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
  16. 16. Odnoklassniki (http://www.odnoklassniki.ru) - social network
  17. 17. Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
  18. 18. Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.
  19. 19. Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool
  20. 20. Scenechronize (https://www.scenechronize.com/) -a production management web application for film, television and commercials</li></li></ul><li>GWT-based projects<br /><ul><li>Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration
  21. 21. Odnoklassniki (http://www.odnoklassniki.ru) - social network
  22. 22. Google Moderator (http://www.google.com/moderator) - a tool that allows distributed communities to submit and vote on questions for talks, presentations and events
  23. 23. Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.
  24. 24. Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool
  25. 25. Scenechronize (https://www.scenechronize.com/) -a production management web application for film, television and commercials
  26. 26. Whirled (http://www.whirled.com/) -social virtual world website which includes multi-player games
  27. 27. etc…</li></li></ul><li>Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  28. 28. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  29. 29. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  30. 30. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  31. 31. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  32. 32. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  33. 33. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  34. 34. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  35. 35. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  36. 36. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  37. 37. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  38. 38. Features<br />Cross-browser<br />Object-oriented programming<br />Dev-mode<br />GUI debugging<br />Wigets and declarative UI<br />Client Bundle<br />Simple localization<br />Code optimization<br />Code splitting<br />RPC, JSON/XML<br />UI Designer<br />HTML5<br />…<br />
  39. 39. ?<br />
  40. 40.
  41. 41.
  42. 42. JSNI<br />Java Script Native Interface<br />Access JS code from Java code and vice versa<br />
  43. 43. JSNI<br />Java Script Native Interface<br />Access JS code from Java code and vice versa<br />Wrap your own or third-party JS-widgets with JSNI:<br /><ul><li> Google Maps
  44. 44. Flash objects
  45. 45. etc.</li></li></ul><li>JSNI<br />Java Script Native Interface<br />Access JS code from Java code and vice versa<br />Wrap your own or third-party JS-widgets with JSNI:<br /><ul><li> Google Maps
  46. 46. Flash objects
  47. 47. etc.</li></ul>Example 1:<br />public static native void alert(String msg) <br />/*-{<br /> $wnd.alert(msg);<br />}-*/;<br />
  48. 48. JSNI<br />Example 2:<br />package mypackage;<br />public MyClass{<br />public static int foo()<br />{ ... }    <br />public static native void exportStaticMethod() <br />/*-{<br />$wnd.foo = $entry(@mypackage.MyClass::foo());<br />}-*/;<br />}<br />
  49. 49. Deferred binding<br />It is a pluggable compile-time type substitution and code generation mechanism.<br />
  50. 50. Deferred binding<br />It is a pluggable compile-time type substitution and code generation mechanism.<br />Example:<br />Static binding<br />Foo f = new Foo();<br /> <br />Dynamic Binding<br />Class c = Class.forName(fooImplName);<br />Foo f = (Foo) c.newInstance();<br /> <br />Deferred Binding<br /> Foo f = (Foo) GWT.create(Foo.class);<br />
  51. 51. Deferred binding<br />Goal - send exactly the right code to client, depending on<br /><ul><li> User’s browser
  52. 52. Locale
  53. 53. Mode (debug / production)
  54. 54. Network characteristics
  55. 55. etc.</li></li></ul><li>Deferred binding<br />Goal - send exactly the right code to client, depending on<br /><ul><li> User’s browser
  56. 56. Locale
  57. 57. Mode (debug / production)
  58. 58. Network characteristics
  59. 59. etc.</li></ul>Facilities<br /><ul><li> Make fewer Http Requests
  60. 60. Eliminate dead code
  61. 61. Avoid polymorphic dispatch
  62. 62. Avoid synchronous XHR
  63. 63. Avoid spaghetti code (if-s in JS-code)
  64. 64. Try to use only inline code “elem.innerText = str”
  65. 65. etc.</li></li></ul><li>Permutations<br />
  66. 66. Permutations<br />Example:<br />Input:<br /> DOMImpl dom = GWT.create(DOMImpl.class);<br />
  67. 67. Permutations<br />Example:<br />Input:<br /> DOMImpl dom = GWT.create(DOMImpl.class);<br />Implementations:<br />DOMImplInternetExplorer<br />DOMImplMozilla<br />DOMImplOpera<br />  Property:<br /> user_agent = “IE” <br />
  68. 68. Permutations<br />Example:<br />Input:<br /> DOMImpl dom = GWT.create(DOMImpl.class);<br />Implementations:<br />DOMImplInternetExplorer<br />DOMImplMozilla<br />DOMImplOpera<br />  Property:<br /> user_agent = “IE” <br />Output:<br /> DOM dom = new DOMImplInternetExplorer();<br />
  69. 69. Permutations<br />Example:<br />
  70. 70. Perfect Caching<br />
  71. 71. Perfect Caching<br />Bootstrap selection script loads Javascript ‘executable’ containing correct set of bindings for given request.<br /> <br /><module>.nocache.js - small<br /><md5>.cache.js – big<br />
  72. 72. Perfect Caching<br />Bootstrap selection script loads Javascript ‘executable’ containing correct set of bindings for given request.<br /> <br /><module>.nocache.js - small<br /><md5>.cache.js – big<br /> <br />Apache HTTP server .htaccess configuration:<br /> <br /><Files *.nocache.*><br /> ExpiresActive on<br /> ExpiresDefault "now"<br /> Header merge Cache-Control "public, max-age=0, must-revalidate"<br /></Files><br /><Files *.cache.*><br /> ExpiresActive on<br /> ExpiresDefault "now plus 1 year"<br /></Files><br />
  73. 73. Monilithic Compilation<br />
  74. 74. Monilithic Compilation<br />“The fastest code that which does not run”, <br /> --Joel Webber, GWT co-creator<br />
  75. 75. Monilithic Compilation<br />“The fastest code that which does not run”, <br /> --Joel Webber, GWT co-creator<br />Example:<br /> Shape shape = new Square(4);<br /> 1) int area = shape.getArea();<br />
  76. 76. Monilithic Compilation<br />“The fastest code that which does not run”, <br /> --Joel Webber, GWT co-creator<br />Example:<br /> Shape shape = new Square(4);<br /> 1) int area = shape.getArea();<br /> 2) int area = Shape_getArea(shape); <br />
  77. 77. Monilithic Compilation<br />“The fastest code that which does not run”, <br /> --Joel Webber, GWT co-creator<br />Example:<br /> Shape shape = new Square(4);<br /> 1) int area = shape.getArea();<br /> 2) int area = Shape_getArea(shape); <br /> 3) int area = shape.len * shape.len;<br />
  78. 78. Monilithic Compilation<br />“The fastest code that which does not run”, <br /> --Joel Webber, GWT co-creator<br />Example:<br /> Shape shape = new Square(4);<br /> 1) int area = shape.getArea();<br /> 2) int area = Shape_getArea(shape); <br /> 3) int area = shape.len * shape.len;<br /> 4) int area = 16;<br />
  79. 79. Image Bundling<br />
  80. 80. Image Bundling<br />Problem:<br />HTTP 1.1 limit: 2 outgoing connections per domain/port<br />
  81. 81. Image Bundling<br />Problem:<br />HTTP 1.1 limit: 2 outgoing connections per domain/port<br />HTTP request has to be sent to the server for each resource (e.g. image)<br />
  82. 82. Image Bundling<br />Problem:<br />HTTP 1.1 limit: 2 outgoing connections per domain/port<br />HTTP request has to be sent to the server for each resource (e.g. image)<br />Request for status 304 ("Not Modified")<br />
  83. 83. Image Bundling<br />Solution:<br />interface Resources extends ClientBundle {<br />@Source("logo.png")<br /> ImageResource logo();<br /> <br /> @Source("arrow.png")<br /> @ImageOptions(flipRtl = true)<br /> ImageResource pointer();<br />}<br /> <br />
  84. 84. Image Bundling<br />Solution:<br />interface Resources extends ClientBundle {<br />@Source("logo.png")<br /> ImageResource logo();<br /> <br /> @Source("arrow.png")<br /> @ImageOptions(flipRtl = true)<br /> ImageResource pointer();<br />}<br /> <br />Resources resources = GWT.create(Resources.class);<br />Image img = new Image(resources.logo());<br />
  85. 85. Code Splitting<br />public class Hello implements EntryPoint {<br /> public void onModuleLoad() {<br /> Button b = new Button("Click me", new ClickHandler() {<br /> public void onClick(ClickEvent event) {<br /> Window.alert("Hello, AJAX");<br /> }<br /> });<br /> <br /> RootPanel.get().add(b);<br /> }<br />}<br />
  86. 86. Code Splitting<br />public class Hello implements EntryPoint {<br /> public void onModuleLoad() {<br /> Button b = new Button("Click me", new ClickHandler() {<br /> public void onClick(ClickEvent event) {<br /> Window.alert("Hello, AJAX");<br /> }<br /> });<br /> <br /> RootPanel.get().add(b);<br /> }<br />}<br />
  87. 87. Code Splitting<br />public class Hello implements EntryPoint {<br /> public void onModuleLoad() {<br /> Button b = new Button("Click me", new ClickHandler() {<br /> public void onClick(ClickEvent event) {<br />GWT.runAsync(new RunAsyncCallback() {<br /> public void onFailure(Throwable caught) {<br /> Window.alert("Code download failed");<br /> }<br /> public void onSuccess() {<br /> Window.alert("Hello, AJAX");<br /> }<br />});<br /> }<br />});<br /> RootPanel.get().add(b);<br /> }<br />}<br />
  88. 88. HTML5 Features Support <br />
  89. 89. HTML5 Features Support <br /><ul><li> Client-side Storage – Use LocalStorage, SessionStorage, and monitor StorageEvents</li></li></ul><li>HTML5 Features Support <br /><ul><li> Client-side Storage – Use LocalStorage, SessionStorage, and monitor StorageEvents
  90. 90. Canvas – Add visualizations using Canvas
  91. 91. Audio – Use Audio widgets
  92. 92. Video – Use Video widgets</li></li></ul><li>HTML5 Features support <br />
  93. 93. To be continued… <br /><ul><li>Client-server communication (RPC, JSON/XML)
  94. 94. MVP framework (Activities and Places)
  95. 95. DevMode (code-test-debug cycle)
  96. 96. Modules (properties, rules)
  97. 97. Generators (meta-programming)
  98. 98. UiBinder
  99. 99. Cell Widgets (CellTable, CellTree, CellBrowser)
  100. 100. …</li></ul>http://www.exigenservices.by/webinars<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×