Tuesday, 29 September 2009

Using google Web toolkit (GWT)

I'm inspired right now to try out Google Web Toolkit (GWT) cos it's the latest and greatest tool to develop the hottest web apps, apparently.

I've found some great quotes that you can apply to software development. thought I'd add them hear because it gives context to why I'm look at GWT.

It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change - Charles Darwin
A good software design minimizes the time required to create, modify and maintain the software while achieving acceptable run-time performance - Jim Shore

I view software development as an evolution. Including the things I develop on and for. Thus I prefer to move to best of breed tools asap and develop approaches that can work in any environment. Degrading and upgrading gracefully as I go. the technology for today is old hat for tomorrow. But the concepts never die. I just care whether GWT uses good concepts and thus makes it easy to port my existing approaches to it and then move to the next set of tools when they arrive.

During the process of writing this article I've made some personal discoveries about how this work  fits into my wider goals which gives context to the article. I've realised that I'm basically learning to be a teacher (I'm guessing it takes atleast 10 years to do a reasonable job) and how to develop teaching tools (takes another 10 years). So now that I'm at a uni I'm really on the best path. I've also been programming for 7 or so years so my ability to develop software tools is developing well. I've started teaching tennis here and there and have plans to build some simple teaching tools but this is all taking time because there is so much to learn.

I don't want to rush the learning. that's not my style. I'd rather enjoy the process of learning and teaching and develop and publish tools that help me first. Then see if other people like them. I'm happy with GWT because the process from R&D to deployment and use is super quick and cheap(free) and there are so few barriers to getting something useful up.

It's also easy(relatively) to create tools centred around the user whichever device they use the tool on. By that I mean web based. I love the new mobile devices but I don't see the economics and scalability of writing a tool for each device. The web is the only way I can envisage using the same tool across multiple devices and scenarios. Making use of the capabilities of each device is what I'd prefer to focus on. Hence my interest in GWT. The promise is an environment built on best practises for current and future web tool development. I want to see if it's as good as its hype. So far I'm really impressed. But can I deliver the tools I want and gain the productivity I want and achieve my goals. that's the ultimate test.

so essentially I'm still on the R&D path of using these tools and looking for a longer term tool and skillset. So I'm constantly evaluating whether this is the best tool for now and also the future.

To start I thought I'd go ahead and install it, develop a few things and write about what I find.

First off I had to install it. Followed the getting started guide.

I use Eclipse so the first thing is to install the Google plugin.  The quick start guide sounded easy. Just 3.5 install the tools from http://dl.google.com/eclipse/plugin/3.5. I got problems at the first hurdle. I got a whole load of errors saying 'no repository found'. Yet it wasn't looking at com.google but org.eclipse. I tried downloading the zip files and installing manually. Restarting eclipse and reinstalling. All the usual. There was a helpful FAQ page

I started thinking outside the box and found a tip for "no repository found" errors in Eclipse. From this advice I disabled all the eclipse update sites in preference > install/updates > available software sites. Then tried installing the plugin. It worked like a charm. I added the app engine and GWT and then I was able to create a web application project for the first time. 

Next step. Hello world. Or for this tutorial it's the stockwatcher application

Step 3: Building the user interface
Here I find there is a Widget gallery, part of the Reference Guide, that you can peruse the widgets GWT has to offer as UI components for your interface.

Internationalising a GWT project
So I've just finished the initial stock watcher application. Just took a couple of sittings. I'm really impressed just how much I was able to get working in such a short space of time. Anyway now I can move on to the slightly more advanced tutorials. This one is about how to make and application that works for different countries, regions and markets.

Done. Took about one hour. Didn't rush through. Just went through a simple demo of static string internationalisation. Basically awapping each hard coded sentence into a variable which can be filled with a string for the specific language. You just have to write the translation for variable in each language.

Client Server Communication
Just working through the RPC tutorial. Got to 4. Handling Exceptions. All works fine so far. Just took half an hour.

