Announcing Vendure v0.10.0

Angular 9 & Ivy

Our Admin UI app is built with Angular, and this release includes an update to version 9 of Angular - itself a major upgrade since this means that we now use the new "Ivy" engine. Ivy is a brand new compilation & rendering pipeline which was released with Angular 9. In addition to smaller, more performant builds, Ivy also unlocks a bunch of new improvements which we've included in Vendure 0.10.0!

Re-Architected UI Packages

Formerly, the @vendure/admin-ui-plugin package shipped with a compiler which allowed you to build a custom version of the Admin UI with your own extensions. While this worked, it had a few drawbacks:

If you didn't need to create UI extensions, you still had to download the entire Angular CLI and related compilation code.
It was impossible to pre-compile your UI extensions. Instead, they would be compiled when the Vendure server started. This made zero-downtime deploys effectively impossible.
Certain aspects of customizing the UI were overly-complex owing to the restrictions of the Angular compiler before Ivy.
All UI extensions would be compiled into a single lazy-loaded bundle, meaning that the first time any extension route was activated, the code for all extensions would be loaded.

With Vendure 0.10.0, all of these issues have been resolved. Now the @vendure/admin-ui-plugin is extremely lean and contains only a pre-compiled static bundle of the default Admin UI. For those who wish to create UI extensions, there is now the @vendure/ui-devkit package.

If you are already using UI extensions in your project, this means some breaking changes, all of which are covered in the 0.10.0 changelog.

Vendure UI Devkit

The @vendure/ui-devkit package contains everything you need to build powerful, seamlessly-integrated UI extensions in any front-end technology - Angular, React, Vue - you choose!

The devkit now contains a much-improved compiler which allows pre-compilation, individual lazy-loading of extensions, and vastly simplifies much of the process of wiring up a UI extension. Here's a quick example of how much simpler it is to define a custom field component:

Before (Vendure 0.9.0)

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { CustomFieldComponentService, NavBuilderService } from '@vendure/admin-ui/src';

import { StarRatingComponent } from './components/star-rating/star-rating.component';

@NgModule({
  declarations: [StarRatingComponent],
  entryComponents: [StarRatingComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: defineCustomFieldControls,
      deps: [CustomFieldComponentService],
    },
  ],
})
export class ReviewsUiExtensionModule {}

export function defineCustomFieldControls(customFieldComponentService: CustomFieldComponentService) {
  return () => {
    customFieldComponentService.registerCustomFieldComponent(
      'Product',
      'reviewRating',
      StarRatingComponent,
    );
  };
}

After (Vendure 0.10.0)

import { NgModule } from '@angular/core';
import { registerCustomFieldComponent } from '@vendure/admin-ui/core';

import { StarRatingComponent } from './components/star-rating/star-rating.component';

@NgModule({
  declarations: [StarRatingComponent],
  providers: [
    registerCustomFieldComponent('Product', 'reviewRating', StarRatingComponent),
  ],
})
export class ReviewsUiExtensionModule {}

As you can see, with Vendure 0.10.0 there is much less potentially-confusing Angular boilerplate required! This was only made possible with the new Ivy engine.

See our new documentation: Extending The Admin UI

While the Vendure Admin UI is built with Angular, we recognise that it is just one of many excellent front-end technologies, and some of our users may wish build their own UI extensions with a framework they are more familiar with - React, Vue, Svelte, or just plain JavaScript. With Vendure 0.10.0, this is now possible.

Not only can you embed any JavaScript app into the Admin UI, we also provide a client API to allow seamless interaction with the main application. Your app doesn't need to worry about pulling in a whole new GraphQL client - you use the exact same client that the main app uses, including the shared, client-side cache with reactive updates!

See our new documentation: UI Extensions With Other Frameworks

Pre-compile Your Extensions

Our new architecture means you can now include UI extension compilation as part of your deployment process. This ensures that starting up the Vendure server is as fast as possible, because no UI compilation is required at runtime.

See our new documentation: Compiling as a deployment step

Other notable improvements

In addition to all that, here's a few more highlights from the 0.10.0 release:

The Clarity UI library (which the Admin UI is built on) has been updated to v3.0
The rich text editor (used for Product descriptions etc) has been completely re-written on top of ProseMirror. ProseMirror is incredibly powerful and extensible and we have some exciting ideas of how we can integrate it more deeply with Vendure in the future.