Close

We Are Vaadin - Devarsh Desai

I caught up with Devarsh Desai on an Ask Me Anything session via Skype. We discussed how the last few months have been, the challenges he faces ahead, and any advice he might have for new candidates.

Devarsh met the team at an HTML5 Developer Group talk at Google in San Francisco. “It was actually my first introduction to Vaadin’s work with Polymer and had a really good time that evening. As luck would have it, I began speaking with Vaadin’s recruitment team a week later, hit it off with the US engineering group a couple of days after that and before I knew it, I was wrapping up my on-site interviews”.

He’s enjoyed working on his first case project which deals with an end-to-end platform for the registration, management and delivery of geofences. “The intersection of business knowledge required to lead a project as well as the technical competency for the implementation is a lot of fun. Within a couple of hours on any given day, we’ve had meetings with CEOs and CTOs on the direction of our project and then immediately after that an internal talk on Shadow DOMs and Shady DOMs. The dichotomy between business and technology is great, and I’m pretty fortunate to be able to learn on both those topics.”

Life is a continuous learning curve and Devarsh is studying at UC Berkeley. “I’m also a phlebotomist, that means I take samples from my patients through their antecubital veins in their arms and hands. The biggest thing I’ve learned is how to listen to my patients. It’s an invaluable skill, and I try to make my customer meetings a reflection of the same critical thinking. I’m also concurrently enrolled at U.C. Berkeley where I study chemistry. While it doesn’t directly translate into a beneficial relationship for work, I’m fortunate that I’m able to study while working full time, and that refreshed feeling I get from studying the hard sciences makes my day that much better.”

It is great to see new faces, personalities and skills at Vaadin. If you haven’t seen them yet, also check out Sebastian from the Berlin office and Johannes from Vaadin HQ before to get to know more people at Vaadin.

To see yourself here, check out the open positions at vaadin.com/jobs and apply today. If you have any questions or comments, leave a comment below!

Vaadin Grid 1.2.0-beta Released

The Vaadin Elements team is hard at work bringing more features to Vaadin Core Elements, and we’d like to share the release of vaadin-grid 1.2.0-beta1. This pre-release will let you use the latest version of vaadin-grid while we finalize the stable release of vaadin-grid 1.2.0.

In addition to bug fixes and optimizations, this 1.2.0 beta release introduces the much requested dynamic column reordering for vaadin-grid.

  • vaadin-grid now allows non-frozen columns to be dragged and reordered. This change was the result of a dedicated community member taking on this feature and running with it. This is the power of open source!
  • vaadin-grid columns can now be resized. This was another contribution from the same community members that added column reordering.
  • vaadin-grid 1.2 beta also includes default sorting functions for array data. Just add and array and mark a column as sortable to enable sorting.

Test Drive Vaadin Grid 1.2 Beta

To install the beta release of vaadin-grid 1.2 with bower, run the following command from your project folder:
$ bower install --save vaadin-grid#~1.2.0-beta1

To revert back to the stable release, run:

$ bower install --save vaadin-grid

To enable column reordering change your code to read:

<vaadin-grid column-reordering-allowed="">
  <!-- ... -->
</vaadin-grid>

To allow a column to be resized, add the resizable property to your column:

<col resizable>

See all Vaadin Elements and examples

How to use GWT 2.8 in Vaadin applications today

GWT 2.8 brings a bunch of interesting new features and improvements for Vaadin client-side developers. Some of the most interesting features are Java 8 support and a matured JsInterop. You can catch up with other new developments from the GWT Release Notes. At the time of writing this, GWT 2.8 is in its release candidate phase.

In this post I’m going to show you how to use GWT 2.8 today when doing Vaadin client-side development. I’m going to use the Vaadin archetype widget as our example project. I’m using the newly released Vaadin 7.7 as that has changed the way Vaadin depends on GWT and thus makes using a custom GWT version simpler than ever before.

The sample project is available on GitHub. The first five commits correspond to the sections in this post so you can see exactly what was changed in each step.

Creating a project to work with

Let’s start by creating a project to work with. You can use the Maven command line:

mvn -B archetype:generate \
    -DarchetypeGroupId=com.vaadin \
    -DarchetypeArtifactId=vaadin-archetype-widget \
    -DarchetypeVersion=7.7.0 \
    -DgroupId=org.test \
    -DartifactId=widget \
    -Dversion=1.0-SNAPSHOT

or your IDE of choice to materialize a project.

Change GWT dependencies

If we take a look at the addon sub-module’s dependency tree using mvn dependency:tree, we can see some GWT 2.7 dependencies are brought in by com.vaadin:vaadin-client

$ mvn dependency:tree

