Back to the Front-end: Exploring the Future of the Umbraco UI (Part 3 - Glossary)

less than a minute read

Next up in this series, I think it would be worth creating a bit of a glossary of key tech / concepts that we are going to have to learn about in order to start to build and extend the new UI.

I’ll just be outlining the main elements here, but I’ll detail them in future blog posts as I learn more and I’ll be sure to update this page with links to those posts as I do (they won’t necessarily get blogged about in this order though).

Tech Stack

  • Web Components - The key concept within the new back office UI for componentising the system and allowing extendibility in a future proof manor
  • ES Modules - The concept for producing modular script files.
  • Lit - A lightweight library used by the new UI for simplifying the process of creating web components
  • TypeScript - A javascript extension to allow strongly typed behaviour during development helping to eliminate mistakes and create more consistent code
  • UUI - The Umbraco maintained UI library providing the low level UI building blocks for the new UI
  • OpenApi - A specification for a standard programming language-agnostic interface description for web based APIs
  • RxJS - A javascript extension to provide reactivity to data objects allowing them to be observed and watched for changes so that the UI can update itself automatically
  • Vite - The build and dev tooling for compiling the new UI
  • Playwright - The end-to-end testing framework used by the new back office UI

Concepts

  • Context API - An event driven approach to dependency injection that doesn’t require any 3rd party libraries
  • Manifests - A config file to define and register custom controls with the back office UI
  • Routing - The mechanism used to control navigating around the application via the address bar
  • Styling - The ability to control the styles and themes of elements on the screen