Unit Tests
Finished the RPC tutorial. Ended up being relatively simple. Moved on to unit testing. Having a bit more trouble. I created the initial test files fine. When I try to run the tests I keep getting the error "com.google.gwt.sample.stockwatcher.client.StockWatcherTest cannot be found". I think it might be because I don't have the GWT command line tools on my path. Turns out I already have so it can't be that. What an antequated thing the class path seems though. I can't believe it's still in use.

What can it be? It all looks fine. The test class is there. A bit of head scratching and some googling later and I found a post about running GWT Junit on eclipse which saved the day. Firstly I added Junit3 to the class path. For some reason the junitcreator script creates the correct "test" folder but it isn't recognised as a package. Not sure if it's a problem with junitcreator or my setup but the simple fix was to save the StockWatcherTest class by dragging it to the root folder. Delete the "test" folder then create a new "source" folder and create the package inside that. Then drag the class back inside. Everything worked fine after that.

Deploy to app engine
This is the part I've been looking forward to throughout this tutorial. How easy is it to deploy all this work to the web. Will it be quick, free and will it work on both the desktop and mobile (my g1 phone).

Well I've completed up to task 2. Just got it up to the server. I had to verify my account through sms, choose an application id, tell it to eclipse and publish. It was just plain easy. The application works exactly the same on my mobile phone as my desktop and it's available to the work without any hassle.

I've also got a bunch of tools to help me manage the service. I'm impressed by the quotas they've made available given this is a free account. For example in a 24 hour period I can have in going and outgoing bandwidth of 1gb each. Ok, if I start doing mashups with video or audio then I might reach this limit but not if I embed the content and stream it from its original source. These are the kinds of things I want to look into. I especially want to see if Google Gears really does work well on the gphone. I want to build dashboards that I can use seamlessly whether a net connection exists or not. I want synchronisation to occur in the background and I want to spend more time delivering the app than worrying about these nitty gritty bits.

Atleast now I have an application and hosting service on which I can test these next steps.

Carried on and created sign functionality using the users api and started saving the stocks on a per user basis. It was a bunch more code than previous steps but it worked a treat. I got up to the 'error handling' section

Finished the tutorials today. I uploaded to http://calichambers.appspot.com/ and all is working fine. I'm all excited now. I can start looking at the apis and implementing some of the features I want to build.

Visualisation API
I think I need to start using the GWT skills I've learnt to create a few dashboards and have a product. So I'll drop the gears work for now and come back later. Instead I think I'll try and get some visualisations sorted because the visualisation api sounds extremely easy to use and I have some files I want to use as data sources.

Gears API
Next on my todo list is to learn about Google gears and how to program for it in GWT. I really want to see if gears works on my G1 cos I want a web app that I can use on the go.

First I'm told I should be a little familiar with the Gears developer site so I'll pop on over there and check it out.

Ok, had a quick browse over the gears background docs. Downloaded the api code and copied to my gwt install folder. Next I'll be going through the tutorial Using the Gears Database Module in a GWT project 

Boo. Hit a hurdle straight away. The basic gears tutorial doesn't follow on neatly from the GWT 1.7 tutorial. It doesn't include the gwt-gears.jar as an external jar through eclipse. It uses command line tools projectCreator and applicationCreator which I haven't used before. I thought I'd just add the external jar to the project. Eclipse didin't throw any errors and happily identified the packages and classes when I copied the lines recommended then run the application.

No joy. Got the error
Property 'gears.installed' not found
When running. This I assume is from the gwt.xml file and implies the ant or other path needs to be adjusted. A quick analysis shows me that the tutorial was compiled against GWT 1.5 but I'm on 1.7.  I also don't have the command line tools listed in my GWT source. So I might just go and get these and create the project files from this. I could also figure out why the gears libraries aren't picked up by the compiler. I could look into the bootstrap sequence for GWT 1.5 or 1.7. Probably worth learning how this stuff puts it all together. I think I'm basically there. Just a few tweaks needed. I also get the decided impression that this is all relatively young and so these are teething issues.

Shame a google for the error returned nothing. Got a bit of luck searching on GWT 1.7 eclipse gears.

