ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

When should I use Vaadin as UI (Front End) technology

Updated on November 17, 2016

Preface

While the server side technologies evolved quite rapidly during initial phases of enterprise applications the UI technologies did not evolve with the same speed. But then that’s the history, with the current speed in evolution of UI technologies and the introduction of concepts like User Experience (UX) it’s not easy to choose your UI technology.

Java has gone through a number of love and hate relationships with respect to UI technologies. Right from the Applets in AWT/Swing to JSP/JSF using CSS, Java script, HTML, AJAX and based on frameworks like Struts, Spring MVC and then using few more sophisticated frameworks like Flex, Ext JS, Angular JS, Groovy on Grails, GWT, Wicket, Vaadin using REST or AJAX based calls.

Here is an attempt to share few experiences during working on different applications and trying to cater to varied requirements. One of the organizations I was working on decided to use Vaadin as their UI technology and eventually we were required to, not only understand the technology but to find in what ways it can help. We also wanted to find out the cases where Vaadin might not be the right fit. Let’s get started here.

Web Technologies
Web Technologies | Source

How about coding your entire application in java and not to worry about Java script, JQuery, Ajax calls, Jsps, Tag libraries and CSS

There has been these different mindsets on abstracting the web related details behind a framework that can do all the heavy lifting of generating UI code Vs knowing web technologies well and having control on your UI code. Both these approaches have been around where JSF and later GWT, Flex tried to abstract web related details from developers while Ext JS and Angular JS became more popular as people believed, one had to get his hands dirty with Html, Java script and other nuances of web technologies.

The other factors which affected these decisions were the available skill sets, the cross browser compatibility, reduction in the server trips, security, having the model available on the UI side and binding it with the controls.

According to Vaadin's creators, developers should be able to create robust, simple and maintainable user interfaces using framework, while focusing more on application logic and not worrying a lot about underlying technologies.

Typical vaadin components

Vaadin Components
Vaadin Components | Source

Vaadin architecture and programming model

GWT came up with an innovative model of programming in java and generating JavaScript code to run in the browser. The initial version did not fly due to speed and bugs in the Architecture. In fact google developers discarded GWT at one point to embrace HTML5 and java script, removing all the complexity and abstraction of GWT and came up with Angular JS.

But the situation changed over period of time and GWT managed to improve on issues like long compile time and eventually the productivity. GWT was never designed to be simple. It is more structured and gives lot of importance to code quality and architecture. GWT now being an open source project, has more thriving community and GWT 3.0 would come up with massive improvements.

Vaadin has gone a step ahead. With GWT you still have to touch few part of the UI code, but with Vaadin the developer is completely abstracted from the web technology related details. Vaadin consumes GWT and adds an engine on the browser end, to interact with server side UI components. Vaadin also allows you to add new Widgets to the existing widget set, if one needs more customization. GWT compiler takes care of compiling the new code and adding it to the client side widget set.

Having said that the developer should be aware of how web technologies work and also know the underlying architecture, to take wise design decisions.

Vaadin Architecture is much larger concept and probably a topic for another article But to summarize, it uses GWT and its built-in widgets to render GUI based on HTML and javascript. A javascript engine running in browser and a Vaadin servlet running in server, handle communication between Vaadin client and server side logic. The architecture allows seamless integration of UI components with business services, using spring dependency injection.

Vaadin Architecture
Vaadin Architecture | Source

Vaadin Code Snippet

Here is how a typical Vaadin code looks like. The code snippet creates a button and adds a listener to handle click event. Vaadin takes care of generation of HTML and rendering in the Browser. It also handles the AJAX calls to the server, in case there is any server logic to be called or data to be fetched.

   final VerticalLayout layout = new VerticalLayout();
   layout.setMargin(true);
   setContent(layout);

   Button button = new Button("Click Me");
   button.addClickListener(new Button.ClickListener() {
      public void buttonClick(ClickEvent event) {
         layout.addComponent(new Label("Thank you for clicking"));
      }
   });
   
   layout.addComponent(button);
   

How do I choose my Technology - Ask few questions

With varied degrees of effort every technology can be molded to give you the desired output. The questions is at what cost and how much of effort. It’s not only the development cost but cost for maintainability, reusability and scaling it to the number of users and number of platforms and devices.

