The rise of server-side JavaScript

Slide 1

Slide 1 text

The rise of server-side JavaScript The beginnings, the present and where we’re going Sunday, June 10, 12

Slide 2

Slide 2 text

Guillermo Rauch Sunday, June 10, 12

Slide 3

Slide 3 text

@rauchg Sunday, June 10, 12

Slide 4

Slide 4 text

devthought.com Sunday, June 10, 12

Slide 5

Slide 5 text

learnboost.com Sunday, June 10, 12

Slide 6

Slide 6 text

Started career in open-source Sunday, June 10, 12

Slide 7

Slide 7 text

Contributions to MooTools cs framework Sunday, June 10, 12

Slide 8

Slide 8 text

Took special interest in XHR and COMET Sunday, June 10, 12

Slide 9

Slide 9 text

PHP remained my backend language Sunday, June 10, 12

Slide 10

Slide 10 text

#facepalm Sunday, June 10, 12

Slide 11

Slide 11 text

Early interest in Rhino and v8cgi Sunday, June 10, 12

Slide 12

Slide 12 text

Early adopter of Spidermonkey-based APE Sunday, June 10, 12

Slide 13

Slide 13 text

Jumped to Node.JS Sunday, June 10, 12

Slide 14

Slide 14 text

Creator of socket.io realtime framework Sunday, June 10, 12

Slide 15

Slide 15 text

MongoDB monk and mongoose ORM Sunday, June 10, 12

Slide 16

Slide 16 text

distribute, up, browserbuild, juice & others Sunday, June 10, 12

Slide 17

Slide 17 text

Author of Smashing Node Sunday, June 10, 12

Slide 18

Slide 18 text

This marks the 20 slides about me milestone Sunday, June 10, 12

Slide 19

Slide 19 text

Sunday, June 10, 12

Slide 20

Slide 20 text

LearnBoost one of the ﬁrst 100% node webapps Sunday, June 10, 12

Slide 21

Slide 21 text

Creators of the Stylus CSS language Sunday, June 10, 12

Slide 22

Slide 22 text

Knox S3 client, tobi testing framework, cluster util Sunday, June 10, 12

Slide 23

Slide 23 text

How did JavaScript get there? Sunday, June 10, 12

Slide 24

Slide 24 text

Surprisingly, it all started in December, 1994 Sunday, June 10, 12

Slide 25

Slide 25 text

Attempt #1: Netscape Enterprise Server Sunday, June 10, 12

Slide 26

Slide 26 text

Introduced shortly after its arrival to the browser Sunday, June 10, 12

Slide 27

Slide 27 text

Fascinating tidbits from the press release in 1996: Sunday, June 10, 12

Slide 28

Slide 28 text

“Netscape Enterprise Server is the ﬁrst Web server to support the Java and JavaScript programming languages, enabling the creation, delivery and management of live online applications” Sunday, June 10, 12

Slide 29

Slide 29 text

“Netscape Enterprise Server […] supports JavaScript, which enables users to build applications that run on either the client or server anywhere on the network” Sunday, June 10, 12

Slide 30

Slide 30 text

16 years ago today. Sunday, June 10, 12

Slide 31

Slide 31 text

Sunday, June 10, 12

Slide 32

Slide 32 text

Mad props at the Netscape PR team Sunday, June 10, 12

Slide 33

Slide 33 text

Hint: the potential for SSJS was there all along Sunday, June 10, 12

Slide 34

Slide 34 text

JavaScript was only used at the template layer Sunday, June 10, 12

Slide 35

Slide 35 text

Eventually discontinued in favor of JSP Sunday, June 10, 12

Slide 36

Slide 36 text

What did it look like? Sunday, June 10, 12

Slide 37

Slide 37 text

Hello World

Your IP address is write(request.ip); Sunday, June 10, 12

Slide 38

Slide 38 text

Very similar to PHP: request = $_POST + $_SERVER client = $_SESSION server = $_SERVER Sunday, June 10, 12

Slide 39

Slide 39 text

It shipped with an integrated “SS Web Inspector” Sunday, June 10, 12

Slide 40

Slide 40 text

