Technology stack:
Client side: GWT Sdk 2.1 / Smart GWT 2.4
Server side: Spring 3 mvc application which returns response in JSON data format. / Tomcat 6
Development tools : Eclipse Helios 3.6 / GWT plug-in / GWT designer plug-in (this has useful features to design the UI, but consumes lot of memory and quite buggy and annoying) / To show debug console: javascript: isc.showConsole()
POC Implementation Approach:
A simple application to use Smart GWT components was designed. The key areas to investigate were – how well the UI components fit together and client server interaction options.
*.gwt.xml defines the GWT module with core classes to be inherited and also the entry point class. The entry point class onModuleLoad() method is the first to be called in the GWT application to load the rest of the UI components.
Used Smart GWT components for layout - VLayout, HLayout and SectionStack for collapsible sections.
Smart GWT ListGrid widget, can easily render the search result data by setting a specific Datasource.
(Note: This notion of datasource is not the same a database datasource; it is just a terminology for abstracting client server communication by Smart GWT).
Various datasource can be used to handle JSON, XML, RPC, etc server responses. These can be found in package : com.smartgwt.client.data.*DataSource
The prototype uses RestDataSource to consume JSON response generated by a Spring MVC 3 application.
Once these components are organized in the Entry point class, using the gwt compiler generate all the JavaScript and HTML code required by the app. This can be deployed to a server.
Initial impressionPros:
- Less JavaScript and HTML to write and maintain.
- Open source Smart GWT code allows viewing code and identifying bugs easily: code source link . Also an active smart GWT development forum is helpful.
- Choice of Smart GWT datasource allows you to mock data for static prototypes and then switch to real web application for data. Also this decouples client UI development from server side build.
- Swing style UI development: Using smart GWT, you get a swing development feel, with components added into container classes and event handlers defined for
Components
- Ready to use components:
Using Smart GWT you get widgets out of the box, but best practise around usage and modification needs to be identified. . Smart GWT has a rich set of ready to use widgets, a showcase is available here
Cons:
- Modular design for building large scale apps is yet to be identified. Initial impression shows SmartGWT is not written with MVP pattern in mind as suggested by Google.
- Unit testing :
How best to make SmartGWT components unit testable needs to be identified. There is not much mention of how the Smart GWT components can be unit tested. If we consider using only GWT, this can be achieved using junit GWTTest case.
TODO:
- Smart GWT or just GWT: Building a GWT application from scratch without using any frameworks will need considerable amount of effort to follow the standard MVP pattern. But this is more flexible and unit testable, though time consuming. GWT best practise suggests using MVP design pattern for building larger applications.
- SmartGWT has its own approach, where you use a widget, introduce a
- datasource into it and you are done. Yet to identify the best practise around building
- such smart GWT components in a modularised (or MVP) fashion.
- Using framework GWT-platform and SmartGWT could be an option to try MVP architecture as mentioned here. This would need more investigation.
- Validation/message/exceptions display and other generic feature support of smart GWT is yet to be investigated.
- Client server architecture: Having Spring MVC + Spring core on the server side and GWT + Smart GWT on the client side could be a good stack of open source technologies, but given that GWT by default uses RPC for client server interaction, usage of these needs to be better evaluated. (esp. authentication/session handling/security etc).
Server side tracing link
Client side Speed tracer link
Appstats for java link
Debug setting:
Run GWT Development Mode
- Go into the Run Configuration menu and create a new Web Application configuration (this little Google g).
- Select the slf4gwt-samples-client-app project and set com.google.gwt.dev.DevMode as the Main Class. On the Server tab uncheck Run built-in server and on the GWT tab set the URL as http://localhost:8080/slf4gwt-samples-server-app.
- Save and run!
- Select the src/main/webapp directory from the project and you are done. Now the GWT development mode runs.
- There will be an Eclipse view called Development Mode, that shows you the URL for development mode. Copy it into your browser.
1. Get google plugin for eclipse
2. Then in eclipse, right click on your project and choose Debug as -> Web Application (running on external server)
3. Enter URL of your web app on tomcat (like http://localhost:8080/YourApp/YourApp.html and eclipse will give you new one - it will add stuff like ?gwt.codesvr=127.0.0.1:9997
And you can hot replace the code as the code will be served from eclipse and not from application deployed in tomcat. So cool. Thanks google
GWT compiler performance tip:
Add
Gwt plugin
Useful links
GWT:
Smart GWT : has rich set of gwt components.
Smart GWT+ GWT +MVP example
GWT debug mode on tomcat link2
Modular GWT
JSON GWT integration :
GWT gui designer
GWT EventBus sample
0 comments:
Post a Comment