Umbraco

Future-proofing the backoffice: Implementation

Jacob Overgaard
Written by Jacob Overgaard

The time has come to start the implementation phase of our large undertaking of future-proofing the backoffice. Learn more about the current progress of the project, the details of the next phase, and how you can get involved.

It has been almost a year since we finalized the original RFC for future-proofing the backoffice. It laid out the plan for how to upgrade the backoffice to follow a modern web approach.

The project is structured in 3 general phases:

  1. Build a stand-alone UI component library
  2. Define the backoffice extension API
  3. Implement the backoffice

Before we look at the next steps, I will give you a status of where we are in this plan.

Phase 1: Umbraco UI Library ✔️

Following the RFC for a component library, we are building a new UI component library, which is colloquially known as the Umbraco UI Library. 

While it is already available in an early version, we are aiming to land the UI library in a stable version 1.0 in Q2!

The work will not stop here, though. We have many exciting features on the timeline for the UI library such as support for all backoffice components including tree structures, tables, and file uploads. We are also actively working with the community to support the UI library. Recently, the Accessibility Team has taken it under their wings to ensure the UI Library is living up to modern standards for accessibility.

Illustration showing Umbraco UI components in a book situated on a table. Surrounded by a coffe mug with the Umbraco logo, a pencil, laptop and a chair. background is dark with a window and a plant.

A lot of the UI of the new backoffice will be rooted in the UI library. The original plan of the UI library was to make Umbraco-centric components - rather than using a generic library and building on top of that - and that is still the plan moving forward.

Meanwhile, we are starting to use the UI library in some of our other products. The first use case is our Cloud portal, which recently began an incremental migration towards a more modern approach with UI library components. This greatly benefits the user experience overall of the Cloud portal seeing that the UI library adds a best practice approach to the UI including accessibility and ease of use. This also allows us to gain valuable experience running the library in production and learn a lot even before we start building the new backoffice.

You should check out the Storybook for the library here, which showcases all components: https://uui.umbraco.com

And check out the GitHub repository here, where we would love to get feedback if you happen to stumble upon something: https://github.com/umbraco/Umbraco.UI

Phase 2: Define the backoffice extension API ✔️

In the second phase of the project, we have worked closely with a dedicated Backoffice Community Team to land an RFC for the new backoffice extension API. You can read the outcome of this work in the Extension API RFC. The RFC lays out the approach for extending the backoffice in the future and has examples for many of the common extension points such as property editors, dashboards, and more.

The work we did up to releasing the RFC, and all the comments we received on the RFC, have enabled us to land on a good approach of how to implement the new extension API for the new backoffice.

We are looking very much forward to building friendly extension points into the new backoffice with the feedback we have gotten.

Phase 3: Implementation 🚀

We are about to embark on the third phase of the project. Aside from getting the Extension API RFC done in conjunction with the community team, we have also been gearing up for the implementation phase by adding a dedicated frontend team to HQ. 

There is no denying that the implementation phase is a big undertaking. In fact, it’s not too dissimilar to the Unicore project that successfully culminated with the launch of Umbraco 9 in September last year. And just like that project, community involvement is an integral part of the project both to help us deliver on it in a timely fashion but also to ensure that we have a good sounding board for decisions. All in all, to make sure we get it right - together 🙂

The steps of this coming phase are as follows:

  1. Start up a new community team
  2. Publish an RFC together with the community team
  3. Begin the implementation

Following is a brief description of the steps, more information and details will be published, starting with the Backoffice Community team applications in the coming weeks.

The Backoffice Community Team

Once again, we would like to include the community from the very beginning of this phase. This means we will start up a new Backoffice Community Team with a new application process.

Saying goodbye to the community team

While we can now put a green checkmark to phase 2 of the plan, this also means that the role of the original Backoffice Community Team has been played out and the team has signed off.

We would like to say a huge thank you to the Backoffice Community Team! 

H5YR!

You have helped us in immeasurable ways. We feel like we are in a very good spot to commence with the next phase, which is to do the actual implementation of the backoffice.

Umbraco community highfive graphics

Saying hello to the community team

When we called for signing up to the Backoffice Community Team, we said that the team would be a little special: During phase 2 they would focus on contributing to the extension API RFC, and in phase 3 they would change focus into code contributions/review and we would open up for new applications. 

In the coming weeks, we’ll open up the application process for the Backoffice Community team 2.0. So if you’re looking to get involved in building a new and improved backoffice for Umbraco, now is your chance. Everyone is welcome to join, newcomers and previous team members alike. 

Request for Comments - Backoffice Implementation

In this last planned RFC for the project we will describe the overall technical architecture of the new backoffice:

  • Technology
  • Tooling
  • Build processes
  • API interaction

These will naturally be informed by the previous RFCs for UI Library and Extension API, and focus on how it will all be tied together in a new and modern backoffice. The new community team will be involved in the process and the RFC will be published for feedback and comments.

Implementation

The implementation of the new backoffice will start very soon. Within the next couple of months, we will start prototyping and building out the foundation. As soon as the new Backoffice Community team is up and running they will be involved in the process as well. Just like with the Unicore project, this project will also require collaboration with other teams such as the Documentation Curators, Package Team, and more. 

Look out for the Backoffice Community Team blog post in the coming weeks, get your application in, or share it with friends and colleagues that might be a good fit. I’m incredibly excited to get this part of the project underway and hope you are too. Let’s build a better backoffice together 🚀