Announcing Vendure v0.10.0
June 09, 2023
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.
All changes in the Vendure 0.10.0 Changelog
Create your first commerce experience with Vendure in less than 2 minutes
Vendure is a registered trademark. Our trademark policy ensures that our brand and products are protected. Feel free to reach out if you have any questions about our trademarks.
Documentation
Newsletter
Get the latest product news and announcements delivered directly to your inbox.