Was haben die Kunden von morgenGoogle Web Toolkit,                     heute im Web gesehen und                           ...
Web 1.0, 2.0, 3.0 ?!?© 2012 by pgt technology scouting GmbH
the new Web© 2012 by pgt technology scouting GmbH
the BetterWeb™ !© 2012 by pgt technology scouting GmbH
Topics   ‣The BetterWeb™         ‣ The architectural shift         ‣ Standards?         ‣ Developing smarter         ‣ GWT...
BetterWeb™ by apps?© 2012 by pgt technology scouting GmbH
BetterWeb™ by buzzwords?© 2012 by pgt technology scouting GmbH
BetterWeb™               by new technologies?               by new devices?               by new frameworks?           ...
no downtime                             no $$$   awesome UX   it simply works                               BetterWeb™ by ...
easy, right?© 2012 by pgt technology scouting GmbH
no© 2012 by pgt technology scouting GmbH
Topics   ‣ The BetterWeb™         ‣ The architectural shift         ‣ Standards?         ‣ Developing smarter         ‣ GW...
step 1 - use the browser© 2012 by pgt technology scouting GmbH
Browser                             Server            event                      espo    nse          full html r         ...
Browser                             Server            event                      espo    nse          full html r         ...
Browser                             Server            event                      espo    nse          full html r         ...
Browser                             Server            event                      espo    nse          full html r         ...
The web THEN             and now        Browsers where dumb html         terminals        High server side resource     ...
Browser                               Server                      first reques                                       t     ...
The web then               and NOW          Rich user interfaces in the           Browser          Server resource consu...
The „ajax“ architectural shift© 2012 by pgt technology scouting GmbH
step 2.1 - understand http© 2012 by pgt technology scouting GmbH
step 2.2 - understand html© 2012 by pgt technology scouting GmbH
step 2.3 - understand browsers© 2012 by pgt technology scouting GmbH
connection bottleneck© 2012 by pgt technology scouting GmbH
HTTP 1.1 Specification8.1.4 Practical considerations(...)Clients that use persistent connectionsSHOULD limit the number ofs...
even 20 would not be enough© 2012 by pgt technology scouting GmbH
Actually, a good wayto kill your mobiledata plan andbattery life.                                                         ...
134 Requests                            1/2 MB DownloadMEDIOCRITYIt takes a lot less time and most people wont notice thed...
cache time to live? new versions? only fixes subsequent calls!                          Caching helps, partially© 2012 by p...
remember:                                    less                                  latency                                ...
the thing you want to build is a RCC
RPC       RCCs == Rich Cloud Clients© 2012 by pgt technology scouting GmbH
XML                                            JavaScript                            HTML                                 ...
The Ajax       slippery slope          ‣ Try “a little bit of script”          ‣ Every body loves it!           ‣ More!!! ...
copyright 2006, Leland Scott, Musings from Mars                       Native DHTML speakers© 2012 by pgt technology scouti...
Fear browsers                    with all of mind,                     body and spirit                                    ...
© http://www.duccutters.com/FrancoisKnorreck-Snaefell.tpl      Ajaxifying the web is not a solution™© 2012 by pgt technolo...
© http://www.duccutters.com/FrancoisKnorreck-Snaefell.tpl      Ajaxifying the web is not a solution™© 2012 by pgt technolo...
No, no, no.                                         Please no!                                           Please! html + cs...
HTML5                      Chrome   Firefox   Safari   Opera                                         canvas               ...
Topics   ‣ The Web?         ‣ The architectural shift         ‣Standards?         ‣ Developing smarter         ‣ GWT does ...
Java BetterWeb™ Standard?                Industriestandard• Java EE ist ein De-facto oder Quasi-Standard in  der Entwicklu...
Java EE Standard LOCK-INNO ONE EVER GOTFIRED FOR BUYING                   {   MICROSOFT                       IBM         ...
To JSF or to JSF,that‘s the question.
http://de.wikipedia.org/wiki/   Proprietär• Juristisch „urheberrechtlich geschützt“• IT: Dinge, die nicht allgemein anerka...
WEB Standards   Java EE Standards Rich                               vintage (?)Cloud                               web ap...
GWT & Standards
WarrantyVendor independence?Support
cloud              HTML5                                 IE6                       IE10                            IE9    ...
JBossSencha          Google                        (RichFaces)(GXT)    GWT                     Prime Technology   JSF     ...
AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, The New Blogger, Chrome Webstore, Product Search, Public    Data,...
Topics   ‣ The Web?         ‣ The architectural shift         ‣ Standards?         ‣Developing smarter         ‣ GWT does ...
building the BetterWeb™© 2012 by pgt technology scouting GmbH
Google Web Toolkit                 	 Google Web Toolkit (GWT) is an open source Java                     development frame...
GWT                 	 Google Web Toolkit (GWT) is an open source Java                     development framework that lets ...
GWT                 open source framework                 escape the matrix of technologies                 develop and de...
Standalone JS apps© 2012 by pgt technology scouting GmbH
JS app can be anything© 2012 by pgt technology scouting GmbH
development cycle© 2012 by pgt technology scouting GmbH
Develop in Java© 2012 by pgt technology scouting GmbH
Develop in Java© 2012 by pgt technology scouting GmbH
Checkstyle                                         Develop in Java© 2012 by pgt technology scouting GmbH
Checkstyle                                                           Findbugs,                                            ...
Checkstyle                                                           Findbugs,                                            ...
Checkstyle                                                            Findbugs,                                           ...
Checkstyle                                                            Findbugs,                                           ...
it‘s about engineering© 2012 by pgt technology scouting GmbH
One click start© 2012 by pgt technology scouting GmbH
Use the webapp© 2012 by pgt technology scouting GmbH
Debug in Java© 2012 by pgt technology scouting GmbH
Cross compile to JS© 2012 by pgt technology scouting GmbH
Distribute© 2012 by pgt technology scouting GmbH
more than just a cross compiler© 2012 by pgt technology scouting GmbH
panel                                                 hasprogrammatic DOM                                 is           wid...
widget                                         DOM                                         tree                           ...
I am not a widget!!          very fast / efficient data grid© 2012 by pgt technology scouting GmbH
@RemoteServiceRelativePath("echo")    public interface EchoService extends RemoteService {     String echo(String name);  ...
httprequest builder                        xml dom parser                               i18n                      safeHTML...
living with the bottleneck© 2012 by pgt technology scouting GmbH
!=                        project layout vs. deployment layout© 2012 by pgt technology scouting GmbH
sprites / client bundle© 2012 by pgt technology scouting GmbH
doing the right thing                    • inline css + js + html + images + sound into one                          file  ...
developer guided splits© 2012 by pgt technology scouting GmbH
build what you need                            architectural freedom© 2012 by pgt technology scouting GmbH
do we know how?© 2012 by pgt technology scouting GmbH
sometimes© 2012 by pgt technology scouting GmbH
command pattern (dispatch)                                place framework                                                 ...
Topics   ‣ The Web?         ‣ The architectural shift         ‣ Standards?         ‣ Developing smarter         ‣GWT does ...
Is GWT good for the BetterWeb™?
Good for business
• Sponsored/ developed by Google                    • Lead by comitee                    • Apache 2 licensed              ...
Better for developers
• End to end debugging                    • No package/ deploy roundtrips                    • Leverage Java knowledge and...
Better for performance
• Split points reduce initial download                    • Minimal server load by just loading data                    • ...
Better for architects
• Build-What-You-Need™                    • Leverage browser capabilities© 2012 by pgt technology scouting GmbH
Papick G. TaboadaDipl. Wi.-Ing. (TU)                                                http://pgt.de                         ...
http://blog.oio.de
) OIO Kompass : Java Web-Frameworks )      Eine Studie zu den Hintergründen der Auswahl von Java Web-Frameworks.2011: 52 T...
http://www.oio.de/kompass/ueberblick-java-web-frameworks-vergleich/
time for questions?© 2012 by pgt technology scouting GmbH
© Glenn Roberts | motorcyclemojo.com                  © François Knorreck© 2006 Leland Scott, Musings from Mars       © Sk...
GWT - building a better web
GWT - building a better web
GWT - building a better web
GWT - building a better web
Upcoming SlideShare
Loading in …5
×

