![Page 1: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/1.jpg)
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
![Page 2: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/2.jpg)
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
![Page 3: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/3.jpg)
the epiphanyengineer for volatility. for change. for learning.
![Page 4: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/4.jpg)
however, paypal circa 2011...
not invented here. risk averse. culture
of long shelf life.
![Page 5: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/5.jpg)
In 2011, even a simple content copy change
could take as much as 6 weeks to get live to site
![Page 6: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/6.jpg)
tangled up technologyone of the root problems
technology and processes not suited for • rapid experimentation• build/measure/learn
![Page 7: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/7.jpg)
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
![Page 8: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/8.jpg)
paypal vs netflix
![Page 9: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/9.jpg)
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
![Page 10: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/10.jpg)
hermes project lean ux in action
from whiteboard to code from code to usabilitylearningsstart again
![Page 11: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/11.jpg)
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
![Page 12: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/12.jpg)
2nd step: bootstrap with bootstrap
able to create a new branded look in a few hours
enabled sketch to codenode.js
ui bits
prototypestack
![Page 13: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/13.jpg)
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
![Page 14: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/14.jpg)
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
![Page 15: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/15.jpg)
before node &leanux
![Page 16: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/16.jpg)
after node & leanux
![Page 17: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/17.jpg)
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
![Page 18: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/18.jpg)
java (rhinoscript)
productionstack
{dust}JS template
6th step: one stack to rule them all
node.js
{dust}JS template
prototypestack
![Page 19: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/19.jpg)
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
![Page 20: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/20.jpg)
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
![Page 21: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/21.jpg)
github for CI/CD
![Page 22: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/22.jpg)
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!
![Page 23: Clash of the Titans: Releasing the Kraken | NodeJS @paypal](https://reader034.vdocuments.us/reader034/viewer/2022051108/5440e3a5afaf9f62208b4587/html5/thumbnails/23.jpg)
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