Vue.js meets GWT:
The demo application is an expenses entry application with two main components: a form for entering expenses, and a table for displaying expenses. The App component looks like:
As the style tag is not supported into *.html yet (watch this issue for updates), all the styles should be included in a separate *.css for the GWT version. For the component tag names, Vue.js supports the full name, and does the tranformations itself, while in vue-gwt the convention is that the component should end with Component for the .java/.html and if the component is included as a child of any other component it should be included as a kebab-case with the word Component being removed. Example: ExpenseFormComponent is included as a child of AppComponent as expense-form.
The ExpenseForm component looks like:
GWT version ExpenseForm.html</p>
The main difference between the two versions is the type enforcement in:
which requires a special import tag: <vue-gwt:import class="com.gwidgets.client.dto.Currency"/> The ExpenseList component looks like:
GWT version: ExpenseListComponent.html</p>
Once again the GWT version requires the Expense type to be specified.
What do you get with GWT on the top of Vue.js:
At first sight, the code in the .java seems a lot cleaner and better structured. Moreover, vue-gwt adds many checks that can enforce the integrity of data and help avoid going into production with a broken app. One thing that is checked by vue-gwt at compile time is variables intialization. Suppose you are rendenring some lists or tables, and you forgot create the variable in the v-for. For example let’s remove currencies field from AppComponent.java. With vue-gwt, you will get a compile time error and you will not be able to build the application:
[17,8] In AppComponent.html at line 7: Couldn't find variable/method "currencies". Make sure you didn't forget the @JsProperty/@JsMethod annotation.
Another benefit of using vue-gwt is taking advantage of new Java 8 APIs like optionals, streams…etc. Since the 2.8.0 version, features like streams and lambda expression are supported in GWT, and this may be a saver while working on complex transformations and data processing. For example, in the ExpenseListComponent we made use of the stream API to filter the currencies object:
Finally, vue-gwt enforces type checks in templates as mentionned earlier: <tr v-for="Expense expense in expenses">, which can make the application even more robust and resistant to changes introduced to data objects.