For years, members of the UI5 community have been building extensions in the UI5 ecosystem. Be it custom controls, extensions for the UI5 tooling, generators or utilities in general.

For a central point of reference, the GitHub organization UI5 Community was created last year.

This already contains a large number of projects that can be used.

UI5-community on GitHub

Already in the announcement for the new GitHub organization Peter had the idea to create more visibility for the projects and to highlight them.

A good example is BestOfJS, which already lists the projects OpenUI5 and UI5 Web Components.

In the JavaScript ecosystem there exists of course a much wider range of projects that can be reused. So, this page gives a good overview of the most popular JavaScript projects.

Recently, one interesting extension for the UI5 tooling has been added to the UI5 tooling ecosystem project of the UI5 Community: ui5-tooling-modules.
It allows consuming NPM Packages very easily, even if this was not specially designed for the UI5 framework.

After a long and convoluted Twitter thread, various members of the UI5 community came together and discussed how to use the ui5-tooling-module and the best way to consume ui5 custom controls and general npm packages.

In the process, the idea of Peter’s BestOfUI5 website came up again.

 Idea

BestOfUI5 – like BestOfJS – lists projects related to the UI5 ecosystem. It includes UI5 tooling extensions (tasks and middlewares), Easy-UI5 subgenerators, custom UI5 libraries and custom UI5 controls (as standalone NPM packages).
BestOfUI5 is the central place to look up reusable projects around UI5 and even more we plan to also include even more projects, such as sample applications or Visual Studio Code Extensions.

To make the individual projects easy to find and to display the most important data, we have adopted the most significant features of BestOfJS.:

• Hot Packages → currently popular packages
• All packages → overview of all packages with search function
• Package details → display details of a package incl. readme
• Use of tags/types
• Timeline

And as it should be for an OpenSource project for the UI5 community, we of course want to use the latest capabilities of UI5:

• OpenUI5 in the latest version
• Typescript
• UI5 Web Components
• External UI5 Custom Controls
• External NPM Packages
• E2E testing with wdi5

Initial result

Website BestofUI5.org

The new page can be reached at bestofui5.org and shows the most popular packages.

The home page does not show the packages by stars like BestOfJS, but by the change in download numbers in the last two weeks. This is a better indicator for our projects.

All projects are listed under “All Packages” and can be searched using the search bar.
All projects have a type (middleware, task, generator etc.) and tags and can be filtered by that criteria.
In addition, various key figures are available for sorting the packages (downloads, created at, updated at).
For the types and tags there is also an extra view, where all are clearly listed.
Furthermore, there is a timeline view with an overview of which packages have received the latest update.

The GitHub Repository is available here including an extensive readme.

Data retrieval

The most difficult thing at the beginning was the data retrieval. Without this data such a website would be useless. Fortunately, there is already a similar project by Marius Obert, called artifact-of-the-month, that has already addressed this problem. There, a large amount of data was retrieved from GitHub, NPM and Docker.

Here we can partially adopt the logic to retrieve data from GitHub and NPM via their APIs.
From GitHub we fetch data like, stars, clones and the readme file.
From NPM we fetch data like created At, updated At, versions, downloads history, authors and license.

The scripts are written with Typescript and generate with GitHub Actions every day JSON files which can be consumed by the UI5 frontend.

For more information you can look “behind the scenes” and view the source code as well as the documentation here.

Frontend

Of course, the frontend should also be written with UI5.  We use OpenUI5 with the latest version (currently 1.102.0) with the new Horizon Theme in the Light and Dark Theme (aka Morning and Evening).

And since we want to show the custom controls from the community, we also use one.
The control “ui5-cc-md” written by Volker Buzek is rendering our readme coming from the GitHub repos.

On the object views we show, besides the readme, also the historical download numbers of the NPM packages. To display these we use “chart.js” and with the help of “ui5-tooling-modules” we can easily integrate the library and display the numbers with a bar chart.

Since the UI5 standard timeline control only exists in SAPUI5 and not in OpenUI5, but in UI5 Web Components, we can use it here to display a timeline of the versions of the individual packages.

Testing is also an important part of the application and therefore we use wdi5.

Add your package!

If you also have a package that you want to share with the UI5 community, simply follow the steps described here:

1. Just go to bestofui5.org and click on the button which says “Add your own package” or click directly here.

Add your package at BestOfUI5.org

2. Add your info about your package to the issue and check the prerequisites

Create Issue to add your package

3. Create a pull request as described in the issue

4. After the pull request is merged and the crawl action runs again, your package is on BestOfUI5 🎉 

Outlook

The website thrives on contributions from the UI5 community.

Since all components are open source you can easily create a pull request or an issue if you notice a bug or want to improve something.

All things that we have noticed or plan to do are also documented as an issue. Here you can also give feedback.

We will also present this project at the UI5con this year. In this context, other projects from the UI5 community will also be presented.

Be prepared!