is a cool programming language! – Functional – Weakly and dynamically typed – Function scope and closure – Has a >99% desktop install base (no kidding!) • JS is not a real programming language! – No compilation units, modules and namespaces – No classes or object-orientation built-in – No standard library (no kidding!) – Incoherent implementation standard
implementation written with JS functions. 1. we build an iterator function called each which is found in most JS frameworks 2. we implement map and reduce using each 3. we implement a test function that maps pow2 function (x*x) to each element in a list, and then reduces it via addition. Equivalent to the following Python: sum(x*x for x in items)
some quirks. Three declaration forms: • function statements • anonymous function expressions • named function expressions (exotic) The keyword this is used for functional calling context, controlled by fn.apply()
as expressions, they can be used almost anywhere in your program. Common locations • Nested within other functions • As values in object literals • As arguments to other functions Closure allows functions to access the values of variables outside the scope of the function definition, even after that variable has gone out of scope.
pusher = function(item) { stack.push(item); }; var popper = function() { return stack.pop(); }; var peeker = function() { return stack[stack.length-1]; } var obj = { "push": pusher, "pop": popper, "peek": peeker }; return obj; // upon return, stack not in scope } Each is an example of closure
global by default. 2. The keyword this is bound to “the global object” by default, which in browsers is usually window. 3. Since functions meant to be used with the new keyword can be called without the new keyword, functions that rely on new/this for OO programming are often accidentally misused. 4. Since this changes based on calling context AND “normal” fn() invocation does not alter calling context, this is a regular source of bugs.
for your application, which acts as a namespace – Be highly COGNIZANT OF this, and DOCUMENT when you rely on it – Name all functions meant to be used with new with CamelCase, e.g. Stack – Use the MODULE PATTERN and CLOSURE to organize your code – Follow OO patterns and use a FRAMEWORK – Use jslint to check our source code
namespace // private module data var VERSION = “1.2”; // public module classes, functions, and variables var m = {}; m.DateParser = function() { this.parse = function() {}; }; m.parse_date = function(s) { var dp = new m.DateParser(); return dp.parse(s); }; return m; }(); // invoke function to hide private data
every day for real programming with JS: – jQuery: CSS-style DOM selector, animations, event binding, HTTP requests – Sometimes, ExtJS: Observable, ISO8601 DateTime, OO, XTemplate, Store, DomHelper, JSON, Forms, TaskRunner, and a slew of extensible UI components – Underscore.js: functional primitives – DateJS: extended date parsing and manipulation – BlackbirdJS: cross-browser client-side logging – Bootstrap (new!): standard UI components for HTML5
front to back, baby. • The rise of Rich Internet Applications (RIAs) has led to a smaller role for servers anyway. • Re-use between client/server (e.g. form validation logic, utilities, object models) may de-duplicate code • Single syntax may reduce programmer context switching
Tied to a commercial vendor – JavaScript was not even adopted yet • Rhino – Open source – No community (identity crisis) – Poor performance – JavaScript was not cool yet
in its core, it got something very right. • JavaScript was the world's most misunderstood programming language. • Its obvious defects, its unfashionable programming model, intentional mispositioning at its introduction, and its ridiculous name caused it to be rejected as unworthy by most knowledgeable programmers. But Ajax gave JavaScript a second chance.
language of the web browser, and because the web browser has become the dominant application delivery system, and because JavaScript isn't too bad, JavaScript has become the World's Most Popular Programming Language. Its popularity is growing. It is now being embedded in other applications and contexts. JavaScript has become important. • It is better to be lucky than smart.” – Douglas Crockford
implemented by npm modules, but no unified “web stack” yet • Rhino/Spidermonkey – Node.JS is one layer up from these (think Python/Ruby standard library, not the interpreter itself). – But… Node.JS uses a different interpreter, too.
An asynchronous server library (epoll) – Twisted – Tornado – EventMachine • Because programmable async servers were the reason Node.JS was written, its standard library has an async bent.
want it to become as powerful as Django/Rails for web app development – express module is starting to provide routing and controllers – mongodb and redis are popular data stores for Node – Template languages are ported every day
the backend with JSON-based, async write/read data stores • Simplify the middle tier with clientside / serverside code sharing. • Simplify the frontend, with server-backed data bindings • Simplify deployment, since Node.JS runs directly in production.
might call the Hollywood Principle • “Don’t call us, we’ll call you” • Node.JS achieves this through a heavy use of callbacks and errbacks • Luckily, we now know Functional JS!
your code. • Let’s say you register two callbacks in Express. – Node.JS registers those callbacks, and goes to sleep. – Request comes in, dispatches it to callback – meanwhile, any other requests wait in line. – As long as your callback doesn’t block, performance is guaranteed.
a Node.JS sweet spot right now. • Real-time Analytics – Low latency, high concurrency HTTP/UDP – JSON is a natural fit for data exchange – Client-side “pixel” can be synced w/ server- side pixel parser – Websockets natural fit for viewing live data – MongoDB a natural fit for data store • We’ll look at three examples.
we call “dynamic JavaScript configuration” • Client-side JavaScript code makes a JSON-P call to a “config server”, which returns JavaScript configuration settings • Allows us to load custom JS for individual publishers, or even individuals • Run A/B tests, do sampling, etc. • It’s perfect for this (esp. with Redis)
built with Node • Borrows from jQuery for selectors • Best possible DOM comprehension possible with JavaScript – No more “real world HTML” and “valid XHTML” mismatch problems • Evented system fits nicely. I use Scrapy in the Python world for this now.
old and weary functional JavaScript and its ambitious younger brother, Node.JS. • To follow me: – @amontalenti – gplus.to/amontalenti – linkedin.com/in/andrewmontalenti – andrew@parsely.com – http://pixelmonkey.org
Andrew Montalenti
amontalenti
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
![The mapper function map(fn, items) { var results = [];](https://files.speakerdeck.com/presentations/508dafa0213ae0000205c861/slide_6.jpg){kind=link}
![Common Function Locations function nested_argument() { var arr = [];](https://files.speakerdeck.com/presentations/508dafa0213ae0000205c861/slide_14.jpg){kind=link}
![Closure Stack function stack() { var stack = []; var](https://files.speakerdeck.com/presentations/508dafa0213ae0000205c861/slide_16.jpg){kind=link}
![Classic Stack function Stack() { var stack = []; this.push](https://files.speakerdeck.com/presentations/508dafa0213ae0000205c861/slide_21.jpg){kind=link}
