Aimeos 2022.04 release

The first stable release of the Aimeos e-commerce framework in 2022 contains a lot of exciting new features and changes compared to the last LTS version. Improving the developer experience further was one of the most important goals for this release besides more performance. All improvements are available for both, Laravel and TYPO3 and include:

• Laravel 9 LTS support
• Integrated distribution based on Laravel 9
• New Aimeos headless distribution built on Laravel 9
• Radically simplified HTML client code base
• Top scores of 100% for Google Lighthouse
• Bootstrap 5 w/o jQuery
• Upscheme migrations
• Higher performance

Laravel 9

Aimeos is the first full-featured e-commerce framework supporting the new Laravel 9 release with long term support (LTS) since beginning of April 2022. The biggest changes necessary for moving to the new Laravel release have been the migration from Swiftmailer to the Symfony mailer package and to FlySystem v3 for file access.

Together with the Aimeos Laravel 2022.04 package which can be added to every existing Laravel 9 installation, the integrated Aimeos distribution is now also based on Laravel 9 LTS. The distribution includes shop and CMS features and you can create a ready to use online shop. Simply execute this on the command line if PHP and the composer package manager are installed:

php composer create-project aimeos/aimeos myshop

In addition, there’s now a Laravel 9 based Aimeos headleass distribution available too. This distribution is especially suited for building your own progressive web application based on ReactJS, VueJS or any other JS frontend framework. It includes the admin backend and the world-class Aimeos JSON REST API but not the traditional HTML frontend. Also, it comes with the pre-configured JSON web token (JWT) package for Laravel installed for authenticating frontend users.

Developer experience

We’ve put a lot of effort into improving the experience for developers, especially the need to write less boilerplate code when implementing own HTML clients. Thus, the necessary code for adding a new HTML component in the frontend is now reduced to the bare minimum. You only need to write the code you really need now and additional methods are not required any more because there are default implementations available for them.

Additionally, the directory structure has been simplified as much as possible. Methods have been shortend and the most important ones only consists of a single word now. A few examples of renamed methods are:

• getContext() -> context()
• getBody() -> body()
• addData() -> data()
• …

For a full list of breaking changes compared to the 2021.10 LTS version, please have a look into the Aimeos changelog in the documentation.

Google Lighthouse scores

Aimeos already achieved top scores for desktops in the past but for mobile devices, the performance score reached a maximum value of 70. Several changes have increased the score to almost 100 now.

The most important change was to split up the three main Aimeos CSS and JS files into one CSS/JS file per component. Now, all CSS rules and Javascript code that is used solely by e.g. the catalog detail component has been moved the their own catalog-detail.css and catalog-detail.js file. They are only sent to the browser if the catalog detail component is used at the requested page. Therefore, the browser doesn’t need to fetch and parse unused CSS/JS code any more which can shorten page loads drastically especially on slow devices/networks.

Furthermore, the used Slick slider contains a lot of JS code which is executed after the document is fully loaded. This increases the “time to interactive” until the users can interact with the page but it’s a crucial value for Google Lighthouse and heavily affects the score. Now, Aimeos uses SwiffySlider, a slider based on CSS animations with only very little JS code. It’s feature-rich, supports touch out of the box and has very little negative effect on performance.

Bootstrap / jQuery

Bootstrap 5 has been used in the backend since 2021.04 and now, the default frontend theme has switched to Bootstrap 5 too. This allowed us to dump the jQuery library in favor of vanilla Javascript but that turned out to be much more code than before. Here’s a code example for jQuery and vanilly JS:

// jQuery
$('.class')

// vanilla JS
document.querySelectorAll('.class')

Vanilly JS is rather inconvenient compared to the terse code you can write with jQuery. To get short code without the bloat of jQuery, we now use the Cash DOM library as instead. It offers the same syntax as jQuery for the “$” function and the collection methods but doesn’t contain the compatibility code for old browsers and uses native browser functionality instead. It also requried to use the new JS fetch API offered natively by modern browsers instead of the jQuery get()/post() methods.

Upscheme migrations

Since 2022.01, Aimeos uses Upscheme for migrating the database schema and the data itself. Compared to using Doctrine DBAL directly, this reduced the required lines of code drastically up to 80% and creating/updating a table now looks like:

$this->db( 'db-message' )->table( 'message', function( Table $t ) {
        $t->id();
        $t->type();
        $t->string( 'label' );
        $t->bool( 'status' );
        $t->meta();
} );

All setup tasks are now located in the setup directory of the Aimeos core and the Aimeos extensions. There’s already an Upscheme article available which explains how to implement setup tasks in Aimeos 2022.x and later.

Performance

To increase performance of Aimeos further, the underlying data structure has been modified. Before, products has been referenced in the mshop_catalog_list table by categories and in the mshop_supplier_list table by suppliers. This required fetching categories and suppliers for products in two separate queries and especially for document-oriented storages like ElasticSearch, it enforced updating the documents two times.

Now, categories and suppliers are attached to products instead of the other way round, so only one additional query per domain is needed to fetch that data for the frontend. It’s now perfectly in line with document-oriented storages can reduce indexing time drastically.