Cover Image

Vaadin and React

April 14, 2019 - Reading time: 3 minutes

I've always been a massive fan of Vaadin right from the days I was first introduced to it as the original IT Mill toolkit in 2008 by a former colleague, Long Vuong in Melbourne. At the time we were working with Echo2, another server side Java framework, and I loved the concept of being able to create rich web applications in a language I was familiar with (Java), using a familiar Swing-like paradigm, and most importantly, not having to worry too much about styling, or cross browser compatibility issues. Working with the original IT Mill Toolkit after Echo2 was exciting and over the years I used the toolkit which became Vaadin, as often as possible. Working in large enterprises with lots of Java talent but little design capability, where much of the work involved creating rich web applications that lived behind the corporate firewall and served at most less than 10,000 users, the server side Java nature of the framework was perfectly suited to rapidly delivering value. With very good out of the box styling, and a rich library of components, supported by an extensive add on ecosystem, Vaadin made it possible to deliver rich, fully featured applications at a speed which never failed to impress customers. Whilst other teams got bogged down with trying to re-invent the wheel by rolling their own data grids, dealing with obscure cross browser compatibility issues, and trying to get some half-decent CSS hacked together, we were able to use Vaadin to deliver at exceptional pace.

Fast forward a decade into the world of serverless applications, and server-side Java is a more difficult sell. Paying to host, secure, power, and maintain a physical, or even virtual server for your web application now being replaced by a completely serverless stack - in the AWS ecosystem this is typically HTML and JavaScript assets, hosted in an S3 bucket, and calling out to backend API services implemented as lambdas. In 2011 two technologies emerged that influenced the way modern web applications are created, ReactJS, and Web Components. React has emerged as the de-facto library for building web applications, whilst Web Components are a set of features providing a standard component model for the web.

Whilst React is a pleasure to develop in, I find myself missing the great components provided by Vaadin. Fortunately, Vaadin provides many of their awesome UX components as web components and it turns out including these within your React app is easy. Based on Jens Janssen's excellent article here, I created a simple React + Vaadin app that uses the Star Wars API to grab the names of Star Wars characters and display them in a Vaadin data grid. The result is here and you can grab the code from Github here https://github.com/changamire/vaadin-webcomponent-react.