clash of the titans@billwscott on twitterbill scott. sr. dir. user interface engineering @paypalfluent plenary. may 30, 201...
16 different test cells in the initial PS3 Launch (2010)focus is on build/measure/learnfour distinct PS3 experiences launc...
the epiphanyengineer for volatility. for change. for learning.
however, paypal circa 2011...not invented here.risk averse. cultureof long shelf life.
In 2011, even a simplecontent copy changecould take as much as 6weeks to get live to site
tangled up technologyone of the root problemstechnology and processesnot suited for• rapid experimentation• build/measure/...
existing stack wasn’t designed for experimentationthis new stack was not conduciveto prototypingfollowed an “enterprise ap...
paypal vs netflix
new dna @paypaljanuary 2012fleshed out ui layer that could support rapidexperimentationmarch 2012david Marcus becomes presi...
hermes project lean ux in actionfrom whiteboard to code from code to usabilitylearningsstart again
1st step: fire up a prototype stack (nodejs)utilize opens source stackexpress, connect, require.jsbring in javascript temp...
2nd step: bootstrap with bootstrapable to create a new branded look in a few hoursenabled sketch to codenode.jsui bitsprot...
3rd step: use javascript templatingtext templates get compiled tojavascript<p>Hello {name}</p>dustjs templates execute whe...
4th step: make ui bits portable to legacyJS templating can be run in clientbrowser or server on the productionstackwe can ...
beforenode &leanux
after node& leanux
5th step: bring node to productionproject krakenenable all of the standard paypalservicesbut do it in a friendly npm waymo...
java (rhinoscript)productionstack{dust}JS template6th step: one stack to rule them allnode.js{dust}JS templateprototypestack
6th step: one stack to rule them allchoose whereyou want torun thetemplateskrakenprototype &production stackclientserverco...
npm.paypal.combower.paypal.comenables building instandard components& styles in less than aminuteprovides blessed setof mo...
github for CI/CD
start like walmart labsuse as an api server to proxy old servicesand then retire themor start like us, trello and othersus...
designing web interfacesO’Reillypicture creditshttp://commons.wikimedia.org/wiki/File:Giant_octopus_attacks_ship.jpghttp:/...
Upcoming SlideShare
Loading in...5
×

Clash of the Titans: Releasing the Kraken | NodeJS @paypal

4,570

Published on

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.

Published in: Technology

Clash of the Titans: Releasing the Kraken | NodeJS @paypal

  1. 1. clash of the titans@billwscott on twitterbill scott. sr. dir. user interface engineering @paypalfluent plenary. may 30, 2013. san francisco.releasing the kraken: nodejs @paypal
  2. 2. 16 different test cells in the initial PS3 Launch (2010)focus is on build/measure/learnfour distinct PS3 experiences launched on same daytypical netflix release
  3. 3. the epiphanyengineer for volatility. for change. for learning.
  4. 4. however, paypal circa 2011...not invented here.risk averse. cultureof long shelf life.
  5. 5. In 2011, even a simplecontent copy changecould take as much as 6weeks to get live to site
  6. 6. tangled up technologyone of the root problemstechnology and processesnot suited for• rapid experimentation• build/measure/learn
  7. 7. existing stack wasn’t designed for experimentationthis new stack was not conduciveto prototypingfollowed an “enterprise application”model. ui gets built into the “serverapp”ajax/components all done server-side (subclass java controller)!java(components)jspproprietary uiprototypingwas hard“ui bits” mostlylived here
  8. 8. paypal vs netflix
  9. 9. new dna @paypaljanuary 2012fleshed out ui layer that could support rapidexperimentationmarch 2012david Marcus becomes president of PayPalapril 2012kick off of lean project using nodejs & dustjs
  10. 10. hermes project lean ux in actionfrom whiteboard to code from code to usabilitylearningsstart again
  11. 11. 1st step: fire up a prototype stack (nodejs)utilize opens source stackexpress, connect, require.jsbring in javascript templating and other open sourceui goodnessnode.jsui bitsprototypestack
  12. 12. 2nd step: bootstrap with bootstrapable to create a new branded look in a few hoursenabled sketch to codenode.jsui bitsprototypestack
  13. 13. 3rd step: use javascript templatingtext templates get compiled tojavascript<p>Hello {name}</p>dustjs templates execute whereverthere is javascripttemplates = JS{dust}JavaScriptcompiles to...javascript isevaluatedto render ui
  14. 14. 4th step: make ui bits portable to legacyJS templating can be run in clientbrowser or server on the productionstackwe can drag & drop the ui bits fromprototyping stack to the productionstackrhinoscript enabled stack parityjava (rhinoscript)node.js{dust}JS templateprototypestackproductionstack{dust}JS templateclient ORservereither stack
  15. 15. beforenode &leanux
  16. 16. after node& leanux
  17. 17. 5th step: bring node to productionproject krakenenable all of the standard paypalservicesbut 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
  18. 18. java (rhinoscript)productionstack{dust}JS template6th step: one stack to rule them allnode.js{dust}JS templateprototypestack
  19. 19. 6th step: one stack to rule them allchoose whereyou want torun thetemplateskrakenprototype &production stackclientservercontains “webcore” forscaffolding andproviding a lightweightframework for dev &production
  20. 20. npm.paypal.combower.paypal.comenables building instandard components& styles in less than aminuteprovides blessed setof modules first. canprovide protectionfrom blacklist modulesmodules for easy integration
  21. 21. github for CI/CD
  22. 22. start like walmart labsuse as an api server to proxy old servicesand then retire themor 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 scalesdo it with talentensure best developers are on the initialwork to set the standardgetting nodeinto your tentI am hiring!
  23. 23. designing web interfacesO’Reillypicture 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×