GWT Architectures and Lessons Learned (WJAX 2013)
Download as PDF, PPTX0 likes2,000 views
The document discusses GWT (Google Web Toolkit) development, emphasizing its architecture, structuring UI, and the evolution of web technologies. It highlights the complexity of GWT applications, the importance of design patterns like MVP, and best practices for maintaining performance and usability. Additionally, it provides guidance on using components, managing state, and creating user-friendly interfaces while navigating within applications.
More Related Content
Similar to GWT Architectures and Lessons Learned (WJAX 2013) (20)
![Strategic Picks — Prioritising the Right Agentic Use Cases [2/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-2-250902135931-4c97717a-thumbnail.jpg?width=560&fit=bounds)
GWT Architectures and Lessons Learned (WJAX 2013)
- 1. GWT Architectures and Lessons Learned p.g.taboada | pgt technology scouting GmbH
- 2. Papick G. Taboada pgt technology scouting GmbH! http://pgt.de Orientation in Objects GmbH! http://oio.de
- 4. ‣ GWT Development ‣ Basics ‣ Structuring the UI
- 5. Shift happened Java development, JS deployment, Async, RPC, RIA/ single page, ...
- 6. Web 2.0 ? development is all about… ! …js …html …css ! none of it ! …jcp …oracle … IBM … backend
- 7. what is a GWT application? a chunk of JS that does a lot of DOM manipulation to create web applications
- 8. UI component model Components Widget t = new TextBox(); ! RootPanel.get().add(t); Browser Composite
- 9. + testability! + maintainance! + product development Architecture shift Web applications Model 2 web applications Rich internet applications
- 10. ! eb t w en sic pm as lo cl ve de Server Browser user action e ons html resp full user action po l html res ful nse user action po l html res ful nse
- 11. eb ent w IA pm R lo ve de Server Browser first reques t e l respons full htm event event event data reque st data event data reque data st
- 12. Web frameworks
- 13. low level, generic tools
- 14. let‘s build big things
- 15. TextBox t0 = new TextBox(); TextBox t1 = new TextBox(); TextBox t2 = new TextBox(); TextBox t3 = new TextBox(); TextBox t4 = new TextBox(); VerticalPanel... SplitPanel... ScrollPanel RootPanel.get().add(mainPanel);
- 17. MacGyver All he needed was a ballpoint pen and a paper clip
- 18. Ops
- 20. ‣ GWT Development ‣ Basics ‣ Structuring the UI
- 21. DANGER GWT DEVELOPMENT IS COMPLICATED HOT NEW STUFF.
- 22. NOT REALLY
- 23. GWT development is not new, but different
- 24. WEB DEVELOPMENT IS NOT NEW...
- 25. HTML 2.0 November 1995 HTML 4.0 update April 1998 HTML 4.0.1 Dez 1999 CSS 1 Dez 1996 XHTML 1.0 Jan 2000 HTML 3.2 Januar 1997 J2SE 1.3 Mai 2000 HTML 4.0 Dezember 1997 JDK 1.0 Jan 1996 CSS 2.1 XHTML 1.1 Mai 2001 J2SE 1.2 Dez 1998 JDK 1.1 Feb 1997 CSS 2 Mai 1998 Java EE 1.2 Dez 1999 Internet Explorer 6 Aug 2001 Feb 2004 – Jun 2011 CSS level 2 revision 1, often referred to as "CS errors in CSS 2, removes poorly supported or n interoperable features and adds already-imple browser extensions to the specification. In orde with the W3C Process for standardizing techn specifications, CSS 2.1 went back and forth be Working Draft status and Candidate Recomm status for many years. THE Jan 2000 Jan 2005
- 26. RICH CLIENT DEVELOPMENT IS NOT NEW EITHER
- 27. nothing new here
- 28. Jan 2007 nothing new here too
- 29. YES! This is my code!
- 30. It’s all about software engineering
- 31. Just a few tips
- 32. USE MVP! You will get used to it
- 34. eventbus.fireEvent( NotificationEvent.info( "Daten wurden erfolgreich gespeichert" ) );
- 35. SINGLETON don‘t public static instance
- 36. BUT ON IE 6 IT IS SO SLOW!
- 37. BUT ON IE 7 IT IS SO SLOW!
- 38. BUT ON IE 8 IT IS SO SLOW!
- 39. BUT ON IE 9 IT IS SO SLOW!
- 40. DID ANYONE TEST ON IE / SURFACE?
- 41. browsers day to day job
- 42. too many HTTP requests
- 43. > 2400 DOM elements WTF?
- 44. too many widgets
- 45. use large HTML chunks
- 46. too many widgets ain‘t good
- 47. <div /> a Widget is a JS thing holding a DOM element
- 48. CREATE CUSTOM WIDGETS CREATE CUSTOM EVENTS don‘t extend SimplePanel don‘t extend VerticalPanel don‘t extend FlextTable extend composite!!!
- 49. @-webkit-keyframes { from { box-shadow: } 50% { box-shadow: } to { box-shadow: } } redPulse 0px 0px 2px #ff0033; 0px 0px 10px #ff0033; 0px 0px 2px #ff0033; if you can, do it in CSS
- 50. <g:LayoutPanel styleName="{B.style.mainContent}"> <g:layer left="0" right="340px" top="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addS <ux:DashboardTermineDataGrid ui:field="terminetable" sty </g:SimpleLayoutPanel> </g:layer> <g:layer right="0" width="340px" top="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addS <ux:KWStatsDataGrid ui:field="statstable" styleName="{B. </g:SimpleLayoutPanel> </g:layer> <g:layer right="0" left="0" bottom="0" height="50%"> <g:SimpleLayoutPanel styleName="{B.style.mainWidget}" addS <ux:WartelisteDataGrid ui:field="wartelistetable" styleN </g:SimpleLayoutPanel> </g:layer> </g:LayoutPanel> use LayoutPanel
- 51. Ray Ryan - lessons learned
- 52. ‣ GWT Development ‣ Basics ‣ Structuring the UI
- 53. some action mainPanel.setWiget( aWidget ); mainPanel.setWiget( bWidget ); „View B“ „View A“ „just do it“ pattern
- 54. hard to maintain
- 55. history management from day one! ! back button and refresh as a feature (not a catastrophe)
- 56. keep it stupid simple • use PLACES framework for main level navigation • if you really need to, nest activities for a second level. try not to. • use dialogs for user input, showing data. dialogs are easily reused.
- 57. ‣ he will be using photoshop or dreamweaver ‣ he will not use the software ‣ he will not build the software ‣ he will not maintain the software Once upon a time, a good designer does good a good looking design...
- 59. top menue bound to places framework
- 60. switching between places with fade in and out
- 61. teach user to wait until application is ready again
- 62. gives us enough time to load the required content 300ms out 500ms in
- 64. Components inside of „activity“ fire non public, custom events
- 66. presenter may goto itself, view may be cached
- 67. # ashtag?!?
- 68. STATELESS VIEW ! URL contains EVERYTHING needed to rebuild view user hits reload view is back again GWT apps starts, activity gets fired presenter loads data from server
- 69. some actions don‘t require PLACE navigation at all
- 70. use POPUPS/ DIALOGS to stay ABOVE navigation
- 71. let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window
- 72. Search DIALOG slides in from right side, stays on TOP Don‘t move your user away from his „PLACE“ unless you have to.
- 73. Navigation should not hurt • The application shown uses only 3 levels of navigation, DOES NOT NEED MORE • PLACES used for bookmarkable entry points/ back button navigation consistency • Activities should be STATELESS, to survive page reloads • Learn from OTHERS, lookout for hashtags…
- 74. BEFORE YOU ADD THE LOGO TO THE TOP HOW MANY PIXELS DO YOUR USERS HAVE? the designer or marketing guy using photoshop is probably sitting in front of a 27“ apple cinema display
- 75. Thanks!