RSS

Tag Archives: Vaadin

Vaadin Intro

Episode 24

While being in the topic of web framework research: another one I’m considering to use is Vaadin. It has been around for quite some time, over 10 years now, so we can say that it’s mature (or “old”, if you like). Anyway it has large and active community, and is quite popular which is always helpful.

 vaadin-logo-hi

Vaadin is a server side centric framework, meaning that all content is rendered to html and passed to browser on each request. It’s a bit old school approach. Nowadays it’s more popular to keep as much as possible on the client side, mostly as Java Script and communicate with server only when needed. Vaadin guys argue that server side approach is safer, because it’s impossible to temper with the executable code.

There are other pros and cons, but what is important to me, that current version of Vaadin uses GWT as rendering engine. As you may recall from previous article I’m a big fan of GWT, since I believe that having all code in statically typed language under decent IDE control is a must for any non trivial web project (I’m yet to meet a happy Java Script programmer after successful and pleasant refactoring). But enough introduction, let’s get down to business.

To start easily with Vaadin I recommend The Vaadin Book. You can get it for free from Vaadin website (after registration, but still nice move). In short: get the Ivy and Vaadin plugins for Eclipse, then create new Vaadin project. To make things simple, you can ask the plugin to create project stub. We will rewrite it just a bit then to get something similar to what we had in articles about GWT and Spring.

In order to get things going we actually need only two classes. First doesn’t even have any code, just two annotations and a parent. It’s a Servlet class with a standard url mapping (this time as an annotation) and some Vaadin specific configuration to associate with GUI content class. Also, it extends VaadinServlet.

The content class needs to extend UI and implement init method where the page is created and hooked much like in GWT entry point. The @Theme annotation is optional, it provides us a default css and makes our button look nice. I’ve also added a Service class as our “backend”. Since everything is on server side, you don’t need synchronous and asynchronous interfaces, rpc mappings, callback and all that stuff. Just create class and call method (it’s an example, in real life you would want to have some dependency injection here). That’s all, deploy on server, run and enjoy your Hello World.

vaadincode

Comparing to pure GWT, Vaadin is much simpler to start. You don’t need any html to hook your Java code. You don’t need server communication handling. You don’t need module definitions in xml. You don’t need dev mode and all the acrobatics to debug client side code. The price is however page responsiveness. I’m not sure if it’s a high price though, keeping in mind an average modern bandwidth and latency. And you still keep all the luxury of not worrying if your method gets three Cats instead of two Dog it expects.

There is also a possibility to write client side code in pure GWT and integrating it with Vaadin but it pretty much brings all the GWT complications back.

Still better than JavaScript :)

lovely_night_fury___how_to_train_your_dragon_by_mikilake92-d50tuim

 
Leave a comment

Posted by on November 23, 2014 in BookSentry, Technology

 

Tags: , , ,

Google Web Toolkit intro

Episode 22

One hundred days of my writing have passed :) Today we are going to talk about a cool and somehow unique web framework. Meet Google Web Toolkit.

gwt-logo

What makes GWT so cool? You write all the client side stuff in Java, having all the power of statically typed language and power of your favourite IDE at your disposal. Its then automatically compiled to Java Script without having to worry if it’s for IE, Firefox or Chrome. Let’s begin.

First you need to install Google Web Toolkit SDK plugin on your Eclipse. A blue g icon will appear in the tool bar. Click it, Create a Web Application Project, enter name and package, uncheck Use Google App Engine and Generate project sample code as we will start from scratch. After finishing, new project will be created.

We will start with a module, New -> other -> Google Web Toolkit -> Module. Call it hello and finish.

Then we will create an Entry Point Class from the same menu, and use the hello module. Add RootPanel.get().add(new Label(“Hello World”)); in onModuleLoad method.

To root our GWT generated code in the web application, we need a html page, using wizard from the same group. You now need to provide a correct JS path in script src property, starting from the war folder. It should go like that: “<package>.<module>/<package>.<module>.nocache.js”.

Now we will prepare to launch our app in Dev Mode. This is a powerful tool that uses a browsers plugin to communicate with Eclipse plugin, recompile and push changes you made in near real time. After saving Java file, you just hit refresh in the browser and changes will be there. Unfortunately API for dev mode was dropped some time ago (WTF?) so you will have to either downgrade your browser or use older portable version. You will need Firefox 26 or older or Chrome 32 or older. I’ve used Chromium Portable version 24. You can get the plugin here. .

Select your project, Run As -> Web Application. It should start a new view called Development Mode. After several seconds it will start and display the link you should use in your browser with plugin, it will be something like this: http://127.0.0.1:8888/hello.html?gwt.codesvr=127.0.0.1:9997. Follow the link and enjoy your Hello World in GWT.

Let’s quickly look at something more. We will add a call to server in order to get the greeting. Since the client is operating in asynchronous mode, and server does rather the opposite, to tie them up you actually need two interfaces that express the same contract. Both goes to the client package.

On the client side the return type is void, while there is an additional callback argument that will get executed when the call finishes with data we need provided.

Methods on the server side interface returns the String we need and have an annotation @RemoteServiceRelativePath(“greet”) to bind the service implementation with request path.

The concrete service needs to implement our synchronous interface and extend RemoteServiceServlet and be placed in the server package. You will also need an entry in web.xml to bind the service class to servlet name and the servlet url from interface:

gwt web

Having the back-end ready we can come back to our entry point class. First we have to create the service handle. Then we will add a button with ClickHandler that will invoke the service. Finally in the callback code we will add a Label with String computed on the server side. Or, in case of problem, display the message from exception. Here is the Java code:

gwt

When you run this, after pressing the button, the Hello World! will appear after a brief moment.

Unfortunately as of version 2.6 of GWT Java 8 is still not supported, so you can’t exchange listeners definitions with concise lambda syntax yet.

Some people say, that GWT is dying. Lack of support for Dev Mode in newest browsers being primary reason for that often. Well, in fact there is something called Super Dev Mode which is going to fulfill similar role. I hadn’t tried it yet, but perhaps I will have to in future. Also, Vaadin is using GWT as their rendering engine, and they seem to be doing their best to keep GWT alive (they are organizing the GWT.create conference, for example). For me, writing Java code instead of JS is a huge deal. Yeah, there are frameworks for JS to make it more manageable, but still, this is dynamically typed language. No automatic refactoring. No way to automatically find all places where something is called / used. Typo in variable name found only in runtime. Maybe after working a bit with AngularJS, so hyped now, I will change my mind, we will see about that. Also, before committing to GWT in my project I wanted to check out Vaadin. See you next time.

412mtghRr-L

 
1 Comment

Posted by on November 9, 2014 in BookSentry, Technology

 

Tags: , , ,