Mozilla E4X

Brendan Eich

Chief Architect, Mozilla

JavaScript

• Invented in 1995 for Netscape 2
• Standardized as ECMA-262 in 1997
• ECMA-262 Edition 3 in 2000
• Default browser scripting language
• Basis of Mozilla applications

E4X

• Originally from BEA
  • John Schneider, Terry Lucas, others
• Scripting programming model applied to XML operations
  • hacking XML via XSL-T, the DOM, etc. is not “scripty”
  • “Where did my objects, properties, and methods go?”
  • Alternative to functional, verbose transformation system of XSL-T
  • Alternative to procedural, still-verbose tree navigation of DOM
• XML as first-class JS objects, syntax
  • Like regular expressions, objects, arrays, functions
• Standardized as ECMA-357, submitted to ISO with corrections

Mapping XML to JS

• XML children have meaningful order, JS properties do not
• Can manipulate attributes, comments, PIs
• HTML DOM API reflects attributes as JS properties
• E4X XML API reflects attributes in @ namespace

Mapping XML to JS (2)

• Ordered collection of XML properties with name, parent, attrs
• All the usual JS operators apply
• Some new XML-specialized operators for common XML operations.
  • Namespaces, qualified names, wildcards
  • Searching, filtering, enumerating

Mapping XML to JS (3)

• Create a new XML object from a string:
  var order = new XML("<order/>");
• Create an XML wrapper for a DOM object:
  var doc = new XML(document);
• Two-way data binding between DOM and E4X data models

Familiar operators

• <order id="1234">
 <customer><name>Joe Green</name>
  <address><street>410 Main</street>
  <city>York</city><state>VT</state>
  </address>
 </customer>
 <item>. . .</item>
 <item>
  <make>Acme</make>
  <model>Framistat</model>
  <price>2.50</price>
  <qty>30</qty>
 </item>
</order>
• var address = order.customer.address;
• var second = order.item[1];
• second.total = second.qty * second.price;

New operators

• var order = <order><customer>. . .</customer>
  <item><price>5</price><qty>10</qty></item>
  <item level="rush">
   <price>2.5</price>
   <qty>30</qty>
  </item>
  <item level="rush">
   <price>1.5</price>
   <qty>50</qty>
  </item>
  </order>;
• var items = order.item; // XMLList of item el'ts
• var prices = order..price;
• var urgentItems = order.item.(@level == "rush");
• var itemAttrs = order.item[0].@*;

XML literals

• order.customer.address = <address><street>...</street></address>;
• Integration with JS lexical and syntactic grammar helps
  • context-sensitive escaping for attribute and element values
  • diagnostics and error recovery
• order.item += <item level={++urgency}/>
• where urgency is a JS variable
• attribute value properly escaped
• order.customer.name = <prefix>{prefix[i]}</prefix>
  • element text escaping here, not attribute value
• fully_dynamic = <{tagname}>{content}</{tagname}>;
  • tagname must be a valid XML name

Namespaces and QNames

• new QName(uri, localName);
• var n1 = new Namespace([prefix, ]uri1);
• x = <t xmlns:p="uri1">
    <p:u>42</u>
    <p:not-an-identifier id="99"/>
<t>;
• y = x.n1::u; // y == 42
• i = x.n1::["not-an-identifier"].@id;