Sunday, June 10, 12

Slide 41

Slide 41 text

Sunday, June 10, 12

Slide 42

Slide 42 text

Sunday, June 10, 12

Slide 43

Slide 43 text

Unlike enterprise webapp solutions to follow, NES was very lightweight Sunday, June 10, 12

Slide 44

Slide 44 text

Directory structure was simple Sunday, June 10, 12

Slide 45

Slide 45 text

hangman.html hangman.js youwon.html youlost.html thanks.html images/ rules.html Sunday, June 10, 12

Slide 46

Slide 46 text

hangman.html hangman.js youwon.html youlost.html thanks.html images/ rules.html Sunday, June 10, 12

Slide 47

Slide 47 text

Not source/org/netscape/www/app/main/app.js Sunday, June 10, 12

Slide 48

Slide 48 text

Compilation process was very straightforward Sunday, June 10, 12

Slide 49

Slide 49 text

jsac -v -o hangman.web hangman.html hangman.js Sunday, June 10, 12

Slide 50

Slide 50 text

Meanwhile, at the Legion of Doom Microsoft HQ Sunday, June 10, 12

Slide 51

Slide 51 text

In 1996, IIS 3.0 introduces JScript support Sunday, June 10, 12

Slide 52

Slide 52 text

In 1998, Netscape announces the Rhino Java JS VM Sunday, June 10, 12

Slide 53

Slide 53 text

Sunday, June 10, 12

Slide 54

Slide 54 text

Sunday, June 10, 12

Slide 55

Slide 55 text

Netscape was working on its so-called Javagator Sunday, June 10, 12

Slide 56

Slide 56 text

A browser written entirely in Java Sunday, June 10, 12

Slide 57

Slide 57 text

Sunday, June 10, 12

Slide 58

Slide 58 text

Javagator was canceled, and Rhino became standalone Sunday, June 10, 12

Slide 59

Slide 59 text

It thus became the ﬁrst open-source JavaScript VM Sunday, June 10, 12

Slide 60

Slide 60 text

Hackers could now start new SSJS implementations Sunday, June 10, 12

Slide 61

Slide 61 text

At the same time, PHP3 is released Sunday, June 10, 12

Slide 62

Slide 62 text

It becomes the defacto scripting language for the web Sunday, June 10, 12

Slide 63

Slide 63 text

Most notable Rhino-based effort is Helma, in 2005 Sunday, June 10, 12

Slide 64

Slide 64 text

That same year, PHP5 is announced with OOP support Sunday, June 10, 12

Slide 65

Slide 65 text

What many see as the start of a middle-age crisis Sunday, June 10, 12

Slide 66

Slide 66 text

In 2007, AppJet starts a Rhino-based SSJS app cloud Sunday, June 10, 12

Slide 67

Slide 67 text

The most important predecessor to Node.JS Sunday, June 10, 12

Slide 68

Slide 68 text

With AppJet, an application called etherpad is written Sunday, June 10, 12

Slide 69

Slide 69 text

Sunday, June 10, 12

Slide 70

Slide 70 text

Sunday, June 10, 12

Slide 71

Slide 71 text

Sunday, June 10, 12

Slide 72

Slide 72 text

Sunday, June 10, 12

Slide 73

Slide 73 text

etherpad does two things differently Sunday, June 10, 12

Slide 74

Slide 74 text

1. It’s a realtime web application based on long-polling Sunday, June 10, 12

Slide 75

Slide 75 text

Unlike every other implementation since NES… Sunday, June 10, 12

Slide 76

Slide 76 text

JS is no longer a PHP-style response handler Sunday, June 10, 12

Slide 77

Slide 77 text

2. etherpad truly beneﬁts from a single language Sunday, June 10, 12

Slide 78

Slide 78 text

Let’s go on a tangent Sunday, June 10, 12

Slide 79

Slide 79 text

Realtime collaboration is all about state syncing Sunday, June 10, 12

Slide 80

Slide 80 text

The algorithm that merges changes is called OT Sunday, June 10, 12

Slide 81

Slide 81 text

Sunday, June 10, 12

Slide 82

Slide 82 text

Sunday, June 10, 12

