Vaadin vs. Bootstrap

Question

I am planning to make an application that has views with complex forms and logical validation on the client side. I plan to use AJAX for submits and have some visual appeal.

Answer 1

Vaadin

Vaadin in an amazingly good tool for building interactive desktop-style web apps developed in pure Java and delivered via regular web browsers.

Benefits

Vaadin 6, 7, and 8 apps run entirely on the server-side. The JavaScript library automatically installed by Vaadin into the user’s browser window simply:

• Draws on-screen whatever the server-side app tells it to.
• Feeds user actions (clicking, typing, and so on) back to the server for the app to consider and respond.

So there is no "logical validation on the client side" or "html5 validation", at least not from the Vaadin app developer’s point of view. The Vaadin framework may do so under-the-covers in its internal implementation, but that is none of my concern as a Vaadin app developer. That’s the core benefit of Vaadin: I don't care how Vaadin gets my forms onto the user’s screen. As a Vaadin app developer, I am not writing any JavaScript, HTML, DOM, CSS, or AJAX. Just pure Java.

The style is similar to Swing: Instantiate a layout (a form), add labels, add buttons, add fields, add other widgets. Attach validators as needed. Nest additional layouts, for complicated forms. All of that executes in memory on the server-side, all in pure Java. Finally tell the layout to show itself. Poof, like magic, Vaadin tells the browser to display a likeness of that form.

If you want to develop desktop-style business-style apps that happen to be deployed through a web browser, Vaadin is a wonderful tool.

Trade-Offs

Trade-offs include:

• Lots of memory and CPU usage on the server-side.
• Giving up control over the HTML/CSS/JavaScript.

Scaling

Your web app lives on the server, not the client. All your business logic, the users’ entered data, the internal representation of all the users’s forms such as row items in a table, all this lives on the server. Multiply that by number of users. This means a Vaadin app can demand much memory and CPU usage.

That may limit scaling up. But given 64-bit Java, multiple gigs of memory, and multiple cores on even the lowliest of machines such as a Mac mini, scaling-up is likely an issue only for the largest/busiest of apps.

And even in those rarer of large/busy app there may be ways to handle scaling in Vaadin. All of the app lives in a Servlet Session. Some web infrastructure allows such session state to be moved between servers or even persisted out to storage to be picked up by other servers.

Or your app may scale well. Simulations with 11,000 simultaneous clients have been done. See:

• Vaadin Scalability Study - QuickTickets (company blog post)
• Scaling with Vaadin and WildFly Webinar with Arun Gupta (video presentation, YouTube)

Control Over HTML, CSS, JavaScript

If your team is more comfortable or experienced with conventional web app architectures, then Vaadin may not be for you. In Vaadin you write your app entirely in pure Java, and Vaadin translates that to HTML, CSS, and JavaScript automagically.

You can tweak the CSS a bit. And even without touching CSS, Vaadin’s "themes" (Valo, Reindeer) give you much control over colors, sizes, and fonts if you wish to override the defaults. But know that Vaadin is in the “driver’s seat” in generating the HTML & CSS; you are just passenger who is allowed a small bit of “backseat-driving”.

If your goal is something other than developing desktop-style apps, if you want to take full control of the HTML/CSS, then Vaadin may not be for you.

---

Updates

Vaadin 8 released

On Feb 22, 2017, Vaadin 8 was released. Biggest enhancement is re-written data model and data binding API utilizing modern Java features, such as generics with type parameters and lambda expressions. Also, more efficient with memory and CPU.

Vaadin 7 released.

While largely the same architecture as Vaadin 6, 7 is better than ever. See: What's New.

Answer 2

I would go with Rails 3.2 + Bootstrap + Backbone.js, the stack we use here.

• Rails: Nice community, solid platform, very easy to develop for, can deploy to Heroku (God bless Heroku).
• Bootstrap 2.0: HTML5-compliant, nice out-of-the-box features, good community (just look at their github page), sensible js plugins.
• Backbone.js: Very nice for client-heavy applications, plays nice with the rest of the stack (specially jQuery), provides a good user experience when used right, unobstrusive. Specially good for dynamic forms since you can refactor a lot of code using specialized views (autocompletes, tables with multiple items, related select boxes, etc.).

As for documentation, both Rails's and Bootstrap's are top notch and you can find a lot of books about them. Backbone.js, despite its large user base, is more specialized, but you can still find a lot of good screencasts and e-books in the Net (I recommend the works of peepcode and thoughtbot).

Good luck with your app!

PS: Another good point of using Rails is the set of gems and addons you can use. Full text search? Sunspot. Audit and Versioning? PaperTrail. BDD? Cucumber. I suggest you checkout the Ruby Toolbox site.