Simplify your workflow with Styleguide Driven Development

Download Simplify your workflow with Styleguide Driven Development

Post on 17-Aug-2015

305 views

Category:

Internet

2 download

Embed Size (px)

TRANSCRIPT

  1. 1. Simplify your workflow with Styleguide Driven Development
  2. 2. Revolutionised how we work Better understanding of our application Shipping faster and more frequently Become more consistent More adaptable
  3. 3. Business problem Problems with software delivery Solution Implementation Review What well cover
  4. 4. Jordan Lewis @jordanlewiz
  5. 5. $250,000,000+ Community Earnings
  6. 6. 26,000,000 Monthly visits
  7. 7. 5 seconds Item sold every
  8. 8. 45+ Developers
  9. 9. 15+ Daily deploys
  10. 10. BUSINESS PROBLEM Improve the purchase flow
  11. 11. Backend Frontend UX Product Designer Meet the Team BUSINESS PROBLEM
  12. 12. New purchase flow BUSINESS PROBLEM
  13. 13. Item page BUSINESS PROBLEM
  14. 14. Search results BUSINESS PROBLEM
  15. 15. Cart page BUSINESS PROBLEM
  16. 16. Checkout page BUSINESS PROBLEM
  17. 17. User nav BUSINESS PROBLEM
  18. 18. Modals BUSINESS PROBLEM
  19. 19. Order confirmation BUSINESS PROBLEM
  20. 20. PROBLEMS WITH Software delivery
  21. 21. PROBLEM #1: Lack of shared vision
  22. 22. Shared vision: tools PROBLEMS
  23. 23. Shared vision: no documentation PROBLEMS
  24. 24. Shared vision: knowledge silos PROBLEMS
  25. 25. PROBLEM #2: Understanding UI behaviour
  26. 26. PROBLEMS UI Behaviour: first time visit
  27. 27. UI Behaviour: empty states PROBLEMS
  28. 28. UI Behaviour: one-off pages PROBLEMS
  29. 29. UI Behaviour: modals PROBLEMS
  30. 30. UI Behaviour: content length PROBLEMS
  31. 31. UI Behaviour: content length PROBLEMS
  32. 32. UI Behaviour: error messages PROBLEMS
  33. 33. UI Behaviour: error pages PROBLEMS
  34. 34. UI Behaviour: edge cases PROBLEMS
  35. 35. UI Behaviour: deleted content PROBLEMS
  36. 36. UI Behaviour: 3rd party outages PROBLEMS
  37. 37. UI Behaviour: localisation PROBLEMS
  38. 38. UI Behaviour: you get it! PROBLEMS
  39. 39. UI Behaviour: manual testing rinse and repeat PROBLEMS
  40. 40. UI Behaviour: manual testing re-creating scenarios is laborious and time consuming PROBLEMS
  41. 41. UI Behaviour: cross-browser testing PROBLEMS
  42. 42. UI Behaviour: responsive PROBLEMS
  43. 43. PROBLEM #3: Scope creep
  44. 44. We need to charge VAT to European buyers. Product Lead Scope creep: feature requests PROBLEMS
  45. 45. Frontend Dev Shouldnt we display something when... Scope creep: gaps in the ux PROBLEMS
  46. 46. When I do X, Y then Z, I get a weird error QA Tester Scope creep: edge cases PROBLEMS
  47. 47. Now that I see it, it doesnt really work... UX designer Scope creep: interactions PROBLEMS
  48. 48. We need to make it pop! Designer Scope creep: design changes PROBLEMS
  49. 49. SOLUTION Styleguide Driven Development
  50. 50. Living Styleguides: real codeStyleguide Driven Development: Is a practice that encourages the separation of UX, Design & Frontend from Backend concerns. This is achieved by developing the UI separately in a styleguide. SOLUTION
  51. 51. SOLUTION: Styleguides
  52. 52. Living Styleguides: real codeStyleguides: Single point of truth Documentation Maintain consistency Save time SOLUTION
  53. 53. Static: use sample markup Living Styleguides: real codeStyleguides: static vs dynamic Dynamic: use real components SOLUTION
  54. 54. Living Styleguides: real codeStyleguides: living styleguides SOLUTION
  55. 55. Any changes to a component in the Styleguide, should result in changes to Production. Living Styleguides: real codeStyleguides: living styleguides SOLUTION
  56. 56. SOLUTION: UI Library
  57. 57. UI Library: elements SOLUTION
  58. 58. UI Library: example currency typography icon box select buttons SOLUTION
  59. 59. SOLUTION: Structure Styleguide
  60. 60. Structure Styleguides: A Structure Styleguide is designed to document an applications UI logic in all of its possible permutations. SOLUTION
  61. 61. structure scenarios components Living Styleguides: real codeStructure Styleguides: anatomy SOLUTION
  62. 62. Living Styleguides: real codeStructure Styleguides: components SOLUTION
  63. 63. 11 scenarios 16 scenarios 9 scenarios 6 scenarios Living Styleguides: real codeStructure Styleguides: scenarios SOLUTION
  64. 64. Living Styleguides: real codeStructure Styleguides: pages SOLUTION
  65. 65. Living Styleguides: real codeStructure Styleguides: tooling Custom solution Built inside the application Deploying styleguide deploys production Started basic layered features SOLUTION
  66. 66. SOLUTION: Templates (not views)
  67. 67. Templates: the problems with views Data Model View V SOLUTION
  68. 68. Templates: view model Data Model View Model Template {} T SOLUTION
  69. 69. Templates: Sample data View Model Template {}Data Model T SOLUTION
  70. 70. SOLUTION: View Models
  71. 71. View Model: example SOLUTION
  72. 72. ... Templates: without view-modelView Model: without (view) SOLUTION
  73. 73. ... Templates: without view-modelView Model: with (template) SOLUTION
  74. 74. { :user_signed_in? :username :balance :shopping_cart_count :shopping_cart_empty? } => => => => => Templates: without view-modelView Model: defined SOLUTION
  75. 75. { :user_signed_in? :username :balance :shopping_cart_count :shopping_cart_empty? } => true, => jordan-lewis, => $314, => 3, => false Templates: view-model (application) Templates: without view-modelView Model: styleguide implementation SOLUTION
  76. 76. { :user_signed_in? :username :balance :shopping_cart_count :shopping_cart_empty? } Templates: view-model (application) => @signed_in_user.present?, => @user.username, => @user.balance.format, => @cart.entries_count, => @cart.entries_count == 0 Templates: without view-modelView Model: backend implementation SOLUTION
  77. 77. IMPLEMENTATION Styleguide Driven Development
  78. 78. 1. Define components & scenarios 2. Build - UI directly in styleguide - backend 3. Assemble the page/feature Templates: view-model (application) Templates: without view-modelSDD: the process IMPLEMENTATION
  79. 79. STEP 1: Define Components & Scenarios
  80. 80. Templates: view-model (application) Templates: without view-modelDefine: what your building IMPLEMENTATION
  81. 81. Templates: view-model (application) Templates: without view-modelDefine: components and scenarios IMPLEMENTATION
  82. 82. Payment method 1. PayPal 2. PayPal error 3. Credit 4. Add credit + checkout Billing details 1. non-eu not-provided 2. non-eu provided 3. eu provided 4. eu provided with VAT 5. provided with errors Templates: view-model (application) Templates: without view-modelDefine: components and scenarios Order Summary 1. with tax 2. no tax 3. handling fee 4. single item 5. multiple item IMPLEMENTATION
  83. 83. STEP 2: Build UI and Backend
  84. 84. Templates: view-model (application) Templates: without view-modelBuild: separation of concerns Frontend isnt waiting on backend Backend isnt waiting on frontend IMPLEMENTATION
  85. 85. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  86. 86. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  87. 87. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  88. 88. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  89. 89. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  90. 90. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  91. 91. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  92. 92. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  93. 93. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  94. 94. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  95. 95. Templates: view-model (application) Templates: without view-modelBuild UI: scenarios IMPLEMENTATION Billing details 1. Provided 2. Provided Just Saved 3. Provided European With VAT Number 4. Provided European No VAT Number 5. Area51 Outage 6. Area51 Outage European With VAT Number 7. Form Empty 8. Form Country With Predefined Regions 9. Form European 10. Form With Errors 11. Form With VAT Errors
  96. 96. Templates: view-model (application) Templates: without view-modelBuild backend: hook up the view model IMPLEMENTATION { :user_signed_in? :username :balance :shopping_cart_count :shopping_cart_empty? } => @signed_in_user.present?, => @user.username, => @user.balance.format, => @cart.entries_count, => @cart.entries_count == 0
  97. 97. STEP 3: Assemble page or feature
  98. 98. Templates: view-model (application) Templates: without view-modelAssemble: components to build a page IMPLEMENTATION
  99. 99. Templates: view-model (application) Templates: without view-modelAssemble: finished product IMPLEMENTATION
  100. 100. REVIEW The benefits of Styleguide Driven Development
  101. 101. Templates: view-model (application) Templates: without view-modelBenefits: Separate UI and backend REVIEW
  102. 102. Templates: view-model (application) Templates: without view-modelBenefits: Iterate quickly REVIEW
  103. 103. Templates: view-model (application) Templates: without view-modelBenefits: Identify any gaps REVIEW
  104. 104. Templates: view-model (application) Templates: without view-modelBenefits: Ship faster & more frequently REVIEW
  105. 105. Templates: view-model (application) Templates: without view-modelBenefits: Free documentation REVIEW
  106. 106. market.styleguide.envato.com
  107. 107. Templates: view-model (application) Templates: without view-modelWhats next? REVIEW extract reusable parts open source release UI library add more content visual regression testing
  108. 108. @jordanlewiz / jordan.lewis@envato.com http://enva.to/sdd Thank you!