JavaScript, Virtual Machines, and the Cloud

Scott Hanselman@shanselmanGoogle for “scott”

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

http://weknowmemes.com/2012/01/no-i-must-dance/

I work here.

I work here.

Remotely, actually.

I work inopen source.

LEGO Death Star stock product photo

Before Microsoft

AfterMicrosoft

The Cloud

The Browser

“I think there is a world market for maybe five computers.” – Thomas J. Watson

“I think there is a world market for maybe five computers.” – Thomas J. Watson

“I think there is a world market for maybe five computers.” – Thomas J. Watson

“I think there is a world market for maybe five computers.” – Thomas J. Watson

Pictures: Wikipedia Commonshttp://en.wikipedia.org/wiki/File:Ibm704.gif

http://en.wikipedia.org/wiki/File:IBM_Electronic_Data_Processing_Machine_-_GPN-2000-001881.jpg

“I think there is a world market for maybe five computers.” – Thomas J. Watson

Pictures: Wikipedia Commonshttp://en.wikipedia.org/wiki/File:Ibm704.gif

http://en.wikipedia.org/wiki/File:IBM_Electronic_Data_Processing_Machine_-_GPN-2000-001881.jpg

Picture courtesyNorwich City Council – Norfolk Record Office

The Cloud

Hardware

Operating System

Memory Manageme

nt

Graphics Subsystem

sStorage

Threading Events Networking

Security

APIs

Cloud

Your Data Center

Virtual MachineOS

Memory Management

Graphics Subsystems Storage

Threading Events Network

Security

APIs

Cloud

Your Data Center

Your Data Center

Cloud Other Service Providers

Running Linux in AzureNeil deGrasse Tyson: Animated GIF memeLow res frame capture used under Fair Usehttp://youtu.be/danYFxGnFxQ#t=1m31

Virtual Machines

Azure Managed

OS Updates

You Manage

OS + Apps

Cloud Apps

Web Sites.NET,node,PHP,

Python

.NET, node, PHP,

Java, Scala, Python, Ruby,

C++,freakin’ Erlang…

Your First House

Azure Managed

OS Updates

You Manage

OS + Apps

Renting a Room

Hotel

.NET, node, PHP,

Java, Scala, Python, Ruby,

C++,freakin’ Erlang…

.NET,node,PHP,

Python

Your First House

Azure Managed

OS Updates

You Manage

OS + Apps

Renting a Room

Hotel

.NET, node, PHP,

Java, Scala, Python, Ruby,

C++,freakin’ Erlang…

.NET,node,PHP,

Python

1SHARED INSTANCES

:-)

shared

2SHARED INSTANCES

:-)

:-)

shared

3SHARED INSTANCES

:-)

:-)

shared

:-)

GIF Loop via Bravo

GIF Loop via SNL

The cloud doesn’t care about languagechoice

Run.NET,

node.js,Java,PHP,

Python,and

whateverelse

Artistic Photo Illustration by Gustaf MantelUsed by permission http://iwdrm.tumblr.com/post/4994505935

ASP.NET MVC,Razor,Web APIand moreALL Open Source

Artistic Photo Illustration by Gustaf MantelUsed by permission http://iwdrm.tumblr.com/post/7579034417

open source http://github.com/windowsazure

The Browser

Hardware

Operating System

Memory Manageme

nt

Graphics Subsystem

sStorage

Threading Events Networking

Security

APIs

Picture: Wikipedia Commonshttp://commons.wikimedia.org/wiki/File:ICL_2966_mainframe.jpg

Picture: Creative Commonshttp://www.flickr.com/photos/nox_noctis_silentium/6315111717/

Picture: Wikipedia Commonshttp://commons.wikimedia.org/wiki/File:ICL_2966_mainframe.jpg

Picture: Creative Commonshttp://www.flickr.com/photos/nox_noctis_silentium/6315111717/

Screenshot of http://www.masswerk.at/googleBBS/

Picture: Wikipedia Commonshttp://commons.wikimedia.org/wiki/File:ICL_2966_mainframe.jpg

Picture: Creative Commonshttp://www.flickr.com/photos/nox_noctis_silentium/6315111717/

Screenshot of http://www.masswerk.at/BingBBS/

