Back to the Front-end: Exploring the Future of the Umbraco UI (Part 2 - Resources)
Tags: umbraco, frontend
Published: 2022-10-21 07:23:49

To start this series, I thought it would probably be a good idea to collate the various resources that are currently out there with information about the new back office UI as these will form the basis of my learnings. 

I'll try and keep this up to date with new resources as they are released so feel free to let me know if I've missed anything and I'll add it to the list.

## RFCs

- [RFC 0024 - Implement The New Backoffice](https://github.com/umbraco/rfcs/discussions/34) - The main RFC that outlines the approach HQ will be taking for implementing the new UI  
- [RFC 0023 - Defining the backoffice extension API](https://github.com/umbraco/rfcs/blob/main/cms/0023-define-the-backoffice-extension-api.md) - The RFC that reviews the existing API's as well as various hacks developers are using to define a new API to cover all existing eventualities.
- [RFC 0022 - UI Component Library](https://github.com/umbraco/rfcs/blob/main/cms/0022-ui-library.md) - The RFC defining a new UI library of basic components to be used by the new UI predominantly based on an audit of the current UI and consolidation of patterns.
- [RFC 0021 - Future-proofing the Umbraco backoffice](https://github.com/umbraco/rfcs/blob/main/cms/0021-future-proofing-the-umbraco-backoffice.md) - The RFC that outlines the motivations behind the need of a new back office UI and the overall plan and process of how we get there.

## Videos
- [CG22 - Keynote](https://youtu.be/7HDiqhIPgSA?t=2824) - Overview of the new back office coming to Umbraco from the CG22 keynote.
- [CG22 - Web components in Umbraco - crash course](https://www.youtube.com/watch?v=ZlT4Dp_fcAo&list=PLG_nqaT-rbpx7QcHtQE4Efr83U6Lqf4Fp&index=19) - Session at CG22 by Julia Gruszczynska about getting started with Web Components, a key concept to the new UI
- [CG21 - Future-proofing the backoffice](https://www.youtube.com/watch?v=UVEOrkxKcZ8) - Explination of the motivation behind redeveloping the back office UI by Filip Bech-Larsen
- [CG21 - Future APIs for Extending BackOffice](https://www.youtube.com/watch?v=I6b1qxLy0TI) - Explination of the motivation and findings in developing the new futuireproof API for the new back office by Filip Bech-Larsen
- [CG21 - Web Components through the medium of tea and coffee](https://www.youtube.com/watch?v=2-DQntec3pM) - An intro and example of web components by Mike Masey.
- [CG21 - Swift development with UI Library](https://www.youtube.com/watch?v=TFeKf7JWckk) - Demo by Julia Gruszczynska and Niels Lyngsø on how you can use the new UUI library to swiftly develop an Umbraco branded UI.
- [Hack Make Do - Intro to Umbraco UI WebComponent Library](https://www.youtube.com/watch?v=HmdIF_zCvu8&t=19s) - And intro to the new UUI component library and how to get started using it from from Warren Buckley.
- [UmbracoCollab - Exploring the NEW Umbraco backoffice](https://www.youtube.com/watch?v=N4hBKB0U-d8) - Demo of the new back office UI as developed as part of RFC 0024
- [Contributing to Microsoft Playwright Acceptance Tests for Umbraco](https://www.youtube.com/watch?v=N4hBKB0U-d8) - Intro to contributing Playwright acceptence tests to Umbraco, the chosen acceptance testing framework for the new UI.

## Source Code
- [Umbraco.CMS.Backoffice](https://github.com/umbraco/Umbraco.CMS.Backoffice) - The main source code for the new back office UI, previously the demo project as part of RFC 0024
- [Umbraco.UI](https://github.com/umbraco/Umbraco.UI) - The source code to the UUI library components

## Packages
- [npm - @umbraco-ui/uui](https://www.npmjs.com/package/@umbraco-ui/uui) - The UUI component library npm package

## Documentation
- [UUI Library Storyblock](https://uui.umbraco.com/) - The Storyblok demo site showcasing / documenting the UUI library components 

Have I missed anything useful? Then please let me know in the comments below.