Minimized Vaadin servers for IoT solutions

Trimming down the last bytes of deployment artifact size and server startup time has never really been a top priority for business app developers. These measures just need to be within reasonable values, and are seldom essential things in business applications, neither in development or production environments.

Lately we have seen a lot more interest in using Vaadin UIs in embedded systems and IoT solutions, and sometimes running Vaadin based UI’s from really light weight servers, where you want to save all the bytes you can. To help Sven Ruppert with his Vaadin related projects and to finalize my “make jar not war” week, I hacked together two examples with minimalistic jar packaged server+Vaadin setups.

Undertow + Vaadin ~ 5Mb

Undertow is a new sleek web server powering the WildFly application server, which can also be used as a plain servlet container for embedded systems weighing only a couple of megabytes. Also, you can use a programmatic way to define your deployment, freeing your app server of expensive classpath annotation scanning and/or web.xml parsing during startup. The startup time of this kind of server is never measured in seconds :-)

By default Vaadin will add some libraries and source files to the setup and increase the size of the generated überjar closer to 20 megs, but you can get rid of most of the overhead.

These are the tricks I did to bring the jar file size down to about five megabytes:

  • - This service moves the static files generated by GWT compilation into the cloud. And it also does the same for compilation, so there is no need for a vaadin-client-compiled module or the most commonly used setup with an application specific widgetset. The setup also frees some resources from your application server to do more intelligent stuff. This is a great way to save bandwidth if you trust our community maintained CDN and can rely on your end users having an internet connection. The Maven plugin generates a web listener that needs to be registered to the deployment info.
  • Dawn theme - The Dawn theme is a slimmed version of our official Valo theme that delegates font serving to Google’s free font service. I also moved Dawn to be served from an external domain. Note that if you need to serve the theme from your minimalistic server, you probably still want to filter out all scss files as .css.gz and .gif files are all you need from the package during runtime.
  • Excluded sass compiler and other optional dependencies - Vaadin by default supports compiling your theme at runtime. I pretty much always exclude all dependencies related to it as I want to compile my themes in a separate project. The vaadin-server module also contains all server side stuff from GWT projects (Vaadin embeds GWT), which are also almost never needed: I rudely excluded all packages from the überjar.

If you can’t rely on an Internet connection e.g. for some intranet systems, you can still use “CDN-style” methodologies with widgetset and theme. Just set up a separate server into your local network to deliver these static resources, and setup your build so that files generated by theme and widgetset compilation get uploaded to it.

The example setup is available in GitHub.

Jetty 9 + Vaadin = 3.4Mb

Jetty has for a long time been the favorite in these kind of embedded java server setups. I took an example by Sami Ekblad and fine-tuned it with similar tricks as with Undertow, and its artifact became even smaller, only 3.4Mb. If you can manage with an older version of Jetty (or/and Vaadin), I’d guess it could become even smaller.

Are these setups actually good for anything?

Well, that depends on what you are doing. If you really only need Java and a good looking Vaadin UI then why not? You can also extend the setup with some small but powerful Java libraries, and still have a tiny deployment artifact compared to a typical server + war file setup.

But if you are doing anything bigger (e.g. throwing in CDI or JPA), I’d suggest to look into modular application servers like Liberty or jar file based modular approaches, namely Spring Boot or WildFly Swarm. In IoT applications, if you can have your stuff attached to the Internet, it is most probably easier to move the actual UI code to a server with decent resources using an MQTT broker, than to waste your energy on server optimization.

Also, when wasting your time ironing out the last bytes of your server+Vaadin setup, you should remember that the application server and the actual web application are just a slice of what is actually needed by the server. The underlaying OS and JVM will grab a major part of the disk and memory requirements. Before doing too much exercises in this area, be sure to check out if there are other sweet spots to lighten up your server setup.

More about Vaadin Font Icons


Using icons is a quick and effective way to visually represent content on the web. Icons can also aesthetically improve a site’s or application’s visual look and feel. Having all the icons in one font file is a very handy way of working with icons in design applications. Font icons being basically vector graphics you can scale them to any size without losing sharpness. By attaching font icons to your front end you can also style their colour, size and even animate them with CSS. So as a web designer or application developer, who wouldn’t love using font icons?

Font Icons are Awesome!

