The author

The 100 Year Web

Steven Pemberton, CWI, Amsterdam

Contents

About me

Stephen Hawking

I went to the same school as Stephen Hawking.

University

Richard GrimsdaleMy university tutor was Richard Grimsdale.

He built the first ever transistorised computer.

Turing

Alan Turing on UK £50 note

Grimsdale's tutor was Alan Turing (making me a grand-tutee of Turing).

Post-University

MU5

I (coincidentally) went on to work in the department in Manchester where Turing worked.

I worked on the 5th computer in the line of computers Turing also worked on, the MU5.

Amsterdam

A project meeting

Moving to The Netherlands, I co-designed the programming language that Python is based on.

Internet

Steven at a computer in the 80's

I was the first user of the open internet in Europe, in November 1988, 35 years ago!

CWI set up the first European internet node, and then two spin-offs to build the internet out in Europe and the Netherlands.

Web

Steven with Tim Berners-Lee

I organised workshops at the first Web conference at CERN in 1994

I co-designed HTML, CSS, XHTML, XForms, RDFa, and several others.

I still chair XForms and ixml.

Trigger warning

I may well say things that you don't want to hear.

Sorry.

It won't be the first time. In 2008 for instance I gave a talk on the dangers of Web 2.0 to a group of Web 2.0 developers. They were furious! Some years later someone wrote:

"The crowd completely disagreed. In hindsight he could not have been more correct. It grows more relevant with each passing year".

An advantage of being here together is that you can create a support group.

New College, Oxford, 1379

New College Dining Hall

Built in 1379, New College has a dining hall with huge oak beams in the roof.

Eventually the beams needed replacing. But where do you find oak beams? They asked the University forester if he knew:

- "Which college are you from?"
- "New College."
- "Well, I've got your trees".

It turns out that around the time that New College was built, they planted new trees to be ready for when they would need them.

We don't see that sort of attitude much these days.

2024

Installation of first public computer in 1957

This year is the 33rd anniversary of the Web being released in 1991.

It is 35 years last November since the internet started in Europe.

But on that day in 1988, public computing itself was only 31 years old! The first municipal computer was installed in Norwich UK in 1957

Computing is still very young.

How the web was won

Tim Berners-Lee and Steven

Many people think that Tim Berners-Lee must have been a genius to have invented the web, but in fact at the time there were several alternatives being developed.

The original web was not revolutionary, just created the right combination of existing elements:

Declarative

A Declarative Definition

We learn in school what numbers are, and how to add, subtract, multiply and divide.

However, when we get to square roots, we are only told:

The square root of a number is a number that when you multiply it by itself, you get the original number.

This is a declarative definition. It tells you what something is, it tells you how to recognise it, but it doesn't tell you how to calculate it.

Most people know what a square root is, few people leave school knowing how to calculate one.

A Procedural Definition of Square Root

function f a:
{
   x ← a
   x' ← (a + 1) ÷ 2
   eps ← 1.19209290e-07
   while abs(x − x') > eps × x: 
   {
      x ← x'
      x' ← ((a ÷ x') + x') ÷ 2
   }
   return x'
}

Advantages of Declarative

The Development of HTML

HTML, the language underlying the web, was largely declarative.

In the early days of HTML, there were very few browsers, and only one or two of importance.

Browser makers were very tempted to add to HTML. We still live with the bad design decisions of Netscape...

W3C was partly created in order to protect HTML, so that everyone used the same HTML, and everyone agreed on new features.

Unfortunately, recently the browser makers, led by Google, have taken over HTML, and are now changing it radically, and badly, to create HTML5, largely forgetting its declarative foundation.

Declarative numbers

       number: optional sign, digit+.
optional sign: "-"?.
        digit: ["0"-"9"].

A number has its normal everyday meaning.

This is:

Procedural numbers: HTML5

2.4.4 Numbers

2.4.4.1 Signed integers

A string is a valid integer if it consists of one or more ASCII digits, optionally prefixed with a "-" (U+002D) character.

A valid integer without a "-" (U+002D) prefix represents the number that is represented in base ten by that string of digits. A valid integer with a "-" (U+002D) prefix represents the number represented in base ten by the string of digits that follows the U+002D HYPHEN-MINUS, subtracted from zero.

The rules for parsing integers are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either an integer or an error.

  1. Let input be the string being parsed.
  2. Let position be a pointer into input, initially pointing at the start of the string.
  3. Let sign have the value "positive".
  4. Skip whitespace.
  5. If position is past the end of input, return an error.
  6. If the character indicated by position (the first character) is a "-" (U+002D) character:
    1. Let sign be "negative".
    2. Advance position to the next character.
    3. If position is past the end of input, return an error.

    Otherwise, if the character indicated by position (the first character) is a "+" (U+002B) character:

    1. Advance position to the next character. (The "+" is ignored, but it is not conforming.)
    2. If position is past the end of input, return an error.
  7. If the character indicated by position is not an ASCII digit, then return an error.
  8. Collect a sequence of characters that are ASCII digits, and interpret the resulting sequence as a base-ten integer. Let value be that integer.
  9. If sign is "positive", return value, otherwise return the result of subtracting value from zero.