Slide 83

Slide 83 text

Sunday, June 10, 12

Slide 84

Slide 84 text

My name is John Sunday, June 10, 12

Slide 85

Slide 85 text

My name is John My name is John User A User B Sunday, June 10, 12

Slide 86

Slide 86 text

My name is John My name is John User A User B #1 #1 Sunday, June 10, 12

Slide 87

Slide 87 text

My name is John My name is John User A User B #1 #1 concurrently Sunday, June 10, 12

Slide 88

Slide 88 text

My name is John My name is John User A User B #1 #1 concurrently My name is John Hello Sunday, June 10, 12

Slide 89

Slide 89 text

My name is John My name is John User A User B #1 #1 concurrently My name is John Hello My name is John Doe Sunday, June 10, 12

Slide 90

Slide 90 text

My name is John My name is John User A User B #1 #1 concurrently My name is John Hello My name is John Doe 1. Go to position 0 and remove 10 characters Sunday, June 10, 12

Slide 91

Slide 91 text

My name is John My name is John User A User B #1 #1 concurrently My name is John Hello My name is John Doe 1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 Sunday, June 10, 12

Slide 92

Slide 92 text

My name is John My name is John User A User B #1 #1 concurrently My name is John Doe { “rev”: 1, “ops“: [ { “type“: “delete”, “pos”: 0, “length”: 10 } , { “type“: “add”, “pos”: 0, “text”: “Hello” } ]} Sunday, June 10, 12

Slide 93

Slide 93 text

My name is John My name is John User A User B #1 #1 concurrently { “rev”: 1, “ops“: [ { “type“: “delete”, “pos”: 0, “length”: 10 } , { “type“: “add”, “pos”: 0, “text”: “Hello” } ]} { “rev”: 1, “ops“: [ { “type“: “add”, “text”: “ Doe”, “pos”: 15 } ]} Sunday, June 10, 12

Slide 94

Slide 94 text

#3 John Hello Doe Sunday, June 10, 12

Slide 95

Slide 95 text

1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 3. Add “ Doe” at position 15 Sunday, June 10, 12

Slide 96

Slide 96 text

1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 1. Add “ Doe” at position 15 || Sunday, June 10, 12

Slide 97

Slide 97 text

1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 3. Add “ Doe” at position 10 Sunday, June 10, 12

Slide 98

Slide 98 text

1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 3. Add “ Doe” at position (15 - 10 + 5) Sunday, June 10, 12

Slide 99

Slide 99 text

1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 3. Add “ Doe” at position (15 - 10 + 5) 1 Sunday, June 10, 12

Slide 100

Slide 100 text

1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 3. Add “ Doe” at position (15 - 10 + 5) 2 Sunday, June 10, 12

Slide 101

Slide 101 text

1. Go to position 0 and remove 10 characters 2. Add “Hello” at position 0 3. Add “ Doe” at position 10 Sunday, June 10, 12

Slide 102

Slide 102 text

Operational Transformations are executed both on the server and the client Sunday, June 10, 12

Slide 103

Slide 103 text

The server keeps its own representation of the document Sunday, June 10, 12

Slide 104

Slide 104 text

And only relays operations to clients as JSON Sunday, June 10, 12

Slide 105

Slide 105 text

JavaScript allows you write the rules once Sunday, June 10, 12

Slide 106

Slide 106 text

In 2009, several projects set out to solve similar problems Sunday, June 10, 12

Slide 107

Slide 107 text

Spidermonkey-based APE tries to make COMET easy Sunday, June 10, 12

Slide 108

Slide 108 text

In the same spirit as AppJet, 10gen releases corejs Sunday, June 10, 12

Slide 109

Slide 109 text

Load balancer + web server + scripting + database Sunday, June 10, 12

Slide 110

Slide 110 text

Load balancer + web server + scripting + database Sunday, June 10, 12

Slide 111

Slide 111 text

Load balancer + web server + scripting + database MongoDB Sunday, June 10, 12

Slide 112

Slide 112 text

MongoDB implements JSON BSON Sunday, June 10, 12

Slide 113

Slide 113 text

