Background - ANybakk/Snorky GitHub Wiki

Limits with current technologies

For decades, content on the web has been presented using HTML markup. The language defines simple data structures that fit well with textual content such as documents. Gradually, presentation of content on the web have become more sophisticated and complex. The HTML standard has simply become outdated.

The source of the problem, at least at first glance, is not really the ability to develop UIs. In fact, there are many good examples of both good and advanced UIs in web-applications today. This is all thanks to great technologies like CSS, JavaScript and embedded elements (not to mention creativity). The problem is the unavoidable mess of mixing data content with UI when using plain HTML.

Separating data from presentation is hardly a new idea. Such patterns are well-known when it comes to programming and has proven to be very useful. It's not commonly used with web-based UIs however. Sadly, alternatives have been missing for a long time due to things like missing browser support. This is starting to change, however, and it's time to re-think how we develop web-based applications.

Semantic web

The question now is how to represent data. We could for example chose a simple XML or JSON structure, but how do we define a universal standard? Fortunately, some clever minds at W3C have come up with a great concept coined The semantic web.

The core idea of The semantic web is that data on the web should be described in such a way that data from many sources can be combined, much like as in relational databases. That means applications can query different data sources and really take advantage of the data that's out on the web, without requiring application-specific APIs.

Plain HTML does not fit with this idea, because a machine cannot identify the data. What we need is semantics in the form of meaningful vocabularies and separation from UI so that the data is not tied to a single UI.

RDF

Data on The semantic web are described using so-called triples. Each triple consists, in order, of a subject, a predicate and an object. An example of such a triple could be “Michael knows John”. Each element is typically identified using an URI rather than a string if it has a “home” on the web. Such URIs can also be referred using name-spaces. Triples are usually represented using RDF which is XML-based. Collections of triples are called graphs. A simple example graph, involving the “Dublin core” (dc) vocabulary, is given below.

<?xml version="1.0"?>
<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/">

  <rdf:Description rdf:about="http://www.michael.fake/123">
    <dc:title>Item 1</dc:title>
    <dc:creator>Michael</dc:creator>
  </rdf:Description>

  <rdf:Description rdf:about="http://www.michael.fake/234">
    <dc:title>Item 2</dc:title>
    <dc:creator>Michael</dc:creator>
  </rdf:Description>
  
</rdf:RDF>

SPARQL

SPARQL is a query language for The semantic web. It has syntactic similarities with SQL, but involves triples. An example is given below.

PREFIX dc: <http://purl.org/dc/elements/1.1/>

SELECT *
  FROM <http://www.michael.fake/graph.rdf>
  WHERE {
    ?article  dc:title        ?title .
    ?article  dc:creator      ?author .
    FILTER(str(?author) = "Michael")
  }

XML-based UI

As previously stated, HTML have not hindered developers and designers in making good UIs. Web-based UI development, like any UI development, is inherently hard. The complexities of UI development using HTML and CSS are special however. Previously, browser differences have been the most common headache. Fortunately, this problem have since been greatly reduced, but there are other underlying problems.

The limited vocabulary of HTML is not only a problem from a data perspective, but also when it comes to UI. Even writing so-called “semantic HTML” (not to be confused with The semantic web) is not very reality-near. Modern UIs are so much more complex than headers, paragraphs, links and lists. If we could instead develop components and separate them into modules we can achieve a greater level of re-use and simpler maintenance.

A key to achieving modularity is enabling name-spaces. There is one language that stands out clearly in this regard, namely XML. XML is an old, well-established technology that is very closely related to the already familiar language of HTML. Indeed, the jump from HTML to XML is very small. XML templates (the term “document” is not very fitting) can use style-sheets and scripts just like HTML documents.

Below is an example of how an XML UI template could look like. The UI uses two modules; a “core” module defining some common tags and a “widget” module that defines a set of widget components. Notice that absence of class attribute clutter.

<?xml version="1.0" encoding="iso-8859-15"?>
<?xml-stylesheet href="style/base-1.0.0.css"?>
<?xml-stylesheet href="http://abc.fake/core/core-1.0.0.css"?>
<?xml-stylesheet href="http://abc.fake/widget/widget-all-1.0.0.css"?>

<html 
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:abc="http://abc.fake/core"
  xmlns:abcw="http://abc.fake/widget">

<head>
  <title>XML-based UI</title>
  <meta http-equiv="Content-type" content="text/xml;charset=ISO-8859-15" />
  <script type="text/javascript" src="http://abc.fake/widget/widget-all-1.0.0.js" />
</head>

<body>

  <abcw:newslist>

    <abcw:newslist-item>
      <abc:title>Specification begun</abc:title>
      <abc:illustration>
        <img src="image/001.jpg" alt="" />
      </abc:illustration>
      <abc:date>2011-10-26</abc:date>
      <abc:ingress>
        <p>Work on the specification has begun</p>
      </abc:ingress>
    </abcw:newslist-item>

    <abcw:newslist-item>
      <abc:title>Idea</abc:title>
      <abc:illustration>
        <img src="image/000.jpg" alt="" />
      </abc:illustration>
      <abc:date>2011-10-25</abc:date>
      <abc:ingress>
        <p>The idea popped into my head. Snorky has been born</p>
      </abc:ingress>
    </abcw:newslist-item>

  </abcw:newslist>

</body>

</html>

Vocabularies are powerful indeed, and we should strive to standardize them as much as possible. Using existing, generally accepted standards is always good practice. The XHTML Vocabulary contains a big collection of names. Additionally, Wikipedia has a nice comparison table for different UI markup languages that are XML based. Most notable are perhaps XUL, XAML and XForms.

CSS

For an XML-based UI, we can write CSS as usual, but by taking advantage of the “CSS Namespaces Module” recommendation from W3C, we can add our name-spaces to the style-sheets as well.

@namespace     "http://www.w3.org/1999/xhtml";
@namespace abc "http://abc.fake/core";

abc|title {}
abc|illustration {}
abc|illustration img {}
abc|date {}
abc|ingress {}
abc|ingress p {}

@namespace      "http://www.w3.org/1999/xhtml";
@namespace abc  "http://abc.fake/core";
@namespace abcw "http://abc.fake/widget";

abcw|newslist {}
abcw|newslist > abcw|newslist-item {}
abcw|newslist > abcw|newslist-item > abc|title {}
abcw|newslist > abcw|newslist-item > abc|illustration {}
abcw|newslist > abcw|newslist-item > abc|date {}
abcw|newslist > abcw|newslist-item > abc|ingress {}

abcw|carousel {}

abcw|presenter {}

JavaScript

It seems the most recent versions of the major browsers support the getElementsByTagNameNS function. Below is a simple example of how it can be used.

var namespaces = {
  abc  : "http://abc.fake/core",
  abcw : "http://abc.fake/widget"
};
var newslists = document.getElementsByTagNameNS(namespaces.abcw, "newslist");