In Hop, HTML objects on the serv-
er are members of a full-fledged data
structure that implements the ab-
stract syntax tree of the client HTML
document; this contrasts with most
Web environments in which they are
reduced to bare strings of characters.
A Hop server computation elaborates a
DOM (document object model) repre-
sentation of HTML similar to the one
used by the browser, compiles it on
the fly to actual HTML, and ships it on
browser demand.
Figure 5. Extending CSS with a new type and new attributes.
$(define-hss-type browser "div[data-hss-tag=browser]"
(define-hss-property (directory-image v)
(format "div[data-hss-tag=dir-entry] {
background-image: ˜l;
background-position: left;
background-repeat: no-repeat;
padding-left: 2em;
}" v))
(define-hss-property (file-image v)
(format "div[data-hss-tag=file-entry] {
background-image: ˜l;
background-position: left;
background-repeat: no-repeat;
padding-left: 2em;
}" v))
Figure 1: Extending CSS with a new type and new attributes.
Figure 6. CSS user rules.
browser {
directory-image: url( http://nowhere.org/dir.png );
leaf-image: url( http://nowhere.org/leaf.png );
}
browser.blue {
directory-image: url( http://nowhere.org/blue/dir.png );
color: blue;
font-weight: bold;
ated HTML such as syntactic correctness—for example, reporting HTML
tag misspellings as unbound-variable
errors. Second, a single document
can be automatically compiled into
different HTML versions on demand.
For example, the same document can
be optionally compiled into a mix of
HTML4 and Flash for old browsers,
into HTML5 for more skilled browsers, or even into XHTML+RDFa for
semantics annotations.
Most current client-side Web libraries abstract over HTML by providing a
set of JavaScript functions that accept
regular HTML nodes as parameters;
typically, DIV and SPAN are used as
new widget containers. This approach
has several drawbacks. First, HTML
extensions do not look like regular
tags. The implementation of a GUI
thus requires assembling different
formalisms. Second, extension initial-izations are complex to schedule. In
general, the application must resort
to window onload JavaScript events
to ensure that the API constructors are
not called before the DOM tree is fully
built. Third, to configure the graphical rendering of the extension, implementation details must be unveiled
to let programs designate the HTML
elements to be configured. This jeopardizes maintainability.
Figure 1: CSS user rules
Figure 7. A PDF viewer in a Web browser.
Code Reuse
The example file-viewer application
presented here involves the main ingredients of a Web application—a distributed architecture, HTML abstraction, and CSS configurations—but it is
still too simple to be realistic. To develop richer Web applications with comparatively little effort, it is now common practice to rely on the wide set
of publicly available JavaScript APIs.
All Web frameworks offer one way or
another of using them, often through
backdoors that let the programmer insert alien JavaScript calls into the natively supported language.
Hop follows a different approach
by integrating these APIs into its language. Calling a JavaScript function or
creating a JavaScript object from Hop
is as easy as manipulating a standard
Hop entity. Furthermore, once compiled, client-side Hop-generated JavaScript can be distinguished from handwritten JavaScript only by the name