The most famous and used font icon in web design is Font Awesome. Its popularity has however made it a bit too common and even a little bit boring. Vaadin Font Icons is a new and hopefully fresh competitor for Font Awesome. The most notable difference between the two is the icon’s appearance. Font Awesome icons have rounded corners and Vaadin Font Icons favour sharp edged corners. Both icon fonts are low detailed and silhouette symbols go well together with modern flat design. Simplified icons appear clearly even when used as smaller sizes, as shown in the comparison image below.


The smallest recommended Vaadin Font Icons font size is 16 pixels. They are designed for a 16 pixel grid and the crisp render results are acquired by using font sizes by multiples of 16 pixels, such as 16, 32, 48 and 64.

16 pix


As another addition, Vaadin Font Icons also support ligatures. A ligature is a special character that combines multiple characters. For example, if you are using Vaadin Icon Font and type the four letters h,o,m and e to form the word ‘home’. Ligature settings will automatically combine the characters h, o, m and e to a single word “home” which is depicted by the icon glyph for home. Ligatures are an effective way to handle icons in design applications and web design. Ligatures are meaningful words in a single character. Meaningful words work better for search engines and people who use text-to-speech.


Keep in mind, however, that ligatures are not supported in IE 9 and older.

Icon design work process

First you have to have an idea for an icon. The idea is usually the hardest part of icon design. You have to design a simple yet recognizable shape for the item or action. Pen and paper sketches are a good starting point for drawing down different icon ideas. After finishing the icon idea, you need to draw the icon as a vector graphic. You can use vector programs such as: Adobe Illustrator, Bohemian Codings Sketch or Corel Draw. The main thing about vector graphic drawing applications is that you can use multiple artboards and export individual icons as SVG images. Creating vector paths you should avoid making unnecessary paths and keep the vector object as light as possible.

work in progress

After I have all the individual icons in SVG format, I then import the images to the Icomoon web application. I have to say that Icomoon is an outstanding tool for all who want to create their own icon fonts. Icomoon makes font creating fun and you can use it for free. If you want to have more premium features with cloud support, then you have to pay a small fee. If you want to learn more about Icomoon, go to the web site:


The current version 1.0 of Vaadin Font Icons includes 530 unique icons. Vaadin Font Icons are designed for web applications and have been released under Creative Commons license so you can use it free of charge. We are going to add new icons to the collection and continue improving the Vaadin Font Icons site. Download or check out for more information about the Icons at I hope that you like the icons and find them a useful design asset.

Getting started

If you would like to have the Vaadin Font Icons running in your project then you can go to the Vaadin Font Icons site, download the icon files and see more use case examples: You can also have Vaadin Font Icons as a Vaadin add-on!addon/vaadin-icons-add-on

See Vaadin Font Icons

Community Spotlight - September 2015

Spotlight, featured image

It’s been awhile since we last wrote about new add-ons in Vaadin Directory. Like we promised last month, this time we will take a look at some of the new add-ons and updates available. As usual, there is more new stuff than makes sense to list here. Thank you everyone for your awesome contributions and special thanks to the people continuing to develop and maintain their add-ons past the experimental status and making them stable and truly ready to be used in production. If for some reason you haven’t yet browsed the Vaadin Directory, you definitely should. At the time of writing this, there are over 550 add-ons and more will come every month.

Highlights from the Directory

Here are some of the latest add-ons for your mapping needs:

An add-on called VaadHL wants to tackle the amount of boilerplate code you have to write when developing your CRUD application. Take a look at

There are existing add-ons allowing you to display gauges, but if you want to have simpler and cleaner gauges, there is now a wrapper for JustGage

Vaadin 7.5. and Grid have been out for only a couple of months, but there is already a bunch of nice add-ons. Some of them are experimental and in the early stages of development. Your feedback is even more valuable than usual.


Cloud compiling your widgetset

Have you tried probably the easiest way to use client side Vaadin add-ons? That is "cloud compiling" your widgetset. is a community built service and replacement for the official vaadin-maven-plugin that will delegate the somewhat heavy task of compiling your widgetset to a cloud service. The same service will also host the widgetset and in case somebody has previously used the same application widgetset, the "compilation" takes only the time of one tiny REST call. Definitely worth checking out, especially if you are in the development phase of your project and trying various add-ons from the directory.