Close

Want to learn Vaadin? Check out our university course!

One of the best things about open source communities is the sharing of knowledge. And what better way to share it than by organising a course at the local university? Last fall we collaborated with Turku Centre for Computer Science and the result was a full course called “Developing Modern Web Apps with Vaadin”. It gathered nearly 100 participants and was the most attended course outside the normal teaching curriculum and because of its popularity, we decided to record it and release the lecture videos to all of you.

Today we’re releasing the first batch of the lectures with two purposes in mind. First of all, it’s an in-depth course and good learning material for anyone interested in Vaadin Framework. Secondly, we’re also releasing the material to help others giving courses around the world to copy the same content.

As Vaadin Framework is freely available for anyone, we want the university lectures to follow the same path. What you get is not only the videos, but also the slides and the example code used during the lectures. We hope this will become a valuable asset for both learning and teaching. If you’re looking to teach Vaadin at your university, high school or just your local group of friends, you’ll have some well tested material to start with.

The course material is split into two parts. During the first part, released today, you’ll learn about the basics of web applications and Vaadin Framework in more detail. The second part, to be released soon, will focus on emerging trends like declarative UI, Progressive Web Applications and Web Components.

See the Vaadin University Youtube channel

PS. If you are a decisive person at a university or a similar higher-level educational institution that would like to host a Vaadin course, Sami Ekblad, our community manager would be happy to help you get started. Email Sami at sami@vaadin.com

Vaadin Framework 6 is becoming end-of-life, now what?

Vaadin Framework 7 was released in 2013, but there are still a whole lot of Vaadin 6 applications, doing their job, each and every day. When Vaadin 8 comes out as a stable release, which is hopefully pretty soon, Vaadin 6 series won’t anymore be covered by our free support, 8 years after its initial release. If you are still maintaining Vaadin 6 applications, you probably have several questions in your mind. What does it mean, should you be concerned, what should you do?

What does “not supported” mean for an open source project?

Vaadin Framework is an Apache 2 licenced open source project. If you decide to start using an open source “product”, there is no official support for it. Companies might, however, be selling special support packages for users who want to “cover their backs”, like our Support service. The only “support” you get for free is that the company behind the OS project may have committed to maintain it actively for a certain period of time. Regarding Vaadin Framework 6, it means certain risks after it has become “end-of-life”, like:

  • In case a new Chrome version breaks the scrolling in the Table component, our R&D team probably won’t skip their night’s sleep finding a workaround for it.

  • If there is a new popular browser that is incompatible with Vaadin 6, you cannot expect our R&D to develop support for it.

  • If there is a security vulnerability, you cannot expect our R&D to develop a fix for it.

If we needed to maintain versions 6, 7 and 8 at the same time, that would most likely harm our further efforts quite badly, so at this point, we just need to start saying no, by default.

Luckily we’ve maintained it for 8 years already and are providing free and commercial help for a painless migration. This is what we are committed to as a company, because we know your business depends on it. This is also why we have to write these kinds of blog posts – to be transparent.

Naturally, our consulting services can still provide support, bugfixes, features and help for version 6, and even older releases, but that then happens by an hourly rate.

Upgrade, now!

Although your Vaadin 6 application will by no means become broken once Vaadin 8 is out, my sincere suggestion is to move forward. The suggestion applies to both our support customers and the “free riders”. You’ll sleep better, because if your app breaks you know our R&D will do all they can to find a workaround. Also, Vaadin 7, and its minor versions, have brought in a lot of enhancements that might give your app a fresh feeling, even if you didn’t make any functional changes to your application.

The soon to be released Vaadin 8 will, in addition, bring major improvements to the core APIs that you work with daily. Developing new features will become more efficient than ever before and this will make it much more tempting to update your application during its entire lifespan.

Vaadin 8 has a bit stricter requirements than the older versions, regarding browser support and Java versions, but we believe most of you should be able to upgrade to Vaadin 8 as well.

