RSS

Tag Archives: GWT

Vaadin Intro

23 Nov

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

09 Nov

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: , , ,

Here be dragons

12 Aug

Entry 7, Day 11

It seems that I’m more of a writer than a coder in this little endeavour. Well, old habits die hard, I wrote quite a lot of stuff several years ago, although not really technical. Anyway, this is good. Before you sit to code in the new projects, there are some stuff, you need to discuss with other devs, the Product Owner, Stakeholders/Clients, right? (Yes, devs can talk to Stakeholders directly, even though the PO is their default world interface. It can be very beneficial to the project). So now, let’s wander into the unknown lands of dragons. The enterprise (and less enterprise) technologies. There will be a lot of links.

Usually, there is a number of so called “technologies”, you will want to use. Theoretically, you can write an application using almost pure Java on top of application server (or what the hell, even without the server, just play with sockets manually), but it is impractical to say the least.

Under normal circumstances, the technology choice depends on what you want to achieve, what are the skills in the team at your disposals or other external factors like deals with big nasty software corporations. Since I’m my own client, I’m free to do what I please. I will go for some healthy mix of things that are suitable, fun, that I want to learn, and that I already know, and want to know better. Using only unknown technologies might be more beneficial from the learning point of view, but being struck at every aspect of the application might not be funny (not that I’m a pessimist, but I’ve seen stuff…). So I need some fields, where I know I can go fast to repair my ego if needed.

So, the main technology I will use is Java 8 language, as I’ve mentioned in the previous post.

Of course, since we are talking web application, the backbone of everything is HTML, this is what the user receives at the end.

There must be some kind of presentation technology (unless you are writing some purely backend EDI system or something similar). If you are truly old school, you can go with JSP pages. A bit more modern approach would be JSF or Velocity. There are plenty fish in the sea.

Client likes the application to be responsive. So instead of reloading the entire page, you can do things in the browser, instead of on the server. We can go with JavaScript, Dart, or my favourite: GWT. Actually GWT will do the job with both static and dynamic web content, and it is a Java compiled to JavaScript. I’m a big fan.

Then there is (usually) the framework that simplifies things (or complicates, depending on the framework and usage). Spring is the choice here, since it’s tremendous popularity in recent times. I’ve used it quite a bit, but there is still much to learn for me.

There is an object-relational mapping framework, Hibernate being popular choice.

Those are the core technologies. There will probably be many more, but we are not doing Big Design Up Front, remember? I will add and comment on new stuff as needed.

By the way, I think the word technology is sometimes an overkill when it comes to software. Nuclear bomb is a technology. Internal combustion engine is a technology. Microprocessor is a technology. Although Wikipedia says that technology is “collection of tools, including machinery, modifications, arrangements and procedures used by humans”, it seems to me that a piece of software written by a guy over several evenings while drinking beer shouldn’t be called that. Not that I don’t respect contribution to mankind well being, but there is a matter of scale. Probably “library” is sometimes a better word than “technology”.

dragons

 

 
Leave a comment

Posted by on August 12, 2014 in BookSentry, Technology

 

Tags: , , ,