• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

RAP vs GWT Which AJAX Technology is for you?

  • 18,179 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
18,179
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
275
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RAP vs GWT Which AJAX technology is for you? by Mark Russell
  • 2. Overview
    • Introduction
      • Who we are
    • Demo
      • Example apps, UI elements, Styles and Graphing
    • Development
      • Architecture and Debugging
    • Communication
      • Browser interaction and RPC
    • Build and Deployment
      • Automation, process and server infrastructure
    • Performance
      • Measuring and tuning hosted apps
    • Unit Testing
      • Development and performance comparison
    • Summary
  • 3. Introduction
    • Mark Russell
      • Co-architect of the Instantiations continuous build and deployment system
      • Build master with 14 years experience developing large and small build systems for large corporate systems and small open source projects
      • Developer on several Instantiations products such as CodePro and RCPDeveloper
      • Eclipse committer
  • 4.
    • Founded in 1997, Headquarters in Portland, OR
    • Market leading tools
      • Automated Software Quality
      • UI Construction and Testing Tools
    • CodeGear division of Embarcadero OEM’ed Swing Designer for JBuilder® 2008
    • 8 years of extensive Eclipse experience Active Eclipse Foundation member and major contributor.
    • Customer focused. Customer driven.
  • 5. Awards and Acknowledgements “ WindowBuilder delivers the kind of GUI building productivity that we use to have before we converted to Java.” Sally Rich Checkfree Solutions 2006 - 2008 Private 100 Fastest Growing Oregon Companies “ RCP Developer is the first product to bring comprehensive application construction, GUI testing and packaging of rich-client applications to Eclipse RCP. We are delighted that Instantiations is delivering this important technology to the growing Eclipse ecosystem.” Mike Milinkovich, Executive Director Eclipse Foundation #14 Fastest Growing Technology Company 2006 “ Since we started using WindowTester, tests that took 2–3 weeks to write previously can now be done in 2–3 days.” Steve Tocco Director of Quality Assurance, BEA “ Because our software is used to drive key business decisions, it's critical that we deliver high-quality software, and implementing CodePro AnalytiX has allowed us to automate the process of enforcing programming standards and best practices.” Rich Main, Director, Java Development Environments, SAS
  • 6. Strategic Product Lines Automated Software Quality Tools for Code Analysis, Measurement and Improvement Automated testing of Java GUIs for SWT and Swing WYSIWYG development of Java GUIs for SWT, Swing and GWT Finalist
  • 7. Professional Services
    • One of the most experienced teams of Eclipse, Java and Smalltalk experts
    • Planning assistance for build and deployment
    • QuickQuality live mentoring boot-camp
    • Architectural, design and development mentoring
    • Custom software engineering
    “ The members of the professional services team at Instantiations are truly top-tier technologists. Not only did they integrate right into our team, bringing impressive experience and mentoring skills to bear, they brought along enough big-picture aptitude to understand our business problems, our pressures, and what project success meant for us.” Jesse Watson Manager, Engineering Varolii Corporation
  • 8. Similarities
    • Rich browser based UI based on AJAX
    • Developers write Java code (not JavaScript)
    • … but that’s where the similarities end
  • 9. Demo – RAP application in action
    • Main “window” can be dragged within browser
    • Pull down menus
    • Panels are resizable within main window
    • Popup “windows” restricted to browser content area
    Looks and feels like an Eclipse application embedded in a browser
  • 10. RAP – UI Components
    • Most SWT widgets have RWT * counterparts, except:
    • StyledText (under investigation)
    • FormText
    • GC (often used with custom widgets… under investigation)
    • Much of JFace is implemented such as tables, content and label providers, actions, contributions, wizard framework, many dialogs, layouts, colors, fonts, etc.
    • Also
    • Drag and drop (planned)
    • Custom Widgets are possible
    * RWT = RAP Widget Toolkit
  • 11. RAP – Styles
    • Now supports CSS files (June 2008)
    * { backgound-color: white; } Button[PUSH], Button[TOGGLE] { border: 2px solid blue; color: rgb( 17, 23, 103 ); background-color: #f9f9f9; } Button[PUSH]:hover, Button[TOGGLE]:hover { background-color: white; } http://help.eclipse.org/help33/index.jsp?topic=/org.eclipse.rap.help/help/html/intro.html > RAP Developer Guide > Advanced Topics > RWT Theming (CSS in the future)
  • 12. RAP – Supported Browsers
    • Wrappers the Qooxdoo JavaScript library, supporting the same set of browsers…
    • Microsoft IE 5.5 + ( decent performance with 7.0 + )
    • Firefox 1.0 +
    • Opera 8 +
    • Any Gecko-based browser with Gecko 1.7 +
    • Safari 2.0 (limited support)
    • Safari 3.0
    http://qooxdoo.org/documentation/0.7/requirements
  • 13. Demo – GWT / Ext GWT application in action
    • Main “window” fixed within browser
    • Pull down menus
    • Panels are resizable within main window
    • Popup “windows” restricted to browser content area
    MyGWT  Ext GWT
  • 14. GWT – UI Components
    • GWT
    • CheckBox and several types of buttons
    • Several types of text based fields including SuggestBox
    • List, Table, Tree, TabBar, Hyperlink
    • MenuBar, DialogBox and various panels
    • Custom widgets are possible
    • Call “raw” JavaScript using JavaScript Native Interface (JSNI)
  • 15. GWT – API http://roberthanson.blogspot.com/2006/07/birds-eye-view-of-gwt-api.html
  • 16. Ext GWT – UI Components
    • Ext GWT
    • New layouts, tables, trees, windows, lists, menus, toolbars
    • Windows, dialogs, draggable, resizable, effects such as fade in fade out
    • Very integrated look and feel
    http://extjs.com/products/gxt/ MyGWT  Ext GWT
  • 17. GWT – Styles
    • Style based on standard CSS style sheets
    • Standard CSS provided for consistent look and feel
    • Can modify global styles for your app
    • Can extend or override on individual widget styles
      • .mail-item-detail {
      • background-color : #E8EAEC;
      • border-bottom : 1px solid silver;
      • }
      • .mail-item-detail h1 {
      • font-weight : bold;
      • font-size : 14px;
      • padding : 5 0 2 5px;
      • }
      • .mail-item-detail h2 {
      • font-size : 12px;
      • font-weight : normal;
      • padding : 0 5 0 5px;
      • }
  • 18. GWT – Supported Browsers
    • “ most recent versions of Internet Explorer, Firefox, and Safari. (Opera, too, most of the time.)”
    • Ext GWT (based on Ext JS – http://extjs.com/)
    • Internet Explorer 6+
    • Firefox 1.5+ (PC, Mac)
    • Safari 2+
    • Opera 9+ (PC, Mac)
    Ext GWT and Ext JS dual license license: 1) Open Source GNU GPL license v3 (free) 2) Commercial license ($$$) http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.Fundamentals.html#JavaRuntimeSupport
  • 19.
    • Widgets are great… but what about graphs?
    • Some options include:
    • Graphing widgets
    • Integrating “raw” JavaScript graphs
    • Graphing on the server for display on the client
    Graphing
  • 20. GWT – Graphing Widgets
    • GWT-Ext
    • An alternate add-on widget library for GWT
    • Similar to Ext GWT
    • Some graphing built in
    http://gwt-ext.com/demo/#chartGenerator
  • 21. Integrating “raw” JavaScript graphs
    • Many JavaScript (and Flash, PHP, …) graphing options, but you must integrate them yourselves
    http://www.smashingmagazine.com/2007/10/18/charts-and-graphs-modern-solutions/
  • 22. Interactive graphs
    • “Visio-like” interactive graphing
    http://www.mxgraph.com/demo.html
  • 23. Graphing on the server
    • Render graph on server using Java based graphics library (e.g. JFreeChart) into a file
    • Reference file in HTML page
  • 24. History Management
    • GWT provides functionality for programmatically adding state to the browser's back button history.
    • RAP does not currently have any framework for providing “browser back button” support. Qooxdoo offers functionality for browser back and browser history but RAP currently does not use those features.
    • This is an important feature missing from RAP… or is it?
    http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/com/google/gwt/user/client/History.html
  • 25. Development
    • How do you develop applications with these frameworks?
  • 26. RAP – Architecture
    • Very similar to developing an RCP application
    • Can use UI development tools such as WindowBuilder Pro
    RAP RCP
  • 27. RAP – Architecture
    • Java code executed entirely on the server
    • Static JavaScript library deployed to client
    RAP RCP
  • 28.
    • One launch configuration for client and server
    • Port 8090 – makes it easy to serve up both RAP and GWT
    RAP – Debugging Internal Browser External Browser
  • 29. GWT – Architecture
    • Write Java code, some portion of which is compiled into JavaScript
    • Not all of the underlying
    • Java runtime library functionality
    • can be translated to JavaScript
    • syntax of Java regular expressions is similar, but not identical
    • long are mapped onto JavaScript double-precision floating point values
    • does not support subsequent dynamic loading of classes
    • does not support object finalization during garbage collection
    • Can use UI development tools such as GWT Designer
    http:// www.tml.tkk.fi/ Opinnot/T-111.5360/2007/ XForms/Overview.html
  • 30. GWT – Debugging
    • Launch server then GWT client in hosted mode.
    • Click “Compile/Browse” to launch in browser.
    OSGi Server Hosted Browser http/xml http/xml
  • 31. Communication
    • How do these frameworks communicate with the server?
  • 32. RAP – Communication Layout Page Display Page Process Actions Render Changes Page Request Browser Server http://... mouse and key events mouse and key events Lookup Data Server-side representation of browser page update events
  • 33. GWT – Communication Lookup Page Display Page Process Actions Render Changes Page Request Browser Server http://... Lookup Data XMLHttpRequest
  • 34. GWT – Simplified RPC (XMLHttpRequest)
    • IsSerializable (not java.io.Serializable)
      • Java serialization relies on a few mechanisms that are not available in compiled JavaScript, such as dynamic class loading and reflection
    http://code.google.com/support/bin/answer.py?answer=55196&topic=10210
  • 35. GWT – Simplified RPC Example
    • Client: (compiled to JavaScript)
    • public interface MailCommandsAsync {
    • public void getMailItems(AsyncCallback callback);
    • public void getMailItemBody(AsyncCallback callback);
    • }
    • instance = (…) GWT.create(MailCommands.class);
    • ServiceDefTarget target = (ServiceDefTarget) instance;
    • target.setServiceEntryPoint(... + "MailCommands");
    • instance.getMailItems(
    • new AsyncCallback() {
    • public void onSuccess(Object result) {
    • List items = (List) result;
    • … display items …
    • }
    • public void onFailure(Throwable caught) {
    • … notify user of exception …
    • }
    • }
    • );
    • Server:
    • public interface MailCommands extends RemoteService {
    • public List getMailItems();
    • public String getMailItemBody();
    • }
    • public class MailCommandsImpl
    • extends RemoteServiceServlet
    • implements MailCommands
    • {
    • public List getMailItems() {
    • … gather items
    • return items;
    • }
    • ... etc …
    • }
    XMLHttpRequest
  • 36. RAP and GWT – Communication
    • RAP
    • Easy… no extra work… all communication is handled for you
    • GWT
    • More flexible…
      • Optionally cache information on the client
      • Optionally pre-fetch information in background
    • … but more work so what more is required for GWT ?
  • 37. Build and Deployment
    • How are apps built with these frameworks deployed?
  • 38. Build Automation
    • Scripted build process
    • Ant
    • Maven2
    • Roll your own
    • Automation is a must
    • Manual process tends to be error prone over time
    • Scripted build process is very repeatable
    • Consider Continuous Integration
  • 39. RAP – Plug-in Deployment
    • Target Servers
    • Easily deployed as OSGi bundles with included http service
    • Deployed to traditional J2EE Application server using the “Servlet Bridge”
    • Cannot be deployed to a plain web server
    • Plug-in based Build and Deploy Process
    • All plug-ins should be contained in a feature
      • Make the PDE build process easier
    • Run PDE build to generate bundles
      • Reformat code to PDE format
      • Call PDE build
      • Unzip and reformat the PDE build result
    • Upload build result to application server
    • Run deployment scripts on application server
    http://www.eclipse.org/equinox/server/http_in_container.php
  • 40. GWT – Plug-in Deployment
    • Target Servers
    • Can be deployed to an OSGi based server using plug-ins
    • Can be deployed to a more traditional J2EE Application server as WAR file
    • Easily deploy simple apps (e.g. financial calculator… no RPC) to plain web server
    • Plug-in based Build and Deploy Process
    • Switch GWT library jar file (gwt-user.jar ----> gwt-servlet.jar)
    • Call the GWT compiler to compile Java to JavaScript
      • Generated JavaScript placed into a plug-in
    • Run PDE build to generate bundles
      • Reformat code to PDE format
      • Call PDE build
      • Unzip and reformat the PDE build result
    • Upload build result to application server
    • Run deployment scripts on application server
  • 41. GWT – Traditional J2EE Server
    • Target Servers
    • Can be deployed to an OSGi based server using plug-ins
    • Can be deployed to a more traditional J2EE Application server as WAR file
    • Easily deploy simple apps (e.g. financial calculator… no RPC) to plain web server
    • Traditional J2EE based Build and Deploy Process
    • Switch GWT library jar file (gwt-user.jar ----> gwt-servlet.jar)
    • Call the GWT compiler to compile client-side Java to JavaScript
      • Generated JavaScript placed into a plug-in
    • Call javac to compile server-side Java code
    • Create WAR file containing client-side JavaScript and server-side Java
    • Upload build result to application server
    • Run deployment scripts on application server
  • 42. Build and Deploy Summary
    • Build
    • Automation is a must
    • Consider Continuous Integration
    • Deployment
    • Easier to deploy RAP than GWT to an OSGi based server.
    • May be easier to deploy GWT than RAP to a more traditional application server.
    • Construct build scripts such that apps can be deployed both on the local machine and on the server
  • 43. Performance
    • How fast are apps built with these frameworks?
  • 44. Performance – Loading Pages
    • Various load times for our test application…
    • GWT is slightly faster… why?
    • Does this make a drastic difference from an end user’s standpoint?
    0% 50% 0% 50% 15% 35% ½ n/a n/a ½ Traveling Home Traveling Home Traveling Home ¾ ¾ n/a ¾ 2 3 3 3 1 n/a n/a 2 Sort List 1 2 n/a 3 Load Folder 3 5 5 8 Load Page Cached Cached GWT RAP Seconds to load
  • 45. Performance – Image Bundling
    • Look at the whole stack, don’t just look at the application
    • Faster to load one bigger file than many smaller files
    • GWT provides functionality to combine multiple small images into a single large image for efficient transport to the browser
    • This is planned for RAP. Something comparable to image-bundles is just finding its way into Qooxdoo 0.8, and the RAP team will investigate once that is in place.
    • Incorporating this functionality in RAP would reduce the time to load a page.
    http://www.screaming-penguin.com/docs/gwt-1.4.10/doc/html/com.google.gwt.doc.DeveloperGuide.UserInterface.ImageBundles.DefiningAndUsingImageBundle.html MyImageBundle imageBundle = (MyImageBundle) GWT.create(MyImageBundle.class) imageBundle.printerIcon().createImage(); imageBundle.notesIcon().createImage(); imageBundle.editIcon().createImage(); imageBundle.graphIcon().createImage(); …
  • 46. Performance – Communication
    • In general, RAP pushes more work off the client onto the server, thus communicating more information and more frequently with the server.
    Lookup Page Display Page Process Actions Render Changes Page Request Browser Server Lookup Data XMLHttpRequest RAP GWT Layout Page Display Page Process Actions Render Changes Page Request Browser Server mouse and key events mouse and key events Lookup Data
  • 47. Performance – Packets
    • GWT is faster sorting because more information is cached on the client and more processing is kept on the client…
    • … but interesting that in our application, RAP is slightly more efficient loading a folder the first time… why?
    (1) Sort List 6 times by clicking on columns 1, 2, 3, 1, 2, 3 (2) Load a different folder then load the original folder again 349 4 2602 6 Load Again (2) 3827 8 2900 8 Load Folder 4661 11 25390 63 Sort List (1) Bytes Packets Bytes Packets GWT RAP
  • 48. Performance – Virtual Tables
    • RAP passes only the information necessary to display the visible rows in the table
    • In our GWT app, the entire table content is loaded the first time it is needed and cached on the client. We could have loaded only what we needed to reduce the refresh time.
    • Bottom line : GWT is more flexible and potentially faster, but by how much and at what cost (complexity) to the developer?
    RAP GWT
  • 49. Performance – RAP in Eclipse.org
    • EPP working on a RAP wizard Eclipse downloads
    • Load test executed against desktop computer with
    • Core2Duo 2.8 GHz
    • Ubuntu
    • JVM
      • max of 512 MB of heap space
      • concurrent marksweep garbage collector (-UseConcMarkSweepGC)
    • Tomcat 6
    • Jmeter 3.2
  • 50. Performance – RAP in Eclipse.org
    • Throughput of 100 requests/second
    • Average response time of 14 milliseconds
    • Standard deviation of 60 - 80 milliseconds (due to periodic garbage collection)
    • 250 MB of heap needed for 1000 concurrent sessions
    Overhead = 250K / session
  • 51. Unit Testing
    • Both RAP and GWT are based on Java, so…
    • JUnit can be used to test the server-side code
    • But how to test the client-side?
  • 52. RAP – Unit Testing
    • Non-UI code can be tested using standard JUnit
    • UI code can be tested using JUnit (new June 2008)
    public class RapJUnitTest extends RAPTestCase { public void testOpenView() { try { IWorkbenchPage page = getPage(); page.showView( "org.eclipse.rap.demo.DemoTreeViewPartI" ); } catch( PartInitException e ) { e.printStackTrace(); } assertEquals( 1, getPage().getViewReferences().length ); getPage().hideView( getPage().getViewReferences()[ 0 ] ); assertEquals( 0, getPage().getViewReferences().length ); } private IWorkbenchPage getPage() { IWorkbench workbench = PlatformUI.getWorkbench(); IWorkbenchWindow window = workbench.getActiveWorkbenchWindow(); return window.getActivePage(); } } RAP includes a special RAPTestCase base class that provides JUnit integration
  • 53. RAP – as compared to RCP
    • The differences between RCP and RAP are small…
    • … only the underlying libraries are different but with the same API so that you can switch between
    RAP RCP
  • 54. RAP – switching between RWT and SWT
    • Once you import and select your RAP target platform …
    • … and import packages (not bundles) …
    … you can easily switch between SWT and RWT
  • 55. GWT – Unit Testing
    • public class FooTest extends GWTTestCase {
    • // Specifies a module to use when running this test case.
    • public String getModuleName() {
    • return "com.example.foo.Foo";
    • }
    • public void testStuff() {
    • myService.doSomething(arguments, new AsyncCallback() {
    • public void onSuccess(Object result) {
    • finishTest();
    • }
    • public void onFailure(Throwable caught) {
    • … test failed …
    • }
    • });
    • // Set a delay period significantly longer than the event is expected to take.
    • delayTestFinish(500);
    • }
    • }
    http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.JUnitIntegration.html GWT includes a special GWTTestCase base class that provides JUnit integration Must specify GWT module Optional support for asychronous test finish and specification of maximum execution time
  • 56. AJAX Security Issues
    • There are many AJAX security issues and people much more qualified to talk about security than us.
    • Attack vectors include:
    • cross-site scripting (XSS)
    • manipulating client-side logic
    • defeating logic protection techniques
    • function hijacking (client-side code being changed)
    • JavaScript Object Notation (JSON) hijacking
    • denial of service attacks
    • hacking Google Gears
    • Bottom line: Server should not implicitly trust any information inbound from a client
    • Article: http://www.adtmag.com/article.aspx?id=21773
    • Video of security talk at GWT Conference:
    • http://www.ongwt.com/post/2008/01/06/GWT-Conference-:-GWT-Security
  • 57. ATF – AJAX Toolkit Framework
    • Eclipse.org project for AJAX tools in the Eclipse IDE
    ATF RAP and GWT Editing, debugging and deployment of JavaScript Editing and debugging of Java while keeping JavaScript at “arms length” vs http://www.eclipse.org/atf/
  • 58. Thin Wire
    • Similar to GWT but using Swing/AWT
    • http://www.thinwire.com/
    • “ ThinWire Handbook” ISBN: 0132366223
    • Of note: last “news” entry dated 5-30-2007
  • 59. More Information
    • RAP
      • http://www.eclipse.org/rap/
      • http:// www.eclipse.org/rap/demos.php
    • GWT
      • http://code.google.com/webtoolkit/
      • http:// code.google.com/webtoolkit/examples /
      • http://www.asquare.net/gwt/
      • http://code.google.com/p/gwt-ext/ GWT Ext
      • http://extjs.com/products/gxt/ Ext GWT (was MyGWT)
  • 60. Enter to Win
    • Evaluate any of the WindowBuilder family of products by 19 December 2008.
    • Only attendees at this meeting may enter.
    • Begin your product evaluation at http://www.instantiations.com/eclipseusers-se
      • To enter the drawing, you’ll complete a form, then download, install and activate one of these by 19 December.
    Take a card as a reminder
  • 61. Java Tools for Professional Development Teams