Close

Why it’s faster to use Vaadin Designer than write Java

I’ve always been against WYSIWYG editors since the early days of Windows GUI design tools, because I felt that with those tools developing good-looking UIs was slower than writing code. I did some testing to find out which one actually is faster: my fingers and Eclipse auto-complete, or Vaadin Designer. I made a pretty simple form and timed my performance. To my surprise, with Designer I was more than 2x more productive. Here’s a side-by-side video of 9 minutes distilled into 30 seconds.

The declarative format of Vaadin doesn’t add any dirty abstraction on top of my components as I still must implement the event handling and logic in Java code. It is undeniably faster to create Vaadin layouts using Vaadin Designer than writing those in Java. It was quite a surprise to me that my 5+ years of experience in Vaadin doesn’t help me much when competing against the quickness of using a graphical design tool. There are a couple of reasons why using Vaadin Designer is faster than using only Java. Here are the features I found to be the biggest productivity boosts.

True WYSIWYG

The most obvious productivity comes from seeing the changes immediately while editing instead of having to re-deploy changes. Even when using some class reloading tool, you may still need to navigate to the view you changed or have some interaction with the application to see your dialog or form you just modified. Designer uses actual Vaadin layouting so what you see in the Design paper is the same you see in browser. The immediate apply of changes is even more prominent when doing modifications to the application theme.

Layout hierarchy visualisation

It’s pretty hard to keep the component tree as an abstract image in your head. UX designers don’t necessarily know how Vaadin layouting works so the view mockups might not have the correct layout components outlined. Instead, you need to figure out what components to use and try to build a correct layout with only Java API, which usually means some amount of trial-and-error. Having the layout displayed correctly while editing makes it easier to concentrate and deliver correct results without a hassle. Even better if you can teach your design person to install Eclipse or IntelliJ and build the UI for you instead of doing static mockup pictures.

Sizing quick-actions

Vaadin Designer displays quick action buttons for setting a full width or height to a component. It also helps you make correctly behaving layouts by hiding the sizing actions when using those would result in an invalid layout by having a relatively sized component inside an auto size component.

Changing component order is faster in Outline

Using drag-and-drop to position components is faster than writing addComponent even with auto-complete. The effect of drag-and-drop is highlighted even more when reordering components.

It’s not just the big features

There are some other features, too, that make me more productive, for example using copy-paste with components, having paper size presets to help do responsive design and the ability to use split-view when doing SASS changes. In the end, even though Designer has its limitations, I tend to pick it up more often than not. I don’t have to go all-in Designer or all-in Java, but I can mix-and-match and use Designer where it’s best suited - building good-looking layouts fast.

Vaadin Designer

Vaadin Designer 1.2 with responsive templates

Vaadin Designer 1.2 comes with powerful new responsive design templates. With the new templates creating responsive application views is easier than ever before.

You use a template by creating a design: File ‣ New ‣ Vaadin Design. With Designer 1.2 you now have four new templates to choose from: Application Menu, Tile Layout, Responsive Form and Data Grid With Editor. All the templates work with all screen sizes. The templates contain style definitions, which means your application must have a custom application theme extending Valo theme, although you don’t need to do any changes to your theme’s SCSS files. If you don’t have a theme folder, the templates don’t look right and the responsive features don’t work. The styles are automatically imported to designs.scss file inside your theme folder.

Application Menu template

The Application Menu template has an action menu on the left side of the view. The menu changes its size and position depending on the screen size. The right side is the application content area, which you should use as a view display for your application views.

Tile Layout template

Tile Layout template is meant to be used in situations, where you need a view with a lot of information pieces to be shown together in a larger screen, but the content needs to adapt for smaller screen sizes too. The most obvious use case is for creating dashboard type views. The template comes with CSS classes you can use to control how the columns of the tile layout for each row are divided.

Responsive Form template

Responsive Form template has a comprehensive set of form fields grouped to sections. The field captions can be shown either on top of the fields or on the left side of the fields. You can use the template as the basis of your form - just remove any fields you don’t need. Naturally, the template displays the fields optimally for all screen sizes.

Data Grid With Editor template

Data Grid With Editor template gives you a data grid with a search field, and an editor form you can show in a row selection. The form is displayed differently depending on the available screen size.

Update to Vaadin Designer 1.2 today

Create good-looking and well designed UIs easily with the new responsive view templates. Update to Designer 1.2 today. I think you’re going to love it. To learn more details on how to use the templates, read this tutorial.

If you are not using Designer yet, check the product page for more details and start your free trial today.

Try Vaadin Designer 1.2

Community Spotlight - December 2016

Time for another episode of Vaadin Community Spotlight. This time I had the opportunity to talk with Ángel Martínez.

Ángel Martínez has a BSc and MSc in Telecommunications Engineering and a Masters degree in Business Development & Digital Marketing. He has more than 10 years experience working in R&D projects related to health care, wellbeing, social inclusion, and independent living. He is the father of Leo and is passionate about climbing, running, and of course, new technologies.

Hi Ángel, it’s great to have you with us for this interview. You have been doing a lot of web development with Vaadin. How did you come upon Vaadin and why did you decide to use it?

First of all, a huge thanks for having me. I’m more than glad to be interviewed by Vaadin. My love story with Vaadin started in 2012, when I had to code the frontend for an R&D project which aim was to release a technological platform that provides daily guidance and support for the informal caregiver community, for the long-term care of their loved ones (elderly people). The (sad) reality was that coding with pure web technologies like HTML, CSS and JavaScript was out of my scope, but I had good expertise developing with Java Programming Language (using both SE and EE flavours). Then, I carried out some research about well-accepted frameworks for Java developers and found The 2014 Decision Maker’s Guide to Java Web Frameworks (thanks a million to the Rebellabs team for writing such a good report). After writing two “Hello world” pieces of code, I was totally in love with Vaadin Framework.

Since then, and until today, I have been using it on a daily basis in both professional and personal projects. I have also been involved in the Community and even had the opportunity to take part in the IBM Vaadin Challenge in 2014, and guess what? I won one of the prizes!

So, how does Vaadin work? Could you briefly explain it for anyone with no previous experience?

The thing I like most about Vaadin is how easy and fast it is to develop a web application from scratch. Do you have some experience coding with pure Java? If so, I bet you a beer that you are able to code and (at least) locally run your own “Hello world” Vaadin application in less than 10 minutes. You will spend more time setting up the working environment, installing the required plugins and so on, than coding it (true story, I am not joking).

What other technologies or libraries are you often using in your Vaadin projects?

Although there are not specific libraries, currently I am very focused in the integration of Vaadin projects with cloud infrastructure, like Google App Engine, Amazon Web Services, and IBM Bluemix. It’s an exciting topic and there are a lot of interesting things to do there!

What are the top features you’d like to see in the upcoming versions of Vaadin Framework?

Although it is a very difficult question, I’d add to my “letter to the three wise men” the following topics: 1) the possibility to develop Vaadin applications on the client side in the same way they are coded on the server side, and 2) a better integration with cloud infrastructures (may I ask for an update in the source code of the GAEServlet class?) and the inclusion of the Viritin plugin to the trunk of Vaadin Framework.

Anything else you'd like to add?

Once and again, thanks a million for giving me the opportunity to answer your questions. Also, many thanks for coding such a good framework and releasing it as Open Source. You are doing an awesome job with this. And of course, please feel free to contact me if you have any questions or doubts. I am more than happy to talk with you on twitter (@angel_cavero) or through my 100% pure Vaadin website (http://deunosyceros.appspot.com).

Thanks Ángel for sharing your thoughts with us!

Try Vaadin today! Read or watch the tutorial