Why? (Rant alert)

[pbrito_unity]

Why did Unity choose the “semantic web” approach?
I started recently using Unity, because I wanted to escape the establish “web way” of programming and now it’s here also.

I use to listen to Casey Muratori (and people alike) laughing about how stupid “web development” was, and how difficult it was to a basic thing like center a element.

No one writes html, html usually is generated by “web frameworks” and every year there’s a new one that will solve all the web programmers problems. Now there’s even people saying the future is web assembly -throw away the html stuff.

XML is just a hierarchical structure, a tree structure, represented in a textual way.
This makes difficult to visualize the structure, trying to find the wright closing tag can be a difficult task( html browsers don’t reject incorrect html). And contrasts against the Unity tools way of doing things.

Also means that you have to use a external tool, a xml editor. What “web programmers” do is open a browser and go to the “developer tools” and compare the html that is shown by the browser(that was generated by the framework of choice) and try to figure out what the browser is doing, not pretty.

CSS is also a bad idea, historically CSS was not created for programmers. Was a way for the user to chose the way he liked to see the document.The document had the information and meta information.For example a document had a title(meta) and the CSS described how to show the title.
As the web evolved, CSS started to be used in different ways, for animations and other things.
Now you have three “languages” (html, javascript, css) to produce a single web page, and they have to be congruent in a synchronized way. The separation of concerns, if you are doing something more than the basic, never happens there is always some kind of inter-dependency.

XML could easily be replaced by a Hierarchy window like the one for unity scenes, or even merge the two.
XML element would be equivalent to a game object, XML classes to prefab variants and you could add components to elements (event triggers, button component, image, etc ).

Some more arguments:
Java also tried the XML for UI without great success.
Swift doesn’t uses xml for UI,
QT doesn’t uses xml for UI,

I hope Unity makes the best choice.
Good luck.

[hippocoder]

Unity appears to be making decisions about tech where less or no training is required for people to use Unity. So if you know a bit about photography, the physical camera makes sense. I imagine it’s similar thinking throughout.

Should they design something that works like nothing else does, or design something that works like other things do?

[pbrito_unity]

@hippocoder

Unity appears to be making decisions about tech where less or no training is required for people to use Unity. So if you know a bit about photography, the physical camera makes sense. I imagine it’s similar thinking throughout.

Should they design something that works like nothing else does, or design something that works like other things do?

Apple has this for non coders:

And Qt has this:

Even Google is pushing Flutter now
They ditch xml and css:

<div class="greybox">
  Lorem ipsum
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}

for:

var container = Container( // grey box
  child: Center(
   child: Text(
     "Lorem ipsum",
     style: bold24Roboto,
   ),
  ),
  width: 320.0,
  height: 240.0,
  color: Colors.grey[300],
);

[system]

@pbrito_unity

Apple has this for non coders:

And Qt has this:

Even Google is pushing Flutter now
They ditch xml and css:

<div class="greybox">
  Lorem ipsum
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  display: flex;
  align-items: center;
  justify-content: center;
}

for:

var container = Container( // grey box
  child: Center(
   child: Text(
     "Lorem ipsum",
     style: bold24Roboto,
   ),
  ),
  width: 320.0,
  height: 240.0,
  color: Colors.grey[300],
);

Honestly, I don’t understand what your problem is. Unity already told us that they’re planning to deliver WYSWYG editor for UI, so what’s your problem exactly?
XML and CSS are good for UI and good for the underlying engine (it’s a mature technology) so I don’t see what’s your problem.
Oh, and Unity UI isn’t just for mobile so you really need to calculate with ALL of the supported platforms. This means it is irrelevant what Apple or Google do or don’t do.

[Meatloaf4]

@pbrito_unity

Under the hood though they are essentially building out xml and css like files. I think the thought is that once you have a good foundation in place (the xml / css approach) you can create a visual editor to supplement the UI creation of these files.

Having created UI’s for both Unity and the web I am firmly in the camp of web. The current UI implementation in Unity is easy to get into but fails for long term maintainability in my opinion.

[antoine-unity]

@pbrito_unity

Why did Unity choose the “semantic web” approach?
I started recently using Unity, because I wanted to escape the establish “web way” of programming and now it’s here also.

I use to listen to Casey Muratori (and people alike) laughing about how stupid “web development” was, and how difficult it was to a basic thing like center a element.

