Google Maps led the way, demonstrating
that – thanks to JavaScript – just about
anything is possible on the web.
JAVASCRIPT EATS
THE WEB
As web applications grew more and more
complex, JavaScript libraries expanded
in scope. First Angular and then React
encoded a new approach. Rather than
treating JavaScript as a separate layer of
interaction that sits on top of an existing
HTML document, the modern approach
flips that model on its head. JavaScript
becomes the centrepiece. The DOM is no
longer generated from existing HTML
- the DOM is generated by JavaScript
instead. JavaScript injects markup into
an otherwise empty page. You can even
use JavaScript to inject CSS straight into
the DOM at runtime. Where once there
was a separation of concerns – structure,
presentation and behaviour – now you
can do everything in one language.
This power comes at a price. If the
contents of a web page are being injected
with JavaScript, the script has to be
downloaded, parsed and executed before
the user sees anything. Browsers are
optimised to stream HTML, even when
it ’s i nc ompl e te. T h at ’s not a n opt i on w it h
JavaScript. Performance suffers and, with
it, the user’s experience.
The stricter error handling of
JavaScript also makes it hazardous. If
there’s just one error in your code or if
there isn’t enough feature detection to
deal with older browsers, users will be
left staring at an empty screen.THE PRINCIPLE OF
LEAST POWER
When Tim Berners-Lee was working on
his world wide web project, he applied aRESOURCES
If there’s just one error in your
[JS] or if there isn’t enough
feature detection to deal with
older browsers, users will be left
staring at an empty screen
The Lean Web
https://leanweb.dev/ebook
Chris Ferdinandi has written an
excellent book that describes
how you can apply sensible
design principles to make
robust websites. Even better,
you can read the whole thing
online for free.Stimulus.js
https://stimulusjs.org
This JavaScript library describes
itself as: “A modest JavaScript
framework for the HTML you
already have”. It’s designed to
enhance your existing markup
by layering behaviour on top of
that solid baseline.TurboLinks
https://github.com/turbolinks/
turbolinks
TurboLinks is a drop-in script
for adding Ajax page transitions
to websites. Provide the user
experience of a single-page
app but without the reliance on
doing everything in JavaScript.Resilient Web Design
https://resilientwebdesign.com
I’ve written a book too! Resilient
Web Design examines in detail
the history of the web’s layers.
The book is actually a website
that works offline. It’s yours
for free and can be accessed in
various ways.number of design principles: simplicity,
tolerance (in the form of Postel’s Law),
modular design and the principle of
least power: “Choose the least powerful
language suitable for a given purpose”
(https://www.w3.org/2001/tag/doc/
leastPower.html).
On the face of it this seems like
unusual advice but remember that
powerful languages come with a price:
fragility. Less powerful languages are
more forgiving and more widespread.
We can apply the principle of least
power when we are creating products
and services on the web. As web
accessibility expert Derek Featherstone
puts it: “In the web front-end stack –
HTML, CSS, JavaScript and ARIA – if
you can solve a problem with a simpler
solution lower in the stack, you should.
It’s less fragile, more foolproof. It just
works.” (http://simplyaccessible.com/article/
data-attributes/)
JavaScript, Ajax and the DOM are
powerful tools. Use them responsibly.Connect the web’s building blocks