Umbraco
5 Minutes to read

CODECABIN 2023: For the specially selected Umbraco VIPs (or MVPs)

Bjarne Fyrstenborg

Developer

With the title as MVP in Umbraco, Bjarne is certainly a specialist in the system. He has many years of experience in Umbraco, and he always manages to crack the otherwise most complicated solutions.

But the excitement isn't. MCB sent its MVP, Bjarne Fyrstenborg, to England to participate, and he brought back with him a fully packed Umbraco backpack. Let's take a look at it together.

CODECABIN


CODECABIN is an event for selected Umbraco developers. It is held annually in September over a weekend in a relaxed environment and beautiful surroundings near Grindleford, approximately 1.5 hours' drive with train from Manchester in England. The event is organized by people in the Umbraco community, and it requires a very special invitation to participate.
That's why it's truly unique that our MVPs have attended alongside 19 other talented Umbraco developers.

This year, the event had a slightly different structure than in the past, including 4 sessions aimed at fostering professional discussions on various topics. In addition, dedicated time was set aside to delve into the code related to existing APIs in Umbraco, package development, and/or extending the Umbraco Backoffice. There was also a glimpse into the upcoming and modernized Backoffice in Umbraco 14.

The new Backoffice brings a breath of fresh air, is future-proofed, and is based on both web components and modern web standards, making it more flexible, scalable, and accessible to all users, regardless of any disabilities.

*MVP stands for 'Most Valued People.' This group consists of 83 (as of 2023) outstanding developers who take Umbraco to the next level and contribute to the embrace of the open-source system. They are developers who live and breathe Umbraco, and as a result, they can always provide the absolute best service.

 

Headless is the future

Starting from Umbraco 12, which was released in June 2023 with Standard-term Support (STS), there is an out-of-the-box Content Delivery API (REST API) that allows you to build on and make use of a headless setup.

In a headless CMS, the frontend and backend are separated, making it a backend-only content management system. A headless CMS is where you store, update, and delete content, but it won't be displayed anywhere unless you connect a frontend to it – for example, Umbraco CMS.

A headless CMS will likely be built using either Umbraco Heartcore, Umbraco CMS with the Content Delivery API (REST API), or Umbraco Commerce, which also has a corresponding Storefront API (also REST API).
Additionally, a REST API for media (Media Delivery API) will be added, making it possible to retrieve data directly from it as well.

From a headless Umbraco setup, it's still possible to extract data for a traditional website or Single Page Application (SPA), as well as for other web-based apps or mobile apps. This means content can be delivered to multiple channels.

At CODECABIN, it was emphasized (once again) that the headless approach is the new trend and something that needs to be worked on more in the future. Therefore, it's worth taking a closer look at headless possibilities with Umbraco If you want a website that provides data to multiple different channels.

 

Efficiency through segments

On a website, you typically want to convey information to one or more target audiences. This can be done in many different ways, and there isn't always a one-size-fits-all approach. How a message is best conveyed (and later received) depends on your target audience.

Since Umbraco 8.7 was launched, content segmentation via API (Umbraco does not have a UI to create these) has been a solution to this challenge. This solution allows you to create segments and then personalize a single piece of content to achieve optimal effectiveness.

Segments are typically used to display different content depending on whether the user is on a desktop or mobile device. This makes it much more likely that visitors will convert from being visitors to leads.

If this is something you'd like to explore, you should take a look at uMarketingSuite, which allows you to create personalized content for users.

 

The possibilities with front-end frameworks

In recent years, Umbraco has used various JavaScript-based frameworks in the frontend, including Angular, Vue, and React. Each of these has its advantages when it comes to building web apps (SPAs), but for simpler sites, other alternatives may be more suitable, such as lightweight frameworks.

During CODECABIN, there was a discussion about whether Alpine.js could be a beneficial player, especially when supplemented with specific vanilla JavaScript plugins that could enable features like a date picker. 
Interesting perspectives and arguments for choosing different frameworks for building the frontend were presented. And while some trends may prevail for a period, it ultimately depends on the specific project to determine what is best.

Furthermore, modern browsers increasingly support more advanced features and AJAX, which makes a library like jQuery more or less obsolete on modern websites or web apps.

Therefore, you should determine which framework suits your site and your needs to ensure you get the most appropriate setup. It can be a challenging task to navigate through the many options, and we acknowledge that. Therefore, our Umbraco developers ensure to choose a framework that suits the individual solution and functionality, so it's a concern you can set aside.

 

The new Backoffice

Already at Codegarden this year, participants got an insight into the preparations for a new Backoffice in Umbraco. That's precisely why Backoffice is one of the more exciting topics discussed during CODECABIN.
Especially because there was a focus on some new features and possibilities that enhance the editor experience.

The current JavaScript framework used in the Backoffice is outdated. The new Backoffice is, therefore, future-proofed as it is based on modern web components, ensuring both a streamlined UI and a faster Backoffice.
This also means that extensions for Umbraco will have a more consistent visual style, as developers have the opportunity to reuse these components, such as in a Backoffice dashboard.

The ability to customize dashboards in the Backoffice was also discussed, with a specific proposal for user-customizable dashboards with widgets presented. We truly hope this is something we can make use of soon!

Another recurring theme regarding the Backoffice was the use of web components and the new Umbraco UI library. We will, for instance, see that the login page in Umbraco 13 removes the use of jQuery and instead relies on components from the library.

The new library can already be used in the existing Angular-based Backoffice.

 

Utilization of AI

We can no longer ignore AI.
Artificial intelligence has already revolutionized numerous industries and business domains. AI increases productivity, automates routine tasks, predicts trends and patterns, enhances customer service, and strengthens decision-making processes. It provides companies and organizations with a massive competitive advantage while transforming the way we work, trade, and live.
AI has become an indispensable resource for handling the increasing amount of data and complexity in the modern world.

Therefore, AI was naturally a well-discussed topic during CODECABIN.

There were discussions, for instance, about the use of Generative AI in web development (with a particular focus on OpenAI's ChatGPT and GitHub CoPilot) and how artificial intelligence can help us boost productivity in development - still requiring validation and critical thinking from the programmer.
This could involve the editor receiving assistance in writing content through headline suggestions to kickstart the writing process or the ability to generate entire paragraphs of text. However, it would still always require validation from the editor.

The importance of adjustments to the specific context and the need for cautious and thoughtful AI usage were also topics taken very seriously during the discussions.

 

Reusable content

With the latest block-based data types in Umbraco, which are used for building content sections on a website, it has become evident that there is often a need to share or reuse these blocks across pages. This action results in a more efficient approach to working with Umbraco and, in general, page creation.

These blocks could include sections containing employees, testimonials, locations, or similar content. Creating them can be time-consuming as they contain a lot of data, and therefore, it's desirable to avoid recreating them on every page where they are needed. Simply copying and pasting text and images doesn't seem advantageous because any change would then need to be made in all the places where that specific block has been used. This can quickly lead to pages being overlooked, causing confusion.

Hence, during CODECABIN, there was a discussion about the possibility of creating reusable or shareable content. And this isn't just about content through blocks but also more complex data.

And there's already good news! Umbraco is currently working on a draft and a more detailed specification of this feature within the CMS. It's highly likely that this will be implemented in an Umbraco version within the coming year.

 

Kontakt os nu