No one writes html, html usually is generated by “web frameworks” and every year there’s a new one that will solve all the web programmers problems. Now there’s even people saying the future is web assembly -throw away the html stuff.

XML is just a hierarchical structure, a tree structure, represented in a textual way.
This makes difficult to visualize the structure, trying to find the wright closing tag can be a difficult task( html browsers don’t reject incorrect html). And contrasts against the Unity tools way of doing things.

Also means that you have to use a external tool, a xml editor. What “web programmers” do is open a browser and go to the “developer tools” and compare the html that is shown by the browser(that was generated by the framework of choice) and try to figure out what the browser is doing, not pretty.

CSS is also a bad idea, historically CSS was not created for programmers. Was a way for the user to chose the way he liked to see the document.The document had the information and meta information.For example a document had a title(meta) and the CSS described how to show the title.
As the web evolved, CSS started to be used in different ways, for animations and other things.
Now you have three “languages” (html, javascript, css) to produce a single web page, and they have to be congruent in a synchronized way. The separation of concerns, if you are doing something more than the basic, never happens there is always some kind of inter-dependency.

XML could easily be replaced by a Hierarchy window like the one for unity scenes, or even merge the two.
XML element would be equivalent to a game object, XML classes to prefab variants and you could add components to elements (event triggers, button component, image, etc ).

Some more arguments:
Java also tried the XML for UI without great success.
Swift doesn’t uses xml for UI,
QT doesn’t uses xml for UI,

I hope Unity makes the best choice.
Good luck.

Hello,

I am the lead of the development team of UIElements and I’ve been working on this since its inception a couple of years ago.

Your comments revolve around the choice of using XML and CSS as an inspiration for UIElements resources formats. I will try to address your concerns the best way I can.

First I’d like to add that UXML and USS are independent and completely optional to work with UIElements:

• you can build hierarchies of elements in C#
• you can set styles on elements directly using element.style.XXX =
• you can hookup event handlers to change the style interactively

Why did Unity choose the “semantic web” approach?CSS is also a bad idea, historically CSS was not created for programmers.

So far the Unity Editor UI has been built on top of IMGUI which among other limitations, really encourages a mix of layout, visual appearance, UI logic and sometimes business logic.

A very big lesson of web development is to adopt a data driven approach where the XML hierarchy describes the contents of a document annotated with IDs/classes.

This promotes a separation of concern that enables non-programmers change style definitions at large and allows the presentation of an application/page to adapt to many situations.

I agree this is not a perfect technology but it is a fundamental aspect of web development that allowed to thrive and basically become universal.

This aligns perfectly with what we are trying to achieve at Unity, starting with the Unity Editor itself. What I mean here is to enable contribution with UI/UX designers to our UIs and allow the editor to target more platforms.

Another thing to consider is the familiarity. Since we want to make Unity as approachable as possible, building on known patterns lowers the barrier of entry for new users who may already have a background in HTML/CSS.

how difficult it was to a basic thing like center a element.

Surely doing layout in CSS may cause some frustration but it is a very powerful tool and as such takes some time to learn. Besides, CSS has come a long way since its early years and new layout features were added which hopefully makes it easier now.

For example centering an element is as simple as changing the justification property when using Flexbox: http://jsfiddle.net/jm830xw9/

XML […] makes difficult to visualize the structure

XML could easily be replaced by a Hierarchy window like the one for unity scenes, or even merge the two.

XML is an appropriate data format to describe UI assets:

