1 of 43

History of the Web

On what and why things are they way that they are

George Mauer

http://georgemauer.net

gmauer@gmail.com

@togakangaroo

2 of 43

now with

3 of 43

World Wide Web invented in 1989

Tim Berners-Lee

4 of 43

So how does a web page get to you?

Web Request

Web Response

And that’s what Tim aims to fix. His idea is very simple. He wants to build a piece of software that he’s calling a web browser, and then talk all the computer owners on the internet into running a piece of software called a web server.

When you put in a url into a web browser it would reach out over the internet and find the computer that was requested. The web server on that computer would then respond with a simple index

That means when you type a url into your web browser it connects to the web server software on my computer with the message “hey, give me an index of everything you have”, And you might get in response a document

Hi I’m George Mauer

I’m a software developer,

here is my blog,

here are some videos of me speaking at conferences

also I teach programming and here are some of my students

And then I would have links to your computers, so a web browser could follow them and find out about you and your hobbies, and so on and so on, forming a web that spanned …. the world

so I can have links to stuff on my machine and also to other people’s computers that are also running web servers creating a World Wide Web

5 of 43

Two stories here

Server

Browser

6 of 43

Story of the Server

Web Server

Apache
nginx
IIS
Httpd
Katana
Kestrel
Express
Rack
...

Programming Language

Ruby
Php
C#
Java
Python
Javascript (Node)
Elixr
Erlang
Haskell
Scala
Visual Basic
VBScript
Clojure
F#
Go
Rust
Julia
OCaml
Io
Perl

7 of 43

Giving credit where due

8 of 43

Back to the Browser

http://info.cern.ch/hypertext/WWW/TheProject.html

9 of 43

10 of 43

It looks like this. So you can see there’s not a lot of difference. Instead of function calls we use these tags. Rather than use parentheses, most tags have an opening and a close. The things that go in between we refer to as contents.

This markup language for creating glorified indexes is called HTML

In October 1991, Tim Berners Lee started up the www-talk mailing list. Throughout the 90s, this mailing list was where people working on building the web would discuss things. It’s super fascinating you can actually read through the archives and find the first place where the things we use every day are proposed, alternatives discussed, and decisions made.

I for example have found the first discussions of multipart form encoding. Tim Berners Lee himself first suggested using HTTP POST for forms. And of course it’s always exciting to see names from history books crop up in the first person. Dan Connely, Bill Perry, Henning Schulzrinne, even Guido Van Rossum pops up.

There was a constant tension between the academics and the browser vendors. Reading the archives, the most obvious is...

11 of 43

Marc

*****ing

Andreessen

10:00

Marc freaking Andreessen

Yes, that Marc Andreessen.

Wikipedia:

“Begun with an initial capitalization of $300 million, within three years Andreessen Horowitz firm grew to $2.7 billion under management across three funds. Andreessen Horowitz’s portfolio holdings include Facebook, Foursquare, GitHub, Pinterest, and Twitter.”

“Andreessen serves on the board of Facebook, eBay, Hewlett Packard Enterprise, Kno, Stanford Hospital, Bump Technologies, Anki, Oculus VR,and TinyCo. He serves as advisor to Asana and director of CollabNet”

...SO...

In the early 90s he was an undergrad student working on building the Mosaic browser - the second graphical browser available - and then in the mid 90s founded Netscape.

Marc is always outspoken on the archives - that is nothing new - but you can also see how he’s driving innovation. Take the img tag for example. It was proposed by Marc in February 1993 as a way of putting inline images into documents. People on www talk did not care for it. Why should embedding an image be any different from embedding an audio file or a video or another document? Twelve days later, while people were still discussing he put an end to it - Mosaic was going with the IMG tag. They needed to launch and users wanted inline images and they had no time to wait for the community to come together and kumbaya

And this was before the web got popular. By the late 90s the situation was getting untenable. The w3c, the html working group, browser vendors, thousands of interested individuals it was just too many cooks

12 of 43

Too Many Cooks

13 of 43

Marc

*****ing

Andreessen

14 of 43

Oblivious - The w3c in the early 2000s

15 of 43

16 of 43

Computers in the early 90s

Remember, that even in the early 90s you had computers that looked like this. While some computers were kinda fancy, how do you make font bigger on something that’s basically a typewriter? Or change color on black and green? Or put something side by side when there’s not enough room on the monitor?

Better have no styling and let the computer figure out who to display things.

