Close

Community Spotlight - April 2017

For this month’s Vaadin Community Spotlight I interviewed Roland Krüger, a software engineer who works at a consulting company (Orientation in Objects) in Mannheim, Germany. His job includes working in Java-related customer projects, consulting (sometimes Vaadin-related), and trainings in different technical areas.

Hello, Roland! Thanks for accepting the invitation. So, how long have you been using Vaadin?

Thanks for the invitation! I discovered Vaadin back in 2010 when I was helping some friends of mine from the university to develop the software for their start-up. The start-up is defunct now, but Vaadin is still strong with me  Back then, I was really impressed by the features Vaadin had to offer and the framework made it possible to get going quickly.

That sounds great! I bet you have the chance to “play” with many technologies, right?

Yes, that's one of the great advantages of working for my employer. We're given much time to play with new technologies. This is even required here. I took my knowledge of Vaadin with me in this company when I started here in 2011 and I was asked to create a new training for our curriculum, so I'm the Vaadin Trainer here in this company.

Awesome! Now I understand why you are so active in the community! You have a couple of Vaadin add-ons right?

Yes, currently I have two add-ons. The most recent one of them recycles code from the start-up. I wish I had time to be more active in the community because it's a lot of fun. But my time is rare, unfortunately, and there are other members who are a lot more active than me. I try to answer questions on StackOverflow as well from time to time. I'm also trying to regularly write blog posts about Vaadin. Even though I recently have lacked the time to do so. But there are lots of topics on my to do list.

Developers around the world for sure value that. What have been the most popular posts you have written?

It's these three, the first one being the most active:

As you can see, blogging is encouraged by my employer!

Glad it is! So, what would you say is the “killer” feature of Vaadin?

Hard to say since there are quite a lot! But what I like most is the data binding concept. And more on a meta level is the well thought-out API which on the one hand offers a simple default implementation (such as the Navigator and all related interfaces) but on the other hand allows pretty complex setups, such as with my new add-on. Vaadin never limits the developer too much but doesn't do that at the expense of simplicity.

How about other aspects of Vaadin, such as the commercial offer and community-related stuff?

Regarding the commercial offerings: I think these are great and come at a fair price as far as I can judge. And they are an important pillar to keep Vaadin as FOSS alive in the future (which is important for customers to know in order for them to commit to Vaadin in the long term). I think, providing some commercial add-ons helps to keep the quality of these add-ons extremely high.

As for the free stuff, the quality of Vaadin's documentation has always been extremely high which cannot be assumed from many other open source projects. This is maybe another killer feature of Vaadin: You will never get stuck with the API since you always find extensive JavaDocs which help you along. Not to speak of Book of Vaadin which is another great enabler to learn the framework. I haven't been that active in the forums recently but as far as I can see they are very much alive, as are the relevant Vaadin tags on StackOverflow.

Regarding meet-ups, I have only once attended one of them in Frankfurt, which was quite nice.

Alright, anything else you’d like to say?

A nice coincidence I discovered when I first saw the new design of the Vaadin t-shirts: they show a similar polygon reindeer design that I chose for the cover of the Vaadin beginner's book I'm currently writing on a self-publishing platform. So, this is something I took away from my Vaadin trainings: The idea to start writing a Vaadin book in German.

Awesome! Best wishes with your book and your other projects. Keep the good vibes, Roland!

It was a pleasure for me! Thank you for having me.

Try Vaadin today! - Read or watch the tutorial

Learn ES6 Today with Vaadin Elements - Part 3: Arrow Functions

In this short segment of our guide to ES6, you’ll learn how to use the Arrow function syntax to create cleaner code.

We will be referencing the example we wrote in the previous guides. You can read the first and second parts of this blog series here:

  1. Part 1: Promises
  2. Part 2: The Fetch API

Arrow functions

Our ES6 guide is all about making code simpler and more readable, so let’s talk about ES6’s new Arrow function syntax. Arrow functions let you write functions with straightforward syntax. Arrow functions look like parameters => expression. The result of expression is then returned. This skips writing both function and return. That may not seem like much, but it makes writing functions and callbacks so much clearer.

Let’s take a look at a few quick examples.

// ES5 way
var doubleES5 = function(x) {
  return x * 2;
}

var addES5 = function(a, b) {
  return a + b;
}

// ES6 way
var doubleES6 = x => x * 2;

var addES6 = (a, b) => a + b;

As you can see, writing arrow functions is a breeze. If you need to do more work in a function, then you can enclose the right side in curly braces to make a regular block expression. In this case, the return is no longer implicit and does need to be called.

var doWork = (x, y, z) => {
  // ... do stuff ...
  return someResult;
}

Caveat

One thing to note is that arrow functions do not create their own context, so this inside of an arrow function is the same as the enclosing scope. While on the whole, this makes function code more clear, this can lead to trouble if you’re not expecting it.

var scope = this;

var container = {
    classicSyntax: function() {
        console.log(this === scope); // False!
    },

    arrowSyntax: () => {
        console.log(this === scope); // True!
    }
}

