Weâre joined by Andreas Møller, Co-founder of Nordcraft â the team behind Nordcraft Engine, a powerful new platform designed to give web developers what gaming developers have had for years. Andreas shares what inspired them to build Nordcraft Engine, why they believe the web is overdue for a shift in how we approach designing and building for the web, ee explore how the platform works, how you can get started, and whatâs next for Nordcraft.
Andreas Møller: But when we look at these big, massive games we play, theyâve been built this way. Like, there is a lot of code involved, thereâs a lot of really talented engineers working there, but a lot of the logic is built using these visual tools. And so the basic idea was âWhat if we build web apps the same way?â
So the best way of describing it on a technical level is probably that it is, in effect, a programming language with a built-in framework, but the biggest difference between â like, if youâre familiar with Elm, thatâs actually a really good analogy as a programming language.
So Elm was this programming language with a built-in framework. The Elm architecture was the inspiration for Redux, when that came up⌠But it was a whole language built just around the idea of building frontend apps. And Nordcraft is actually the same, but instead of the code part â normally, when you have a programming language, you have the code, that gets passed into an AST, which is this abstract representation of your program, and then that gets compiled to either code, or JavaScript, or whatever it is the engine you need to run it in. And all we did is we sort of cut off the code part, and we were saying âWhat if we just design the big syntax tree of what our program is going to be, and then we store that in a database? And then we build an editor for manipulating that tree.â
And what that means is a lot of the things â and that editor is where normally a visual program is like a big board of like a million nodes. We have some of that too, but what weâve done is saying âDifferent problems have different needs in terms of how you build a tooling for it.â So if youâre building UI, obviously the editor is going to look like a UI editor. Youâre going to drag HTML elements, and youâre going to click them, youâre going to apply styling. And because we wanted to build for professionals, very early on we set on this path of saying âWeâre not going to try and reinvent new abstractions hereâ, because thatâs really hard, and it usually takes a long time. And thereâs a reason why we havenât seen new abstractions since probably React, or Angular time. All the new frameworks are the same abstraction.
[32:15] So weâre not going to try and invent a new abstraction. We are just going to create a very nice UI for working with the web platform. HTML, CSS, everything you set in our style panel maps to a CSS property. And we even in our tool tips show you what the CSS property is, and what the CSS is going to be rendered as. Because we want you to have full control.
So the HTML you see inside Nordcraftâs visual editor is going to be the HTML we render for every component, on every page. The CSS you see is the CSS we render. We do hash some class names, but thatâs about â other than that, you basically see exactly what it is.
And then different problems have different solutions. We have a workflow editor for like âWhen I click a button, what do I actually want to happen?â That becomes almost a flowchart. And it turns out that â and we sort of separated, we made a distinction between what we call actions, which is I do something thatâs like I call an API, I update a variable, I trigger an event⌠Those kinds of things. Things that we in functional programming say have side effects. And pure functions. So pure computation, we call that formula, anything that has a side effect [unintelligible 00:33:35.15] And those are actually two different editors. And that allows us to sort of visually separate the two, which turns out is really nice, because you get the high level structure of what is it this thing does, and then you can dive into the details much easier. So it becomes a naturally nice way to organize your code, of saying âTake all the computations and actually hide them initially, and just show me what are the steps. And then if I want to dive into why you did that step or why you did that other step, then I can go and do that.â And I think itâs not far from how people often organize code anyway. But each of those kind of have their own UI. Theyâre a separate problem. The editor for doing pure formulas, pure computation looks very different than the editor for doing a flowchart. And completely different from any of the UI stuff.