clash of the titans

@billwscott on twitterbill scott. sr. dir. user interface engineering @paypal

fluent plenary. may 30, 2013. san francisco.

releasing the kraken: nodejs @paypal

16 different test cells in the initial PS3 Launch (2010)

focus is on build/measure/learn

four distinct PS3 experiences launched on same day

typical netflix release

the epiphanyengineer for volatility. for change. for learning.

however, paypal circa 2011...

not invented here. risk averse. culture

of long shelf life.

In 2011, even a simple content copy change

could take as much as 6 weeks to get live to site

tangled up technologyone of the root problems

technology and processes not suited for • rapid experimentation• build/measure/learn

existing stack wasn’t designed for experimentation

this new stack was not conducive to prototyping

followed an “enterprise application” model. ui gets built into the “server app”

ajax/components all done server-side (subclass java controller)!

java(components)

jsp

proprietary uiprototyping was hard

“ui bits” mostly lived here

paypal vs netflix

new dna @paypaljanuary 2012fleshed out ui layer that could support rapid experimentation

march 2012david Marcus becomes president of PayPal

april 2012kick off of lean project using nodejs & dustjs

hermes project lean ux in action

from whiteboard to code from code to usabilitylearningsstart again

1st step: fire up a prototype stack (nodejs)

utilize opens source stack

express, connect, require.js

bring in javascript templating and other open source ui goodness

node.js

ui bits

prototypestack

2nd step: bootstrap with bootstrap

able to create a new branded look in a few hours

enabled sketch to codenode.js

ui bits

prototypestack

3rd step: use javascript templating

text templates get compiled to javascript<p>Hello {name}</p>

dustjs templates execute wherever there is javascript

templates = JS{dust}

JavaScriptcompiles to...

javascript isevaluatedto render ui

4th step: make ui bits portable to legacy

JS templating can be run in client browser or server on the production stack

we can drag & drop the ui bits from prototyping stack to the production stack

rhinoscript enabled stack parity

java (rhinoscript)node.js

{dust}JS template

prototypestack

productionstack

{dust}JS template

client ORserver

either stack

before node &leanux

after node & leanux

5th step: bring node to productionproject kraken

enable all of the standard paypal services

but do it in a friendly npm waymonitoring, logging, security, content, locale resolution, analytics,authentication, dust rendering,experimentation, packaging, application framework, deployment,session management, service access, etc.

CLI MVC framework/scaffolding. hello world in 1 minute

java (rhinoscript)

productionstack

{dust}JS template

6th step: one stack to rule them all

node.js

{dust}JS template

prototypestack

6th step: one stack to rule them all

choose where you want to run the templates

kraken

prototype & production stack

clientserver

contains “webcore” for scaffolding and providing a lightweight framework for dev & production

npm.paypal.com

bower.paypal.com

enables building in standard components & styles in less than a

minuteprovides blessed set of modules first. can provide protection

from blacklist modules

modules for easy integration

github for CI/CD

start like walmart labsuse as an api server to proxy old services and then retire them

or start like us, trello and othersuse as a rapid prototyping stackprove it out in a sandbox and then scaledo it in parallel and test till scales

do it with talentensure best developers are on the initial work to set the standard

getting node into your tent

I am hiring!

designing web interfacesO’Reilly

picture creditshttp://commons.wikimedia.org/wiki/File:Giant_octopus_attacks_ship.jpghttp://www.flickr.com/photos/therevsteve/3104267109/sizes/o/http://www.flickr.com/photos/nicasaurusrex/3069602246/http://www.flickr.com/photos/hongiiv/4151964823/http://www.flickr.com/photos/untitlism/2603959306/http://www.flickr.com/photos/stuckincustoms/2380543038/

follow me on twitter @billwscott