I’m looking at using Ionic web components in a new vaadin flow project.
We want to use the Vaadin platform designer to allow some rapid prototyping of the UI.
My problem is that I can’t find any documentation of adding an npm based project so that Vaadin Platform Designer picks it up and allows components to be added to the designer view.
Hi Brett,
NPM support for Vaadin Designer is planned for Vaadin 14 (See here: https://github.com/orgs/vaadin/projects/1).
So is there any way that I can use something like the Ionic components?
i noticed you can create a webjar from an npm.
will that work?
Designer works best with Polymer 2 web components. With the NPM support, Polymer 3 format will be added. While Ionic 4 components are technically web components, they are created with Stencil and therefore they differ in certain implementation details that Designer depends on. Currently there’s no obvious way to import Ionic core to a design, but if there was, the components would work. However, there would still be limitations in working with them compared to Polymer components. An example would be their availability in the palette. You would be able to type them in declaratively in the source mode and they would render, but you would not be able to drag and drop them from palette.
So to be clear.
Are you saying that even with Polymer 3/NPM support iconic still won’t work with designer?
The lack of drag and drop/pallette visibility is a minor annoyance, complete lack of access is more problematic.
The current Vaadin versions, 10-13, uses HTML imports and are distributed via webjars (which are fetched and built from Bower). This means that all web components that you use together with Vaadin 10-13 needs to also use HTML Imports to work together.
HTML imports was part of the initial web component specification, but the web community as a whole didn’t adopt that specification. Therefore most of the market migrated over to ES Modules, and npm. HTML imports and bower goes hand-in-hand as does ES Imports and npm.
Vaadin’s components are built as both: if you take them from bower you get html files, if you take them from npm you will get js files.
For Vaadin 14, we are looking into adding support for bringing in web components as ES Modules directly from npm, which would give you the option to skip both HTML Imports and WebJars. Which one you use would be up to you, but you can’t mix and match where for example the Vaadin components come from HTML Imports and Ionic components from npm. You have to use one technology and stick to that. We will recommend the npm/ES Module way for all new projects, but we will keep the bower support intact so that existing project will still work in V14 and migration from bower to npm would be easier. 14 release date is in three months, on Jun 5 2019, and it is a long-term support version.
So to answer your question: No, you can’t use npm components like the ionic set today. You can use non-Vaadin components that are built on top of HTML Imports, like the ones in [Directory under “Polymer 2”]
(https://vaadin.com/directory/search?framework=Polymer%202) or available in bower. You will be able to take npm components into use in three months if you create a new project or convert your existing project to use npm.
Do we have an eta of the 14 alpha?
We are literally starting a new project as I write so would rather not build a whole lot of polymer 2 and then have to re-write it.
Would perhaps prefer to get early access to a 14 alpha and suffer the pain of an alpha.
Also to be clear, will the vaadin components be ported to npm/es modules as part of 14?
My interpretation is that if the vaadin components are converted then I can use vaadin components and ionic components in the same project.
Every time we release any Vaadin component, we release both bower/html and npm/es at the same time. So all Vaadin components are ready for the change. The Flow integration of the components have to be a bit redone however.
I don’t have a timeline for alpha, but I can ask around. There is quite a bit to do so my guess is that it will be in the early May/late April when there is something usable there. This is the master ticket for the effort: https://github.com/vaadin/flow/issues/4561.
We are also looking into creating a migration tool from html imports → es modules, so it is not all to waste if you start now. Some fine tuning would still be most likely needed.
The way Ionic loads its components dynamically is not compatible with Designer. The loading mechanism is proprietary to Ionic and Designer would need to build specific support for that.
Technically, as Ionic 4 components are web components, if you get them to load, they will work in the designs. You can verify this already with the current Designer by adding the following lines at the end of your design’s script section:
const ionicCss = window.document.createElement('link');
ionicCss.setAttribute('rel', 'stylesheet');
ionicCss.setAttribute('href', 'https://unpkg.com/@ionic/core@4.0.2/css/ionic.bundle.css');
const ionicCore = window.document.createElement('script');
ionicCore.setAttribute('src', 'https://unpkg.com/@ionic/core@4.0.2/dist/ionic.js');
window.document.head.append(ionicCss);
window.document.head.append(ionicCore);
This will load the Ionic core and related styles. If you then add e.g. <ion-button>Button</ion-button> to the design, you will see it in the editor, as shown in the attached image.
OK, thats very interesting.
It may be useful to have a few guides on integrating some of the popular libraries.
I will give this a try.
Does this need to actually use javascript to create the link/script elements. Cant I just add the link/script includes at the top of the dom-module.
I will try both methods later today and report back.
Yes, you have to use JavaScript to add the link/script to the head of the document object that contains your design. If you simply add them to the design, Ionic cannot synthesize correct paths for the modules it loads dynamically. I have not taken the time to figure out the exactly why, though.
Notice that the JavaScript above should by no means be taken as an official approach to use Ionic components in your designs. It merely shows that the components could potentially work in Designer. Also, this approach likely conflicts with your Flow application. To actually use the components in your application, you’d need to load the Ionic libs from Flow, and remove the JS hacks from the designs when you’re not working in Designer anymore. So, it’s rather inconvenient, but maybe doable if really needed.
Thanks for raising this interesting topic, btw.!