Team Rapier at Axon Active Ho Chi Minh Branch was assembled with an unusual request: a web application development team without front-end developer. All the client asked for was that the team must consist of competent Java developers. It’s because the team was going to use Vaadin.
Our overall assessment of Vaadin
Vaadin is exceptionally good at what it does, which is allowing Java developers to create websites. Quick, neat, simple, auto responsive, what’s not to like?
Vaadin is primarily used to create internal websites, and in this niche, all of its weaknesses are eliminated.
If you want an elaborate explanation, read on!
What is Vaadin
Vaadin started as a company that builds tools and libraries for web UI development. It went on to build the Vaadin Platform, the solution to build Progressive Web Application by Java.
The platform consists of many tools and components. On the most basic level, you have Vaadin Components and Vaadin Flow. Some of the paid features are Charts, Vaadin Designer, TestBench, and Expert Chat.
Vaadin Flow
Simply put, Vaadin Flow is the pseudo-front-end written in Java. By writing code in Java, Vaadin translates them into corresponding pre-made CSS and HTML.
Since Vaadin directly connects back-end code to browsers, developers don’t need to know front-end frameworks nor client-server communication. This architecture also increases security, since the client-side is only a dummy UI, there are fewer vulnerability concerns. For more information: this is how Vaadin 14 (the latest LTS version) handle browser request.
Vaadin Components
Vaadin components are Java-made web components that are used in Vaadin. They are pre-made, plug & play web elements for your web app. You can find a Vaadin component for any common web element.
There are four types of components:
Free components | Vaadin pre-made | Free |
Community components | Community-made | Free |
Professional components | Vaadin pre-made | Paid |
Custom components | Vaadin custom-made | Paid |
This example shows 3 ways to represent component date picker, with respective codes
And if you don’t like any of these components, just modify or make your own, Vaadin is open-source.
Vaadin pros and cons
Pros
Vaadin is open-source, yet the platform is backed by a company. Thanks to the community and the company’s effort, its codes are clean (well, as clean as it can get) and well documented.
Security: Vaadin is a server-heavy framework; it creates HTML/CSS and handles the communication with them. Usually, this is great, the Vaadin company has all the reasons in the world to use the highest security standard there is, and patch any known bug as soon as possible, after all, they want people to use their platform. When you only have to code back-end, not front-end, and their communication, the likelihood that you create bugs decreases by 66%.
Vaadin creates responsive, progressive web apps that work on all popular web browsers, e.g., Chrome, Firefox, Safari, and platforms, e.g., PC, mobile, tablet. Its architect based on web components is widely supported.
Longevity: Vaadin and its predecessors have been around since 2000. That’s much longer than AngularJS (since 2009), React (since 2013), or Vue.js (since 2014). Also, Vaadin company provides 5-year-support guarantee for their latest LTS, Vaadin 14, release on 14/8/2019, and commit 10-year-support guarantee for enterprise package.
Excellent paid features: Vaadin Designer is a powerful drag & drop UI designer. Vaadin experts are helpful and fast. The paid services are not cheap, but they shorten development time, so in many cases, they can improve your ROI.
Front-end framework is not necessary, but compatible: it’s the best of both worlds.
Finally, Vaadin’s design (not to be confused with Vaadin Designer) is beautiful. If your team has limited front-end or designing capability, then the default Vaadin design should be sufficient.
In team Rapier’s cases, it took typically three days for a competent Java developer with no prior experience with Vaadin to start keeping up with the team.
Cons
The whole point of Vaadin is that it automatically creates HTML and CSS for you. It’s convenient, but you also have less control over the front-end code. The code can bloat quickly and slow down the websites. It’s less of a problem lately, because of the standardization of modern web technologies and practices, Vaadin can gradually simplify their rendered HTML and CSS.
Vaadin websites are only the dummy view, every interaction, even mouse-hover, is done through round-trip to the server. You don’t have to be a web developer to see that it’s a potential problem to traffic load, lag, and DDOS attacks. If your Vaadin website doesn’t have any form of traffic rate limit, it’ll be very susceptible by DDOS, so keep that in mind.
How Vaadin fit our project
Our client’s needs
Our client is an investment management company; they need to follow-up and manage their massive stream of data fast and securely.
The solution is to create an internal Progressive Web App by Vaadin and to put the data coherently on a screen. Since, not only does Vaadin website can handle high interactivity, but also Vaadin Website’s time-to-MVP is very short. This allows the “final product” to be adjusted as feedbacked and learned.
Our project
We built a desktop application with Java, but instead of Swing, we use Vaadin, and it became a web application. This internal website allows employees from any branch and office to access data conveniently.
Thanks to Vaadin Flow, it is effortless to build and to maintain the website. It has a robust back-end, can handle the huge amount of data, yet works fast and quickly. Also, even though the team consists of only Java developers, no designer or front-end specialist, the website has elegant UI UX and data visualization.
Demonstration
Unfortunately, and quite obviously, we can’t showcase our client’s website, but to showcase the Vaadin platform, team Rapier creates a simple interactive website about Covid-19. Data come from https://about-corona.net/documentation.
The website pulls data from API, shows it on a table, allows user to sort, or filter by country, population, number of cases, deaths, and recoverees
Two web developers from team Rapier built this not-so-simple website in their free time across a couple of days, totaled about 6-8 hours. As you can see, the time-to-market is nearly unbeatable. This is because all the complicated tables and data bindings are plug & play Vaadin components.
Final Verdict
Vaadin’s weakness is its server-side architecture, which leads to traffic load and ping problems, limiting its potential as a framework for general websites. However, internal sites have insignificant traffic load, almost no ping from user to sever, may need to perform heavy tasks, and have a low need for design. Thus, it’s much more economical not to spend on design and front-end; instead, have a back-end team build a Vaadin website from A to Z.
But, in its niche, Vaadin’s many features are just redundant. The employees that work with Vaadin internal websites work with their working PCs (most of the time, the PCs and monitor would be the same across a company) and won’t be using a mobile, so cross-platform and responsiveness is wasted. Internal websites don’t need to be beautiful, so Vaadin Designer is quite excessive. On that front, Vaadin’s innate design is already adequate.
When you want to use Vaadin:
Build a modern-UI website only with Java developers
Build web application in one language, ensure type safety, security, avoid context-switching, with official long-term support.
Your team only consists of Java developers.
Your website needs a strong back-end.
You build an internal website.
When you DON’T want to use Vaadin:
Your website takes advantage of client-side.
Your website is static and simple, think landing pages.
Your website needs to be indexable by search engines and SEO friendly.
References
Retrieved May 13, 2020, from https://www.webcomponents.org/
Retrieved May 13, 2020, from https://vaadin.com/docs/v14/flow/introduction/introduction-overview.html
Retrieved May 13, 2020, from https://vaadin.com/pro/expert-chat
Retrieved May 13, 2020, from https://vaadin.com/docs/v8/designer/designer-overview.html
Retrieved May 13, 2020, from https://vaadin.com/components
Retrieved May 13, 2020, from https://about-corona.net/
Retrieved May 13, 2020, from https://vaadin.com/components/vaadin-date-picker/java-examples