Things get really confusing when you are not sure what you really want from your application UI. So the first step is to understand your application, your user base and data you might be dealing with.Ask yourself few questions like ..

  • Is the front end very complex with lot of navigation elements and complex controls like trees grids etc. or is it a plain simple application with few controls?

  • Is the front end required to display lot of data, do you need pagination?

  • How chatty is your application, Are you expecting lot of server trips for fetching data or for validations, as the user interacts with the UI?

  • Do you care about cross browser compatibility or it’s an intranet application based on standard browser mandated by organization?

  • Would application need to have a responsive interface to be compatible with multiple devices?

  • What is your security requirement?

Usage Report for different Web Frameworks from Rebel Labs

Source

Ask more questions

The below questions can also play an important role in particular cases.

  • What is your budget?

  • What kind of skillset you have got for application development?

  • Who is going to maintain the application?

  • Are you envisioning lot of enhancements to the application at later point in time?

  • What is the level of maintainability and reusability of the technology?

  • What kind of support is available?

  • Does it need a license?

  • Do you see a foreseeable amount of roadmap from the organization developing and supporting the technology?

Learning vaadin Step-by-step

First hand experience from author

The most exciting part about Vaadin is its learning curve and simplicity of use and most of the developers used to using complex UI logic and custom built navigation, controls and look and feel, can’t really accept this simplicity. The feeling is, things can’t be so simple and there must be some loopholes with this.

Writing everything in Java with no requirement to really delve into the nitty gritty details of html, JavaScript, jQuery, Ajax calls, JSON, data transfer and conversion etc. can put your development onto a super-fast highway and by the time the other team with a combination of different technology comes up with their design you might be out with your first development release. Whoa!!!

But let’s not be judgmental and be clear on when should you use it and when is it better to look for other options.

Comparison Report for Web Frameworks from Rebel Labs

Source

When is Vaadin the right choice?

  1. Vaadin increases productivity substantially. Think about a situation where you are developing a monolithic application using Swing where the developer does not have to pay a lot of attention to the HTTP protocol and the request and response model. Vaadin replaces your Swing GUI here with a built in support for http calls

  2. If you have a set of developers quite in love with java, but have some decent understanding of html, Java script and Ajax, Vaadin provides a framework that handles most of these web related functionalities for you

  3. When we are developing applications rather than websites? The applications are more of enterprise applications with standard GUI supported by business functionalities, transactions, sessions, data manipulations and workflows. Websites are more of jazzy contents, a lot of pages, complex navigation and absurdly compelling look and feel.

  4. If you have a need for a responsive design and very cool looking front end and do not want to spend lot of time in developing components and themes from scratch, Vaadin can be a right choice.Any Vaadin application can look really cool, with out-of-box Themes and Components

  5. You have an existing monolithic application with Swing UI and you want to convert it to web based application, with few design changes, Vaadin can be better choice, for faster development than a complete redesign from scratch

  6. Vaadin can be used with any language which supports bytecode and runs in JVM. So you have a choice of using Vaadin with Java, Scala or Groovy depending on your comfort.

While traditional web programming is a fun way to spend your time learning new web technologies, you probably want to be productive and concentrate on the application logic

When is Vaadin not the right choice?

  1. If your application is very chatty with lot of interactions with the GUI and having really huge user base, the server trips might make Vaadin application’s response time a nightmare

  2. If there are cases where one needs to use lot of custom controls and look and feel, complicated navigation and require full control of the front end, Vaadin might not be the right choice.

  3. If you came from a background with good understanding of html, JavaScript, JQuery etc. then not having a good control to tweak this in front end might make you feel handicapped and frustrated with Vaadin.

  4. "If you want it done right, do it yourself" is what defines you then Vaadin may not be the best choice for you. Vaadin is for those who are working on real projects in the real world and the productivity, manageable code matters for them.

  5. If you have an existing application with specific look and feel and you are trying to mimic the same using Vaadin rather than starting from scratch, you might find Vaadin to be a difficult animal to tame

Source

Few Other Advantages of Vaadin

  1. Vaadin fits well with Spring and so if you have a team which is quite good at Spring and likes developing loosely coupled applications with dependency injection, Vaadin is for you. It gels really well with reusable custom components and panels ready for injection
  2. Vaadin Team is the biggest asset as they are very prompt and helpful in providing support and the cookbook has extensive examples to get started with
  3. Vaadin keeps things simple and allow you to focus more on your application. This really adds to the productivity and not get caught up into complexities of GUI and server communication
  4. Vaadin makes use of SASS, which stands for Syntactically Awesome Style Sheet language. Sass is an extension of CSS3 that adds nested rules, variables, mixins, selector inheritance, and other features to CSS. Sass provides better responsive support for HTML5 avoid repeatation of CSS statements

