Professional Documents
Culture Documents
Simon St.Laurent
The Web Platform
by Simon St.Laurent
Copyright © 2014 O’Reilly Media, Inc. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA
95472.
O’Reilly books may be purchased for educational, business, or sales promotional use.
Online editions are also available for most titles (http://my.safaribooksonline.com). For
more information, contact our corporate/institutional sales department: 800-998-9938
or corporate@oreilly.com.
Editor: Simon St.Laurent
ISBN: 978-1-491-95011-1
[LSI]
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
iii
Preface
v
• The ubiquity of the Web combined with the competitive nature
of browser vendors encourages major investment in rendering
engines and JavaScript performance.
• Even though web browsers are written by many different people
with different motives, they’ve been able to work well enough to‐
gether to extend browser capabilities.
The best part, though, is that those foundations let us do new things.
I hope you’ll find that web technologies continue to provide a solid
base on which to build your dream projects!
vi | Preface
HTML: Moving Beyond
the Standard
You can create your own markup vocabularies without learning XML.
You just need to figure out what markup you want to use, and then
create CSS and JavaScript to tell the browser what to do with it. Cre‐
ating your own extensions to the HTML vocabulary lets you describe
your content in the terms that make sense to you and can help you
drastically reduce repetition and confusion.
When HTML first appeared, it offered a coherent if limited vocabulary
for sharing content on the newly created World Wide Web. Today, now
that HTML has handed off most of its actual work to other specifica‐
tions, developers can start to choose their own markup vocabularies
and processing.
When the W3C first formed, it formed around HTML, the core stan‐
dard of content on the Web, defining the structure, appearance, and
behavior of content. Over the next few years, however, it became clear
that HTML was doing too much, and the W3C and other groups re‐
factored appearance, behavior, and many semantics into separate
specifications:
1
• WAI-ARIA took responsibility for accessibility semantics, ensur‐
ing that content remained available to a broad audience even if
developers pushed the current boundaries of markup.
1. I’m not quite ready to join Matthew Butterick in proposing “that the W3C be disban‐
ded.” The W3C (and WHATWG) are still doing good work developing the supporting
infrastructure of CSS, WAI-ARIA, and JavaScript APIs. ECMA-262 continues their
work on JavaScript. The W3C and the browser vendors still have many great things to
do to enhance the ways that browsers support markup processing.
5
than cycles of standardization. The structure of a given document
is almost always easier to change than the programs that process
it. (The nodes view emphasizes the priority of programs and all
too often celebrates the things that make them brittle.)
• Markup makes comprehensible possibilities that can’t be reached
if you lock yourself into nodes from the beginning, like overlap‐
ping structures. Programmers indoctrinated into neat structure
often see this as an utter corner case, but those who work with
human documents know it exists regularly in the wild.
At some point, maybe around the time of the Microsoft “he doesn’t
know what XML is” advertisement, a lot of people arrived in markup
who had no interest in its details.
XML was exciting because it made clear that data interchange was
possible with much simpler tools than its predecessors. Markup was
still incredibly useful, but as the servant of programmers. XML struc‐
tures suddenly had to look like programming structures, because
nothing else could be trusted. They could look a little different, because
after all, programmers from different environments had different ex‐
pectations, and there were documents to tolerate, but Schemas and
WSDL and similarly structured approaches dominated.
More recently, the rise of web applications has brought a similar chal‐
lenge to the HTML side of the markup story. Single-page apps often
carry a tiny bit of markup that launches a JavaScript program, which
then sets about creating an abstract vision of HTML elements in the
DOM. Instead of layering their code on top of markup, the code takes
over, and the HTML lingers only as a readable serialization for de‐
bugging.
The data hygiene and mental hygiene of programming are not appro‐
priate for markup. Programming and markup have connections,
much like carpentry and plumbing, but their best practices are very
different.
JSON, ASN.1, and similar approaches are much better fits for pro‐
gramming, which need only the structure but not the weight of mark‐
up. Over time, they (JSON in particular) are eroding XML’s share of
markets it was never well suited for anyway.
On the HTML side, I see some return to an appreciation of the value
of markup. Content-first approaches to responsive web design can
take advantage not only of the concrete nature of markup as a foun‐
9
In those 7 years, quite a bit has happened. Probably one of the most
important steps forward was the introduction of querySelectorAll.
Being able to give a native function of a browser a CSS expression,
and it doing the work to navigate the DOM is a huge (literally) part
of jQuery.
CSS selectors simplified the learning process, but they also simplified
the resulting code. Figuring out which node an expression had selected
became much, much simpler. Developers could apply the same selec‐
tors they were using for code to a stylesheet and quickly resolve any
questions, and they could readily apply the same stylesheet to multiple
documents if there were further questions.
Why does this work so well, when CSS selectors offer only a few op‐
tions and a little logic?
Declarative approaches work extremely well for describing queries
through a document. Markup (whether HTML or XML) provides
clear hooks for those queries through their element and attribute
structures. The queries developers used to do by hunting and pecking
through the DOM are still available, but most of the time, declarations
will get you there a lot faster, or in identical time.
Browsers can optimize their CSS selector processing, running it in
much faster native code. A few years ago, I was very surprised to find
that completely switching out stylesheets was faster than making a few
style changes through JavaScript directly. Tree walking in JavaScript
means a lot of back and forth between the document object and the
interpreted code.
Performance and ease of learning aren’t all you get, though. You also
get a style of programming that offers vastly more flexibility, because
selectors are a form of pattern matching. Pattern-matching ap‐
proaches don’t require that all the patterns match—it is perfectly ac‐
ceptable to the pattern-matching engine for some patterns to match
nothing and for some content to go unmatched.
That makes it easy to build stylesheets that apply to a wide variety of
differently structured documents, or to write code that only applies
event handlers or other processing to elements if and when it finds a
match. It’s a simple message often explained to beginners at the very
start of learning CSS, but it reverberates throughout CSS practice.
Stylesheets can be shared, reused, and applied in layers through the
cascade that determines which declaration applies where.
13
applet dreams would have shrunk the Web to simple documents
and containers for applets.
• Flash carried its own banner for years. Of course, ActionScript is
itself a dialect of JavaScript, but the tools and environment were
very different. Flash and JavaScript development were generally
seen as competitive, especially as HTML5 added multimedia fea‐
tures that had previously required Flash.
17
with specific markup, markup you can choose. (It can still work with
those programs, of course!)
While I love that Polymer is a surprisingly sudden implementation of
ideas I suggested in “HTML: Moving Beyond the Standard”, the part I
like better is that this approach to problem solving makes it easier to
include the designers I talked with at Artifact. New markup offering
new capabilities is great, especially when it can be styled with familiar
tools. Though it’s early, the Polymer approach promises a much easier
conversation between designers, programmers, and the developers
combining aspects of both.
Does this new markup extensibility mean that JavaScript developers
will have less to do as modularization simplifies sharing? I don’t think
so. In Extend the Web Forward, Yehuda Katz suggests that there is a
lot more extending to do:
When the browser has good extension points (or any extension
points, really), we live in a virtuous cycle…
If things are working well, JavaScript library authors write new de‐
clarative APIs that the browser can roll in. Nobody wants to write
everything using low-level calls to canvas, but we’re happy that canvas
lets us express low-level things that we can evolve and refine.
Katz doesn’t claim it will be easy. He worries about “extension points
that can be performance footguns.” He does, however, see the constant
flow from imperative JavaScript APIs to more declarative approaches
as the path forward. To me, that seems like the right way to balance
flexibility with usability.
19
possible to support uniformity. The history of “this page best viewed
on my preferred browser” is mostly ugly. Polyfills, which I think have
a bright future (as described in “HTML: Moving Beyond
the Standard”), emerged to create uniformity where browsers didn’t.
Browsers, though, now provide a huge shared context. Variations exist,
of course, and cause headaches, but many HTML5 APIs and CSS3
features can work nicely as supplements to a broader site. Yes, you
could build a web app around WebRTC and Media Capture and
Streams, and it would only run on Firefox and Chrome right now. But
you could also use WebRTC to help users talk about content that’s
visible across browsers, and only the users on Firefox and Chrome
would have the extra video option. The Web Audio API is also a good
candidate for this, as might be some graphics features.
This is harder, of course, with things like WebSockets that provide
basic functionality. For those cases, polyfills seem like a better option.
Something that seems as complicated and foundational as Index‐
edDB could be made optional, though, by switching whether data is
stored locally or remotely (or both).
HTML5 and CSS3 have reawakened web development. I’m hoping
that we can develop new practices that let us take advantage of these
tools without having to wait for them to work everywhere. In the long
run, I hope that will create a more active testing and development
process to give browser vendors feedback earlier—but getting there
will require changing the expectations of our users and customers as
well.
Last July, I had to give an impromptu talk. What came out, much to
my surprise, was roughly: “JavaScript will dominate the programming
world.” I didn’t say that JavaScript would dominate through sheer
popularity—JavaScript may in fact top the list of languages disliked by
programmers, because so many programmers use it as a strictly sec‐
ondary language beside their preferred server-side toolkit.
Instead, I argued, as you’ll see in “Concentration: The Wrong Story”
on page 21, that JavaScript would win by ubiquity, offering a solution
that fits well enough in both clients and servers. While I still think
JavaScript could indeed “fit well enough,” the winds have changed, and
JavaScript may be about to surrender its ubiquity advantage, as you’ll
see in “Dispersion: A More Likely Story?” on page 24.
21
General-purpose languages, the tools that programmers have used to
quickly assemble programs without having to sweat the details of
memory management and data structures, are approaching a turning
point. There is nothing intrinsically wrong with Perl, Python, Ruby,
PHP, Java, C#, or many others, and they will continue to be used for a
long time. However, their growth rates are going to shrink dramati‐
cally.
What innovation could unseat those champions? It’s “the VB of the
Web,” a language that was patronized and dismissed for over a decade.
JavaScript may not have had much respect for a very long time, but it
has two major advantages over all of its general-purpose competitors:
Ubiquity
JavaScript is available on practically every computer sold today,
and any programmer who’s gone near the Web has at least thought
about it.
Power
The JavaScript renaissance continues to demonstrate that this
language is extremely capable, especially in the ever-growing
number of cases where asynchronous communications are nec‐
essary.
JavaScript snuck in. For a long time, “write once run anywhere” was
supposed to mean Java, with its armies of virtual machines for every
platform. The browser was just a window into a server-based world,
with JavaScript providing a few key features on the client. As devel‐
opers realized that the Web was the easiest way to create user interfaces
for shared data, more and more programming activity shifted away
from classic GUI implementation to building web applications. As
more and more Java development fell back to the server, JavaScript
solidified its hold on the client.
While the Dynamic HTML boomlet of the late 90s vanished into the
dot-com bust, Ajax returned JavaScript to prominence in 2005. Doug‐
las Crockford’s JavaScript: The Good Parts made it clear that JavaScript
was a first-class programming language, even if its take on objects was
unconventional. Growing demand for more desktop-like user expe‐
riences led to massive growth in JavaScript programming, with more
processing happening in the browser. That often (though not always)
led to simplification on the server side.