2.4.4.2 Non-negative integers

A string is a valid non-negative integer if it consists of one or more ASCII digits.

A valid non-negative integer represents the number that is represented in base ten by that string of digits.

The rules for parsing non-negative integers are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either zero, a positive integer, or an error.

  1. Let input be the string being parsed.
  2. Let value be the result of parsing input using the rules for parsing integers.
  3. If value is an error, return an error.
  4. If value is less than zero, return an error.
  5. Return value.

Inflation

So the HTML5 definition of signed numbers is 16 times longer and has internal inconsistencies.

It will not surprise you to learn as a result that the HTML5 spec is very large.

HTML5, the Spec

The HTML5 Spec printed
One of the advantages of the web is that you can read its specification without having to print it out

Declarative Markup

Declarative methods are not only for specification.

For instance, in HTML, elements like <h1> just announce that this is the top-level heading, without requiring anything about how it looks, such as in a large bold font.

<h1>The 100 year web</h1>

Or the <a> element:

<a href="talk.html" title="..." target="..." class="..." >My Talk</a>

This compactly encapsulates a lot of behaviour including

Doing this in programming would be a lot of work.

CSS

CSS, the web styling language, is another example of a successful declarative approach.

When W3C started the CSS activity, Netscape, at the time the leading browser, declined to join, saying that they had a better solution, JSSS, based on Javascript.

Instead of

h1 { font-size: 20pt; }

you could use script to say

document.tags.H1.fontSize = "20pt";

Which brings us to Javascript.

Javascript

Javascript- the definitive guide

Javascript: So Good it has Good Parts!

Javascript, the good parts book

Javascript, good vs bad.

The good parts vs the rest

Programming and its consequences

The HTML5 designers, rather than designing new declarative ways of dealing with new use cases, instead turned HTML into a programming environment based on Javascript.

Let's look at the consequences of dropping a declarative approach for programming.

Consequence: Standardisation

One of the problems with using programming for functionality is that standardisation disappears.

Example: CSS presentation mode (which I am using here) allows you to specify how any document can be formatted when doing a presentation.

Alas, HTML5 has taken the approach that you can do this better in Javascript. No one supports Presentation Mode any more. And there are now lots of Javascript packages to do presentation.

ALL DIFFERENT!

You can no longer switch in a different presentation package, and use that, because you have to CHANGE THE DOCUMENT.

The programmers are doing the document design, so all the documents become proprietary, and there is no interoperability, which is the whole point of standards.

Consequence: Divergence

Javascript is why there are so few new elements in HTML5: they haven't done any design, and instead said "if you need anything new, you can always do it in Javascript".

And many have.

Wikipedia lists 26 packages of Javascript (such as Angular, Dojo, and Bootstrap) that you can use to build your webpages.

They are not interchangable, thus effectively creating 26 different versions of HTML.

Consequence: Frameworks

So which framework do you use? And what happens when:

YOU HAVE TO CHANGE ALL YOUR DOCUMENTS.

This is why standards are needed, not proprietary formats like frameworks.

Consequence: Availability

"The U.K.’s Government Digital Service ran an experiment to determine how many of its users did not receive JavaScript-based enhancements, and it discovered that number to be 1.1 percent, or 1 in every 93 users.

For an ecommerce site like Amazon, that’s 1.75 million people a month, which is a huge number." -- alistapart

Consequence: Bloat

To look at the webpage of one single tweet of 140 characters, you have to download just under a megabyte. It's 5200 lines of HTML before you even get to the five Javascript packages.

The whole of James Joyce's Ulysses is only half as long again.

"An article from 2012 titled "The Growing Epidemic of Page Bloat" warns that the average web page is over a megabyte in size.

The article itself is 1.8 megabytes long.

An article two years later, called “The Overweight Web" warns that average page size is approaching 2 megabytes.

That article is 3 megabytes long.

If present trends continue, there is the real chance that articles warning about page bloat could exceed 5 megabytes by 2020." -- The Website Obesity Crisis

Consequence: Speed

"Because of GDPR, USA Today decided to run a separate version of their website for EU users, which has all the tracking scripts and ads removed. The site seemed very fast, so I did a perfoseveralrmance audit. How fast the internet could be without all the junk!

5.2MB → 500KB

They went from a load time of more than 45 seconds to 3 seconds, from 124 (!) JavaScript files to 0, and from a total of more than 500 requests to 34." -- Marcel Freinbichler

Consequence: Accessibility

One day we will all be 80, and still need to be able to use the web.

"Many developers who have grown up only using frameworks have a total lack of understanding about the fundamentals of HTML, such as valid and semantic markup ... This is of great concern as semantic markup is one of the core principles of an accessible web." -- Russ Weakley