Requirement matrix for Vaadin versions:

Vaadin version Internet Explorer support Servlet specification Java
Framework 6 6 or newer 2.3+ 5+
Framework 7 8 or newer 2.4+ 6+
Framework 8 11 and Edge 3.0+ 8+

 

We know that many Vaadin 6 users are tempted to delay the upgrade and do it directly to Vaadin 8. Good thinking, but you probably won’t save a dollar with this strategy. While Vaadin 7 and Vaadin 8 are both major upgrades, their focus areas have been quite different. If you can’t start upgrading to Vaadin 8 yet (because of requirements or add-ons), you don’t waste any resources by upgrading to Vaadin 7 first.

The only place where you could save some conversion effort is by not converting Form usage into FieldGroup based data binding. Form (deprecated in Vaadin 7) is still available in Vaadin 8 so you most probably want to move directly to Binder, which is a replacement for the FieldGroup in Vaadin 8.

Also, the upgrade from Vaadin 7 to Vaadin 8 will be super fast to do as we have a so called compatibility package available and you can then gradually move into using the modern API introduced in Vaadin 8.

Sounds scary? Let us help!

If you are uncertain about the upgrade, you can of course get some real support for the upgrade from us. Our engineers have worked with both versions 6 and 7, and we have a vast experience of upgrading large business apps to Vaadin 7. We are also the guys that have built the framework from the ground up, so you’ll have the best help in the world – quite literally.

If you need our help, contact our sales persons close to you. We have also prepared a whitepaper that can help you to find the best strategy for your upgrade and get an overview of what you have to do.

Vaadin Framework migration guide: from 6 to 7
Vaadin Framework migration guide: from 7 to 8

Learn ES6 Today with Vaadin Elements - Part 2: The Fetch API

In this segment of our guide to ES6, you’ll learn how to use the Fetch API to simplify your HTTP requests.

We will be referencing the example we wrote in the previous guide. You can read the first part of this blog series here: https://vaadin.com/blog/-/blogs/learn-es6-today-with-vaadin-elements-part-1-promises

The Fetch API

The Fetch API is not specifically an ES6 update, but rather a new API added to the browser. This API streamlines sending HTTP requests and processing the results. The API is extremely simple, and works entirely with Promises, so it matches up well with our existing code.

Using Fetch is as simple as calling fetch(url). This will run an HTTP GET request against that URL and return a Promise that will resolve to a Response object. From that Response object, you can just call response.json(), which itself returns a Promise will resolve to the results JSON.

Here’s a quick example of fetch:

// send request to url, get a Promise that resolves to the response
fetch(url).then(function(response) {
  // return a Promise that resolves to the response text as JSON
  return response.json();
}).then(function(json) {
  // use the JSON response
  console.log(json);
}

Learn about the Fetch API at MDN

Fetch in action

Let’s take a look at our example again. Follow along on jsbin to try the code yourself.

Since we're only changing the HTTP request code, we do all of our work getJSONPromise. The existing method returns a Promise that resolves to the JSON results, so we'll model our new method to return the same thing.

Our existing code looks like:

function getJSONPromise(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      }
    };
    xhr.open('GET', url, true);
    xhr.send();
  });
}

Following the example above, we can rewrite all of that code to:

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

That’s it!

Browser support

Fetch is currently supported by Edge, Chrome, Opera, and Firefox. Fetch is supported in the next release of Safari (10.1), but not in iOS Safari or IE 11. There is, however a polyfill available here. I have included this polyfill in the example in order to give support for all browsers.

Conclusion

The Fetch API is one more way the web platform is evolving to making coding simpler. Being able to run HTTP requests with one command means you can write the code you want without thinking about the details. When the constructs you use are streamlined, then your code itself will be clearer and more understandable.

In the next episode of our series on ES6 we’ll cover Arrow functions, a quick way to write more readable functions.

Learn more about <vaadin-grid> and Vaadin Elements