bill scott (@billwscott) sr. director, user interface engineering, paypal. o’reilly fluent...
TRANSCRIPT
![Page 1: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/1.jpg)
bill scott (@billwscott)sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013bill scott (@billwscott)sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013
kicking up the dust with nodejs refactoring paypal’s tech stack to enable lean ux
![Page 2: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/2.jpg)
at Netflix 90% or more of the “ui bits” were thrown away every year.doesn’t take too many tests to result in lots of throw away code.
followed buid/test/learn
![Page 3: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/3.jpg)
the epiphanythe epiphanydesign for volatilitydesign for volatility
![Page 4: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/4.jpg)
paypal vs netflixpaypal vs netflix
![Page 5: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/5.jpg)
paypal circa 2011paypal circa 2011
roll your own. disconnected
delivery experience. culture of long shelf
life. inward focus. risk averse.
roll your own. disconnected
delivery experience. culture of long shelf
life. inward focus. risk averse.
![Page 6: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/6.jpg)
tangled up technologytangled up technology
big problem. technology and processes not geared to build/test/learn.
big problem. technology and processes not geared to build/test/learn.
![Page 7: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/7.jpg)
new dna @paypalnew dna @paypal
jan 2012fleshed out ui layer that could support rapid experimentation
march 2012david Marcus becomes president of PayPal
april 2012formed lean ux team to reinvent checkout experience
jan 2012fleshed out ui layer that could support rapid experimentation
march 2012david Marcus becomes president of PayPal
april 2012formed lean ux team to reinvent checkout experience
![Page 8: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/8.jpg)
in the midst of transformationin the midst of transformation
![Page 9: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/9.jpg)
a tale of two stacks (c++ & java)a tale of two stacks (c++ & java)
two non-standard stacks
new stack tied to Java
“one word” change could take 6 weeks to fix on c++ stack
two non-standard stacks
new stack tied to Java
“one word” change could take 6 weeks to fix on c++ stack
c++c++ javajava
xmlxml jspjsp
proprietarproprietary uiy ui
proprietarproprietary uiy ui
oldold newnew’’ishish
long long release release cyclescycles
![Page 10: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/10.jpg)
decision was to move to javadecision was to move to java
migration was already in place to leave the c++/xml stack behind
some odd choices preceded this: write everything in java (html, css & js!!)
migration was already in place to leave the c++/xml stack behind
some odd choices preceded this: write everything in java (html, css & js!!)
c++c++ javajava
xmlxml jspjsp
proprietarproprietary uiy ui
proprietarproprietary uiy ui
Xoldold newnew’’ishish
![Page 11: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/11.jpg)
but we wanted to support lean uxbut we wanted to support lean ux
whiteboardto code code to usability
product/design team
user interfaceengineers
usability/customers
enabling a living spec
engineering stack requirements treat prototype & production the same
allow rapid sketch to code life cycleallow quick changes during usability studies (RITE)support being the “living spec”
engineering stack requirements treat prototype & production the same
allow rapid sketch to code life cycleallow quick changes during usability studies (RITE)support being the “living spec”
![Page 12: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/12.jpg)
lean uxlean uxdesigning products for build/measure/learn (lean startup)
requires 3 rules to be followed at all times
get to & maintain a shared understanding
form deep collaboration across disciplines
keep continuous customer feedback flowing
designing products for build/measure/learn (lean startup)
requires 3 rules to be followed at all times
get to & maintain a shared understanding
form deep collaboration across disciplines
keep continuous customer feedback flowing
![Page 13: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/13.jpg)
free to iterate and drive agilefree to iterate and drive agile
user interface engineering - agile scrum teamuser interface engineering - agile scrum team
lean ux - lean team tracklean ux - lean team track
engineering - agile scrum teamengineering - agile scrum teamsprint 0sprint 0
usabilityusability usabilityusability usabilityusability usabilityusability usabilityusability
releaserelease releaserelease releaserelease releaserelease
{{agileagile
FOCUS ON LEARNINGFOCUS ON LEARNING
FOCUS ON DELIVERING (& LEARNING)FOCUS ON DELIVERING (& LEARNING)
![Page 14: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/14.jpg)
leanengineering
engineering for learning
![Page 15: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/15.jpg)
old stack not designed for learningold stack not designed for learning
this new stack was not conducive to prototyping
followed an “enterprise application” model. ui gets built into the “app”
ajax/components all done server-side (subclass java controller)
this new stack was not conducive to prototyping
followed an “enterprise application” model. ui gets built into the “app”
ajax/components all done server-side (subclass java controller)
javajava
jspjsp
proprietarproprietary uiy ui
prototyping
was hard
“ui bits” could only
live here
![Page 16: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/16.jpg)
step 1set the ui bits freestep 1set the ui bits free
![Page 17: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/17.jpg)
separate the ui bitsseparate the ui bits
code = JScode = JS(backbone)(backbone)
templates = JStemplates = JS{dust}{dust}
style = CSSstyle = CSS(less)(less) imagesimages
re-engineered the user interface stack so that the only artifacts are:• javascript
• css
• images
re-engineered the user interface stack so that the only artifacts are:• javascript
• css
• images
ditched the server-side mentality to creating UIs• no more server-side only templates
• no more server-side components
• no more server-side managing the ui
ditched the server-side mentality to creating UIs• no more server-side only templates
• no more server-side components
• no more server-side managing the ui
![Page 18: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/18.jpg)
use javascript templatinguse javascript templating
templates get converted to javascript
<p>Hello {name}</p>
we use dust.js
templates get converted to javascript
<p>Hello {name}</p>
we use dust.js
code = JScode = JS(backbone)(backbone)
templates = JStemplates = JS{dust}{dust}
style = CSSstyle = CSS(less)(less) imagesimages
JavaScriptJavaScriptcompiles to...
javascript executedto generate ui
![Page 19: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/19.jpg)
ui bits now just natural web artifactsui bits now just natural web artifacts
server-side language independent
server/client agnostic
CDN ready
cacheable
rapid to create
server-side language independent
server/client agnostic
CDN ready
cacheable
rapid to create
code = JScode = JS(backbone)(backbone)
templates = JStemplates = JS{dust}{dust}
style = CSSstyle = CSS(less)(less) imagesimages
![Page 20: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/20.jpg)
portable in all directionsportable in all directions
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
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
java java (rhinoscript(rhinoscript
))node.jsnode.js
{dust}{dust}JS templateJS template
prototypeprototypestackstack
productionproductionstackstack
{dust}{dust}JS templateJS template
client OR
server
either stack
![Page 21: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/21.jpg)
started using nodejs for proto stackstarted using nodejs for proto stack
whiteboardto code
code to usability
product/design team
user interfaceengineers
usability/customers
enabled rapid development (coupled with dustjs)
node.js (set up as prototype stack)node.js (set up as prototype stack)
backbonebackbone{dust}{dust} lessless imagesimages
![Page 22: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/22.jpg)
free to turn sketch to codefree to turn sketch to codeforcing function. brought about a close collaboration between
engineering and designcreated a bridge for shared understanding
required a lot of confidence and transparency
forcing function. brought about a close collaboration between
engineering and designcreated a bridge for shared understanding
required a lot of confidence and transparency
![Page 23: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/23.jpg)
free to test frequently with usersfree to test frequently with users
![Page 24: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/24.jpg)
step 2embrace open sourcestep 2embrace open source
![Page 25: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/25.jpg)
use open source religiouslyuse open source religiously
![Page 26: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/26.jpg)
work in open source modelwork in open source modelinternal github revolutionized our internal development
rapidly replaced centralized platform teams
innovation democratized
every developer encouraged to experiment and generate repos to share as well as to fork/pull request
internal github revolutionized our internal development
rapidly replaced centralized platform teams
innovation democratized
every developer encouraged to experiment and generate repos to share as well as to fork/pull request
![Page 27: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/27.jpg)
give back to open sourcegive back to open sourcewe have a string of projects that will be open sourcednode bootstrap (similar to yeoman)contributions to bootstrap (for accessibility)and more...
we have a string of projects that will be open sourcednode bootstrap (similar to yeoman)contributions to bootstrap (for accessibility)and more...
![Page 28: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/28.jpg)
step 3release the krakenstep 3release the kraken
![Page 29: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/29.jpg)
project krakenready nodejs for productionproject krakenready nodejs for production
enable all of standard paypal services
but do it in a friendly npm waymonitoring, logging, security,
content, local resolution, analytics,authentication, dust rendering,experimentation, packaging, application framework, deployment,session management, service access, etc.
mvc framework/scaffolding. hello world in 1 minute.
enable all of standard paypal services
but do it in a friendly npm waymonitoring, logging, security,
content, local resolution, analytics,authentication, dust rendering,experimentation, packaging, application framework, deployment,session management, service access, etc.
mvc framework/scaffolding. hello world in 1 minute.
![Page 30: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/30.jpg)
one stack to rule them allone stack to rule them all
single stack creates seamless movement between lean ux and agile
blended team
app is the ui
single stack creates seamless movement between lean ux and agile
blended team
app is the ui
node.jsnode.js
{dust}{dust}JS templateJS template
prototypeprototype&&
productionproductionstackstack
client
server
![Page 31: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/31.jpg)
introducing nodejs into your orgintroducing nodejs into your orgget the camel’s nose under the tent - start as an API proxy (shim) to really old services- use as a rapid prototyping stack
move into the tent- find a good proof of concept API or application to
begin to 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
get the camel’s nose under the tent - start as an API proxy (shim) to really old services- use as a rapid prototyping stack
move into the tent- find a good proof of concept API or application to
begin to 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
![Page 32: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/32.jpg)
a few other key itemsa few other key itemsgithub democratizes coding & decentralizes teams
bower provides a clean way to componentize the ui
requirejs makes packaging simple and enforces modules
running internal npm service drives modularization
having a CLI for creating/extending apps is empowering
less cleans up css code
backbone provides standard client event modeling
github democratizes coding & decentralizes teams
bower provides a clean way to componentize the ui
requirejs makes packaging simple and enforces modules
running internal npm service drives modularization
having a CLI for creating/extending apps is empowering
less cleans up css code
backbone provides standard client event modeling
![Page 33: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/33.jpg)
set the ui freeembrace open sourcerelease the kraken
set the ui freeembrace open sourcerelease the kraken
the steps we took
![Page 34: Bill scott (@billwscott) sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013 bill scott (@billwscott) sr. director,](https://reader034.vdocuments.us/reader034/viewer/2022051401/56649cca5503460f94993149/html5/thumbnails/34.jpg)
follow me on twitter@billwscottfollow me on twitter@billwscott