Your SlideShare is downloading. ×
0
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
A new' way to program dynamic web applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A new' way to program dynamic web applications

628

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
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. 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
  • 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
  • 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
  • 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
  • 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
  • 6. Almaden Services Research GWT: architecture of a GWT project (client side) Resources Resources (e.g., GIF) Project module, e.g., (e.g., GIF) org.swashup. SwashupDesigner Client-side UI JS Your Java GWTCompiler Your Java Code JS Code Limited to Project.gwt.xml GWT UI (module definition) <<uses>> Project.html widgets and JRE subset JARs JavaScript partial emulation gwt-user.jar (modules, of java.lang and java.util UI widget and more widgets) 6 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
  • 7. Almaden Services Research GWT: architecture of a GWT project (server side) WAR for J2EE OR Automatically done for GWTShell <project-package>.client <project-package>.server (hosted-mode) WEB-INF/lib/*.jar XyzRemoteService. AbcRemoteService AbcRemoteServiceImp. java java /WEB-INF/clases/*.class Effectively OR XyzRemoteServiceImp. servlets /WEB-INF/lib/project.jar XyzRemoteServiceAsync. AbcRemoteServiceAsync java java web.xml JavaScript partial emulation gwt-user.jar JARs Not limited of java.lang and java.util UI widget and more 7 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
  • 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
  • 9. Almaden Services Research GWT: development and tools (cont.) GWTShell GWTCompiler gwt-user.jar JAR JAR (JRE emulation and UI widget) 9 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
  • 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
  • 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
  • 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
  • 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
  • 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
  • 15. Almaden Services Research GWT: simple browser-to-server RPC mechanism <project-package>.client – XyzService interface <<interface>> AsyncCallback • Extends RemoteService + onSuccess( Object ) void • Can throw custom exception + onFailure( Throwable ) : void • Primitive types in signature • IsSerializable class parameters <<ajaxService>> – XyzServiceAsync interface AdminServiceAsync • Matching service methods <<ajaxService>> + login( name, pw, AsyncCallback cb ) : void + logout ( name, AsyncCallback cb ): void • Same signature but: RemoteService – Callback future object parameter – void return type <<ajaxService>> Model objects <<ajaxService>> AdminService SerenityService + login( name, pw) : UserModel – Must implement IsSerializable + logout( name ): void – Use transient for non-serializable <<throws>> members <<exception>> Restricted to JRE emulation subset ServiceException 15 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
  • 16. Almaden Services Research GWT: simple browser-to-server RPC mechanism (cont.) <project-package>.server – XyzServiceImp class <<servlet>> – Extends HttpServlet RemoteServiceServlet <<ajaxService>> No restrictions on imports AdminService + login( name, pw) : UserModel <<servlet>> Make call to back-end tiers + logout( name ): void RemoteServiceServlet – Web services – Databases AdminServiceImp JAR dependencies + login( name, pw) : UserModel + logout( name ): void – Add to GWTShell and GWTCompiler scripts – Include in WAR file 16 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 24. Almaden Services Research Hindi Traditional Chinese Thai Russian Gracias Spanish Thank YouEnglish Obrigado Brazilian Portuguese Arabic Danke German Grazie Italian Merci French Simplified Chinese Tamil Japanese Korean 24 E. M. Maximilien, http://maximilien.org 5 July 2006 © 2006 IBM Corporation

×