RSS

Tag Archives: Hello World

Angular Intro

Episode 34

Talk is cheap. Show me the code.

– Linus Torvalds

          I’ve talked about recruitment and clean code recently, but I haven’t shown you any (or almost any) actual code for some time. Time to fix this. In November 2014 I’ve written articles about GWT and Vaadin. Now I’d like to present you something similar on AngularJS, which seems to be the most popular JavaScript framework nowadays. And despite being JavaScript, it’s actually pretty good. Let’s take a look.

Overview

AngularJS-huge

          Angular is a JavaScript open source front-end, single page, web application framework maintained by Google.

          It provides a standard structure for front-end project part, like GWT, much as Spring provide standard structure for back-end part. Its simplification, because you can do the front-end in Spring too via Spring MVC, and the structure for entire project is also partly defined by Maven or other convention over configuration type build tool, but it’s an idea to start with.

          It is single page framework, also like GWT, meaning Read the rest of this entry »

 
10 Comments

Posted by on September 8, 2016 in News, Spring, Technology

 

Tags: , ,

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

Dreams of Spring

Episode 21

Going back to my project, which was a bit on hold for some time, I finally some time to to move things forward a bit. Just a bit, as you may recall I made a decision to use Spring as a framework and GWT for view. I’ve worked with both for quite some time, but apparently never tried to do anything from scratch. Let’s fix that and start with Spring.

cropped-logo_springbypivotal_horizontal1-645x300

Inspired by Josh Long’s talk on last Jax conference, I’ve checked the Spring Boot. There is a nice website which asks you for:

  • Few descriptive details of your project
  • If you want to use Maven or Gradle. As I mentioned earlier, I will go with Maven.
  • If you want Jar or War. As usually War is the solution.
  • Java or Groovy. Uhm.
  • Java and Spring Boot version

And then several groups of dependencies you can include in your project, like:

  • AOP and Security
  • Data: JDBC, JPA, MongoDB etc
  • I/O: Batch, JMS etc
  • Web: Web application, Websockets, WebServices…
  • Template engines
  • Social: want Facebook integration out of the box? No problem.

For online hello world you probably only need to check web. After filling in all stuff simply hit Generate Project, download, unzip, and put in your Eclipse workspace. Then import from existing Maven project and here it is. You don’t need to download anything and figuring out where to put this and what to add to some eerie xml files. Maven will handle it for you.

To see something in runtime, just put any html page in src/main/ webapp, Add application to your build-in Tomcat, publish and start. Watch console, If everything went smoothly, you should see server starting in less than a second, and then a lovely Spring Boot ascii artish logo followed by some info outputs over a few seconds. You may now check http://localhost:8080/appname/pagename.html and it should present you the very page you have created earlier. Congratulation, you have now Spring application that does nothing useful but starts twenty times longer than simple dynamic web application! What an achievement. Let’s do something with that.

First let’s see what was generated for us.

  • java, annotated with @Configuration, @ComponentScan and @EnableAutoConfiguration and containing good old main method. You don’t actually need any server to run Spring, you can just run this class as Java Application atop of pure JVM.
  • java – used to bind Spring as http request handler when run on server.
  • Some empty junit test for Application class.
  • pom.xml, Maven project definitions and dependencies

Time to add something. We will create a very simple MVC to display “Hello World!” from the depths of backend.

Our back-end in this case will be class marked with @Component annotation, which allows Spring to manage its injection in the Controller class, annotated with, well, @Controller.

service

Controller has a field which will be initiated with our back-end buddy. It also has a method to handle request, and we will annotate this with @RequestMapping(“/*”) meaning it will catch all http requests to our pretty little application. Now we need to return from the method something that will indicate where the request should land, and that’s the job of ModelAndView object initialized with name of page to display.

To tie back-end and front-end together, we will add a model attribute with value provided from our component.

controler

As quick and dirty view we will create a JSP (sorry for that) page, that will reference model with el expression ${message}. Simple as that.

Publish, restart server, type http://localhost:8080/appname/blah in the browser and here it is, your first Spring MVC web application, sweet and shining.

fb125-how-to-train-your-dragon-2-toothless-cute-art-wallpaper

 
3 Comments

Posted by on November 2, 2014 in BookSentry, Spring, Technology

 

Tags: , , ,