Why the return to scripting hell?

I haven’t touched Umbraco in about a year, and recently I had a crack at creating an extension using the template for v15.
Very surprised I was asked to run npm, so I install and run it and the framework that is generated is a mess. I mean we have .NET openai packages, but the extension is using JS to generate the swagger endpoints? Why?

Then I decide to take a look at the generated TS code. Multiple imports and dependencies, mapping of backend services to the plugin through JS (rather than just using C# and injecting) .

TBH this reminds of late Umbraco 6 and early Umbraco 7 where there were still weird holdovers and issues from the older versions when Umbraco was heavily scripted and assumptions about JS were made which caused havoc and a lot of technical debt in the later versions.

We finally moved away from this sort of thing, keeping the JS lighter with spoken intentions of making the whole thing JS agnostic. V8 was great and v9 was beautiful and this trend continued on into 10 & 11, my only complaints would have been the reliance on SQL directly inside the individual services instead of confining those to an independent dbservice.

So why the return to scripting hell? Why not make the backend actually JS agnostic (I’m seeing Angular in there again) and run it as server-side components in Blazor with a little native JS just for dynamically updating UIX then if someone wants to extend with a framework they can?

Now instead we are recommending the use of the insecure package repo NPM (hey nothing like a supply chain attack with package injection), and ignoring the advances in web content in .NET 8 & 9 to use JS packages.

I love Umbraco and I have only been away for ~1 year, but to my mind the latest version feels like a large step backward and needlessly overcomplicated.

The whole v15 backoffice is based on Web component, which work natively in all modern browser with a little help of Lit, which is a tiny framework (although vanilla js without Lit is possible):

Lit reduces the boilerplate code often associated with web components and provides powerful features for reactive state management, templating, and performance optimizations.

From: Deep Dive into Lit: A Modern Framework for Web Components | by Codenova | Medium

There is no AngularJS left over at all, so I am not sure what you’re seeing but it’s not Umbraco 15 :sweat_smile:

Other than that, I think you shouldn’t need to encounter any of the javascript unless you really need to build some extensions for Umbraco.

From this post I am not too sure if you’re just building Umbraco from source code, or are actually installing Umbraco from NuGet, or trying to extend Umbraco with new plugins.

The backoffice frontend and any business logic is seperated completely now. Every action you do in the backoffice is managed through the Management API. So technically, you could easily write your own backoffice in whatever language you like. Everything the Umbraco backoffice can do, you can do with the management API.

The backoffice frontend is based on Web Component is and meant to be framework agnostic. As long as your code adheres to the web components standard, you can use vanilla javascript, Lit, but also React, Vue, and I guess Blazor, so whatever you like.

You say that the old backoffice was great, but it was based on a horribly old version of AngularJS, so I’m not sure what was so good about that. And to make sure that in the future we’re not having the same issue with a framework that is getting old or unsupported, it was a deliberate choice to make the backoffice frontend framework agnostic.

So yeah, ofcourse you can have an opinion that it’s no good, but I’m not sure if it’s based on the right reasons (or I don’t understand your comment, that also possible ofcourse :slight_smile: )

1 Like

Nuget + Extend, there are angular controllers in some of the example code of the extension template.

I looked into lit a number of years ago and was not happy with the latency it produced on a per-component basis, maybe they have gotten better but I think the issue was more the dom editing lag of JS. I’ll take a look but I’m not expecting much tbh. NPM is still an issue though (the structure of how NPM works means there is a hole allowing supply-chain attacks on packages)

Can you still do an entire plugin with backoffice section without touching JS? I used to do that in v8 - v11 and it worked really well.

Although at the moment the larger problem is the return of the missing media folder issue (if you use a local sql instance but do not set an unattended username/pw), and a couple other legacy issues from around the v12 days that seem to have re-appeared if you use the ide to install. doesn’t seem to be an issue if you use the dotnet cli to install.

NuGet has also been used in supply chain attacks. Don’t think you are immune to security issues just because you are using a Microsoft tech stack.

1 Like

That wildly depends on what you’re trying to do.

I am not entirely sure what you’re trying to achieve with this post. I recognize that big changes can be frustrating, but it’s a bit difficult to help you in this case. This forum is for questions and answers and you’re not really asking actionable questions.

So I’ll answer your initial question, as I’ll boil it down to: “why did Umbraco go this way?”

We started discussing the future of the Umbraco backoffice in 2020:

And followed up with discussions around the new extension API:

And the implementation:

Eventually leading to Umbraco 14 in 2024:

I think that should answer your immediate question as to why. If you have further questions as to how to use some of the new things then I think those would be good to ask in new topics, with more of a focus on: I am trying to do “x”, I found that I need to use “y” and “z” but I’m stuck on “a”.

7 Likes

Thank you for the RFCs, I contributed to some of these discussions back in the day, I’ll read through some of the later stuff.

My issue has always been the reliance on JS frameworks, whilst lit isn’t the worst (it’s actually very close to Blazor in structure from what I remember), the fact it runs as scripts means the latency overhead per component is high (not as high as other frameworks) (comparatively) particularly for loops of objects or long lists, I’ll give it another go and see what happens.

I also prefer to keep as much in one language as is possible so any changes occur only in one spot, rather than having one piece of code in the backend, one for the FE and repeating the boilerplate of all of that and integrating in the dashboard.

So for the plugin, essentially I would want a backoffice section with an interface
(html/css primarily then maybe a basic endpoint hit for some queries). Ideally some of the components on the section dashboard would be virtualised for large data arrays so they remain fast on the UI. But for now tabs and basic form functionality on the backoffice area that can integrate with a custom table through controller endpoints.
From the initial look I think my mistake was going with the example plugin code, it’s obviously built with a FE TS coder in mind (also where the angular controller was). I might just try the older methods that worked in Umbraco 9 and see if those still work to cobble something together without touching the example extension.

Thanks for the info, I may sound pissed off, but I love the Umbraco system and seeing the recent year’s focuses on things like EF and the insistence on using JS when it is unneeded was frustrating (I may be wrong about this according to what you say, I’ll have a crack).

We can’t please everyone. :blush:

Anyway, if you have actual questions on how to use all the new things, then that’s what this forum is for!

If you just want to manage a custom DB table in the Umbraco backoffice, maybe you can give UI Builder a try. This is fully configured via C# API and requires no knowledge of JS. It’s also free to use on Umbraco Cloud Standard or Pro installations, or free for one editable collection on any other install.

Hi @Slipoch, you’re not the first .NET focussed Umbraco community member to find the move to Web Components and modern JS a poor fit. There is a community effort to build an Umbraco-like CMS using Blazor that you might want to check out:

Regarding some of your other points, as C# is by far my favourite language, I understand where you’re coming from. But the reality is that the Umbraco backoffice is a web application and the programming language of the web is JavaScript. Blazor is ultimately just another JavaScript framework[1] and the fact that it happens to be written in C#, as opposed to any other language that’s compiled to JS, doesn’t change the fact that it’s exactly the kind of framework that HQ wanted to avoid given the problems that AngularJS caused.

One of the big problems with the new Backoffice isn’t actually the new Backoffice. It’s that the old one was stuck using 10-year-old JS approaches, so while the rest of the web was incrementally moving forward we Umbraco devs were stuck in the past. Now we’ve got 10 years of frontend development to catch up on, as well as all the Umbraco specific things. It’s a lot.

Speaking as a C# developer, LIT with TypeScript is the probably the friendliest/most familiar option Umbraco could have gone with, while keeping standards-compliant and framework-agnostic. As Luuk pointed out above, LIT is only absolutely necessary if you want to contribute to Umbraco itself.

As an aside, JavaScript in the browser hasn’t been a “scripting” language for a long time now, and modern JS really is a proper grown up programming language now (albeit with some seriously weird hangovers from its early days).

HQ have been clear and open about the need to modernize Umbraco 's backoffice, and the proposed approaches. A talented team of developers have rewritten the Backoffice from scratch and turned into a modern standards-based web application comprised of documented and properly versioned open-source components and APIs - at no cost to us.

They’ve also put in a lot of effort to help bring the community with them - from the RFCs to leading webinars, showing up at hackathons, helping migrate packages, and again that’s all for the low, low price of… free.

There’s a lot to be thankful for here, even if the tech stack isn’t necessarily our favourite way of delivering that.

In my experience, if there’s anything that you want to do with the new backoffice, you will find no end of friendly help from both HQ and the community.


  1. I appreciate that this doesn’t have to be the case with Blazor, but there’s no way an app like the Umbraco backoffice could practically run mostly from the server. Even if it could, we’re talking about writing frontend code in a vendor’s DSL. ↩︎

5 Likes

Sorry blazor is not a JS framework, this is a pretty common misconception as it uses JS for the SignalR comms (depending on WASM vs Server it works a little differently). It also doesn’t have to be one-only either, but can run as hybrid (run the component server-side until the component download is complete then run as local WASM).

To paraphrase the head of web at MS: Blazor is what will will be driving the backbone of all web for the forseeable future. (also fluent ui is now being used for all MS UI)

I would also argue that JS is still a scripting language due simply to the way it runs within the browser and is never compiled nor capable of running separate to that environment, doesn’t matter how advanced or capable it is, it can be modified dynamically within browser that is running it. I’m not saying JS is bad, it just requires different considerations.

But I used blazor as an example as you can use dependency injection directly in components themselves (cutting out a lot of duplicated effort). But as an alternative you could also use pure WASM, html/css/js etc. forcing typescript and lit means 2 sets of parsing/compilation as well as dictating js frameworks, or use angularjs if you want. my original point was that this is starting to feel like around umbraco 6 where there was a lot of legacy from scripting and things you had to do to get any extension working.

Previously I used to implement the IDashboard class within C# to create and register a new dashboard within the code itself, all the views names, icons etc were produced from here It kept duplication to a minimum. I vaguely remember having to have the language files obviously and maybe a manifest but that was it, I’m not . Then 90% of the rest of it was grabbing the umbraco css and just using the correct css3 & html5 to create the dashboard.

I would occasionally use pure JS to provide animations, dynamic endpoint hits etc. but that was it. Didn’t have to use angular at all in most cases although I did use it in limited amounts.

A prior website I have been on the backend on has integrations for runs on-server backoffice UI and is downloading ~20k records 4 times a day with updates to publicly accessible nodes in Umbraco as well as a dashboard list of the downloads that allows editing. This works quite well running on the server and is only on a (what was known as an ) S2 instance on Azure.

Again, I am not saying x needs to be used specifically, but we once again are locked into older js frameworks in typescript and lit and from what I can see in the docs, the route to doing things through dotnet has been blocked. This is the issue I have. Now I am hoping I am wrong, but the quick look around I did last night did not disabuse the notion.

I do appreciate it has been provided for free, I have also previously contributed to the docs as well as answering forum questions and submitting solutions to bugs on the bug report area in git.

I have my own fork which I am testing some stuff out in (abstracting the DB to an interface for NoSql). But the arguments I made back when the idea of moving to EF was first floated are still relevant, the arguments I made back when they talked about updating to use only a particular flavour of JS framework are still relevant. Why not allow all of them and have your c# backend point to what files to use for any dashboard or view and let the devs decide like we do for the frontend views? Then Umbraco can use lit & typescript to generate their backend view & functions and someone else can use blazor, and a 3rd person could use Angular2. Or even AngularJS.

The issue is not what has been chosen, the issue I have is the reliance and locking in of particular frameworks, (TS has been dropped by both svelte, turbo and several other large projects, due to code quality issues and the dupe compile) and that is where the issues started with early versions of Umbraco, I never had an issue with AngularJS because I had the choice to use it and get the built-in Umbraco benefits or ignore it and do my own thing.

Like I said above, I love Umbraco, it’s user interface is excellent for the end-users, the security is generally pretty good and extending used to be an easily doable task. When NPoco was introduced I was cheering, a light-weight ORM that did everything that the schema of Umbraco required.

The original question has been answered @sebastiaan, the followup question was is there a way of declaring a section with a dashboard and setup the path to it’s view like in Umbraco 7-> 12 in code alone? The documents do not mention how to do it.

I may just have to go through the codebase again to see what is grabbing the dashboards and where to see if they are registered in an interface implementation. If I do find I way I’ll update the help docs and submit for review.

Updated docs for sections is here:

There’s no longer a C# API for registering backoffice extensions, it’s done via the package manifest. For a dashboard (linked from the above docs) the package manifest needs to point to the relevant web component to import, a section is just config.

I will dispute this, TypeScript is javascript but it compiles, and for example node.js is a hugely capable very popular server written in javascrip:

For sure, the server part is not what Umbraco uses, but your definition is not quite right.

Anyway, I do get what your saying but arguing over the stack that you need to work with to extend the backoffice is not productive. As noted above, someone with a similar vision to yours has already built a pure Blazor CMS.

As for extinding Umbraco: as a rule of thumb, as of Umbraco 14, everything you visually see in the backoffice is built as a web component, with help from javascript or typescript. So the kinds of plugins that can be written purely in C# is probably limited to “non-visual” stuff.

Well good news, the code base is brand new, uses native browser capabilities (web components, JS) and there’s a brand new management API backing the frontend of the backoffice. Still plenty of legacy hiding further behind those new things, but most people don’t generally need to encounter that.

I would recommend, if you need to start building Umbraco extensions, to start with:

Instructions here:

This will set up an environment where you can just start coding, instead of having to figure out what goes where.
Installing it as instructed also already gives you an example dashboard, so if all you’re after is a dashboard then you’re good to go by installing this template.

2 Likes

Ok IMO it is still scripting, because whilst TS says compiling, it is actually just parsing the language to JS and still has to run within the JS interpretor engine with no direct HW access. Same for Node.JS, you are just the running a JS browser engine server-side with the node libraries running within it. C# while jitted is compiled to IL & run on .NET or compiled down to native code with the Net libraries embedded within it, it can write directly to memory and other hardware.

Generally (unless I really bugger things up) I don’t need to consider memory management in JS, but I will in C#. As I said, different concerns.

But this is semantics anyways, just the way we view what a scripting language is is different.

Had a quick look at the code, had a quick look at the other CMS, and gotta say it’s super clean and the memory usage is pretty decent, I made a separated package with a dashboard in about a minute or 2. Going to definitely keep an eye on it and maybe contribute, I’ll prolly stick with Umbraco for now (when work allows time that is, my main job is not web but a megalithic multi-language project :frowning: ).

Web components are good as you can embed whatever libs you want in them, including Blazor now.

Cheers for the project link, I’ll look into that next time I have time.
I assume from your answer that there is no way at all to register an admin section + dashboard in the backend because it is all working using a FE library (eg: the JS to define a section and dashboard are never registered in the backend C# unlike prior versions).

Not natively, no. But there is a package available for v15 that enables you to register a dashboard in C# and use a Razor view to render the dashboard.

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.