Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to apply design principles in software engineering?

How to apply design principles in software engineering?

Ever wondered what

01bf97df3784afa10fc2b561e251a41c?s=128

Alexey Taktarov

February 14, 2019
Tweet

Transcript

  1. W A I T … D E S I G

    N ? I N T R O D U C T I O N
  2. “We’ve been building this brand new app using cutting-edge technologies

    for X months, but eventually it was NEVER LAUNCHED…” S O U N D S F A M I L I A R ?
  3. “I’ve published this NPM package that I spent X months

    working on, but for some reason NO ONE REALLY USES IT…” S O U N D S F A M I L I A R ?
  4. W H Y M Y S T A R T

    U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing https://www.entrepreneur.com/article/307724
  5. W H Y M Y S T A R T

    U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724
  6. run out of cash / energy W H Y M

    Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724
  7. run out of cash / energy W H Y M

    Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724 no market need
  8. run out of cash / energy W H Y M

    Y S T A R T U P / P R O J E C T / L I B R A R Y / I S N ’ T S U C C E S S F U L poor marketing not the right team https://www.entrepreneur.com/article/307724 no market need ⇵ doesn’t solve anyone’s problem
  9. D E S I G N

  10. the art of solving problems D E S I G

    N
  11. Can D esign P rinciples Help Me To Become a

    Be tter Software Engin ee r? A L E X E Y T A K T A R O V @ M L F R G S P B F R O N T E N D M E E T U P — 0 5 / 0 3 / 2 0 1 9 !
  12. T H E O R I G I N S

    O F D E S I G N C H A P T E R 1
  13. BAUHAUS school of design: art and technology — a new

    unity 1 9 1 9 — 1 9 3 3
  14. Bauhaus building in Dessau, designed by Walter Gropius

  15. Founded in 1919 by Walter Gropius, BAUHAUS mission was to

    research multidisciplinary art through: C O LO U R T H E O RY, G E O M E T RY, PAT T E R N S A N D M AT E R I A L S
  16. Gunta Stölzl, 1927 Paul Klee Wassily Kandinsky, 1922

  17. Most of the artwork was still not available to the

    general audience.
  18. Most of the artwork was still not available to the

    general audience. A P R O D U C T D E S I G N However, BAUHAUS gave birth to what later will be called:
  19. Wilhelm Wagenfeld, 1923 Marcel Breuer, 1925

  20. The school was shot down by the Nazis in 1933.

  21. The school was shot down by the Nazis in 1933.

    ✕ The artists moved to the U.S., Britain, or Russia, where they were well accepted and took the school tradition to other institutions. ← → →
  22. Technologies and materials discovered through the war meet the consumer

    market T H E P O S T W A R D E S I G N
  23. To make individual products attractive to customers. T H E

    N E W R O L E O F D E S I G N Max Bill’s wall clock for Junhangs, 1956
  24. Braun T-24 by Dieter Rams, 1956 Tizio desk lamp by

    Richard Sapper, 1972
  25. Nikon-1, 1948 IBM corporate identity, by Paul Rand, 1956 Atari

    2600, 1977
  26. A P P L Y I N G T H

    E R U L E S O F D E S I G N C H A P T E R 2
  27. Are there any methods of design that can be applied

    in Software Engineering? Q U E S T I O N
  28. “Since the early 50s the activity of designing has been

    the subject of systematic and scientific analysis, it has been codified into a set of procedures … by manufacturing corporations (Philips, IBM)” P E T E R D O R M E R , “ D E S I G N S I N C E 1 9 4 5 ”
  29. turns out there are dozens of them… https://principles.design

  30. V I S I B I L I T Y

    P R I N C I P L E the more visible functions are, the more likely users will be able to know what to do next. prioritise important functions!
  31. Panasonic RQ-2101 Panasonic RQ-2105 Visibility Recording is what matters now

  32. // Cancels an active subscription // and sends a confirmation

    email function cancelSubscription(user, email, testMode) { // ... } cancelSubscription(user, "email@example.com", false);
  33. function cancelSubscription(user, email = null, testMode = false) // better!

    function cancelSubscription(user, options = {}) cancelSubscription(user) cancelSubscription(user, { sendConfirmationTo: 'someone@example.com', testMode: true }) // Ruby cancel_subscription(user, with_test_mode: true)
  34. C O N S T R A I N T

    S P R I N C I P L E an artificially reduced complexity may improve the user experience
  35. None
  36. None
  37. A S M A R T D O O R

    L O C K F O U N D I N S W E D E N has only 4 digits, order does not matter 44 = 256 combinations code is 2244 — damn easy to remember
  38. A S M A R T D O O R

    L O C K F O U N D I N S W E D E N has only 4 digits, order does not matter 44 = 256 combinations code is 2244 — damn easy to remember
  39. F E E D B A C K & M

    A P P I N G P R I N C I P L E S a relationship between user’s actions and effects in the real world
  40. Mapping When I press ▶ the wheel starts to spin

    Panasonic RQ-2105 Feedback A button: press to activate, immediate physical feedback
  41. Feedback & Mapping — is what makes users feel confident

    with your product. It also powers the creativity.
  42. Let’s say you’re working on an interactive part of your

    app that is only activated when a specific element gets into a viewport. E X A M P L E F R O M E N G I N E E R I N G
  43. Let’s say you’re working on an interactive part of your

    app that is only activated when a specific element gets into a viewport. E X A M P L E F R O M E N G I N E E R I N G This looks like a black-box, developing this becomes painful: code → refresh → scroll → …
  44. — proper decomposition — reducing side-effects — testing and TDD

    — development tools R E D U C I N G T H E F E E D B A C K C Y C L E
  45. Saving in time feels like simplicity T H E L

    A W O F S I M P L I C I T Y
  46. Saving in time feels like simplicity T H E L

    A W O F S I M P L I C I T Y # code > create-react-app new-app # test > npx localtunnel --port 8080 # deploy > now
  47. A F F O R D A N C E

    P R I N C I P L E an attribute of an object that allows people to know how to use it
  48. Yamaha CR-600 Affordance A Control Knob reflects the natural movement

    pattern
  49. A F F O R D A N C E

    C A N B E I M P L I E D B Y T H E C O N T E X T
  50. A F F O R D A N C E

    C A N B E I M P L I E D B Y T H E C O N T E X T A Lemon Squeezer by Philippe Starck, 1990
  51. <MediaQuery minDeviceWidth={700}> {matches => <div> ... </div>} </MediaQuery> Function-as-a-Prop pattern

    popularised by React-Motion is now widely accepted by the developers
  52. https://github.com/contra/react-responsive <MediaQuery minDeviceWidth={700}> {matches => <div> ... </div>} </MediaQuery> Function-as-a-Prop

    pattern popularised by React-Motion is now widely accepted by the developers
  53. A D E S I G N P R O

    C E S S C H A P T E R 3
  54. Empathy → Problem → Solution → Insight → UX

  55. Empathy → Problem → Solution → Insight → DX ▶

    Alex Kotliarskyi: Facebook product Infrastructure as a developer I know that … … building complex UIs is hard an idea of reconcilation UI(data) React
  56. S T O R Y T E L L I

    N G I N D E S I G N a good design is about telling stories
  57. Feature: uploader with file storage and versions I want to

    upload files to the filesystem Background: Given an uploader class that uses the 'file' storage And that the uploader class has a version named 'thumb' Scenario: store a file When I store the file 'fixtures/bork.txt' Then there should be a file at 'public/uploads/bork.txt' Cucumber (BDD) is a great example of storytelling in software design
  58. Timecop’s (a Ruby gem for time travel in tests) design

    is based on a 1994 sci-fi movie with the same name starring Jean-Claude Van Damme Timecop.freeze(1.week.ago) sleep(10) new_time == Time.now # ==> true Timecop.return # "turn off" Timecop Timecop.travel(1.month.from_now)
  59. A R E W E T H E D E

    S I G N E R S ? C H A P T E R 4
  60. “Designer — is a planner with an aesthetic sense. He

    has an ability to respond to whatever demand is made of him … and he helps people to solve certain problems without stylistic preconceptions” B R U N O M U N A R I , “ D E S I G N A S A R T ”
  61. “Designer — is a planner with an aesthetic sense. He

    has an ability to respond to whatever demand is made of him … and he helps people to solve certain problems without stylistic preconceptions” B R U N O M U N A R I , “ D E S I G N A S A R T ” Engineer
  62. Our job as engineers is not about writing code, it’s

    about solving problems and being responsible for the solution.
  63. Victor Papanek Design for the Real World Don Norman The

    Design of Everyday Things Deyan Sudjic The Language of Things John Maeda The Laws of Simplicity • Peter Dormer, “Design Since 1945” • Charlotte and Peter Fiell, “The Story of Design” • ▶ Mike Monteiro, "How Designers Destroyed the World” • ▶ Hainbach YouTube Channel