container.classicSyntax();
container.arrowSyntax();

You can learn more about arrow functions at this great article on Mozilla Hacks.

Cleaning up our code

Now we’ll finish tidying up our code with the new arrow function syntax. Follow along at jsbin here.

Arrow functions are particularly useful for cleaning up Promises and then blocks, so we can shorten getJSONPromise even more.

function getJSONPromise(url) {
  return fetch(url).then(response => response.json());
}

I’ve similarly updated the rest of the code to use arrow functions, which you can see in the finished code.

Browser support

Arrow functions are available in all modern browsers, with the exception of Internet Explorer and Opera Mini.

Conclusion

Arrow functions is just another way the evolving web platform is making coding simpler. When the constructs you use are streamlined, then your code itself will be clearer and understandable.

In the next episode of our series on ES6 we’ll cover a few more advanced features of the platform.

Learn more about <vaadin-grid> and Vaadin Elements

<vaadin-grid> 2.0 with million dollar scrolling

The Vaadin Elements team has just released the new and vastly improved <vaadin-grid>. It adds a number of features compared to Grid 1.2 and comes with many performance improvements that allow developers to create fast and feature rich user experiences. This, in fact, required a complete rewrite of the Grid internals. Vaadin Grid 2.0 is likely the most modern data grid for the web available regardless of the price. And yes, this is free and open source.

 

This new release of <vaadin-grid> was made possible not only by the Vaadin Elements team but also by the active and passionate developer community that has put their time and energy throughout the development cycle to raise issues and contribute to the features. We thank you all for your passion and dedication.

 

Data tables such as <vaadin-grid> are the most commonly used data presentation components in enterprise applications. They are versatile, hold a vast amount of data and allow for row-based data to be analysed or ready made analysis to be examined in detail without switching views. We made sure that no matter the use case, <vaadin-grid> satisfies your performance and functional needs. Especially the templating support allows for raw data formatting inside <vaadin-grid> in a way that guides users to quickly pinpoint the relevant data.

 

New features not available previously:

  • Support for millions of data rows

  • Variable row height support

  • Declarative column templates, including header and footer templates, with 2-way data binding support

  • CSS styling support also with native shadow DOM

  • Virtual scrolling with native scrolling also in touch devices

  • Declarative row detail template with 2-way data binding support

  • Default filtering implementation for local array data (in addition to default sorting implementation)

  • Customisable selection model

  • Vastly improved Screen reader support

 

The feature list is exhaustive indeed. I want to highlight a couple of those.

 

Support for millions of data rows

 

With <vaadin-grid> 2.0 we have virtually eliminated the limit of the number of data rows developers can put into a single grid element. See the animation of scrolling through hundreds of  millions of dollars in a snap.

 

 

Variable row height

 

Another often requested feature has been the ability to have rows that vary in height. This feature allows much richer data presentation options for developers and UX designers. With variable row height support developers do not have to develop special view modes to allow users to see the full extent of the information. This is especially useful in use cases where data rows need to fit in a narrow view such as smartphone displays.

 
 

Super-easy way to bring in data

 

It has been true before but I wanted to share a piece of code that demonstrates just how easy it is to pull in data and display that inside <vaadin-grid>. This example fetches data about Vaadin’s GitHub repositories, configures a grid to show the full name of the repository, it’s URL and description. That’s it! Seriously, there is no step two.

 

<iron-ajax
    url="https://api.github.com/users/vaadin/repos"
    params='{"type":"all"}'
    handle-as="json"
    last-response="{{repodata}}"
    auto>
</iron-ajax>
<vaadin-grid items="[[repodata]]">
    <vaadin-grid-column>      
      <template class="header">Repo name</template>      
      <template>[[item.full_name]]</template>
    </vaadin-grid-column>
    <vaadin-grid-column>
      <template class="header">URL</template>
      <template>[[item.html_url]]</template>    
    </vaadin-grid-column>    
    <vaadin-grid-column>      
      <template class="header">Description</template>      
      <template>[[item.description]]</template>    
    </vaadin-grid-column> 
</vaadin-grid>

 

What about Vaadin Framework?

 

With Vaadin Framework 8.0, we included an enabling piece of technology called HTML imports. This allows WebComponents such as <vaadin-grid> to be used together with Framework 8.0. Later this year we plan to make this even easier and provide Java APIs to select Vaadin Core Elements.

 

Meanwhile, we are soon releasing Framework 8.1 that features built-in data grid components that support HTML5 Drag & Drop, new TreeGrid component with additions to Data API that supports hierarchical data. Framework 8.1 will also feature Components in Grid feature that allows developers to add UI components into Grid cells.

 

What’s next?

 

The team is already working on making <vaadin-grid> compatible with Polymer 2.0. We plan to release a set of Vaadin Core Elements at the same time so that you may use Vaadin Core Elements in your current projects and new projects that require Polymer 2.0.

 

Please keep on sending us feedback on issues and new features that you would like to see in future releases of <vaadin-grid>.


Learn more about <vaadin-grid> at the Vaadin Elements page.