Consequence: Permanence

The web is the way now that we distribute information. We will need the web pages we create now to be readable in 100 years time, just as we can still read 100-year-old books.

Requiring a webpage to depend on a particular 100-year-old implementation of Javascript is not exactly evidence of future-thinking.

Declarative markup is easier to keep alive because it is independent of the implementation!

1957: The first municipal computer (Norwich, UK)

The First Computer in Norwich

Just one of 21 cabinets making up the computer.

2015: The Raspberry Pi Zero

Raspberry Pi in Norwich

The first computer so cheap that they gave it away on the cover of a magazine

How do they compare?

The Elliot ran for about a decade, 24 hours a day.

How long do you think it would take the Raspberry Pi Zero to duplicate that amount of computing?

How do they compare?

The Elliot ran for about a decade, 24 hours a day.

How long do you think it would take the Raspberry Pi Zero to duplicate that amount of computing?

The Raspberry Pi is about one million times faster...

Compare

The Raspberry Pi is not only one million times faster. It is also one millionth the price.

A factor of a million million.

A terabyte is a million million bytes: nowadays we talk in terms of very large numbers.

Want to guess how long a million million seconds is?

Compare

The Raspberry Pi is not only one million times faster. It is also one millionth the price.

A factor of a million million.

A terabyte is a million million bytes: nowadays we talk in terms of very large numbers.

Want to guess how long a million million seconds is?

30,000 years...

A really big number...

Moore's Law

In fact a million million times improvement is about what you would expect from Moore's Law over 58 years.

Except: the Raspberry Pi is two million times smaller as well, so it is much better than even that.

1957

In the 50's, computers were so expensive that nearly no one bought them, nearly everyone leased them.

To rent time on a computer then would cost you of the order of $1000 per hour: more than the annual salary of a programmer!

When you leased a computer in those days, you would get programmers for free to go with it.

Compared to the cost of a computer, a programmer was almost free.

The design of programming languages

The first programming languages were designed in the 50s:

Cobol, Fortran, Lisp, Algol.

They were designed with that economic relationship of computer and programmer in mind.

It was much cheaper to let the programmer spend lots of time producing a program than to let the computer do some of the work for you.

Programming languages were designed so that you tell the computer exactly what to do, in its terms, not what you want to achieve in yours.

Back to now

It happened slowly, almost unnoticed, but nowadays we have the exact opposite position:

Compared to the cost of a programmer, a computer is almost free.

I call this Moore's Switch.

Moore's Switch

Moore's Switch illustrated
Relative costs of computers and programmers, 1957-now

But, most programmers are still using languages that are direct descendants of the languages designed in the 1950's!

We are still telling the computers what to do.

Declarative programming

A new way of programming: describes what you want to achieve, but not how to achieve it.

A Procedural Clock

A clock in C, 1000+ lines

1000 lines, almost all of it administrative. Only 2 or 3 lines have anything to do with time.

And this was the smallest example I could find. The largest was more than 4000 lines.

A Declarative Clock

type clock = (h, m, s)
displayed as 
   circled(combined(hhand; mhand; shand; decor))
   shand = line(slength) rotated (s × 6)
   mhand = line(mlength) rotated (m × 6)
   hhand = line(hlength) rotated (h × 30 + m ÷ 2)
   decor = ...
   slength = ...
   ...
clock c
c.s = system:seconds mod 60
c.m = (system:seconds div 60) mod 60
c.h = (system:seconds div 3600) mod 24

A Running Declarative Clock

The Views System

The Modern Version

Experience

We have been working on Declarative Languages now for more than 30 years

As a result we have experience of people building large applications declaratively.

I'll tell you about three of them.

Example: 150 person years becomes 10!

A certain company makes one-off BIG machines (walk in): user interface is very demanding — traditionally needed:

5 years, 30 people.

With XForms this became:

1 year, 10 people.

Assume one person costs 100k a year. Then this has gone from a 15M cost to a 1M cost. They have saved 14 million! (And 4 years)

Example: Insurance Industry

Manager: I want you to come back to me in 2 days with estimates of how long it will take your teams to make the application.

Example: Insurance Industry

Manager: I want you to come back to me in 2 days with estimates of how long it will take your teams to make the application.

[Two days later]

Programmer: I'll need 30 days to work out how long it will take to program it.

Example: Insurance Industry

Manager: I want you to come back to me in 2 days with estimates of how long it will take your teams to make the application.

[Two days later]

Programmer: I'll need 30 days to work out how long it will take to program it.

XFormser: I've already programmed it!

Example: NHS

The British National Health Service started a project for a national distributed health records system.

Example: NHS

The British National Health Service started a project for a national distributed health records system.

One person then created a system using XForms.

This year it is being rolled out in Ukraine.

Conclusion

The Web has become too important as infrastructure to be treated lightly.

The Web itself must return to declarative foundations to make it durable and persistent.

But attitude by web creators is also important: design with the future in mind, as well as the present.