Frontend First Design & Development

364 views

Published on

A presentation about my own development method. Transcript: http://tinyurl.com/frontendfirst

  • Be the first to comment

Frontend First Design & Development

  1. 1. Hello, my name is!"!#$%&#&(
  2. 2. !"#$%&$!()("(*(%Design & Development
  3. 3. Software is to solve!"#$%problems
  4. 4. Every successfulsoftware solves a!""#for its users
  5. 5. Software is made for!"##$%&&() of users
  6. 6. A WORKPLACEIS A COMMUNITY
  7. 7. Software is an!"#$%&$()($*
  8. 8. How do we call things which provide!"#$%&$()($*#+$,)+--("!!*&.
  9. 9. !"#$%#&(
  10. 10. !"#$%
  11. 11. Software is!"#$%&#&("
  12. 12. Even!"#$%&"()responded to change for centuries (until tourism came)
  13. 13. Software is!"#$%&()*&+,%#-+(,-..&+( /0,1
  14. 14. The developer has the same!"#$%&#()*+ as an architect
  15. 15. Is there!"#$%ATTITUDEin architecture?
  16. 16. ChristopherALEXANDER
  17. 17. Inventor ofDESIGNPATTERNS
  18. 18. His Big Question:What are the patternsthat make a space!"#$%!&
  19. 19. How to make!"#$%!&($)& for theCOMMUNITIES of our users?
  20. 20. !"#$
  21. 21. !""#$%""&""!(&$)*+,-!)*&)%
  22. 22. How to help!"#$%&%$(%)* to be correct?
  23. 23. How to make specifications!"#$%&(&))*
  24. 24. Quick!""#$%&
  25. 25. 3 week feedback is!"#$%!"&(
  26. 26. !"#$%
  27. 27. !"#$%&
  28. 28. Through showing!"#$%&!#()*# to users
  29. 29. WhyFRONTENDFIRST?
  30. 30. Based on SVN logsFrontend changesTWICE as fastas Models, whileControllers changethe LEAST often * tested on multiple MVC web projects
  31. 31. UI is the!"#$%"$& users speak.
  32. 32. An!"#$%&($ is what hides actual!)*+$)$"##!,"
  33. 33. If no change inSCREENSSPEED DATA means!"#$%&!( for the users
  34. 34. !"#$%& is solely to()**+,- the interface
  35. 35. ! " # $ % & % $ ( % ) * should be about+,(-()-!## not about abstract concepts
  36. 36. Your!"#$%&() is not your "#(
  37. 37. Draw UI sketches right at!"#$%&(#$)&#*"
  38. 38. Understand What the user KNOWS What she NEEDS What she can TELLand how we can ANSWER
  39. 39. !"#$!%&("&)*+&,!$-."/&01&1$.2"% not UI itself
  40. 40. !"#$%$&"#
  41. 41. !"#$%&
  42. 42. !"#!$%&"
  43. 43. !"
  44. 44. JS + HTMLNO BACKEND
  45. 45. Backend !!"#$!%&#!" possible
  46. 46. !"#$%&((!)"*+&to user s through showing,-"-(&.&/#
  47. 47. !"#$%& should &( be)*+$,#($-. on a pig
  48. 48. !"#$%&till the bottom
  49. 49. Technical layers are to!"##$%&the problem the software solves
  50. 50. RECORDEVERYdesign rationale
  51. 51. !"#"$%&
  52. 52. Change requests down to!"#$while development
  53. 53. Weeks of!"#$%&$
  54. 54. 0 BUGRATEwithout tests
  55. 55. Naturally occuringDSL LAYER
  56. 56. WYSIWYG on every layer
  57. 57. !"#$%$&()$*+,&
  58. 58. DISADVANTAGES
  59. 59. LOTS OF THROW OUT CODE (WASTE!)
  60. 60. Lots ofDOCUMENTATION
  61. 61. Backend progress isHARD TO MEASURE
  62. 62. SurprisePERFORMANCE bottlenecks
  63. 63. NEEDS !multidisciplinary!"#!$"(no departments)
  64. 64. !"#!$%&()*+
  65. 65. RESULTS
  66. 66. HAPPY USERS
  67. 67. "It does what I think it should"
  68. 68. !"#$%&(!$")!*+(),"+-%*($$+ You have to ,"+-%*("+ the problem first.
  69. 69. ELEGANCE !"#$!%!$&!"$#!%# BEAUTY 6% ELEGANT SOLUTION !"#*3-# PERFECT COUNTERPART#()#!*"#+(,,-".(%/!%0#.,(1-$7(*3!%0 LESS2#%(, MORE. DESIGN !"#*3- WAY *(#,-&+3#*3&*#"(4*!(%5

×