• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
GWT Architectures and Lessons Learned (WJAX 2013)
 

GWT Architectures and Lessons Learned (WJAX 2013)

on

  • 788 views

GWT-Entwicklung ist Rich-Client-Entwicklung, und das ist für viele Webentwickler neu. Mit den "Lessons Learned" aus der Entwicklung von Google AdWords wurden Architekturmuster für GWT-Anwendungen ...

GWT-Entwicklung ist Rich-Client-Entwicklung, und das ist für viele Webentwickler neu. Mit den "Lessons Learned" aus der Entwicklung von Google AdWords wurden Architekturmuster für GWT-Anwendungen vorgestellt. Einiges davon ist inzwischen in GWT gelandet und kann sofort eingesetzt werden. In diesem Vortrag werden Architekturmuster vorgestellt, die in den letzten Jahren in einigen Projekten erfolgreich eingesetzt wurden.

Statistics

Views

Total Views
788
Views on SlideShare
788
Embed Views
0

Actions

Likes
0
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    GWT Architectures and Lessons Learned (WJAX 2013) GWT Architectures and Lessons Learned (WJAX 2013) Presentation Transcript

    • GWT Architectures and Lessons Learned p.g.taboada | pgt technology scouting GmbH
    • Papick G. Taboada pgt technology scouting GmbH! http://pgt.de Orientation in Objects GmbH! http://oio.de
    • http://gwtreferencelist.appspot.com
    • ‣ GWT Development ‣ Basics ‣ Structuring the UI
    • Shift happened Java development, JS deployment, Async, RPC, RIA/ single page, ...
    • Web 2.0 ? development 
 is all about… ! …js …html …css ! none of it ! …jcp …oracle … IBM … backend
    • what is a GWT application? a chunk of JS that does a lot of DOM manipulation to create web applications
    • UI component model Components Widget t = new TextBox(); ! RootPanel.get().add(t); Browser Composite
    • + testability! + maintainance! + product development Architecture shift Web applications Model 2 web applications Rich internet applications
    • ! 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
    • 
 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
    • Web frameworks
    • low level, generic tools
    • let‘s build big things
    • 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);
    • maintainance hell
    • MacGyver All he needed was a ballpoint 
 pen and a paper clip
    • Ops
    • app-framework wizardry needed
    • ‣ GWT Development ‣ Basics ‣ Structuring the UI
    • DANGER GWT DEVELOPMENT IS COMPLICATED HOT NEW STUFF.
    • NOT REALLY
    • GWT development is not new, but different
    • WEB DEVELOPMENT IS NOT NEW...
    • 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
    • RICH CLIENT DEVELOPMENT IS NOT NEW EITHER
    • nothing new here
    • Jan 2007 nothing new here too
    • YES! This is my code!
    • It’s all about
 software 
 engineering
    • Just a 
 few tips
    • USE MVP! You will get used to it
    • event bus please http://jarrettws.blogspot.de/2010/05/public-transport.html
    • eventbus.fireEvent( NotificationEvent.info( "Daten wurden erfolgreich gespeichert" ) );
    • SINGLETON don‘t public static instance
    • BUT ON IE 6 IT IS SO SLOW!
    • BUT ON IE 7 IT IS SO SLOW!
    • BUT ON IE 8 IT IS SO SLOW!
    • BUT ON IE 9 IT IS SO SLOW!
    • DID ANYONE TEST ON IE / SURFACE?
    • browsers day to day job
    • too many HTTP requests
    • > 2400 DOM elements WTF?
    • too many widgets
    • use large HTML chunks
    • too many widgets ain‘t good
    • <div /> a Widget is a JS thing holding a DOM element
    • CREATE CUSTOM WIDGETS CREATE CUSTOM EVENTS don‘t extend SimplePanel don‘t extend VerticalPanel don‘t extend FlextTable extend composite!!!
    • @-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
    • <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
    • Ray Ryan - lessons learned
    • ‣ GWT Development ‣ Basics ‣ Structuring the UI
    • some action mainPanel.setWiget( aWidget ); mainPanel.setWiget( bWidget ); „View B“ „View A“ „just do it“ pattern
    • hard to maintain
    • history management from day one! ! back button and refresh as a feature (not a catastrophe)
    • 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.
    • ‣ 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...
    • top menue bound to places framework
    • switching between places with fade in and out
    • teach user to wait until application is ready again
    • gives us enough time to load the required content 300ms out 500ms in
    • Components inside of „activity“ fire non public, custom events
    • datepicker sends WEEK selected event
    • presenter may goto itself, view may be cached
    • # ashtag?!?
    • 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
    • some actions don‘t require PLACE navigation at all
    • use POPUPS/ DIALOGS to stay ABOVE navigation
    • let POPUPS/ DIALOGS move slowly into view pin POPUPS to one side of the window
    • Search DIALOG slides in from right side, stays on TOP Don‘t move your user away from his „PLACE“ unless you have to.
    • 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…
    • 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
    • Thanks!