--- maven-dependency-plugin:2.8:tree (default-cli) @ widget ---
org.test:widget:jar:1.0-SNAPSHOT
+- com.vaadin:vaadin-server:jar:7.7.0:compile
|  +- com.vaadin:vaadin-sass-compiler:jar:0.9.13:compile
|  |  +- org.w3c.css:sac:jar:1.3:compile
|  |  +- com.vaadin.external.flute:flute:jar:1.3.0.gg2:compile
|  |  \- com.yahoo.platform.yui:yuicompressor:jar:2.4.8:compile
|  |     \- rhino:js:jar:1.7R2:compile
|  +- com.vaadin:vaadin-shared:jar:7.7.0:compile
|  \- org.jsoup:jsoup:jar:1.8.3:compile
+- com.vaadin:vaadin-client:jar:7.7.0:provided
|  \- com.vaadin.external.gwt:gwt-elemental:jar:2.7.0.vaadin3:provided
|     \- com.vaadin.external.gwt:gwt-user:jar:2.7.0.vaadin3:provided
|        +- javax.validation:validation-api:jar:1.0.0.GA:provided
|        \- javax.validation:validation-api:jar:sources:1.0.0.GA:provide
\- junit:junit:jar:4.8.1:test
------------------------------------------------------------------------

These are practically the same as official GWT modules, but built by us to a different groupId. We need to exclude these dependencies and introduce equivalent GWT 2.8 dependencies. This can be done by adding an exclude rule to the pom.xml in the com.vaadin:vaadin-client section:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-client</artifactId>
    <version>${vaadin.version}</version>
    <scope>provided</scope>
    <exclusions>
             <exclusion>
                   <groupId>com.vaadin.external.gwt</groupId>
                   <artifactId>gwt-elemental</artifactId>
             </exclusion>
    </exclusions>
</dependency>

 

And let’s introduce an equivalent GWT 2.8 dependency:

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-elemental</artifactId>
    <version>2.8.0-rc2</version>
    <scope>provided</scope>
</dependency>

Now we can build & install the project (run mvn clean install in the addon module) and move on to the demo project where the actual widget set compilation happens. Again we can run mvn dependency:tree to identify dependencies we need to change. Add the following exclude rules to the pom:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-client-compiler</artifactId>
    <scope>provided</scope>
    <exclusions>
          <exclusion>
                  <groupId>com.vaadin.external.gwt</groupId>
                  <artifactId>gwt-dev</artifactId>
              </exclusion>
              <exclusion>
                  <groupId>com.vaadin.external.gwt</groupId>
                  <artifactId>gwt-elemental</artifactId>
              </exclusion>
    </exclusions>
</dependency>

And add equivalent GWT 2.8 dependencies:

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-dev</artifactId>
    <version>2.8.0-rc2</version>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-elemental</artifactId>
    <version>2.8.0-rc2</version>
    <scope>provided</scope>
</dependency>

Change to use the GWT 2.8 compiler

Normally Vaadin Maven projects use the vaadin-maven-plugin to compile the widgetset. We want to use the upstream gwt-maven-plugin instead. Let’s first configure the vaadin-maven-plugin to generate the widget set in a directory where the gwt-maven-plugin can find it. Add the following configuration section to vaadin-maven-plugin:

<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>
<configuration>
   <generatedWidgetsetDirectory>${basedir}/src/main/java</generatedWidgetsetDirectory>
</configuration>

Before generating the widget set, make sure that there is no existing *.gwt.xml files in the demo project, as the Vaadin plugin will only create a new widget set into src/main/java if there is no existing widget set it can update. To generate the widget set just run mvn vaadin:update-widgetset.

Next we can remove or comment out the compile goal from vaadin-maven-plugin as we’ll use the upstream GWT compiler for that:

<goal>resources</goal>
<!-- <goal>compile</goal> -->
<goal>update-widgetset</goal>

Last modification we need to do to the pom.xml is to add the gwt-maven-plugin build plugin:

<plugin>
   <groupId>org.codehaus.mojo</groupId>
   <artifactId>gwt-maven-plugin</artifactId>
   <version>2.8.0-rc2</version>
   <configuration>
       <webappDirectory>${basedir}/target/classes/VAADIN/widgetsets</webappDirectory>
   </configuration>
   <executions>
       <execution>
           <goals>
               <goal>compile</goal>
           </goals>
       </execution>
   </executions>
</plugin>

Test GWT compilation and run Jetty

Now you are ready to run mvn clean gwt:compile to compile the widget set. After the widget set is compiled you can run the demo UI using mvn jetty:run and access the test UI at http://localhost:8080/.

Use new GWT 2.8 features and recompile the widget set

Now for the fun part! We can start to utilize new GWT 2.8 features e.g. by simply changing the ClickHandler in MyComponentConnector from

getWidget().addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
       final MouseEventDetails mouseDetails = MouseEventDetailsBuilder
               .buildMouseEventDetails(event.getNativeEvent(),
                       getWidget().getElement());
       // When the widget is clicked, the event is sent to server 
       // with ServerRpc
       rpc.clicked(mouseDetails);
    }
});

into a lambda expression:

getWidget().addClickHandler(event -> {
    final MouseEventDetails mouseDetails = MouseEventDetailsBuilder
           .buildMouseEventDetails(event.getNativeEvent(),
                   getWidget().getElement());
    rpc.clicked(mouseDetails);
});

After making changes to the addon project, you follow the normal workflow of mvn clean install in the addon project followed by a mvn clean gwt:compile in the demo project.

I hope this post helped you to get started with GWT 2.8 development. The next major Vaadin version, Vaadin 8, will use GWT 2.8 by default. This means that any Java 8 and JsInterop code you write today should be reusable in Vaadin 8 without the tricks listed in this post.

The sample project with all the modifications described in this post is available on GitHub. Go ahead and import that to your IDE and

Start your own GWT 2.8 adventure!