responsive design one day
DESCRIPTION
켄트백이 강의했던,Responsive Design강의자료TRANSCRIPT
![Page 1: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/1.jpg)
Responsive DesignKent BeckThree Rivers Institute
![Page 2: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/2.jpg)
Responsive Design Project• Study design
– Introspectively
– Empirically
– Quantitatively
![Page 3: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/3.jpg)
Why now?
• Design has leverage at times of change– End of free Moore’s Law– Scale– Cloud– Re-client
![Page 4: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/4.jpg)
Leverage
It is not a:– Configuration– Testing– Reliability– Build time– Deployment
problem, it is a design problem
![Page 5: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/5.jpg)
Goal of Development
SteadyFlow ofFeatures
![Page 6: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/6.jpg)
Design?
• Adding features should be straightforward
![Page 7: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/7.jpg)
Dilemma
Time Options
Revenue Sooner More
Cost Later Less
![Page 8: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/8.jpg)
Efficiency
Initial work+
Cost of features+
Cost of changes+
Cost of mistakes+
Opportunity cost
* risk
![Page 9: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/9.jpg)
Latency, Throughput, Variance
![Page 10: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/10.jpg)
Challenges
• Human• Social• Sensitivity• Succession• Uncertainty
![Page 11: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/11.jpg)
Uncertainties
• Value
• Means
• Technology
• Team
![Page 12: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/12.jpg)
Values
• Feedback
• Humanity
• Courage
• Ambiguity
![Page 13: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/13.jpg)
Design
BeneficiallyRelatingElements
![Page 14: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/14.jpg)
Coupling
• The probability that a change in one element will require a change in another
![Page 15: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/15.jpg)
Cohesion
• The probability that a change in one sub-element will require a change in all others
• Inversely related to coupling
![Page 16: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/16.jpg)
Safe Steps
• Balance– Efficiency– Risk– Feedback– Teamwork
![Page 17: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/17.jpg)
Strategies
• Can see?– Leap– Parallel
• Can’t see?– Stepping Stone– Simplification
![Page 18: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/18.jpg)
Leap
• If– You can imagine what you want– You can build it– You can install it
↑ Efficiency
↓ Risk
![Page 19: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/19.jpg)
Parallel
• If– You can imagine what you want but– You can’t build it or install it safely
• Support two designs simultaneously– Gradual migration– Forwarding both ways
↑ Safety↓ Scaffolding
![Page 20: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/20.jpg)
Stepping Stone
• If– You can’t imagine exactly what
you want to build but– You can imagine what would
make the end easier/safer to reach
• Build a platform from which your goal is easier to reach
↑ Some well-known components↓ Risk of over-engineering↓ Lack of feedback
![Page 21: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/21.jpg)
Simplification
• If– You can’t imagine exactly what you want to
build– Getting to the end is too expensive
• Eliminate requirements until you reach a safe step
• Gradually re-introduce requirements↑ Almost always possible↑ Establishes initiative↓ Non-linearities in cost depending on
requirements ordering
![Page 22: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/22.jpg)
Four Strategies
Leap
Parallel
SteppingStone
Simplification
![Page 23: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/23.jpg)
…and One More
• If– You can’t see how to
make adding the feature straightforward
• Add it anyway
• Expect to pay the price later
![Page 24: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/24.jpg)
Refactoring
• Bi-directional
• Isolate change
• Interface or implementation
![Page 25: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/25.jpg)
Isolate change
• Before making a change, reduce risk by isolating the area that will need to be changed
![Page 26: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/26.jpg)
Design is an island
• No “best” design
• Improvement
• Deterioration
• Sea level
• Change inbasis
![Page 27: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/27.jpg)
Observations
• Power laws• Fractal• Symmetry• Punctuated equilibrium
![Page 28: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/28.jpg)
Power Laws
Source: Power Laws in Software, Spinellis, et. al.
![Page 29: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/29.jpg)
Fractal
![Page 30: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/30.jpg)
Symmetry
![Page 31: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/31.jpg)
Punctuated Equilibrium
Source: http://www.ideacenter.org/contentmgr/showdetails.php/id/1232
![Page 32: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/32.jpg)
Psychology
• Confidence
• Initiative
• Creativity
![Page 33: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/33.jpg)
Ask the system
• Visualization
• Debugger
![Page 34: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/34.jpg)
Recovery
• Broken windows
• Site repair
![Page 35: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/35.jpg)
Design for testability
![Page 36: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/36.jpg)
Timing
![Page 37: Responsive Design One Day](https://reader035.vdocuments.us/reader035/viewer/2022062708/5588f96cd8b42af8678b466c/html5/thumbnails/37.jpg)
Least commitment