• Save
Design For Continuous Deployment
Upcoming SlideShare
Loading in...5
×
 

Design For Continuous Deployment

on

  • 2,583 views

What is continuous deployment? Why design for continuous deployment? How can engineers help designers think and work in this environment. An overview of how it's done at Etsy.

What is continuous deployment? Why design for continuous deployment? How can engineers help designers think and work in this environment. An overview of how it's done at Etsy.

Statistics

Views

Total Views
2,583
Views on SlideShare
2,578
Embed Views
5

Actions

Likes
10
Downloads
0
Comments
6

2 Embeds 5

https://twitter.com 4
https://web.tweetdeck.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 6 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design For Continuous Deployment Design For Continuous Deployment Document Transcript

  • helloHello
  • What is Etsy?Etsy is a commerce platform & a community where people buydirect from designers & artists who make & sell their ownproducts.
  • Any creative person can open a shop, list items, receive andfulfill orders, promote themselves, connect with other people,curate collections of items, watch site activity...
  • 96% goes straight to the seller.
  • There are products made by hand or with very small scaleproduction.
  • There are vintage and antique products.
  • There are supplies for making.
  • Etsy is more than products. It’s a community.
  • End to EndI’m in the lucky position to be creative director at Etsy.I get to be the arbiter of Etsys experience end-to-end acrossall channels...
  • ...out in the world...
  • ...on your phone...
  • ...and at etsy.com. I’m the design cheerleader, with a criticaleye. And I make sure great design work gets done.
  • 10+ million membersThere’s a lot to get done. In a complex environment.
  • 800,000+ sellers
  • 11 million+ items
  • 1 billion+page views a month
  • $600 million this yearAnd...
  • About 140 people in Product Design & Engineering(that’s designers, product managers, engineers, and devops).We have to make that all work!
  • Design for Continuous DeploymentWhich brings me to the topic at hand. Design for ContinuousDeployment.
  • HELL Design for YES! Continuous DeploymentWhich is awesome.
  • “What is he doing here?”You might be asking yourself, “why is a designer talking toroom of developers about deployment?”
  • get Great Work doneReturn to this idea of helpinggreat work get done.
  • How Things are MadeGetting great work done means working together.And it means valuing how things are made.
  • Making TogetherIn fact, it means Making Together.THAT is designing for continuous deployment.If our engineers practice continuous deployment, so must we.We’re building one product.
  • Designers...
  • ...and engineers...(no wait)...
  • ...and engineers working together.
  • “What is continuous deployment?”That brings us to our next question. You might be asking,“What is continuous deployment?”
  • “deployment” Release Changes“Deployment” is really just releasing changes to your product.
  • “continuous” All of the Time“Continuous” means those changes are being released all ofthe time.
  • Always ImproveAssuming that each change is intended to be an improvement(and why wouldn’t it be?), then that means the product isalways improving.
  • Frequent Boring Low-RiskThese changes happen often, they’re trivial, and becausethey’re small, they should be low risk. This is really thephilosophy of continuous deployment.
  • Release Early Release OftenThis is saying frequency another way: a catchy way. This ishow you say it if you want to remind someone they haven’treleased small enought or frequently enough.
  • Easy to Identify Easy to FixAgain, because the changes are small (and we measure whathappens) problems are easier to find and easier to fix.
  • “Why design for continuous deployment?”So, you ask, “why design for continuous deployment?”
  • We’re all in this together.Well, we’re working together building one product, so weshould work similarly. Design doesn’t get left behind in apowerful engineering culture. In fact, design can scale and bemore fluid when it’s close to engineering.
  • Share Early Share OftenThis is the collaboration counterpart to releasing early andoften. You encounter problems sooner. You learn sooner. Youfix sooner.This isn’t about speed, it’s about quality.
  • You sketch it out...
  • code...make it real...
  • code...and share it!You’ve made your design in the actual applicationenvironment. For engineers, no big deal. For designers, this ishuge!
  • Empowerment, Responsibility & TrustAnd when you get to the point of releasing, you’re empoweredand trusted to do that. (yep, designers deploy to productiontoo)
  • People like these things. Being trusted feels good.As Kellan our CTO says, “optimize for developer happiness.”When you’re happy, you do better work.
  • Decentralize WorkWhen everyone can access code and everyone can deploy,there’s not single bottleneck or central deployment authority.
  • Engineers DeployersHere we can see the moment in 2010 when the number ofpeople deploying to production surpassed the number ofengineers on staff. This is good.
  • Engineers Deployers 70 60 50 40 30 20 10 0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct NovHere we can see the moment in 2010 when the number ofpeople deploying to production surpassed the number ofengineers on staff. This is good.
  • Engineers Deployers 70 60 58 55 50 49 47 40 42 35 30 30 26 20 23 20 15 10 0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct NovHere we can see the moment in 2010 when the number ofpeople deploying to production surpassed the number ofengineers on staff. This is good.
  • Engineers Deployers 70 62 60 57 58 54 55 50 50 49 47 40 42 35 32 30 30 26 26 22 20 23 20 15 15 10 10 7 8 0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct NovHere we can see the moment in 2010 when the number ofpeople deploying to production surpassed the number ofengineers on staff. This is good.
  • Engineers Deployers 70 62 60 57 58 54 55 50 50 49 47 40 42 35 32 30 30 26 26 22 20 23 20 15 15 10 10 7 8 0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct NovHere we can see the moment in 2010 when the number ofpeople deploying to production surpassed the number ofengineers on staff. This is good.
  • Share Language Share KnowledgeWhen designers and engineers work in the same environment,they share a language. This makes is easier to shareknowledge. It also means you sympathize more with eachother’s motivations and challenges.
  • Version Control Design AssetsAs an added bonus. When you have designers working thisway, you get version control of your design assets happeningnaturally. Nice!
  • “How do you do it?”Enough with the philosophy and motivational messages.“How does this work at Etsy?”
  • Tools & ProcessI’ll describe the tools and basic process we use on the productdesign team (and where we intersect with engineering).
  • Dev EnvironmentWe all have a dedicated virtual machine that serves as ourdevelopment environment. They are configured as mirrors ofproduction in almost every way.
  • Local EnvironmentAnd we all work locally on our Macs. This is like someengineers, but not most of them. Most of them like to work intheir development environment directly. Us designers don’t likethings like Vim.
  • Quick Start Guides & PackagesAlong with our engineers, we’ve made quick guides to helpdesigners get started in this environment.
  • Some engineers even made us a handy package to install. Ta-da!
  • Chat & Share
  • The whole company uses IRC to communicate.
  • The product design team also uses Campfire (and the Propaneclient) to share visual designs in conversation as well. We’llpost links to dev environments, as well as still and motionscreen captures.
  • send Local Changes to Dev EnvironemntRemember those set up tools? Well there’s a handy script thatauto-sends local changes to your development environment.
  • Pattern LibraryWe’ve built a design Pattern Library. It allows us to quickly getdesigns roughed. Don’t duplicate efforts. Be more consistentthroughout the product.It covers mark-up, style, and behavior.
  • This doesn’t solve everything, every time, but a patterns solvesmany things many times. Makes it easy to get started. Helpsshare design decisions between designers and with engineers.If we do something more than once, we patternize it.
  • Config FlagsWe put every feature behind config flags. They’re dead simple.They live in a few simple PHP files.These allow us to safely work in production code and onlydeliver designs to the right people at the right time.
  • These flags turn things on and off.They determine what environment they’re on/off in.They can determine what specific users.And they integrate with our a/b experiment framework.
  • On/OffThese flags turn things on and off.They determine what environment they’re on/off in.They can determine what specific users.And they integrate with our a/b experiment framework.
  • On/Off Dev/ProdThese flags turn things on and off.They determine what environment they’re on/off in.They can determine what specific users.And they integrate with our a/b experiment framework.
  • On/Off Dev/Prod Whitelist/Co./AllThese flags turn things on and off.They determine what environment they’re on/off in.They can determine what specific users.And they integrate with our a/b experiment framework.
  • On/Off Dev/Prod Whitelist/Co./All %A/%BThese flags turn things on and off.They determine what environment they’re on/off in.They can determine what specific users.And they integrate with our a/b experiment framework.
  • URL ParamsWe’ve implemented very simple template tags that allow us tospecify URL parameters and next design states or variationsinside them.
  • {% if $smarty.get.url_param ==url_param_value %}a design for review{% /if %}
  • {% if $smarty.get.url_param ==version-A %}a design for review{% /if %}
  • {% if $smarty.get.url_param ==version-B %}another design for review{% /if %}
  • Commit & ReviewBefore we send our changes back to master, we get codereviews from our peers.
  • We use Crucible or Github or really anything you’d like to useto do a code review. The important thing is that we check ourwork. Designers can learn a ton from engineers in this step.
  • TestBefore we send changes to master, we run functional and unittests.
  • PushThen we push it.
  • Push it to Master in GitWow, tech-y slide.What about merging? We merge when we pull.No branches. We only “branch in code” using the config flags.That saves us from any annoying merging issues and keepseveryone accountable. It’s also just simple and easy tounderstand.
  • Deploy QueueWho’s turn is it? We find out by joining the Deploy Queue.So how do you manage 100 people pushing and deployingcode to production? You make them talk to each other.
  • That’s right, IRC. There’s a special IRC room just for Pushes.There’s a little bot that helps you be polite, but the only policyenforcement is self enforcement. We respect the system andrespect our peers.
  • DeployinatorWhen the queueu says it’s okay to deploy, we turn to our tool,Deployinator. It’s a dashboard and simple UI for 1-buttondeploys.
  • It patternizes behavior.
  • It’s so easy, even our investors deploy! ;-)
  • etsy.github.comDeployinator (and several of our other home-brew tools) areopen-sourced and avaliable on github.
  • MeasureAfter we deploy, we measure, measure, measure.
  • We monitor performance immediately and over the long term.We look at business metrics immediately and over the longterm.And we watch behavioral metrics and funnels using ouranalyzer tool.
  • PerformanceWe monitor performance immediately and over the long term.We look at business metrics immediately and over the longterm.And we watch behavioral metrics and funnels using ouranalyzer tool.
  • Performance Business MetricsWe monitor performance immediately and over the long term.We look at business metrics immediately and over the longterm.And we watch behavioral metrics and funnels using ouranalyzer tool.
  • Performance Business Metrics A/B AnalyzerWe monitor performance immediately and over the long term.We look at business metrics immediately and over the longterm.And we watch behavioral metrics and funnels using ouranalyzer tool.
  • RepeatAnd we do this over and over and over again, deploying up to50 times day.
  • “Why ‘hell yes’?”Why’s it all so exciting to designers...and engineers?
  • Simplify the ComplexWorking continuously, and releasing small pieces breakscomplex things down into simpler things.
  • Work CloselyYou end up working closely together, because we use thesame tools and languages. This is good.
  • Make Change EasyThis makes it easier to make changes happen, and get themout in the world.
  • Make Great WorkDevelop a way of working that facilitates great work.
  • Make People HappyAnd when you make great work, the people you make it andthe people who use it are better for it.
  • Make People HappyAfterall, it’s people that matter most.
  • That Is aBeautiful Thing
  • That Is an Awesome ThingIf you find that as awesome as I do...
  • WE’RE That Is anHIRING Awesome Thing
  • randy@etsy.com @randyjhuntPlease come talk to me.
  • Thank you so much.