React and npm capabilities in v7?

Vaadin 6 / 7 / 8
1

Hello everyone

I’m currently in the progress of evaluating possibilities of an existing project using Vaadin v7.0.

Wondering if that version is able to import React components written in JS?
Also wondering if v7 is also able to import npm packages and to access these within Java code?

Couldn’t find that information in your release logs. Thanks for replying.

Cheers
Michael

2

The general rule is that if it’s JavaScript, then you can use it since Vaadin 7 makes it possible to load arbitrary JavaScript files, trigger arbitrary JavaScript execution from the server and even registering a callback that can be invoked from JavaScript.

On the other hand, the capabilities in Vaadin 7 are on a quite low level, so you would most likely end up dealing with some boilerplate. In particular, you would need to manage frontend dependencies and bundling manually.

There are some basic examples in the documentation, e.g. https://vaadin.com/docs/v7/framework/advanced/advanced-javascript.html and https://vaadin.com/docs/v7/framework/articles/IntegratingAJavaScriptComponent.html.

3

Thanks for the quick response. If you don’t mind, I have few more questions:

  1. Are there any examples out there on Github how to instantiate React views from Vaadin v7 within? Only interested in v7 here. And have the compiled JS including React sent to the client without any GWT at all. I still can’t picture a working boilerplate for that version using “getJavaScript().execute(…)” alone

  2. Which is the earliest Vaadin version where you can replace any Java views with React components (the easy way with less boilerplate)? In other words, since when was that introduced?

  3. Are there any solutions out there yet how to replace Vaadin’s GWT completely with React only?

  4. Which is the earliest Vaadin version where you can directly import npm libraries? 8, 9 or higher?

  5. Are there migration notes for e.g. porting Vaadin from v7 to vXYZ in case if we want to make it work with React?

Thanks heaps,
Michael

4

Are there any examples out there on Github how to instantiate React views from Vaadin v7 within

I am not aware of any. Note V7 is quite a bit older system than React, so that probably explains a lot. You can try to Google.

I still can’t picture a working boilerplate for that version using “getJavaScript().execute(…)” alone

In Vaadin 7 you typically require more than that. You could start by studying JavaScript component based add-ons that you can find in Vaadin directory. Here is just one example, there are many

https://vaadin.com/directory/component/ckeditor-wrapper-for-vaadin

Which is the earliest Vaadin version where you can directly import npm libraries? 8, 9 or higher?

Vaadin 14 is actually the first one having integrated support for npm packages in the build system.

Are there any solutions out there yet how to replace Vaadin’s GWT completely with React only?

No. It is also good to note that React covers also other functionality than just components. I would assume that it is possible to use React based JS component which is independent of these other functionalities as JS component in Vaadin.

5

Vaadin versions before 14 support generic JavaScript functionality, but there aren’t any helpers available for things specific to npm. What this means is that if you want to use npm, then it’s up to you to populate package.json, run npm install and use a tool like webpack to bundle the individual JS modules into something that can be loaded in the browser as a single <script> tag. You could then use @JavaScript in Vaadin to have that bundle loaded in the browser. Some npm modules directly publish their APIs into the global JavaScript namespace (i.e. window). For others, you would have to include your own glue script that imports API from specific modules and then exports it as a property on window. As a last step, you could then use executeJavaScript to access anything in the global namespace.

6

Many thanks guys, this helps a lot.

7

Sorry guys, I’ve got one more question in mind:

Pretend you are in a Vaadin v14 project but want to write client-side React components not being rendered on server side, how would you do that? How to pass on the states from Java within?

  • Michael
8

Pretend you are in a Vaadin v14 project but want to write client-side React components not being rendered on server side, how would you do that? How to pass on the states from Java within?

With Vaadin 14, I would recommend doing it in the same way as in our Labs post about LitElement: https://vaadin.com/labs/lit-element

If Vaadin 15 is an alternative for you (its main drawback is that it won’t be maintained anymore in four months when Vaadin 16 is out), then you may also have a look at its stateless endpoints: https://vaadin.com/docs/v15/flow/typescript/accessing-backend.html

9

Thanks for the pointer to lit-element but that’s not really React.

10

The general approach for communicating between server-side Vaadin and anything running in the browser is always based on the same Vaadin mechanisms such as @ClientCallable or @Endpoint.

The differences between e.g. LitElement, React, Angular, jQuery or Angular are quite irrelevant from that point of view because they all share the same basic architecture that builds on top of DOM elements.