CODEWITHSUNDEEP
vaadin
Jonathan Sylvester
Jonathan Sylvester

Reputation: 1329

Vaadin 8+ components in Vaadin 12+?

I was searching for as-attractive-as-possible "stepper" for use in Vaadin, and I found this link:

https://vaadin.com/directory/component/material-design-stepper-add-on/links

However, it appears to be for Vaadin 8. Can it be used (well?) in Vaadin 12? (I'm a newbie to Vaadin). If not, is there a "recommended" approach if one wants an attractive looking stepper (that's robust/tested) with minimal effort? (I assume that the answer would be to use something like this https://www.npmjs.com/package/react-stepper-horizontal and integrate it somehow with Vaadin? I haven't quite learned how to integrate Vaadin 12 with non-Vaadin components, though I believe that that's something that Vaadin can do easily and that in general, pre-existing react component may be far better supported than one that a single community member built in Vaadin 8?)

Upvotes: 1

Views: 489

Answers (3)

Basil Bourque
Basil Bourque

Reputation: 339669

GWT

The underlying technology used to build widgets in Vaadin 6, 7, and 8 is Google Web Toolkit (GWT).

Web Components

In a major rewrite of its core technology, Vaadin Flow (Vaadin 10, 11, 12, and later) is using Web Components instead of GWT for building widgets.

Compatibility

So, no, widgets built for Vaadin 8 cannot be used directly in Vaadin Flow.

However… The Vaadin Ltd company does sell a compatibility layer which allows Vaadin 8 programming and widgets to be run within a Vaadin Flow app. This is known as their Multiplatform Runtime. This is aimed at people who want to gradually migrate their existing web app from the old architecture to the new. Probably not the best route for someone starting with Vaadin, but it is a possibility.

Just use Vaadin 8

Vaadin 8 continues to be actively developed, and will be supported for years to come. See the company roadmap. Discussed in their blog such as this post. Right now, Vaadin 8.7 is in beta, as its development continues. Vaadin Ltd uses a radid-release-train schedule, with quarterly releases scheduled for Vaadin 8.

Vaadin 8 is proven, well-worn software with a track record. It is entirely practical to focus your learning and development efforts on Vaadin 8. Many of the concepts carry over to Vaadin Flow, such as their Data Model and binding technology.

The newer Vaadin Flow does not yet have all the features of Vaadin 8 such as a menu bar widget, and its cutting-edge technology is still evolving. The Vaadin Ltd company is betting their future on Flow & Web Components, but Vaadin 8 is still their most polished and currently viable offering. And, yes, the company is capable of actively developing more than one version line at a time. They have a proven track record of advancing and maintaining 6, 7, and 8 with overlapping years of effort.

So if there widgets for Vaadin 8 that are vital to your app, just use Vaadin 8.

Just use Vaadin Flow

If there are widgets that are vital for app that are built for Vaadin Flow, or are Web Components based that you want to wrap as widgets for Flow, then use Vaadin Flow.

Yes, you can make use of Web Components widgets within Vaadin Flow. And vice versa, you can use Vaadin components in other environments such as Polymer. That is the entire point of the Web Components technology, to make components that are pluggable across various frameworks. See the Vaadin Ltd site for some documentation and blog posts on the subject. They also sell training and consulting services to aid you in that effort.

Comparing

Fer help in comparing Vaadin 8 and Vaadin Flow, see the blog post, V8 vs. V10 - two maintained Vaadin versions, which one to choose? by Matti Tahvonen.

Upvotes: 1

Jordi Argente Vidal
Jordi Argente Vidal

Reputation: 1

The React component that you mention, I'm sorry to tell you that it can not be coupled.

This component is built with Polymer 2.0+, so you should be able to couple it with Vaadin 12+. https://vaadin.com/directory/component/collabornepaper-stepper/2.1.3/overview

Upvotes: 0

Leif Åstrand
Leif Åstrand

Reputation: 8001

Components created for Vaadin 8 or older cannot easily be adopted for use with Vaadin 10 or newer.

I would instead recommend looking for a general purpose web component that does the trick (https://vaadin.com/directory/search?framework=Polymer%202) and then create a simple Java integration for it based on https://vaadin.com/docs/v12/flow/web-components/integrating-a-web-component.html.

react-stepper-horizontal that you're linking to is not a generic web component, so it will not work outside React.

Upvotes: 2

Related Questions