Vaadin 24.4 integrates with React, unifies Flow and Hilla development, and more!
Blog

Bower and npm in Vaadin 14+

By  
A.Mahdy AbdelAziz
·
On May 29, 2019 1:37:00 PM
·
In Product

Starting with Vaadin 14, we use npm instead of Bower. Why are we doing this? What does this mean for you? And what is the future of existing components in Vaadin that are using Bower?

 

The migration from Bower is a must, this is old news:

Why Bower or npm?

Both Bower and npm are dependency management tools. They both can manage front-end dependencies for web development. While we use Maven for back-end dependencies, we are interested in a tool to manage front-end Web Component dependencies instead of WebJars. npm is becoming the de facto modern tool to manage and install the standard Web Component, as well as ES6 modules.

Why did we use Bower?

Despite deprecated, Bower is still an excellent tool for web development in many scenarios. Historically speaking, it used to be an essential part of web application development. Some projects even used both Bower and npm at the same time.

In terms of Vaadin 10 - 14, and since we have used Polymer as a library to build our Web Components, we followed the practice used by Polymer 1 - 2, which is also Bower.

It has served us quite perfectly in delivering our first versions of the Vaadin framework with standard web components support, but time has also come to deprecate the use of Bower in the framework.

What benefits do we get with npm?

Modern Web Components are packaged and published as npm modules. There is no Bower support for Web Components created using modern libraries, such as lit. It is also a step forward to access a bigger set of libraries and Web Components for your app. And for Vaadin apps specifically, you no longer need to create a WebJar for your custom Web Component.

What is the future of current Bower components?

If you have developed or you are already using a web component that is served by Bower, the good news is, Vaadin 14 still comes with Bower support along with npm. It should help you to easily migrate from earlier versions of Vaadin to the latest LTS version 14. You can enjoy a faster migration along with new features using the most recent components available in the npm registry.

However, starting with Vaadin 15, we are going to support npm only. This should not affect you in the long term, with an LTS version like Vaadin 14. It's important to be prepared to remove all Bower dependencies while getting ready for the next major LTS release in 2 years from now.

Summary:

  • All your existing Web Components and legacy libraries hosted by Bower are going to work in Vaadin 14.

  • With npm support, you get an even bigger range of modern Web Components and libraries to use in your app.

  • Moving forward, it's advised to create and use npm packages only, so you would not be dependant on Bower in the long term.

  • Here is a migration guide from Bower to npm.

A.Mahdy AbdelAziz
AMahdy is an international technical speaker, Google developer expert (GDE), trainer and developer advocate. Passionate about Web and Mobile apps development, including PWA, offline-first design, in-browser database, and cross platform tools. Also interested in Android internals such as building custom ROMs and customize AOSP for embedded devices. AMahdy.net
Other posts by A.Mahdy AbdelAziz