Picture: Wikipedia Commonshttp://commons.wikimedia.org/wiki/File:ICL_2966_mainframe.jpg

Picture: Creative Commonshttp://www.flickr.com/photos/nox_noctis_silentium/6315111717/

Web page title

http://www.url.com

Browser

Web page title

http://www.url.com

BrowserLogo: Creative Commons

http://www.flickr.com/photos/silveiraneto/2270445344/

Web page title

http://www.url.com

Browser

Web page title

http://www.url.com

Browser

Flash

Web page title

http://www.url.com

Browser

Operating System

Memory Manageme

nt

Graphics Subsyste

msStorage

Threading Events Networking

Security

APIs

Plugin Virtual Machine

Web page title

http://www.url.com

Browser

Operating System

Memory Managem

ent

Graphics Subsyste

msStorage

I/O Events Networking

Security

APIs

Plugin Virtual Machine

Screenshot of http://www.masswerk.at/googleBBS/

Artistic Photo Illustration by Gustaf MantelUsed with permissionhttp://iwdrm.tumblr.com/post/1439925923

Web page title

http://www.url.com

Browser

Operating System

Memory Manageme

nt

Graphics Subsyste

msStorage

Threading Events Networking

Security

APIs

Virtual Machine

<html>

<body>

</body>

</html>

Web page title

http://www.url.com

Browser

Virtual Machine

<html>

<body>

</body>

</html>

Write Once Debug Anywhere• The Promise of Java has finally arrived!

Web page title

http://www.url.com

Browser

JavaScript

Web page title

http://www.url.com

Browser

JavaScript

Photo by Leon Bambrick, used with PermissionSecretGeek.net

Web page title

http://www.url.com

Browser

JavaScript

Web page title

http://www.url.com

Browser

Virtual Machine

JavaScript

?

Web page title

http://www.url.com

Browser

JavaScript

Web page title

http://www.url.com

Browser

JavaScript

Web page title

http://www.url.com

Browser

JavaScript

Web page title

http://www.url.com

Browser (Hardware Layer)JavaScript (OS)

Memory Management

Garbage Collection

Graphics Subsystems

HTML, CSS, Canvas, Web

GL,Audio, Video

Storage

Cookies, IndexedDb,

File API

Threading

Web Workers

Events

DOM Events,Callbacks

Network

WebSockets,XHR, Offline,

Realtime

Security

Sandbox, SSL,CORS

APIs

GeoLocation,Sensors

Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.

Mobile Browser

JavaScript

Memory Management

Garbage Collection

Graphics Subsystems

HTML, CSS, Canvas, Web

GL,Audio, Video

Storage

Cookies, IndexedDb,

File API

Threading

Web Workers

Events

DOM Events,Callbacks

Networking

WebSockets,XHR, Offline,

Realtime

Security

Sandbox, SSL,CORS

APIs

GeoLocation,Sensors,

The biggest mistake we made as a company was betting too much on HTML5 as opposed to native. It just wasn’t ready.” - Mark Zuckerberg

Picture: Creative Commons http://commons.wikimedia.org/wiki/File:Scoble-Zuckerberg-20080723.jpg

“The avalanche has already started.It is too late for the pebbles to vote.”

“The avalanche has already started.It is too late for the pebbles to vote.”

Kosh - Babylon 5

JavaScript

Memory Management

Garbage Collection

Graphics Subsystems

HTML, CSS, Canvas, Web

GL,Audio, Video

Storage

Cookies, IndexedDb,

File API

Threading

Web Workers

Events

DOM Events,Callbacks

Network

WebSockets,XHR, Offline,

Realtime

Security

Sandbox, SSL,CORS

APIs

GeoLocation,Sensors

by Mark McDonnellhttp://www.integralist.co.uk/used with Permission

Once upon a time, HTML Tables were the most advanced thing there was.

Once upon a time, HTML Tables were the most advanced thing there was.

ROWSPAN!

GIF Loop via ST:TOS

HTML is simpler than ever

<div class="iphone"/>

<HTML/>

is only the structure now.

CSS { .is { color: $andstyle; }}

function JavaScript() { var is = "everything else";}