Marc Andreessen

In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

These index pages became more and more complex. People kept asking for it so soon they came up with a compromise. 1994, Half a year after Marc said the above, he shipped the first Mozilla beta with html styling controls. (<center> was the first one)

Of course this was an almost immediate problem. Even since Tim Berners Lee’s first NEXT browsers, separating style into a different document was important but none of the specifics on how to do this were ever standardized

Pei Yuan Wei - Author of the Viola browser - introduced the idea of the stylesheet link. The idea being that your HTML would have a hidden link to another type of file, this file would contain suggestions for how a computer should display the web page. This is a good idea since the expectation is that a suggestion can be ignored

17 of 43

With the admission that yes, presentation was important, there was a race to create a styling language. And boy, were there a lot of proposals. Some of the best ones still make me jealous today - ones like DSSSL and Pei Wei’s proposals were based on Scheme, could define functions, do calculations, and so on. CSS was a much simpler proposal that was primarily based on the idea of combining the preferences of the user with the preferences of the website author. This was what Cascading referred to.

17:00

Although that idea ended up being pushed to the background, it spawned so much discussion that CSS simply received most attention. In addition the simplicity of CSS and that it seemed easiest to implement, and could be applied before the entire page was rendered, won out in the end.

The initial CSS proposal was published and presented by Håkon Wium Lie in 1994, it received Commitment from IE team in 1995, and first commercial browser support from IE3 in 1996, Netscape 4.0 came soon after with a super buggy attempt. Both remained buggy through the late 90s.

Still, the future was bright for CSS was bright!

18 of 43

“CSS level 2 became a Recommendation in May 1998, and level 3 will probably follow towards the end of 1999”

Håkon Lei

(writing in 1999)

19 of 43

But how to make pages *do* things?

20:00

How many of you have bought an airplane ticket before? Or a bus or concert ticket? When you go to a site like that and you click the date, you get a calendar, right? So think of the pieces we have so far and how a calendar would have to work. When you click on the date, it would have to be a link that would go back to the server, the server would then put together the same html page you were just at but with a calendar in the middle of it, and then send that back. Back in the 90s this could easily take minutes and is silly - there is no information in calendar that the web browser doesn’t already have.

We need something that can do things like “when you click this button, rearrange the html and css on the page to create a calendar”. That needs a programming language

It’s a great idea

20 of 43

So then Netscape gets this guy...

Ok, last nerdy white guy picture, promise

So 1995. Netscape was a company that made a web browser you might remember called Netscape Navigator, and they hire this guy and basically say

“Brendan, you’re a smart academic-y guy, you like this stuff - go create a programming language. Oh and by the way, we want it in the next version of Netscape Navigator so you have ten days”. And then they locked him in a room

So Brendan Eich, who is a smart, academic-y guy, creates this pretty neat language based on a couple of his favorites like Scheme and Self and actually manages to get it done in ten days and the language is called Mocha. To which Netscape says,

“We love this, we love what you did here, but you know...our marketing guys would like to kick it up a notch. There’s this completely other programming language called Java. Java is really hot right now, everyone likes Java developers. Can you make this look like Java?”

So Brendan scratched his head and went off and added some semicolons and mustache braces to his language.

So remember that anyone assumes because you know one you know the other.

“Java is to Javascript as Car is to Carnival” - Kyle Simpson

Two months later JavaScript launched with the new Netscape browser version.

And then nothing much happened

There was a few updates and ms came out with vbscript to compete then it's own reverse engineered version (JScript) but nothing much else

In fact this was by design

The idea was that sometime soon, the browser would support Java as well. Well...we’ll talk about why but that never happened. Nothing much happened until...

21 of 43

1999: MS Outlook Web Client

Do you have to go to a new page just to get your message?

22 of 43

2004: Gmail

..until 2004 when gmail “rediscovered” the idea. When you open up a message it will use javascript to make an invisible “virtual web browser” which will send another request for “give me just message 123”, when the web server responds with that message, javascript in the web browser can rearrange the html on the page to stick that message into the display.

This and gmaps kickstarted the revolution of front-end-heavy applications

You were no longer limited to *just* the data that was available on the page, you could load and send data using javascript without a full browser refresh
Jesse James Garrett coined the term Ajax
By 2008 Mobile devices started coming around that could run limited versions of javascript

