JavaScript – The Ugly Duckling – 1995



JavaScript – The Ugly Duckling – 1995

0 0


javascript-ugly-duckling

A short presentation I gave at work on the history of JavaScript

On Github net-uk-sweet / javascript-ugly-duckling

JavaScript

The Ugly Duckling

Wanted to do something with general appeal so that more just a couple of developers turned up. Also, I thought it might be less work. I'm going to talk you through the history of JavaScript and show how it's gone from quite humble beginnings, to one of the most popular, and I think, most important, programming languages in the world today. And I'll be hanging the whole thing of this rather flimsy duck metaphor.

Introduction

  • A brief history of JavaScript
  • Humble beginnings
  • Most popular language today
  • Arguably the most important
  • Flimsy duck metaphor
I think this is important to have as a slide

About me

  • Ian Watson
  • Nearly 10 years @ Amaze
  • Flash developer
  • Oh my God they killed Flash. You bastards!
  • JavaScript noob
Re-tooled for obvious reasons. JavaScript and ActionScript: similar syntax and use cases.

1995

  • World Wide Web had taken off
  • Netscape Navigator ruled
  • IE didn't exist
  • First browser war looming
WWW had gone from a tool used primarily by university science departments, to widespread public attention and use, almost overnight. Prompted by the release of Mosaic, which was the first graphical web browser, which was released in 1993. By 1995 Netscape Navigator was the most popular browser with 60% share. IE didnt' even exist yet, version one was releaseed in August with Windows 95. Version 2.0 was released 3 months later. Right on the cusp of the first browser wars

Netscape Navigator 1.0

Netscape had adopted hot new programming language Java as part of it server solution. Wanted a light-weight language which they could embed in the browser. Which would compliment Java and appeal to non-professional programmers. Was anyone developing in 1995? Basically they were talking about a few thousand web developers.

Brendan Eich

  • CTO of Mozilla Corporation
  • Father of JavaScript
So they got this guy here, Brendan Eich. And they said to him - we want you to write a language to embed in the browser, and it needs to be a bit like Java, and it needs to be dynamic and interpreted, so no compilers or anything like that. And we need it in 10 days. So he went off, probably moaned a bit, and then got down to work and wrote the language. 10 days later he presented it to his bosses, and they said yeah that looks good. Seems to work. Cool, let's go with it. And so it shipped with the next version of Navigator. As an important side note here, Microsoft reverse engineered the whole language, including all the mistakes I'm about to talk about, and called their version jScript. It shipped in IE 3.0 the following year.

The Ugly Duckling

So as you can imagine, this thing which was knocked together in 10 days and shipped without any real testing, it was a bit of an ugly duckling.

The really bad bits

  • Global variables
  • Overloaded + operator. 5 + "5" = "55"
  • Automatic semi-colon insertion
  • Broken typeof
  • Type coercion rules
  • false, null, undefined, NaN
  • Broken floating point numbers. 0.1 + 0.2 != 0.3
And there was some really bad stuff. Some you might call idiosyncracies of the language, others are just plain bugs. This is the stuff that Brendan Eich himself says are really bad. This is the most boring slide so I won't dwell on it, but if you're a developer who has worked with JavaScript at all, there's a good chance you've been stung by some of these at some stage.

JavaScript is picked on

It was a bit of a mess, and the other languages started picking on it. You don't look like us. You're kind of a noddy language aren't you? You can't do any serious programming with you. There's no debugging tools. You're really slow. The DOM API is horrible. Generally, JavaScript, you suck.

Error!

Thanks for that, that's really very helpful.

JavaScript runs away

Generally dismissed and derided by it's brothers and sisters, JavaScript ran away and hid.

Dreamweaver rollover

function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;x.src=a[i+2];}
}
I think there was a time where if you viewed the source of a web page, there was at least a 50% chance you would see this code.

Standardised by ECMA

  • 1st standardised in 1997
  • 1999 revision is what we use today
Something important did happen in that time. Netscape handed over the language to the European Computer Manufacturers Association and they wrote a specification around the language. This is a good thing. 1999 version added regular expressions, improved string handling. It's more or less what we use today.

Jesse James Garrett

  • What was he when he wrote the whitepaper?
  • UX Designer
  • Described AJAX (2005)
