Why is XML not intended to be used as a presentation language?

Question

I am interested in creating web applications that are as simple as possible, and not simpler. I mean, it seems to me that I could (*should be able to*) create an XML document that represents the objects of my application, use CSS as the "presentation layer", and Javascript to manipulate the objects.

Part of what I am saying is that it seems to me that HTML obfuscates the application by mixing objects with presentation formatting, isn't this the point of CSS? -- HTML/XML: what data, CSS: how to present the data, (JS: how to manipulate the data)

I *could* use XLST to transform the XML into XHTML, but then the JS has to be coded for the XHTML (presentation elements) and not the XML (data objects), which adds unnecessary complexity.

I'm coming from the perspective of a programmer, with the desire to use design principles such as separating the presentation from the data (HTML/XML vs CSS) and object-oriented programming. Would it not not make sense to say that presently HTML and CSS are necessary to "define" the presentation layer?

Comments I'm looking for are about the proper way to code, not "fixes" with current standards.

Here is an example. I could write this:

HTML/XHTML:

<ul class="folderTree">
    <li class="fTreeItem"><img /><span class="fTreeItemName">Directory</span>
        <ul class="fTreeItemContents">
            ...
        </ul>
    </li>
    ...
</ul>

...but the design principles could be better satisfied if I could do this:

<folderTree>
    <item><img /><name>Directory</name>
        <folderTree>
            ...
        </folderTree>
    </item>
</folderTree>

and include the following CSS:

folderTree { display: block; }
folderTree item { display: list-item; }
folderTree name { display: inline; }

This seems to me to be the proper way to present the data. Do you not agree? Please explain...

Edit: The foundation of my question rests on the facts that a) user-defined tags can't be used in HTML/XHTML, and b) javascript isn't meant to be used with XML.

Edit 2: Also, I'm not completely familiar with how multiple namespaces are handled in a document. So if someone could shed light on if I could achieve my goal by using an XHTML document and including my XML code/tags using another namespace...

Answer 1

HTML has elements and attributes with defined meanings. They are understood by a wide variety of clients, including common visual web browsers, search engine indexing robots and screen readers. It has some legacy presentation attributes and elements left over, but they have mostly been removed or marked as to be avoided.

Your custom XML language might have elements and attributes with more specific meanings than those in HTML, but they won't be meanings understood by clients. You could handle that for visual users with a stylesheet, but wouldn't serve search engine, screen reader and other users all that well.

Answer 2

I assume you want to run your application inside a browser. Browser's language for rendering UI is HTML/XHTML. If you want to have your own language for defining UI you will need to translate it to something browser understands. This can be done JIT or on page load.

I agree with you that running XSLT makes javascript part more complicated. But what you can do is to write an "interpreter" (or a "rendering engine") in javascript. So that your application will be written in XML+CSS+JavaScript, but instead of running it on naked browser - you will use a library that will render your XML-UI using "HTML instructions".

It can be as simple as XML nodes substitution, so that when you say in your XML - it will produce in HTML. Depending on how you connect your javascript to your presentation definition, you will need to provide an adapter of some sort for javascript access. For example you could "intercept" jQuery $(...) calls and substitute $("folderTree") for $("div.folderTree"). But if you access your UI elements using proper page-objects already, then the logic of translation can be encapsulated in this page-object. I.e. PageObject class can be smart enough to know that when you ask for treeFolder node, it needs to look for $("div.treeFolder") rather than $("treeFolder").

Take a look at angular.js's directives for inspiration.

Answer 3

Beside the upcoming web components and current libraries you can use nearly any element you want. You can then apply a stylesheet to it and it will display fine.

<tralala>Hello World!</tralala>

<style>
tralala {
    display: block;
}
</style>

Have a look at the current web component libraries and probably use XSL to modify your data to match web components.

Answer 4

From the W3C the design goals for XML are :

1. XML shall be straightforwardly usable over the Internet.
2. XML shall support a wide variety of applications.
3. XML shall be compatible with SGML.
4. It shall be easy to write programs which process XML documents.
5. The number of optional features in XML is to be kept to the absolute minimum, ideally zero.
6. XML documents should be human-legible and reasonably clear.
7. The XML design should be prepared quickly.
8. The design of XML shall be formal and concise.
9. XML documents shall be easy to create.
10. Terseness in XML markup is of minimal importance.

XML is firstly about Well-Formed XML documents, and then Valid XML Documents to a specific XML Application definition, i.e. the XML Document is valid to XHTML version 1.0.

There are thousand of XML Application definitions out there, representing impossible to visualise data, at impossible in a generic way.