3G and LTE were not a thing and everyone had bandwidth requirements so they wanted less stuff sent
HTML is a lot of stuff, but the only thing that *really* needs to be sent in the above is the message data (body, to, from, ccs, etc) - that could be sent in another format and then the javascript could build up html from that
The format most people chose was JSON - which has the added benefit of already being how javascript code represents data - making it easy to convert and for developers to understand

23 of 43

24 of 43

EcmaScript 6 - Finally an update

25 of 43

And will keep evolving

26 of 43

So … things are weird

27 of 43

So … things are weird

28 of 43

So … things are weird

29 of 43

HTML is Structure

how the web page is structured

CSS is Style

how the web page looks

Javascript is Behavior

what the web page does

30 of 43

The Browser Wars!!!

31 of 43

The browser wars got weird!

32 of 43

Not much going on here

33 of 43

2004: Firefox

2008

34 of 43

35 of 43

Predictions

36 of 43

Don’t call it a comeback, I’ve been here for years.

LL Cool J

37 of 43

Don’t call it a comeback, I’ve been here for years.

LL Cool J

XHML

XHTML will come back.

The meter shows roughly how sure I am of this

I know it’s unfashionable to give any credence at anything xml but XHTML is a good idea. The entire point is that it is easier to write your own html parser. A simpler spec is a “good thing”.

But history has proven that a backwards incompatible spec is a problem and that nobody wants to write xml.

Fortunately you won’t have to because of: virtual-dom. Or more generally, the fact that more and more of our HTML is generated via frameworks and libraries. Once your markup can be generated, it can be generated as HTML5 or XHTML3 with pretty much equivalent amounts of effort.

Webkit, Blink, Geco, EdgeHTML - they’re all going to keep supporting HTML5. But I envision a world where I can write my own special-needs client, request an xhtml3 page. Then - the server runs the code to generate markup and returns it to me something I can parse easily.

38 of 43

AR/VR:�The next Big Thing for CSS

39 of 43

AR/VR:�The next Big Thing for CSS

There will be a functional compile to js/css language

40 of 43

47:00

It is the time of javascript. NodeJs runs on the server and everyone is all about it.

Node by the way is not even close to the first Javascript implementation to run on the server. Microsoft JScript implementation ran on the server

Rhino ran on the JVM and was actually used

But sure, nodejs is innovative and the first thing to do that ever

And now javascript is everywhere. It’s on servers, in clients, being caught in code schools, running IoT devices.

We all love it, right?

Alright...now everyone who doesn’t do javascript...earmuffs. Those of us who do it all the time, we can all agree it sucks, right?

I mean yes, it enables lots of great programming constructs but Javascript the Good Parts is about 80% bad parts you should always avoid always

But its everywhere forever, right?

41 of 43

We are past peak Javascript

This is absolute heresy.

I believe that hit peak javascript back in late 2016 or so.

Since browsers came about, people have been trying to get other languages to run in the web browser. This has always failed as all browser vendors would have to agree on what to use and actually do it (Adobe Flash came closest). There were attempts to convert code in other languages to js but they never worked all that well.

This is a shame because Javascript was never envisioned as being an application language. When Brendan Eich created it, Netscape was actually in negotiations with Sun about putting Java *into* Netscape. They meant for another language like Java (though the talks fell through) to be a language that “real engineers” used for heavy duty components, and Javascript to be a language that juniors and novices would use to script and stitch stuff together

The prediction is three years from now, we will not be writing heavy applications in javascript. I don’t mean typescript nor clojurescript, elixirscript, or any compile-to-js language

42 of 43

WebAssembly will (finally) bring other languages to the browser

As of 2014 there has been a lot of work on something called asm.js. This is a particular way of writing javascript that *if you write your code that way* web browsers will be able to run it in a way that will make it super-fast (almost as fast as native development). Its not really possible for people to hand-write this format, but what you *can* do is compile code in other languages to this format.

watch out for in the next 3+ years is people writing web applications in other languages and using asm.js to run both the app and the runtime in the browser in a way that is *fast*.

Webassembly Is a binary format for asm that Brendan Eich and Mozilla introduced and browsers are mostly agreed on. The same app can be requested in asm compatible js or in pure Webassembly IL based on your accepts header

43 of 43

</lecture>

Slides: http://bit.ly/2EJSToB

Bibliography: http://bit.ly/2omHKDS

George Mauer

http://georgemauer.net

gmauer@gmail.com

@togakangaroo