Close

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.

 

 

Try out HTML5 drag-n-drop, components in Grid and TreeGrid today

Vaadin Framework 8.0 came out just a bit more than a month ago, but we are already pretty far with the next major feature enhancements. The top three new features in Vaadin 8.1 include (click links to see examples in Sampler):

  1. Component support in Grid. In 8.1 it is no more required to use custom client side Renderers to customize the contents of a cell. This makes it much easier to customize your data grid. Renderers are still available for those who require the best possible client side performance.
  2. TreeGrid, which replaces the old TreeTable component to display hierarchical data in tabular format.
  3. New drag and drop API built around HTML5 drag and drop. Most components now support drag and drop, including Grid.

In addition to those, there is a bunch of other enhancements like improved OSGi & Liferay 7 support (not completed yet), LocalDateRender and LocalDateTimeRenderer for Grid, and the ability to define the row height in Grid programmatically (handy with components).

If you want to actively follow what is happening right now, see relevant milestones in GitHub.

Help us to test 8.1 today

We got a lot of good feedback when preparing 8.0 and we hope to get early feedback for 8.1 as well. Trying out the new features in 8.1 alpha releases is pretty easy, and older features can be considered stable. To try alpha releases, ensure you have the following repository in your pom.xml:

<repository>
   <id>vaadin-prereleases</id>
   <name>Vaadin Pre-releases</name>
   <url>https://maven.vaadin.com/vaadin-prereleases</url>
</repository>

Also add the same as <pluginRepository> if you use vaadin-maven-plugin to compile your custom theme or widgetset. The latest pre-release at the time of writing this is 8.1.0.alpha3, but you can check the latest version from the releases page. It also contains a command snippet to create an empty project with the latest pre-release in case you want to try it with an empty project.

The most important part of the testing is of course reporting your findings. Report all bugs, API enhancement ideas and thumbs up via any of the following channels:

  • Github
  • Gitter (our core engineers follow that for actively developed features)
  • Forum
  • Comment section below

Thanks in advance for your feedback!