What do you like about Vaadin ?

See results

Why people are afraid to use Vaadin

Most of the time the option of using Vaadin as UI technology is prematurely discarded, due to conflicting opinions and debates in various forums. Well, I do not have anything against the competing technologies based on java script handling UI logic using data stores and REST API calls.

But then one has to understand the tradeoff. With Angular and EXT JS, you really need a very sturdy design to make sure the data stores and REST API calls do not convolute your architecture. Having too much of data in browser can make life miserable and well then you really can’t have all your critical validations and business logic in the browser, so eventually you do need a server trip.

So the cost of developing and maintaining an Angular JS or EXT JS application would always be more in the long run compared to Vaadin solely because you are talking about diverse skillsets. You need people who can work on transactional, enterprise system at the server end using java, spring, hibernate and at the same time people who can understand Angular JS controls, data stores, models well and can optimize the design for a balanced separation of data and logic on server side and client end.

With Vaadin, it is straight forward. It’s always on the server side. So unless you have millions of users worldwide and a few million users active at any given point, the benchmarks are not going to change a lot.

Source

Few tips before you choose any technology

  • Always come up with POCs of all the major functionalities that you think might be challenging and would matter in the success of your project. Firsthand experience matters.

  • Do not buy on comparisons available on internet, as there might be very few of them who would have real world experience of using the technology

  • Interact with the user community, support group and the development team working on the technology you are planning to use

Few objections to Vaadin architecture and programming model

DOM Manipulation:

The DOM is not going to be as good as handcrafted. Well I would not want to look at the generated HTML in Vaadin as long as it is performing well and gives me results. I would definitely dive into it, if the performance degrades and I am not getting the right results. But then it’s again about knowing the technology and its strengths and weaknesses and managing the tradeoffs by a better design. It boils down to what are you looking for and what is your ultimate goal.

Customization:

The major outcry of many of the java script lovers is not having a complete visibility of how it works. But in my humble opinion Vaadin does a very good job of keeping the server trips less, making use of Ajax and JSON capabilities, providing customizable theming, providing capability to use custom HTML and CSS layouts, where custom components do not help, not having to deal with HTML, JS, complicated CSS, AJAX and client side data stores at all. Making things much simpler for developers to produce results.

The very reason Vaadin came into existence is to keep programmer away from complicated GUI designs, look and feel and navigation. It provide a standard way of implementation, using out of box controls. If you are developing an application, Vaadin has all the required controls


Vaadin Controls

Source

Lack of standards to support MVP:

Vaadin does not come with any standards defined for implementing MVP on its own. There are add-on components like Vaadin MVP lite, but Vaadin keeps this quite open to the architects and developers to design the layers as per their requirements and do not force any standards. The take over here is, not every application need a clear separation of these layers and with the advantages of separation of concerns, it comes with its own baggage of adding more components and making some of the use cases overly complex. Here is a more detailed analysis of MVP with Vaadin.

Performance:

This is one of the most common objection about Vaadin. Since Vaadin is purely server side framework and is built on GWT, its performance degrades for higher loads. One has to understand that Vaadin uses GWT, but there is a client side engine which takes care of communicating with server side UI engine.

In fact since Vaadin does not store any models on the client side, its performance is much better than some of the heavy JS-REST based applications. With both client and server side approaches some of the type ahead, auto populate features and critical validations, one has to go to server side. Also adding too much of data and logic on client end is not very secure and Vaadin helps you there.

On the outset, performance and too much of HTML are some of the objections against Vaadin and in few cases they might even be valid. But let’s be fare. You never have a silver bullet and the alternatives that you would suggest would lack in most of the areas that Vaadin excels, isn't that true.

Results of Vaadin Scalability Study

Vaadin Scalability Study
Vaadin Scalability Study

Final Words

Remember Vaadin is an innovative technology with a very good industry support that focuses on productivity. If your focus is the ultimate result that puts a smile on customer’s face, helps developer code quickly and comfortably, have good looking UI, satisfy your performance needs ,while not worrying a lot about underlying details, Vaadin is for you.

5 out of 5 stars from 2 ratings of Vaadin

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)