Photo by Nelson Wellshttp://nelsonwells.net/2011/02/a-visual-comparison-of-the-good-and-bad-parts-of-javascript-2/

1 second Low-Res Animated Frames used under Fair UseNacho Libre cropped shot

"JavaScript is the Assembly Language of the Web"

"JavaScript is the Assembly Language of the Web" - Me

"JavaScript is the Assembly Language of the Web" – Me

and everyone else 'cause it's true.

I said "JS is the x86 of the web" a couple of years ago but I can't claim it's original. - Brendan Eich

Brendan Fraser headshot

I said "JS is the x86 of the web" a couple of years ago but I can't claim it's original. - Brendan Eich

(He kind of invented JavaScript)Brendan Eich

Wikimedia Commons: http://en.wikipedia.org/wiki/File:BEich.jpg

var Greeter = (function () {

function Greeter(greeting) { this.greeting = greeting; }

Greeter.prototype.greet = function () { return "<h1>" + this.greeting + "</h1>"; }; return Greeter;})();

var greeter = new Greeter("Hello, world!");var str = greeter.greet();document.body.innerHTML = str;

class Greeter

constructor: (@greeting) -> @greet -> return "<h1>" + this.greeting + "</h1>"; greeter = new Greeter("Hello, world!");str = greeter.greet()document.body.innerHTML = str

CoffeeScript

var Greeter = (function () {

function Greeter(greeting) { this.greeting = greeting; }

Greeter.prototype.greet = function () { return "<h1>" + this.greeting + "</h1>"; }; return Greeter;})();

var greeter = new Greeter("Hello, world!");var str = greeter.greet();document.body.innerHTML = str;

class Greeter { greeting: string;

constructor(greeting: string) { this.greeting = greeting; }

greet() { return "<h1>"+this.greeting+"</h1>"; }} var greeter = new Greeter("Hello, world!"); var str = greeter.greet(); document.body.innerHTML = str;

TypeScript

Don’t let layers hide too much complexity

Browser (is now a Virtual Machine)

JavaScript (OS)

Memory Management

Garbage Collection

Graphics Subsystems

HTML, CSS, Canvas, Web

GL,Audio, Video

Storage

Cookies, IndexedDb,

File API

Threading

Web Workers

Events

DOM Events,Callbacks

Network

WebSockets,XHR, Offline,

Realtime

Security

Sandbox, SSL,CORS

APIs

GeoLocation,Sensors

“No one writes JavaScript anymore.They write jQuery.”

“No one writes JavaScript anymore.They write jQuery.”

- Jake Weary

“No one writes JavaScript anymore.They write jQuery.”

- Jake Weary

“No one writes JavaScript anymore.They write jQuery.”

- Jake Weary

Photo via Creative Commonshttp://www.flickr.com/photos/pmiaki/7443947216/

Photo via Creative Commonshttp://www.flickr.com/photos/hober/318163517/

SharePoint

Photo via Creative Commonshttp://www.flickr.com/photos/kisocci/3118105042/

Photo by Scott Hanselman at OMSI, Portland, OR 2012Original Sculpture by BrickArtist.com

Consider using theVanillaJSJavaScript Library

expect morefromyourweb tools

Artistic Photo Illustration by Gustaf MantelUsed with Artist Permission http://iwdrm.tumblr.com/post/3181676800

The CloudMassive scale and elasticityYour choice of languages

The BrowserDeceptively powerful. Accelerated graphicsRich style and integrated virtual machine

The CloudYou have unlimited Virtual MachinesYou can write in any language

The BrowserYour user has a powerful Virtual Machine You can write JavaScript (or target it)

The user’s Virtual Machine is part of the cloud also…put it to work.

Your cloud doesn’t need to work so hard.

You are not obsolete. Artistic Photo Illustration by Gustaf MantelUsed with Artist Permission http://iwdrm.tumblr.com/post/3901348750

You are powerful. Artistic Photo Illustration by Gustaf Mantel Used with Artist Permission http://iwdrm.tumblr.com/post/21381673042

You already know the cloud.

You can program the browser.

Get to work!Artistic Photo Illustration by Gustaf MantelUsed with Artist Permission http://iwdrm.tumblr.com/post/8960688061

Be well,write good code,

and stay in touch

@shanselman