280north announces Narwhal, another SSJS platform Sunday, June 10, 12

Slide 114

Slide 114 text

CommonJS emerges to attempt to standardize SSJS Sunday, June 10, 12

Slide 115

Slide 115 text

But at the end of the year, Ryan Dahl comes along Sunday, June 10, 12

Slide 116

Slide 116 text

Node.JS is introduced at JSConf Berlin Sunday, June 10, 12

Slide 117

Slide 117 text

It takes a fresh approach Sunday, June 10, 12

Slide 118

Slide 118 text

#1 it offers low-level abstractions Sunday, June 10, 12

Slide 119

Slide 119 text

“Hello World” = require(‘http’).createServer Sunday, June 10, 12

Slide 120

Slide 120 text

“Hello World” = require(‘http’).createServer Sunday, June 10, 12

Slide 121

Slide 121 text

“Hello World” = require(‘http’).createServer ~CommonJS Sunday, June 10, 12

Slide 122

Slide 122 text

Sunday, June 10, 12

Slide 123

Slide 123 text

#2 non-blocking IO + V8 = focus on performance Sunday, June 10, 12

Slide 124

Slide 124 text

#3 it has a small core Sunday, June 10, 12

Slide 125

Slide 125 text

#4 it has a great package manager, NPM Sunday, June 10, 12

Slide 126

Slide 126 text

In early 2010 I release socket.io, a ﬂagship module Sunday, June 10, 12

Slide 127

Slide 127 text

Node eventually surpasses Rails in numbers of followers on GH, then the most watched project Sunday, June 10, 12

Slide 128

Slide 128 text

Today there’s over 10,000 NPM projects Sunday, June 10, 12

Slide 129

Slide 129 text

And it has several major production deployments Sunday, June 10, 12

Slide 130

Slide 130 text

The strengths Sunday, June 10, 12

Slide 131

Slide 131 text

Realtime web Sunday, June 10, 12

Slide 132

Slide 132 text

We live in a JSON world Sunday, June 10, 12

Slide 133

Slide 133 text

Therefore, ideal for web services implementation and consumption Sunday, June 10, 12

Slide 134

Slide 134 text

No mind context-switches between multiple languages Sunday, June 10, 12

Slide 135

Slide 135 text

The weaknesses Sunday, June 10, 12

Slide 136

Slide 136 text

Callbacks make code harder to read and debug Sunday, June 10, 12

Slide 137

Slide 137 text

Some people use CoffeeScript Sunday, June 10, 12

Slide 138

Slide 138 text

Some people use CoffeeScript Just kidding Sunday, June 10, 12

Slide 139

Slide 139 text

Flexibility, leanness and abundance of choice can make the task of choosing the best modules hard Sunday, June 10, 12

Slide 140

Slide 140 text

Where we’re going Sunday, June 10, 12

Slide 141

Slide 141 text

New NPM website will be like the “App store” of Node Sunday, June 10, 12

Slide 142

Slide 142 text

Reviews and metrics will help people ﬁnd the right modules for each task Sunday, June 10, 12

Slide 143

Slide 143 text

Rails-like monolithic frameworks are re-emerging Sunday, June 10, 12

Slide 144

Slide 144 text

Some are bringing coroutines back (node-ﬁbers) Sunday, June 10, 12

Slide 145

Slide 145 text

Others introduce “transpilers” that add new operators to make async code more readable (IcedCoffeeScript) Sunday, June 10, 12

Slide 146

Slide 146 text

JavaScript as a language continues to evolve Sunday, June 10, 12

Slide 147

Slide 147 text

JavaScript as a language continues to evolve bloat? Sunday, June 10, 12

Slide 148

Slide 148 text

Google’s Dart tries to start over with a clean slate Sunday, June 10, 12

Slide 149

Slide 149 text

Node clones continue to appear in other languages: Lua, C++11, Java, Haskell, PHP (!) Sunday, June 10, 12

Slide 150

Slide 150 text

Node clones continue to appear in other languages: Lua, C++11, Java, Haskell, PHP (!) Sunday, June 10, 12

Slide 151

Slide 151 text

Questions? Sunday, June 10, 12