<AngleBrackets/> && {Curly Braces}JavaScript, Open Source and the Cloud

Scott HanselmanPrincipal Program Manager3-027

Low-res screenshot via Wikipedia.

LEGO Death Star stock product photo

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

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

Run Linux in Azure(That’s crazy!)Artistic Photo Illustration by Gustaf Mantel

Used by permission http://iwdrm.tumblr.com/post/5339836317

1SHARED INSTANCES

:-)

shared

2SHARED INSTANCES

:-)

:-)

shared

3SHARED INSTANCES

:-)

:-)

shared

:-)

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

open source http://github.com/windowsazure

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

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

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

public class Program { static void Main(string[] args) { DoIt, "test", Console.Out); }

public static void DoIt(TextReader reader, string name, TextWriter output) { string content = reader.ReadLine();

Console.WriteLine("I ran in the cloud!"); Console.WriteLine(content);

output.WriteLine("**" + content + "######"); output.WriteLine(name); }}

“SimpleBatch”

public class Program { static void Main(string[] args) { DoIt, "test", Console.Out); }

public static void DoIt( [BlobInput(@"holding\input\{name}.txt")] TextReader reader, string name, [BlobInput(@"holding\output\{name}.txt")] TextWriter output) { string content = reader.ReadLine();

Console.WriteLine("I ran in the cloud!"); Console.WriteLine(content);

output.WriteLine("**" + content + "######"); output.WriteLine(name); }}

“SimpleBatch”

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>

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

Virtual Machine

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

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!

HTML is simpler than ever

<div class="iphone"/>

<HTML/>

is only the structure now.

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

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

Public Dice.com ad: photo by @marmalade_timhttp://twitter.com/marmalade_tim/status/250634286498193408

1 second Low-Res Animated Frames used under Fair UseSaturday Night Live Season 35 Episode 5

"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.”

- Everyone plus me just now

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

A new operating system ships every day.Reboot? F5.

Artistic Photo Illustration by Gustaf Mantel Used with Artist Permission http://iwdrm.tumblr.com/post/7893198413

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

© 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.