FluentConf 2013 Plenary. http://www.youtube.com/watch?v=tZWGb0HU2QM&list=SP055Epbe6d5avZGXwE5u039VQq_oQFgrc&index=9 How do you take a large titan like PayPal and move it from a culture of a long shelf life to a culture of rapid experimentation? You set the UI free by adding liberal doses of NodeJS, JavaScript templating & libraries, JSON, Github and Lean Startup/UX. Bill will explain the transformation that is in process to revolutionize the technical and experience stack at PayPal.

1. clash of the titans
@billwscott on twitter
bill scott. sr. dir. user interface engineering @paypal
fluent plenary. may 30, 2013. san francisco.
releasing the kraken: nodejs @paypal

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

3. the epiphany
engineer for volatility. for change. for learning.

4. however, paypal circa 2011...
not invented here.
risk averse. culture
of long shelf life.

5. In 2011, even a simple
content copy change
could take as much as 6
weeks to get live to site

6. tangled up technology
one of the root problems
technology and processes
not suited for
• rapid experimentation
• build/measure/learn

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

8. paypal vs netflix

9. new dna @paypal
january 2012
fleshed out ui layer that could support rapid
experimentation
march 2012
david Marcus becomes president of PayPal
april 2012
kick off of lean project using nodejs & dustjs

10. hermes project lean ux in action
from whiteboard to code from code to usability
learningsstart again

11. 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
prototype
stack

12. 2nd step: bootstrap with bootstrap
able to create a new branded look in a few hours
enabled sketch to code
node.js
ui bits
prototype
stack

13. 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}
JavaScript
compiles to...
javascript is
evaluated
to render ui

14. 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
prototype
stack
production
stack
{dust}
JS template
client OR
server
either stack

15. before
node &
leanux

16. after node
& leanux

17. 5th step: bring node to production
project kraken
enable all of the standard paypal
services
but do it in a friendly npm way
monitoring, 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

18. java (rhinoscript)
production
stack
{dust}
JS template
6th step: one stack to rule them all
node.js
{dust}
JS template
prototype
stack

19. 6th step: one stack to rule them all
choose where
you want to
run the
templates
kraken
prototype &
production stack
client
server
contains “webcore” for
scaffolding and
providing a lightweight
framework for dev &
production

20. npm.paypal.com
bower.paypal.com
enables building in
standard components
& styles in less than a
minute
provides blessed set
of modules first. can
provide protection
from blacklist modules
modules for easy integration

21. github for CI/CD

22. start like walmart labs
use as an api server to proxy old services
and then retire them
or start like us, trello and others
use as a rapid prototyping stack
prove it out in a sandbox and then scale
do it in parallel and test till scales
do it with talent
ensure best developers are on the initial
work to set the standard
getting node
into your tent
I am hiring!

23. designing web interfaces
O’Reilly
picture credits
http://commons.wikimedia.org/wiki/File:Giant_octopus_attacks_ship.jpg
http://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