• Its main purpose is to describe hierarchical data (slightly better than JSON for example)
• It has standard mechanisms to write schema validators
• It is easy to merge
• It is supported by most text editors / IDEs (that should help with finding these missing closing tags

However you’re right that offering a visual workflow for hierarchy and properties is very important, that’s why we have a visual UI builder in the works.
Our early prototype taught us that we can both provide direct control over element layout and properties in the builder while maintaining perfectly valid UXML/USS files. (We’ll be in touch in this forum section to share early versions of this tool). So right now it seems like those file formats are a good fit both for source code and data format.

In the Editor there is also a UI debugger which can help you inspect live hierarchies and understand which properties are applied to elements.
The hot reload of USS assets for editor windows also allows previewing of styling changes, which might not possible in other pipelines where styling is baked into the code.

I hope that those clarifications will make you less skeptical about our decisions.

Feel free to raise any other concerns you may have or ask clarification about my answers.

[Lars-Steenhoff]

the upcoming visual UI builder sounds great, I hope it also works together with the upcoming visual scripting, so non programmers can make an editor UI with the help of those tools, as wel as an in game UI

[antoine-unity]

@Lars-Steenhoff

the upcoming visual UI builder sounds great, I hope it also works together with the upcoming visual scripting, so non programmers can make an editor UI with the help of those tools, as wel as an in game UI

Yes, definitely something we have in mind

[pbrito_unity]

Honestly, I don’t understand what your problem is. Unity already told us that they’re planning to deliver WYSWYG editor for UI, so what’s your problem exactly?
XML and CSS are good for UI and good for the underlying engine (it’s a mature technology) so I don’t see what’s your problem.
Oh, and Unity UI isn’t just for mobile so you really need to calculate with ALL of the supported platforms. This means it is irrelevant what Apple or Google do or don’t do.

My objection is precisely that XML and CSS are not good. Why use it?
It’s not flexible tech, not scalable is not even readable.

If it’s a mature technology why don’t big corporations use it?
big corporations love mature tech, maybe they think that XML sucks. I don’t think they are stupid, so it is not a bad idea to check what they are doing.

As for your last point,Unity is compiled to the platform you choose, that means you don’t have problems like the need of compatibility and legacy. Just take in account resolution ,height and width, other things are common to the rest of Unity (perfomance, etc). One of the selling points of Flutter is precisely that is multi-platform.

Just expressing my opinion,
I first use XML a long time ago(2000) with java, picture that! XML can be nice for small and static tasks like svg, not for dynamic and interactive UI.

Edit: I wrote this before reading antoine-unity response. Reading now.

[system]

@pbrito_unity

If it’s a mature technology why don’t big corporations use it?
big corporations love mature tech, maybe they think that XML sucks. I don’t think they are stupid, so it is not a bad idea to check what they are doing.

Apparently you know very little about big corporations. They actually use these. I pretty much hate XML as data storage, but they are excellent as template files.

@pbrito_unity

As for your last point,Unity is compiled to the platform you choose, that means you don’t have problems like the need of compatibility and legacy.

Wut?
You know that people using Unity frequently developing their application to multiple platforms, right? Does Flutter run on XBox One? Ps4? Okay, maybe Nintendo Switch.

BTW, this entire Flutter reminds me to GWT… It’s scary. I don’t like defining the view portion in code. At all. It blocks non-coders (designers and all) to tweak. They understand XML and CSS (since they are just markup languages) but they don’t understand Dart or JS or Java or C#.

@pbrito_unity

I first use XML a long time ago(2000) with java, picture that! XML can be nice for small and static tasks like svg, not for dynamic and interactive UI.

I last used XML with Java about 10 minutes ago. What’s your point? Do you know what XML is good at? Describing structured elements → structured UI is exactly that.

[Vacummus]

@antoine-unity

Another thing to consider is the familiarity. Since we want to make Unity as approachable as possible, building on known patterns lowers the barrier of entry for new users who may already have a background in HTML/CSS.

Being a web developer for 6 years, I am excited about the work you all are doing, and I am all for the move towards more web based UI development. Though I do have some concerns. It seems the new UI system is inspired by JQuery, which is becoming out dated tech in the web development industry. The industry has been moving more towards functional programming and the component pattern over the past 5 years (thanks to React.js). Have you all looked into React.js and JSX? I think that would be a much better direction than the JQuery/Html approach.

Also, have you all considered ECS? Data Oriented Design and ECS would work really well for you UI development. And though I love React and functional programming, I think a data oriented approach to UI development would be better as I believe that it would be more performant, more scalable, and less complex then React. It also would be more familiar to Unity users using ECS, and along the lines of the direction Unity is pushing the product.

[pbrito_unity]

@antoine-unity

Hello,

I am the lead of the development team of UIElements and I’ve been working on this since its inception a couple of years ago.

Your comments revolve around the choice of using XML and CSS as an inspiration for UIElements resources formats. I will try to address your concerns the best way I can.

First I’d like to add that UXML and USS are independent and completely optional to work with UIElements:

• you can build hierarchies of elements in C#
• you can set styles on elements directly using element.style.XXX =
• you can hookup event handlers to change the style interactively

So far the Unity Editor UI has been built on top of IMGUI which among other limitations, really encourages a mix of layout, visual appearance, UI logic and sometimes business logic.

A very big lesson of web development is to adopt a data driven approach where the XML hierarchy describes the contents of a document annotated with IDs/classes.

This promotes a separation of concern that enables non-programmers change style definitions at large and allows the presentation of an application/page to adapt to many situations.

I agree this is not a perfect technology but it is a fundamental aspect of web development that allowed to thrive and basically become universal.

This aligns perfectly with what we are trying to achieve at Unity, starting with the Unity Editor itself. What I mean here is to enable contribution with UI/UX designers to our UIs and allow the editor to target more platforms.

Another thing to consider is the familiarity. Since we want to make Unity as approachable as possible, building on known patterns lowers the barrier of entry for new users who may already have a background in HTML/CSS.

Surely doing layout in CSS may cause some frustration but it is a very powerful tool and as such takes some time to learn. Besides, CSS has come a long way since its early years and new layout features were added which hopefully makes it easier now.

For example centering an element is as simple as changing the justification property when using Flexbox: http://jsfiddle.net/jm830xw9/

XML is an appropriate data format to describe UI assets:

• Its main purpose is to describe hierarchical data (slightly better than JSON for example)
• It has standard mechanisms to write schema validators
• It is easy to merge
• It is supported by most text editors / IDEs (that should help with finding these missing closing tags

However you’re right that offering a visual workflow for hierarchy and properties is very important, that’s why we have a visual UI builder in the works.
Our early prototype taught us that we can both provide direct control over element layout and properties in the builder while maintaining perfectly valid UXML/USS files. (We’ll be in touch in this forum section to share early versions of this tool). So right now it seems like those file formats are a good fit both for source code and data format.

In the Editor there is also a UI debugger which can help you inspect live hierarchies and understand which properties are applied to elements.
The hot reload of USS assets for editor windows also allows previewing of styling changes, which might not possible in other pipelines where styling is baked into the code.

I hope that those clarifications will make you less skeptical about our decisions.

Feel free to raise any other concerns you may have or ask clarification about my answers.

Thanks for your reply,I appreciate the tone of your response.
But this is a topic that I have strong feelings.

Basic UI with a menu and buttons is easy to do, you can even use XML,shure.
Now when things get tough like :
responsive design,
complex user interaction
and animations.
XML/CSS is almost useless (mainly because of the declarative nature and because is not a programming language).

Example:
You want to put a layer on top like a moving fog image with transparency , underneath you put some buttons.
If you do not control the event system how do you click the buttons? In Unity where the event system doesn’t relies on the hierarchy is easily done. Why didn’t you take advantage of unity colliders concept.
One consequence of this model is that end up with a complicate structure(divs inside of divs) just to overcome the limitations what make the layout more complex and error prone.
In my last project I end up with an almost flat hierarchy and managed the layout myself with React, then I could move around divs and manage the user clicks.

I’ll take airbnb company as an example of current web development.
Their main focus is to build a workflow to work with higher concepts, so they use or try to build tools for that effect.
This is a leading designer talk:

https://www.youtube.com/watch?v=Nufk2dtxHz8

They use sketchap, and build tools on top(looks like Sketchapp opened their API). Sketchapp is very popular at the moment
https://airbnb.design/the-evolution-of-tools/

A piece about empowering designers :
https://airbnb.design/prototyping-for-hosts/

What I see is that web development is past the XML, now is more a obstacle, and peolple are working around that.

Edit:
this is the CSS the ugly reality:

https://www.youtube.com/watch?v=Gx24SikMfGw

Edit 2: And I forgot to mention there is navigation also, that is tough to get it right.

[Antypodish]

Ia am not fan of xml, but CSS

@pbrito_unity

CSS is also a bad idea,

@pbrito_unity

If it’s a mature technology why don’t big corporations use it?

Surly google would be first in line, to imply new tech, if better and reliable solution would be there.
No need much, to see web pages using CSS.

Familiarity and simplicity is major PLUS.

[pbrito_unity]

@Antypodish

Ia am not fan of xml, but CSS

Surly google would be first in line, to imply new tech, if better and reliable solution would be there.
No need much, to see web pages using CSS.

Familiarity and simplicity is major PLUS.

Let me clarify,
CSS is worse than XML.
XML is just verbose but flexible way to store and pass data around. XML can be useful.

CSS is just a bad DOM API (mix with meta-data stuff),
In Unity you can select a game object in the scene window and make modifications in the inspector.

Do you think a browser dev-tool compares to the inspector?
It’s even possible to control events here, instead of the bubble up DOM/CSS idea. Try that in the browser.

There’s no word processor that uses CSS, or photoshop , or maya or any other consumer(easy to use) application that uses CSS. Also the mobile space that is new is not using CSS - XCode,Flutter…

Its simple for example for Unity to create a Ad hoc CSS thing on top of the framework. For basic stuff, just to make CSS people happy.
I think the team at Unity is taking XML/CSS as base(inspiration) and the consequences will be bad. They could take inspiration in what Unity does well.

[antoine-unity]

@Vacummus

Being a web developer for 6 years, I am excited about the work you all are doing, and I am all for the move towards more web based UI development. Though I do have some concerns. It seems the new UI system is inspired by JQuery, which is becoming out dated tech in the web development industry. The industry has been moving more towards functional programming and the component pattern over the past 5 years (thanks to React.js). Have you all looked into React.js and JSX? I think that would be a much better direction than the JQuery/Html approach.

I would like to clarify that the new system isn’t directly inspired from jQuery. jQuery made it popular to use CSS like selectors in JavaScript to manipulate DOM data, but the core functionality of it mostly comes from native DOM APIs like querySelector().
Although React/JSX is a drastic change from writing vanilla JavaScript/HTML, it still runs on top of the existing HTML tech stack and therefore couldn’t really live without it.

As such the vision is not replicate jQuery or React, but rather make it possible to write similar framework and APIs on top. This layering has the advantage such of letting developers decide what works best for them.

@Vacummus

Also, have you all considered ECS? Data Oriented Design and ECS would work really well for you UI development. And though I love React and functional programming, I think a data oriented approach to UI development would be better as I believe that it would be more performant, more scalable, and less complex then React. It also would be more familiar to Unity users using ECS, and along the lines of the direction Unity is pushing the product.

Yes we are considering ECS and data oriented design as well high performance C#, as many other development teams working at Unity. I don’t have details to share right now but we are definitely exploring opportunities in terms of performance improvements as well as being de facto compatibility with ECS when it’s ready for prime time.

[optimise]

@antoine-unity

Yes we are considering ECS and data oriented design as well high performance C#, as many other development teams working at Unity. I don’t have details to share right now but we are definitely exploring opportunities in terms of performance improvements as well as being de facto compatibility with ECS when it’s ready for prime time.

Awesome. Btw another problem of current UI system is the performance problem when using Animator. Is there any plan to create a special high performance UI Animator specifically for new upcoming UI system? I would like to have the power of Animator or even better than Animator to create high performance UI animation.

[benoitd_unity]

@optimise

Awesome. Btw another problem of current UI system is the performance problem when using Animator. Is there any plan to create a special high performance UI Animator specifically for new upcoming UI system? I would like to have the power of Animator or even better than Animator to create high performance UI animation.

Performance and animation are the top priorities for runtime UI. To your point, we don’t believe supporting the Animator should be the way to go in order to create simple UI animations, but something like a tweening system and CSS animations.

Did you have something similar in mind?

[system]

Slightly on topic (animation, performance, chromium, DOD):

- YouTube

Please, try to overlook the click-bait title, it’s not the point. Also, I’m sure Unity Staff does know it, probably even this presentation, it’s mainly for the others.

[Vacummus]

Slightly on topic (animation, performance, chromium, DOD):

https://www.youtube.com/watch?v=g1TsP60z2OQ

Please, try to overlook the click-bait title, it’s not the point. Also, I’m sure Unity Staff does know it, probably even this presentation, it’s mainly for the others.

What an incredible talk. Thank you for sharing this.

[pbrito_unity]

@benoitd_unity

Performance and animation are the top priorities for runtime UI. To your point, we don’t believe supporting the Animator should be the way to go in order to create simple UI animations, but something like a tweening system and CSS animations.

Did you have something similar in mind?

But why???

CSS Animations are so limited, that is why (web)people came out with alternative like : CreateJS, GreenSock, D3.js, react.js

You cant synchronize animations, etc …
Even W3C had to come out with Web Animations to deal with CSS animations limitations.

Instead, Unity could create a visual editor for animation.
And that editor would automatically create the Animator states, maybe with default states for press, drag, etc.
With the plus that the underneath tech could change without the user notice anything different with the editor.
Changing the CSS …

But CSS Animations??
Who uses CSS animations?, how do you create a CSS animation?
Unity already has tools (like the Animator) that can be explored for UI.

Unity is not helping designers with CSS,
and is making a bad decision with this XML/CSS route.

Just my two cent.
Best of luck guys.