GWT - building a better web

3,924 views

Published on

This are the slides to my 60min talk at the W-JAX 2012 in Munique.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GWT - building a better web

  1. 1. Was haben die Kunden von morgenGoogle Web Toolkit, heute im Web gesehen und bedient? Sind wir auch in der Lage,making a better web? derartig JavaScript-lastige Anwendungen zu bauen? Wenn Ihre Kernkompetenzen im Java-EE- Umfeld angesiedelt sind, dann dürfte das GWT ein sehr interessantes Webframework für Sie sein. In diesem Vortrag werdenpapick g. taboada die Konzepte rund um GWT sowiepgt technology scouting GmbH Architekturaspekte einer GWT- Anwendung betrachtet.
  2. 2. Web 1.0, 2.0, 3.0 ?!?© 2012 by pgt technology scouting GmbH
  3. 3. the new Web© 2012 by pgt technology scouting GmbH
  4. 4. the BetterWeb™ !© 2012 by pgt technology scouting GmbH
  5. 5. Topics ‣The BetterWeb™ ‣ The architectural shift ‣ Standards? ‣ Developing smarter ‣ GWT does the job?
  6. 6. BetterWeb™ by apps?© 2012 by pgt technology scouting GmbH
  7. 7. BetterWeb™ by buzzwords?© 2012 by pgt technology scouting GmbH
  8. 8. BetterWeb™  by new technologies?  by new devices?  by new frameworks?  by new plugins?  by new products?© 2012 by pgt technology scouting GmbH
  9. 9. no downtime no $$$ awesome UX it simply works BetterWeb™ by UX© 2012 by pgt technology scouting GmbH
  10. 10. easy, right?© 2012 by pgt technology scouting GmbH
  11. 11. no© 2012 by pgt technology scouting GmbH
  12. 12. Topics ‣ The BetterWeb™ ‣ The architectural shift ‣ Standards? ‣ Developing smarter ‣ GWT does the job?
  13. 13. step 1 - use the browser© 2012 by pgt technology scouting GmbH
  14. 14. Browser Server event espo nse full html r event spo nse fu ll html re event spo nse fu ll html re
  15. 15. Browser Server event espo nse full html r event spo nse fu ll html re event spo nse fu ll html re
  16. 16. Browser Server event espo nse full html r event spo nse fu ll html re event spo nse fu ll html re
  17. 17. Browser Server event espo nse full html r event spo nse fu ll html re event spo nse fu ll html re
  18. 18. The web THEN and now  Browsers where dumb html terminals  High server side resource consumption© 2012 by pgt technology scouting GmbH
  19. 19. Browser Server first reques t e sp o n se full html reventevent data reque stevent dataevent data reque st data
  20. 20. The web then and NOW  Rich user interfaces in the Browser  Server resource consumption reduced to a minimum© 2012 by pgt technology scouting GmbH
  21. 21. The „ajax“ architectural shift© 2012 by pgt technology scouting GmbH
  22. 22. step 2.1 - understand http© 2012 by pgt technology scouting GmbH
  23. 23. step 2.2 - understand html© 2012 by pgt technology scouting GmbH
  24. 24. step 2.3 - understand browsers© 2012 by pgt technology scouting GmbH
  25. 25. connection bottleneck© 2012 by pgt technology scouting GmbH
  26. 26. HTTP 1.1 Specification8.1.4 Practical considerations(...)Clients that use persistent connectionsSHOULD limit the number ofsimultaneous connections that theymaintain to a given server. A single-userclient SHOULD NOT maintain morethan 2 connections with any server orproxy.(...) Chrome: 6 IE 6: 2 IE 7: 2 IE 8: 6 IE 10: 8 Safari: 6 Firefox: 6 so what?© 2012 by pgt technology scouting GmbH
  27. 27. even 20 would not be enough© 2012 by pgt technology scouting GmbH
  28. 28. Actually, a good wayto kill your mobiledata plan andbattery life. side note: 1 this is why amazons „silk“ or does really improve the surf experience on mobile devices. In fact, it would improve the UX on any device. Why bother doing it right, when we can have the cloud computing power to the rescue? one!!! that was page request.© 2012 by pgt technology scouting GmbH
  29. 29. 134 Requests 1/2 MB DownloadMEDIOCRITYIt takes a lot less time and most people wont notice thedifference until its too late. © http://despair.com
  30. 30. cache time to live? new versions? only fixes subsequent calls! Caching helps, partially© 2012 by pgt technology scouting GmbH
  31. 31. remember: less latency is BETTER© 2012 by pgt technology scouting GmbH
  32. 32. the thing you want to build is a RCC
  33. 33. RPC RCCs == Rich Cloud Clients© 2012 by pgt technology scouting GmbH
  34. 34. XML JavaScript HTML DOM/ DOM-Scripting XMLHttpRequest JSON Dynamic HTML© 2012 by pgt technology scouting GmbH
  35. 35. The Ajax slippery slope ‣ Try “a little bit of script” ‣ Every body loves it! ‣ More!!! ‣ Errr - Do we know Javascript? ‣ Does it work with… ‣ Wait – this is hard!© 2012 by pgt technology scouting GmbH
  36. 36. copyright 2006, Leland Scott, Musings from Mars Native DHTML speakers© 2012 by pgt technology scouting GmbH
  37. 37. Fear browsers with all of mind, body and spirit When in danger, when in doubt, run in circles cry and shout© 2012 by pgt technology scouting GmbH
  38. 38. © http://www.duccutters.com/FrancoisKnorreck-Snaefell.tpl Ajaxifying the web is not a solution™© 2012 by pgt technology scouting GmbH
  39. 39. © http://www.duccutters.com/FrancoisKnorreck-Snaefell.tpl Ajaxifying the web is not a solution™© 2012 by pgt technology scouting GmbH
  40. 40. No, no, no. Please no! Please! html + css + js is here to stay© 2012 by pgt technology scouting GmbH
  41. 41. HTML5 Chrome Firefox Safari Opera canvas video geolocation appcache Vic Gundotra database Google IO Keynote workers HTML 5 here and now© 2012 by pgt technology scouting GmbH
  42. 42. Topics ‣ The Web? ‣ The architectural shift ‣Standards? ‣ Developing smarter ‣ GWT does the job?
  43. 43. Java BetterWeb™ Standard? Industriestandard• Java EE ist ein De-facto oder Quasi-Standard in der Entwicklung von unternehmenskritischen Anwendungen• JSF Spezifikation ist Teil der Java EE Spezifikation Standard
  44. 44. Java EE Standard LOCK-INNO ONE EVER GOTFIRED FOR BUYING { MICROSOFT IBM ORACLE ...
  45. 45. To JSF or to JSF,that‘s the question.
  46. 46. http://de.wikipedia.org/wiki/ Proprietär• Juristisch „urheberrechtlich geschützt“• IT: Dinge, die nicht allgemein anerkannten Standards entsprechen („hauseigene Entwicklungen“)• Freie-Software-Bewegung: alles was nicht frei (Lizenztechnisch) und Quelloffen ist.
  47. 47. WEB Standards Java EE Standards Rich vintage (?)Cloud web appThing architecture Wait...
  48. 48. GWT & Standards
  49. 49. WarrantyVendor independence?Support
  50. 50. cloud HTML5 IE6 IE10 IE9 HTML4 the Avatar UI JS Support Websphere 5... 6... 7... Java FX Mobilebut, what about the future?
  51. 51. JBossSencha Google (RichFaces)(GXT) GWT Prime Technology JSF (PrimeFaces) Isomorphic Software Icesoft Technologies (Smart GWT) (IceFaces) blue or red pill?
  52. 52. AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, The New Blogger, Chrome Webstore, Product Search, Public Data, New Google Groups, Orkut, Google Takeout, Google Pagespeed, Google WebFonts, Google Tables google is „dogfooding“© 2012 by pgt technology scouting GmbH
  53. 53. Topics ‣ The Web? ‣ The architectural shift ‣ Standards? ‣Developing smarter ‣ GWT does the job?
  54. 54. building the BetterWeb™© 2012 by pgt technology scouting GmbH
  55. 55. Google Web Toolkit Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.© 2012 by pgt technology scouting GmbH
  56. 56. GWT Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.© 2012 by pgt technology scouting GmbH
  57. 57. GWT open source framework escape the matrix of technologies develop and debug in Java Java development tools translates to browser-compliant JavaScript© 2012 by pgt technology scouting GmbH
  58. 58. Standalone JS apps© 2012 by pgt technology scouting GmbH
  59. 59. JS app can be anything© 2012 by pgt technology scouting GmbH
  60. 60. development cycle© 2012 by pgt technology scouting GmbH
  61. 61. Develop in Java© 2012 by pgt technology scouting GmbH
  62. 62. Develop in Java© 2012 by pgt technology scouting GmbH
  63. 63. Checkstyle Develop in Java© 2012 by pgt technology scouting GmbH
  64. 64. Checkstyle Findbugs, PMD Develop in Java© 2012 by pgt technology scouting GmbH
  65. 65. Checkstyle Findbugs, PMD Patterns Develop in Java© 2012 by pgt technology scouting GmbH
  66. 66. Checkstyle Findbugs, PMD Patterns Unit testing Develop in Java© 2012 by pgt technology scouting GmbH
  67. 67. Checkstyle Findbugs, PMD Patterns Unit testing Refactoring! Develop in Java© 2012 by pgt technology scouting GmbH
  68. 68. it‘s about engineering© 2012 by pgt technology scouting GmbH
  69. 69. One click start© 2012 by pgt technology scouting GmbH
  70. 70. Use the webapp© 2012 by pgt technology scouting GmbH
  71. 71. Debug in Java© 2012 by pgt technology scouting GmbH
  72. 72. Cross compile to JS© 2012 by pgt technology scouting GmbH
  73. 73. Distribute© 2012 by pgt technology scouting GmbH
  74. 74. more than just a cross compiler© 2012 by pgt technology scouting GmbH
  75. 75. panel hasprogrammatic DOM is widgetmanipulation DOM treedeclarative definitionevent handling simple UI component model© 2012 by pgt technology scouting GmbH
  76. 76. widget DOM tree LOGIC in Java Java API LAYOUT in HTML/ CSS separation of concerns© 2012 by pgt technology scouting GmbH
  77. 77. I am not a widget!! very fast / efficient data grid© 2012 by pgt technology scouting GmbH
  78. 78. @RemoteServiceRelativePath("echo") public interface EchoService extends RemoteService { String echo(String name); } public interface EchoServiceAsync { void echo(String name, AsyncCallback<String> callback); } public class EchoServiceImpl extends RemoteServiceServlet implements EchoService { public String echo(String name) { return name.toUpperCase(); } } RPC style communication© 2012 by pgt technology scouting GmbH
  79. 79. httprequest builder xml dom parser i18n safeHTML templates logging css/ js obfuscation requestFactory module concept code generator permutations per browser/ language JSNI for native JS uiBinder and much more...© 2012 by pgt technology scouting GmbH
  80. 80. living with the bottleneck© 2012 by pgt technology scouting GmbH
  81. 81. != project layout vs. deployment layout© 2012 by pgt technology scouting GmbH
  82. 82. sprites / client bundle© 2012 by pgt technology scouting GmbH
  83. 83. doing the right thing • inline css + js + html + images + sound into one file • browsers just get what they need (code, language) • caching done right! • name patterns for cache configuration • use new very unique filenames for each compile output© 2012 by pgt technology scouting GmbH
  84. 84. developer guided splits© 2012 by pgt technology scouting GmbH
  85. 85. build what you need architectural freedom© 2012 by pgt technology scouting GmbH
  86. 86. do we know how?© 2012 by pgt technology scouting GmbH
  87. 87. sometimes© 2012 by pgt technology scouting GmbH
  88. 88. command pattern (dispatch) place framework eventbus model-view-presenter Ray Ryan - lessons learned© 2012 by pgt technology scouting GmbH
  89. 89. Topics ‣ The Web? ‣ The architectural shift ‣ Standards? ‣ Developing smarter ‣GWT does the job?
  90. 90. Is GWT good for the BetterWeb™?
  91. 91. Good for business
  92. 92. • Sponsored/ developed by Google • Lead by comitee • Apache 2 licensed • Leverages Java knowledge for web development • brings software engineering to the web, suitable for product development© 2012 by pgt technology scouting GmbH
  93. 93. Better for developers
  94. 94. • End to end debugging • No package/ deploy roundtrips • Leverage Java knowledge and tooling© 2012 by pgt technology scouting GmbH
  95. 95. Better for performance
  96. 96. • Split points reduce initial download • Minimal server load by just loading data • Reduced number of requests • Uses client/ browser resources to free up server resources© 2012 by pgt technology scouting GmbH
  97. 97. Better for architects
  98. 98. • Build-What-You-Need™ • Leverage browser capabilities© 2012 by pgt technology scouting GmbH
  99. 99. Papick G. TaboadaDipl. Wi.-Ing. (TU) http://pgt.de pgt technology scouting GmbH PROJECT- BERATUNG UNTERSTÜTZUNG POC REVIEWS COACHING SCHULUNG
  100. 100. http://blog.oio.de
  101. 101. ) OIO Kompass : Java Web-Frameworks ) Eine Studie zu den Hintergründen der Auswahl von Java Web-Frameworks.2011: 52 Teilnehmer | 250 Entwickler 2012: bereits über 200 Teilnehmer
  102. 102. http://www.oio.de/kompass/ueberblick-java-web-frameworks-vergleich/
  103. 103. time for questions?© 2012 by pgt technology scouting GmbH
  104. 104. © Glenn Roberts | motorcyclemojo.com © François Knorreck© 2006 Leland Scott, Musings from Mars © Skimvision | Dreamstime.com © Andreas Morlok | pixelio.de © BirgitH | pixelio.de © RainerSturm | pixelio.de © joujou | pixelio.de © schubalu | pixelio.de © Stihl24 | pixelio.de © starush | istockphoto.com © doram | istockphoto.com © princessdlaf | istockphoto.com © northlightimages | istockphoto.com © koun | istockphoto.com © luismmolina | istockphoto.com © id: 9109006 | istockphoto.com © wellglad | istockphoto.com © jgroup | istockphoto.com © id:12861033 | istockphoto.com © Henrik5000 | istockphoto.com © craftvision | istockphoto.com © tap10 | istockphoto.com © sitox | istockphoto.com Thanks! © MilosJokic | istockphoto.com © iqoncept | istockphoto.com © pictafolio | istockphoto.com © pictafolio | istockphoto.com© 2012 by pgt technology scouting GmbH

×