Hide Notes 

Slide 1: Almaden Services Research A ‘new’ way to program dynamic web applications E. M. (Max) Maximilien, http://maximilien.org E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 2: Almaden Services Research Agenda The past – Overview of typical AJAX development – Problems and opportunities The present: Google Web Toolkit (GWT) – Architecture of a GWT project – Development cycle and tools – Widget UI library – Simple browser-to-server RPC – JavaScript native interface (JSNI) – Calling Web services – Deployment and other tricks The good, the bad, and the ugly Terms, agreement, and licensing (IANAL) Other thoughts 2 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 3: Almaden Services Research The past: typical AJAX web application development AJAX – asynchronous JavaScript and XML – Client-side JavaScript (JS) to asynchronously fetch data – To dynamically modify client page using DOM API Typical development stack – Java • J2EE compatible server, e.g., Tomcat or WebSphere application server • Model View Controller (MVC) web application framework, e.g., Struts • Java Server Pages (JSP) templates, tag libraries, and scriptlets for Views – Ruby • Similar except use Rails, RHTML, and JS libraries • RJS is an improvement (still in development) – Embed JavaScript for AJAX functionality in JSP • JS libraries such as scriptalicious, prototype, effects, dojo, Yahoo! UI, and others – Cascading Style Sheets (CSS) for View styling 3 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 4: Almaden Services Research The past: problems and opportunities Problems – Multiple languages and frameworks across stack – Mixing JS, JSP tags, Java, XML, and other config files leads to • • • • Maintenance nightmare Less modularization Less reusable code (Views) Breaks MVC principles – Complicated debugging and testing (different browsers) Opportunities – Simplify AJAX web development with one language – Address maintenance, debugging, and modularization issues – Abstract client-side JS as browser assembly code! – The browser as another targeted “device” 4 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 5: Almaden Services Research The present: Google Web Toolkit (GWT) Java-to-JavaScript compiler Shell to test and debug modules without compilation Partial JS emulated versions for JRE packages – java.lang.* – java.util.* UI widget library (not AWT and not Swing) Simple asynchronous browser-to-server RPC Development tools, e.g., applicationCreator, projectCreator, and junitCreator Not new! Microsoft ASP.NET is similar and released years ago – However, limited to .NET and IE – Not sure of current status (likely more open) Seaside (based on Squeak Smalltalk dialect) is a Smalltalk-based OO framework for coding web applications Any other similar compilers and frameworks for other languages? 5 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 6: Almaden Services Research GWT: architecture of a GWT project (client side) Resources (e.g., GIF) Client-side UI Your Java Your Java Code Code GWTCompiler Resources (e.g., GIF) Project module, e.g., org.swashup. SwashupDesigner JS JS Limited to GWT UI widgets and JRE subset Project.gwt.xml (module definition) <<uses>> Project.html JARs (modules, widgets) JavaScript partial emulation of java.lang and java.util gwt-user.jar UI widget and more 6 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 7: Almaden Services Research GWT: architecture of a GWT project (server side) WAR for J2EE OR Automatically done for GWTShell (hosted-mode) <project-package>.client <project-package>.server WEB-INF/lib/*.jar XyzRemoteService. AbcRemoteService java AbcRemoteServiceImp. java /WEB-INF/clases/*.class OR /WEB-INF/lib/project.jar XyzRemoteServiceAsync. AbcRemoteServiceAsync java XyzRemoteServiceImp. java Effectively servlets web.xml JavaScript partial emulation of java.lang and java.util gwt-user.jar UI widget and more JARs Not limited 7 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 8: Almaden Services Research GWT: development cycle and tools Hosted-mode – GWTShell – Quick code-test cycle – Style with CSS Web-mode – GWTCompiler • Module (Java) compiled as JS and HTML – Style with CSS – Deploy into J2EE compliant server – Test using IE, FireFox, Safari, and Opera as client browser 8 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 9: Almaden Services Research GWT: development and tools (cont.) GWTShell GWTCompiler JAR gwt-user.jar (JRE emulation and UI widget) JAR 9 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 10: Almaden Services Research GWT: package diagram com.google.gwt.core.client com.google.gwt.core.ext com.google.gwt.core.ext.typeinfo com.google.gwt.core.junit.client com.google.gwt.core.user.client com.google.gwt.core.user.client.ui com.google.gwt.core.user.client.rpc com.google.gwt.core.user.server.rpc 10 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 11: Almaden Services Research GWT: UI widget library, listeners, and other Widgets Button, CheckBox, TextBox, PasswordTextBox, TextArea, DialogBox, FlexTable, Label, ListBox, MenuBar, MenuItem, Tree, TreeItem, Widget HTML, HTMLTable, Hyperlink Composite to create custom composed widget Panels Panel, SimplePanel, VerticalPanel, HorizontalPanel, DockPanel, DeckPanel, PopupPanel, ScrollPanel, RootPanel Listeners ChangeListener, ClickListener, KeyboardLister, MouseListener, FocusListener, LoadListener, TreeListener, TabListener Other interfaces EntryPoint, IsSerializable, RemoteService, AsyncCallback, Has<Xyz>, Sources<Xyz>Events Other classes GWT, Window, History, Timer, Random, DOM, Cookies, JavaScriptObject, and others Exceptions InvocationException, SerializableException 11 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 12: Almaden Services Research GWT: UI widget library, listeners, and other (cont.) 12 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 13: Almaden Services Research GWT: UI widget library, listeners, and other (cont.) Pictures from GWT web site: http://code.google.com/webtoolkit 13 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 14: Almaden Services Research GWT: UI widget library, listeners, and other (cont.) DockPanel FlowPanel VerticalPanel HorizontalPanel Pictures from GWT web site: http://code.google.com/webtoolkit 14 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 15: Almaden Services Research GWT: simple browser-to-server RPC mechanism <project-package>.client – XyzService interface • • • • Extends RemoteService Can throw custom exception Primitive types in signature IsSerializable class parameters <<interface>> AsyncCallback + onSuccess( Object ) void + onFailure( Throwable ) : void – XyzServiceAsync interface • Matching service methods • Same signature but: – Callback future object parameter – void return type <<ajaxService>> RemoteService <<ajaxService>> AdminServiceAsync + login( name, pw, AsyncCallback cb ) : void + logout ( name, AsyncCallback cb ): void Model objects – Must implement IsSerializable – Use transient for non-serializable members Restricted to JRE emulation subset <<ajaxService>> SerenityService <<ajaxService>> AdminService + login( name, pw) : UserModel + logout( name ): void <<throws>> <<exception>> ServiceException 15 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 16: Almaden Services Research GWT: simple browser-to-server RPC mechanism (cont.) <project-package>.server – XyzServiceImp class – Extends RemoteServiceServlet No restrictions on imports Make call to back-end tiers – Web services – Databases JAR dependencies – Add to GWTShell and GWTCompiler scripts – Include in WAR file AdminServiceImp + login( name, pw) : UserModel + logout( name ): void <<ajaxService>> AdminService + login( name, pw) : UserModel + logout( name ): void <<servlet>> RemoteServiceServlet <<servlet>> HttpServlet 16 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 17: Almaden Services Research GWT: simple browser-to-server RPC mechanism (cont.) //Example client of AdminService.login AdminServiceAsync adminAsync = getAdminServiceAsync(); //… String name = nameTextBox.getText(); String password = passwordTextBox.getText(); adminAsync.login( name, password, new AsyncCallback() { public void onSuccess( Object result ) { UserModel user = (UserModel)result; //Do post-login processing } public void onFailure( Throwable throwable ) { //Process login failure Window.alert( “Error login, invalid user name or password” ); } }); 17 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 18: Almaden Services Research GWT: JavaScript native interface (JSNI) Java native code extension – Use native keyword on method – Call Java methods and other JS code – Pass JS object (JavaScriptObject) to Java Example: public class Native { public static native void callNative() /*-{ $wnd.alert(“Hello from JavaScript!”); }-*/; public native void callJavaNative() /*-{ this@com.google.gwt.client. Window::alert(Ljava/lang/String;) (“Hello called from JavaScript!”);}-*/ } Customize generated widget code Fine-grained control over client JS 18 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 19: Almaden Services Research GWT: calling web services (back-end) Include web services (WS) proxies JARs Define client model objects Cache (optional) – AJAX server cache – Browser client cache Use browser-to-server RPC – Move data from server cache to client cache – Browser-to-server RPC call equivalent to: • One WS call • Aggregate multiple WS calls 19 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 20: Almaden Services Research GWT: deployment and other tricks GWTShell – Uses embedded version of Tomcat – Add dependency JARs in <Project>-compile and <Project>shell scripts (generated by applicationCreator) Deploying as WAR – Include gwt-user.jar – Include other JAR dependencies in WEB-INF/lib/ – Include www/<project-module-directory>/* in WAR – Add RPC service entries in web.xml Mix environment – Add JAR dependencies into WAR (as above) – Add <module> … </module> in JSP (or other) template header – Add RPC service entries in web.xml 20 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 21: Almaden Services Research The good, the bad, and the ugly The good – All things mentioned earlier – Java development tools, e.g., Eclipse, IDEAJ, and others – Excellent browser-to-server RPC – Performance seems on par with custom JS code – Ability to hand-craft JS code with JSNI The bad – Layouts and panels and some widgets have bugs – Some limitations in JRE emulation – Issues running on Windows XP (not sure of details) The ugly – No i18n or accessibility support – Browser compatibility pretty good but issues with some IE versions – Licensing terms and agreement – half OSS ☺ and half proprietary 21 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 22: Almaden Services Research Terms, agreement, and licensing (IANAL) Apache 2.0 license – UI widgets – Other libraries No restrictions in generated code (no IP restrictions) Compiler, tools, and shell under different terms and agreement Cannot repackage tools Shell “pings” home; although Google claims only for usage statistics and update purposes… What’s in it for Google? 22 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 23: Almaden Services Research Other thoughts GWT and the likes – Paradigm shift in web development – Unified and streamlined development – Needed if AJAX is to be widely successful • Maintenance, debugging, development scalability, and so on The browser as development client platform GWT is still at version 1.0.21 – Expect more stable future versions – Better cross-browser support (better IE support) – Mac support – I18n and accessibility Predict support for advance UI, i.e., drag-and-drop, animation, and so on Predict widget libraries on top of GWT by Google and third parties 23 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
Slide 24: Almaden Services Research Hindi Traditional Chinese Thai Russian Gracias Spanish Thank You English Obrigado Brazilian Portuguese Arabic Danke Grazie Italian Simplified Chinese German Merci French Tamil Japanese Korean 24 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation