Vue GWT, Vue.js Components in Java


At GenMyModel we strive to innovate. On top of our products we also develop new technologies for developers.

This is why we are proud to release Vue GWT. Vue GWT allows you to write Vue.js components in Java using GWT.

Why Vue GWT?

We use GWT heavily in GenMyModel. The editor you enjoy modeling with is written using this technology. It allows us to bring the power of Java frameworks like EMF to the browser.

Some History on GWT

GWT was created more than 12 years ago, at a time when the web was a very different place. JavaScript was not very mature. Browser were not respecting web standards (Internet Explorer 6, just to name one), and the build tools were very primitive.

GWT fixed the interoperability problem by adding a layer of abstraction on top of web technologies. One of those layers was the Widgets. Widgets are an abstraction of basic DOM elements, that you can reuse, and combine to build your page. You can build template using XML, that you can then change dynamically with your Java code.

Widgets were a very cool innovation, and they allowed developers to build complex web apps (like GenMyModel) faster.

What Changed

Since the inception of GWT, lots of things changed on the web. New JavaScript frameworks like AngularJS emerged, allowing for nice things like 2-way data binding. Meaning, no need to modify your template using code, it changes automatically when your data changes!

These days a second generation of those JavaScript frameworks is taking traction (Angular, React and Vue.js). They allow for very effective coding, and great performance. But GWT still has Widgets as a default.

With the introduction of JsInterop in GWT 2.8, we decided to start working to bring one of those libraries to GWT.

We decided for Vue.js. It’s a very light framework, it only focus on writing Components which is exactly what we want. It’s also very well thought and powerful, and has an active and friendly community.

Let’s Dive in Vue GWT

What Can I Do With Vue GWT?

Vue GWT supports most of the features of Vue.js:

  • HTML templates with 2-way data binding
  • Component composition
  • Directives
  • Render functions
  • HTML templates are compiled during Java Compilation (only requires Vue.js runtime)
  • Compatible with existing Vue.js Components

But it also brings some improvements due to the use of Java:

  • Template expressions type checking at compile time
  • Use regular Java Objects and Collections in your templates
  • Supports injection in Components
  • Integrates with GWT Resources and Widgets

Can I Use It in My Own Projects?

Sure! Vue GWT is released under the MIT licence, you can use it to build free or commercial projects. If you make some improvements, don’t hesitate to submit a pull request!

Where do I Start?

If you want to try it out, we have adapted the excellent Vue.js documentation for Vue GWT: Let’s get started.

We hope you enjoy using it in your own projects as we already do at GenMyModel!

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

About the author

Adrien Team

Developper at GenMyModel.

JavaScript lover, Google addict, curious learner and reader.