如何将Angular 4与Vaadin框架集成

Question

I want to use Angular 4 with a Vaadin 8 Java application in order to push a considerable amount of UI logic to client-side, reduce server round trips, make the client-side functionality available during slow network connections, and make use of the best features of both frameworks. I went through the Vaangular project mentioned on Vaadin and AngularJS - happy together article, but it won't work for my requirement since I use Angular 4.

I tried workarounds like writing JS wrappers and inserting Angular code inside Custom Layouts, but those efforts were not successful. What kind of approach should I take? Can I have an example if available?

Answer 1

Integrating Angular, React or any other client side framework/library with Vaadin framework does not seem to be a good idea because none of these frameworks were meant to work like that.

After communicating the practical use cases in favor of doing more client side logic and managing slow network connections, Vaadin team responded very positively explaining their plans for Vaadin 10 (ie Vaadin Flow), the new face of Vaadin which gives more power for client side work.

As of now, Vaadin team has announced the Developer Preview of Vaadin Flow. With Flow, the traditional Vaadin developers get the privilege to use custom client side elements and logic without much pain.

Flow provides the following methods of interacting with the DOM in the user's web browser:

• HTML-based templates that are bound to server-side Model data.
• A server-side representation of the client-side DOM tree.
• A type-safe Java RPC API for interacting with JavaScript in the browser.

These mechanisms are intended to be encapsulated into reusable components with a high-level Java API.

Please do have a look into these great resources for more information:

1. Vaadin Flow - the next piece of Vaadin 10 is now in developer preview
2. Vaadin Flow Official Documentation
3. Vaadin Elements in Vaadin 10
4. Vaadin Framework 8 roadmap 2017 and beyond