Kicking Up the Dust with Node JS


Published on

Fluent Conference WebCast from 5/15. I talk about the technology stack that we specifically are employing at PayPal to enable rapid experimentation with Lean UX. The use of nodejs as a prototyping stack is discussed as well as the use of javascript templating (with Dust JS) to allow for an efficient way to refactor a legacy stack.

Listen to the webcast here:

My talk starts at 12:22

Published in: Technology, Education

Kicking Up the Dust with Node JS

  1. bill scott (@billwscott)sr. director, user interface engineering, paypal. O’Reilly Fluent webcast. May 15, 2013kicking up the dust with nodejsrefactoring paypal’s tech stack to enable lean ux
  2. at Netflix 90% or more ofthe “ui bits” were thrownaway every year.doesn’t take too manytests to result in lots ofthrow away code.followed buid/test/learn
  3. the epiphanydesign for volatility
  4. paypal vs netflix
  5. paypal circa 2011roll your own.disconnected deliveryexperience. culture oflong shelf life. inwardfocus. risk averse.
  6. tangled uptechnologybig problem. technology andprocesses not geared tobuild/test/learn.
  7. new dna @paypaljan 2012fleshed out ui layer that couldsupport rapid experimentationmarch 2012david Marcus becomes presidentof PayPalapril 2012formed lean ux team to reinventcheckout experience
  8. in the midst of transformation
  9. a tale of two stacks (c++ & java)two non-standard stacksnew stack tied to Java“one word” change couldtake 6 weeks to fix on c++stackc++ javaxml jspproprietaryuiproprietaryuiold new’ishlongreleasecycles
  10. decision was to move to javamigration was already inplace to leave the c++/xml stack behindsome odd choicespreceded this: writeeverything in java (html,css & js!!)c++ javaxml jspproprietaryuiproprietaryuiXold new’ish
  11. but we wanted to support lean uxwhiteboardto codecode to usabilityproduct/designteamuser interfaceengineersusability/customersenabling a living specengineering stack requirementstreat prototype & production the sameallow rapid sketch to code life cycleallow quick changes during usability studies (RITE)support being the “living spec”
  12. lean uxdesigning products for build/measure/learn (lean startup)requires 3 rules to be followedat all timesget to & maintain a sharedunderstandingform deep collaborationacross disciplineskeep continuous customerfeedback flowing
  13. free to iterate and drive agileuser interface engineering - agile scrum teamlean ux - lean team trackengineering - agile scrum teamsprint 0usability usability usability usability usabilirelease release release release{agileFOCUS ON LEARNINGFOCUS ON DELIVERING (& LEARNING)
  14. leanengineeringengineeringforlearning
  15. old stack not designed for learningthis new stack was notconducive to prototypingfollowed an “enterpriseapplication” model. uigets built into the “app”ajax/components alldone server-side(subclass java controller)javajspproprietaryuiprototypingwas hard“ui bits”could onlylive here
  16. step 1set the ui bits free
  17. separate the ui bitscode = JS(backbone)templates = JS{dust}style = CSS(less)imagesre-engineered the userinterface stack so thatthe only artifacts are:• javascript• css• imagesditched the server-sidementality to creating UIs• no more server-side onlytemplates• no more server-sidecomponents• no more server-sidemanaging the ui
  18. use javascript templatingtemplates get convertedto javascript<p>Hello {name}</p>we use dust.jscode = JS(backbone)templates = JS{dust}style = CSS(less)imagesJavaScriptcompiles to...javascriptexecutedto generate ui
  19. ui bits now just natural web artifactsserver-side language independentserver/client agnosticCDN readycacheablerapid to createcode = JS(backbone)templates = JS{dust}style = CSS(less)images
  20. portable in all directionsJS templating can be runin client browser orserver on the productionstackwe can drag & drop theui bits from prototypingstack to the productionstackjava(rhinoscript)node.js{dust}JS templateprototypestackproductionstack{dust}JS templateclient ORservereither stack
  21. started using nodejs for proto stackwhiteboardto code code to usabilityproduct/designteamuser interfaceengineersusability/customersenabled rapid development (coupled with dustjs)
  22. started using nodejs for proto stackwhiteboardto code code to usabilityproduct/designteamuser interfaceengineersusability/customersenabled rapid development (coupled with dustjs)node.js (set up as prototype stack)backbone{dust} less images
  23. free to turn sketch to codeforcing function.brought about a close collaboration between engineeringand designcreated a bridge for shared understandingrequired a lot of confidence and transparency
  24. free to test frequently with users
  25. step 2embrace open source
  26. use open source religiously
  27. work in open source modelinternal github revolutionizedour internal developmentrapidly replaced centralizedplatform teamsinnovation democratizedevery developer encouragedto experiment and generate reposto share as well as to fork/pull request
  28. give 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...
  29. step 3release the kraken
  30. project krakenready nodejs for productionenable all of standard paypalservicesbut 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.
  31. one stack to rule them allsingle stack createsseamless movementbetween lean ux andagileblended teamapp is the uinode.js{dust}JS templateprototype&productionstackclientserver
  32. introducing nodejs into your orgget the camel’s nose under the tentstart as an API proxy (shim) to really old servicesuse as a rapid prototyping stackmove into the tentfind a good proof of concept API or application to beginto scaledo it in parallel and test till scalesdo it with talentensure best developers are on the initial work to set thestandard
  33. a few other key itemsgithub democratizes coding & decentralizes teamsbower provides a clean way to componentize the uirequirejs makes packaging simple and enforces modulesrunning internal npm service drives modularizationhaving a CLI for creating/extending apps is empoweringless cleans up css codebackbone provides standard client event modeling
  34. set the ui freeembrace open sourcerelease the krakenthe steps we took
  35. follow me on twitter@billwscott