Yey, fixed the first error with a simple tip. Now got a new one.



At first glance this looks easier to fix but that's a problem for next time.

As part of the search I found help on an issue I may encounter when programming the offline part of gears in GWT 1.7

Web tools
As an aside It's worth building a list of separate tools to check the results. I just found SunSpider, a javascript benchmark tool, that shows FF3 latest js (TraceMonkey) is faster than Google chromes V8 version. Thus it may be useful if I can use this or another test on the GWT code that's created.

The Google stack
It's also interesting that Google are now getting close to having a complete web stack from operating system to browser to web front and back ends. It's worth asking the question. Is this google stack the equivalent of Microsofts for the 90's?

Well I just got curious about what the canvas tag can do. Found a Tetris like game called Torus that seems to work with no flash or java at all. Just html, javascript and css. The canvas element appears to make this possible. If it's really this usable then boy it's gonna get exciting.

Google Group
Found the developers group and a post 'announcing the GWT 2.0 milestone 1'. Revealing some really useful and important improvements that are coming up.

I also found the google-web-toolkit-incubator. A google code project hosting GWT widgets and libraries before they're incorporated into the GWT core. Just FYI I found it through curiosity. I liked the tree style navigation used in the Getting started with Gears API library reference for GWT. I wanted to find out more so inspected the element in chrome, found the class 'gwt-FastTree' searched for it and found this resource. 

Good to know that Google use their own solutions early to iron out things before signing them fit for the public. Also good that I've already found a tool that I'd really like to use with GWT. I've just completed a short project at work that could do with a tool just like this given that keyboard shortcuts were implemented which is such a usability and accessibility boon.  

Supporting multiple interfaces
Within two to three years it will be possible for users to consume a service or application through their TV, mobile phone, games console and many other devices not just plain old desktop. A key reason for investigating GWT is to get back to focusing on the scratch I want to itch. Making the web faster is a key principle and applies not just to supporting mobile devices but all those that are coming. Getting to the data and making it useful is what people want.

I consider all the layers that we have to support as heavy lifting. Checking javascript, css, html, screen size, operating systems on a million different setups and browsers is not my game. I want to solve problems. So the essence her is that GWT and the tools it includes does as much of this for me as possible. I expect widgets and classes to automatically deal with 80%-90% of the common problems leaving me a smaller more manageable list of things to worry about. This means I focus more on the solution than the bugs and get a more robust and polished solution.

Google have posted a document 'Make the web faster' providing a bunch of useful tools and resources to help us all get things make the web faster and get things done faster. I'm particularly interested in the tools because finding the best web tools is something I find particularly hard.

Other Frameworks
I'm also interested in how GWT compares to other frameworks such as Apaches Geronimo, Mozillas bespin

The modular design should make it easy to use plugins from other vendors within GWT like the extjs GWT extension along with other notable plugins

I just came across a the Closure javascript library and api reference. Already a bit early to be thinking about another javscript code library but apparently it's been developed through gmail, godcs etc so like so much from google it seems worth a try.

Closure is part of the google code labs which lead me to the chart api calendar gadgetsblogger api and tons more. I can see so many exciting opportunities with these tools. Just logging here so I don't forget about them.
Part of the calendar apis is the Calendar Event gadgets API. There's also an embedhelper so I could build my own calendar page with tools around it.

Amalgamating data is such an important aspect since data can be found anywhere these days but you don't want to write lots of different ways of handling it. You just want one way of searching and organising it. Google Fusion Tables could be a useful answer as Tony Hirst explains. Just check out http://tables.googlelabs.com/Home to see the tables currently available.

In terms of how I want to present some of these apps I write I like the idea of creating a google gadget that I can load in iGoogle and other places. In terms of MVC I see the gadget as the view, the GWT layer as the controller and probably the data. in time I'd like to get the data from other sources and use GWt to put it all together.

Apps and frameworks
It's taking a while to get any programming done. Life gets in the way doesn't it. So I started looking around for GWT based applications and frameworks to build on top of and get something usable sooner.

I found

No comments: