Close

Framework roadmap: Connecting the dots

Soon after we founded Vaadin 16 years ago, I started the habit of frequently blogging about roadmaps. The fact that I have been less vocal about our plans might seem strange considering that we have multiplied our investments in R&D at the same time. In total, we today have over 130 persons in Finland, California and Germany - both building Vaadin technologies and helping our customers use them.

We are working on multiple exciting things in parallel and they are all pieces of the same puzzle. Until now you have only seen one part and it may have been somewhat misleading. In fact, we have already gotten quite a few questions on how Core Elements and Framework are connected.

Here is the full story on what we plan to do next for Vaadin Framework. Please ask questions and give feedback.

Background: Purpose, passion and mission

From day 1 (July 1, 2000 to be exact) we have had two interconnected passions:

1) Help end-users’ lives by enabling developers to build great web applications that are fast, intuitive and work on any device. Applications that just work and your users will fall in love with.

2) Optimize the ease of development. For every line of code the developer does not have to write and maintain, they can focus on making the end-user experience better.

Our customers - 100% of them - are developing web applications and trust our technologies for their user interface. Our responsibility is to ensure that the platform they build on is rock solid and allows them to utilize the latest and greatest of the web for years to come. We are honored by that trust and take this responsibility very seriously. It is our business and purpose.

With that, our mission is simply to Make it easy to build the best web-apps for business.

A solid foundation: Vaadin Framework 7

7.0.0 was released in 2013 with an amazing list of new features: faster layouting, a new communication system, modular builds, deep integration with GWT, JavaScript as a first class extension language, HTML5 support, a Sass compiler, Bean validation and dozens of other features. This was a huge update and technology refresh.

But more importantly, it was the first step in a very active product iteration. It enabled us to release tons of new features in 7 minor revisions that maintain backwards compatibility. Just to name a few: Valo theme engine, extensible Grid, automated push communication that adapts to network conditions, font icons, WAI-ARIA support, a declarative layout language and cloud based widget sets. In addition, we built over 65 maintenance releases that solidified the framework to a very mature platform that top companies all over the world build their business critical applications on.

We are committed to maintaining Vaadin Framework 7 at least until 2018. With the easy migration path to the upcoming major version, the applications built with Vaadin Framework 7 will have a foundation that is supported until 2022 without a need for major upgrades.

Vaadin Framework 7 is one of the very few web frameworks with which you can build applications with a long lifespan expectancy - backed by a 16-year track record.

Simplified development with Java 8: Vaadin Framework 8

Stability and backwards compatibility have their downsides as well, we have not been able to utilize the new features in Java 8 and evergreen browsers to their fullest potential, as it would have forced us to drop support for old Java and browser versions.

Vaadin Framework 8 will bring two important changes, one functional and one non-functional one, but both equally important.

First of all, it will greatly simplify the data API by building on Java 8 lambda expressions and modernizing the design principles. Just think of writing something along the lines of this, instead of implementing the Container API:

countryGrid.setItemFetcher(
  q -> backend.fetchCountries(q.getOffset(), q.getLimit()),
  q -> backend.getCountryCount()
);

Naturally we will support the current data API for making the transition from 7 to 8 simple, but the new API should both make the framework easier to learn and you more productive.

Secondly, Vaadin Framework 8 drops support for technologies that are no longer maintained. By dropping support for IE 8–10 and Java 6–7, we are able to speed up rendering and build better APIs. Going forwards, we will support all modern evergreen browsers, IE 11 and Java 8+.

As a whole, Vaadin Framework 8 is a far less radical upgrade than Vaadin Framework 7 was. This is by design - with a major version we are able to drop old technologies that slow us and you down and at the same time keep migration easy.

Now the scary part (for the writer) - setting expectations for the timeline. We hope to release Vaadin Framework 8 before the end of this year.

Beyond 8 with Project Hummingbird

For the past two years we have been busy researching technologies that come after Vaadin Framework 8 in a project called Hummingbird. While we would have loved to be more open about it, we wanted to get the foundation right before getting everyone excited about it.

The questions we asked ourselves were:

  • Is there a technology on the horizon that will become so important in the web platform that it has potential to revolutionize all frameworks?

  • Why have client-side frameworks like Angular JS become so popular?

  • What are the limitations in Vaadin Framework and how would we be able to remove them?

Answers to these questions formed foundational technologies that we started developing and will be bringing to Vaadin Framework users:

Web Components will shortly be fully supported by most ever-green browsers. Chrome is leading the pack, but other evergreen browsers will follow shortly. They bring the component oriented programming paradigm that Vaadin has promoted for over 15 years to the web platform and will potentially revolutionize and unify front-end frameworks. This provides us with two opportunities:

1) Web components are a perfect rendering model for Vaadin Framework. Imagine using any web components by any vendor from server-side Java, just like you use server-side Components today. This will significantly expand the number of available components. You will get a new powerful extension and rendering model without sacrificing the simplicity of the server-side Java development model.

2) We will be able to share the components we build with other frameworks. Anyone could use Vaadin’s components - not just Java developers. Teams committed to using React, Ember, Angular or anything else would benefit. And for the end-user, the UI built by these frameworks would seamlessly integrate with UIs built with Vaadin Framework. Everyone would win. We have already started to release some of these components as in the form of Vaadin Elements.

Templates are the magic sauce in modern front-end web frameworks that make them powerful. By bringing template language to Vaadin Framework, one can build application views and new re-usable components by writing some HTML and binding it to data directly. And this is what we are building for Vaadin Framework - except that you can also bind to server-side data and mix in current components. This should make everything that is hard today in Vaadin Framework easy - without compromising what is easy today.

Web Sites have been outside the scope of Vaadin Framework. For building one, you have most often wanted to combine Vaadin Framework with some other framework - for example Spring MVC. This is by design, Vaadin is meant for building web applications. In the future we expect the border between an app and site to be fading away. So we set ourselves to resolving the technical limitations and thus making Vaadin Framework a great foundation for building dynamic sites. Without compromising its power for building web apps.

We hope to open up these technologies for Vaadin Framework users to test early next year as “Project Hummingbird”. Later next year we plan to integrate them to the upcoming Vaadin Framework 9 with a clear migration path from version 8.

Solid foundation keeping up with the latest technologies

As a summary, Vaadin Framework 8 will bring full Java 8 support before the end of the year and we’ll continue after that by integrating Vaadin Core Elements, templating and a better support for building dynamic web sites. With this the dots are finally connected and there are great things ahead for you as a Vaadin Framework 7 user.

Looking both backwards and forward, it has never been a better time to start building applications your users will love with Vaadin Framework.

Vaadin Dev Day in Munich in November 2016

 

Vaadin 8 is closing and this brings us new data binding APIs. What does that mean to my applications? How can I ensure that end-users enjoy using my applications? How do I design better applications? What do other Vaadin developers do to keep themselves productive?

We have good news for you! We listened to you and Vaadin Dev Day is here again to answer your questions. Full one-day workshop where you’ll learn the best practices from the most experienced Vaadin Experts in the world.

This time Vaadin Dev Day is hosted in Munich, Germany, on November 29th 2016 – this is your opportunity to build better applications and leverage Vaadin to the max.

The topics for the day are:

  • Binding data to UI components in Vaadin 8
  • Daily Productivity Tips for Vaadin developers
  • Design eye for the dev guy
  • Optimizing Vaadin applications
  • How to write themeable Vaadin code
  • Spring with Vaadin – Spring Boot, Spring Security in a real project

Join Senior Vaadin Expert Peter Lehto, Vaadin Designer Marlon Richert, Developer Advocate AMahdy AbdElAziz and learn from the experience of hundreds of projects. The event will be arranged at the Hilton hotel. Event early bird registration is now open!

Make sure you register before September 30th.

Read more 

Visualizing data in a React app with Vaadin Charts 3.2

Vaadin Charts 3.2 is here. With the latest release, we continue to cater to the newest client-side libraries. The new version brings you improved integration to the React JavaScript library. Before the version 3.2 you were able to use Vaadin Charts in React, but you had to write a bit more boilerplate code than we were comfortable with. Now the integration is a lot smoother.

Sample charts screenshot

I’ll cover the five simple steps you need to take to get Vaadin Charts into use in your React application. I assume you are using Browserify (and npm). If you don’t have such a React project at hand, you can use one from here https://github.com/samiheikki/react-starter-kit

1. Install the Vaadin Charts dependency with Bower

bower install --save vaadin-charts

2. Add Web Components polyfill to your index.html to be able to use HTML imports

<script src="bower_components/webcomponentsjs/
    webcomponents-lite.min.js">

3. Import your choice of a chart type

<link rel="import" href="bower_components/vaadin-charts/
    vaadin-pie-chart.html">

4. In your index.js import the Vaadin Charts component before React

// Must be imported before React
require('./bower_components/vaadin-charts/react');
var React = require('react');
var ReactDOM = require('react-dom');

There is an additional step involved if you are using Webpack, it’s described here in Vaadin Docs.

5. Configure your chart and its data series in the render function using the declarative Elements API.

var MyPie= React.createClass({
  getDefaultProps: function() {
    return {
      data: []
    };
  },
  render: function() {
    return (
      <vaadin-pie-chart>
        <title>My First</title>
        <subtitle>Pie Chart</subtitle>
      <data-series name="My data">
        <data>{this.props.data.map(JSON.stringify).join(',')}</data>
      </data-series>
    </vaadin-pie-chart>
    )
  }
});

ReactDOM.render(
  // e.g. [["Hey", 1], ["What's", 2], ["Going", 3], ["On", 0.5]]
  <MyPie data={getMyExampleChartJSONData()}/>,
  document.getElementById('example')
);

Take a look at more detailed usage examples in the reference documentation of Vaadin Charts in Vaadin Docs. See all the chart types and a lot of the features in action, visit the Vaadin Charts demo site at http://demo.vaadin.com/vaadin-charts/.