Brilliant name. Two characters from the history of the American West in one name. Whitepaper (Ajax: A New Approach to Web Applications). Described a set of technologies which already existed which could be used together to allow developers to send and receive data from the server and update the display in the browser without having to refresh the page. Meant that we could move away from the really static webpages of the time to something much more dynamic. Really important because it meant that the web application was possible.

JavaScript libraries, thousands of 'em

“Used by over 65% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today” wikipedia All these libraries built on JavaScript started popping up. mootools, prototype and of course jQuery. Made it really easy to write this new breed of dynamic functionality in the browser. Alternative to broken DOM API, hiding the browser inconsistencies behind a single API.

Not an ugly duckling

And I think this is the point in the story where someone says to JavaScript, look at your reflection. You're not an ugly duckling. Because google saw a real opportunity in this space, and importantly, they recognised the potential of JavaScript to help them deliver web applications. So they took a punt and built gmail and google maps. is pretty much the archetypal web application. It's the example which is most often used when people talk about them.

Chrome

But in the process of building these, they became frustrated by the limitations of the current crop of browsers, which were basically the biggest barrier to success. JavaScript engines and DOM were slow, support was inconsistent. So they asked themselves well, how hard could it be to write your own browser? So they did. And google Chrome was born

Chrome Mission Statement

“We realized that the web had evolved from mainly simple text pages to rich, interactive applications and that we needed to completely rethink the browser.

What we really needed was not just a browser, but also a modern platform for web pages and applications, and that's what we set out to build.”

google, 2008 And I know this is long, but I couldn't really see where to cut it, so I'll just read it. It's a statement which google published along with the beta of Chrome for Windows in 2008. It's long, but I think it really illustrates some of the things I've just been talking about.

New browser wars

  • Attacked IE market share
  • JavaScript performance
  • Implement new features
  • Aggressive release cycles
  • Huge improvement to debugging tools
Another round of the browser wars. Overtook IE in 2008. Now 40% to IE's 30%. Chrome and Firefox release every 6 weeks. IE is now annually. Implement new features very quickly, and fix bugs. Fewer people on out-dated browsers.
More recently, seen the arrival of HTML5. Gives us JavaScript APIs to access media and device hardware, drawing contexts, vector graphics. Massively increased the amount of cool stuff you can do with JavaScript. More or less, all the stuff we would have needed Flash to do in the past.

Flash in the pan

jobstractor.com stats change in demand for different languages, based on 60,000 jobs posted during 2012. Rise in popularity of JavaScript exactly mirrors the decline in popularity of ActionScript.

Today

  • Most popular on github
  • Most popular on stackoverflow.com
  • Most important
Most popular on github. there are more open source projects hosted on github tagged JavaScript than any other language. Developers, hands up if you use stack. Keep your hands up if you use it every day. What about every hour? It's a programming questions and answers site which has, in the space of a few years, become hugely popular and useful.

Ubiquitous

  • Anywhere there's a web browser
  • Phonegap, node webkit, Adobe AIR
  • Web technologies driving the desktop
  • Server-side (node)
  • Potential audience of billions
  • No other language has the same reach
Arguably the most important because it's in the browser, and the browser is ubiquitous. Desktop, laptop, tablet, smart phone, feature phone. Soon it will be on your glasses and your watches. We're seeing web technologies driving the desktop. Large parts of firefox are written in JavaScript. Mobile apps with Phonegap Cordova. Web technologies are first class citizens for developing applications for Windows 8. Node webkit and Adobe AIR runtimes allow traditional

It's not so bad

“Hidden under a huge steaming pile of good intentions and blunders is an elegant and expressive programming language”

Douglas Crockford JavaScript: The Good Parts (2008). There are some good parts and Douglas Crockford argued that if we concentrate on just the good bits, it's possible to build really good programs using JavaScript. The tools are really good now. Built into Visual Studio and Eclipse. Firebug and Chrome are first class debugging tools. And we have a functionaing standards body - Mozilla, Microsoft, Apple, Google, Opera and Yahoo all working together towards the next version, appropriately named "Harmony"

Douglas Crockford

  • JavaScript architect, PayPal
  • JavaScript: The Good Parts
  • JSON, JSLint and JSMin

Beautiful swan?

No, not really. At it's core it's still the same ugly mess. So it's more of a bad ass swan, which has seen off challenges from Java, Silverlight, Flash and VBScript to become the number one on the web.

Bad ass swan!

THE END

  • http://delicious.com/net.uk.sweet/brownbag/
  • http://lab.hakim.se/reveal-js/