simplify your workflow with styleguide driven development
TRANSCRIPT
![Page 1: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/1.jpg)
Simplify your workflow with
Styleguide Driven Development
![Page 2: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/2.jpg)
‣ Revolutionised how we work
‣ Better understanding of our application
‣ Shipping faster and more frequently
‣ Become more consistent
‣ More adaptable
![Page 3: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/3.jpg)
‣ Business problem
‣ Problems with software delivery
‣ Solution
‣ Implementation
‣ Review
What we’ll cover
![Page 4: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/4.jpg)
Jordan Lewis @jordanlewiz
![Page 5: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/5.jpg)
![Page 6: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/6.jpg)
$250,000,000+
Community Earnings
![Page 7: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/7.jpg)
![Page 8: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/8.jpg)
26,000,000Monthly visits
![Page 9: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/9.jpg)
5 secondsItem sold every
![Page 10: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/10.jpg)
45+Developers
![Page 11: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/11.jpg)
15+Daily deploys
![Page 12: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/12.jpg)
BUSINESS PROBLEM
Improve the purchase flow
![Page 13: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/13.jpg)
Backend Frontend UX Product Designer
Meet the TeamBUSINESS PROBLEM
![Page 14: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/14.jpg)
New purchase flowBUSINESS PROBLEM
![Page 15: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/15.jpg)
Item pageBUSINESS PROBLEM
![Page 16: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/16.jpg)
Search resultsBUSINESS PROBLEM
![Page 17: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/17.jpg)
Cart pageBUSINESS PROBLEM
![Page 18: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/18.jpg)
Checkout pageBUSINESS PROBLEM
![Page 19: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/19.jpg)
User navBUSINESS PROBLEM
![Page 20: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/20.jpg)
ModalsBUSINESS PROBLEM
![Page 21: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/21.jpg)
Order confirmationBUSINESS PROBLEM
![Page 22: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/22.jpg)
PROBLEMS WITH
Software delivery
![Page 23: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/23.jpg)
PROBLEM #1:
Lack of shared vision
![Page 24: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/24.jpg)
Shared vision: toolsPROBLEMS
![Page 25: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/25.jpg)
Shared vision: no documentationPROBLEMS
![Page 26: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/26.jpg)
Shared vision: knowledge silosPROBLEMS
![Page 27: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/27.jpg)
PROBLEM #2:
Understanding UI behaviour
![Page 28: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/28.jpg)
PROBLEMS
UI Behaviour: first time visit
![Page 29: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/29.jpg)
UI Behaviour: empty statesPROBLEMS
![Page 30: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/30.jpg)
UI Behaviour: one-off pagesPROBLEMS
![Page 31: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/31.jpg)
UI Behaviour: modalsPROBLEMS
![Page 32: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/32.jpg)
UI Behaviour: content lengthPROBLEMS
![Page 33: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/33.jpg)
UI Behaviour: content lengthPROBLEMS
![Page 34: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/34.jpg)
UI Behaviour: error messagesPROBLEMS
![Page 35: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/35.jpg)
UI Behaviour: error pagesPROBLEMS
![Page 36: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/36.jpg)
UI Behaviour: edge casesPROBLEMS
![Page 37: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/37.jpg)
UI Behaviour: deleted contentPROBLEMS
![Page 38: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/38.jpg)
UI Behaviour: 3rd party outagesPROBLEMS
![Page 39: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/39.jpg)
UI Behaviour: localisationPROBLEMS
![Page 40: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/40.jpg)
UI Behaviour:
… you get it!
PROBLEMS
![Page 41: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/41.jpg)
UI Behaviour: manual testing
rinse and repeat
PROBLEMS
![Page 42: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/42.jpg)
UI Behaviour: manual testing
re-creating scenarios is laborious and time consuming
PROBLEMS
![Page 43: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/43.jpg)
UI Behaviour: cross-browser testingPROBLEMS
![Page 44: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/44.jpg)
UI Behaviour: responsivePROBLEMS
![Page 45: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/45.jpg)
PROBLEM #3:
Scope creep
![Page 46: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/46.jpg)
“We need to charge VAT to European buyers.”
― Product Lead
Scope creep: feature requestsPROBLEMS
![Page 47: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/47.jpg)
― Frontend Dev
“Shouldn’t we display something when...”
Scope creep: gaps in the uxPROBLEMS
![Page 48: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/48.jpg)
“When I do X, Y then Z, I get a weird error”
― QA Tester
Scope creep: edge casesPROBLEMS
![Page 49: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/49.jpg)
“Now that I see it, it doesn’t really work...”
― UX designer
Scope creep: interactionsPROBLEMS
![Page 50: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/50.jpg)
“We need to make it pop!”
― Designer
Scope creep: design changesPROBLEMS
![Page 51: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/51.jpg)
SOLUTION
Styleguide Driven Development
![Page 52: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/52.jpg)
Living Styleguides:
real code Styleguide 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
![Page 53: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/53.jpg)
SOLUTION:
Styleguides
![Page 54: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/54.jpg)
Living Styleguides:
real code Styleguides:
‣ Single point of truth
‣ Documentation
‣ Maintain consistency
‣ Save time
SOLUTION
![Page 55: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/55.jpg)
Static: use sample markup
Living Styleguides:
real code Styleguides: static vs dynamic
Dynamic: use real components
SOLUTION
![Page 56: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/56.jpg)
Living Styleguides:
real code Styleguides: living styleguidesSOLUTION
![Page 57: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/57.jpg)
Any changes to a component in the Styleguide,
should result in changes to Production.
Living Styleguides:
real code Styleguides: living styleguidesSOLUTION
![Page 58: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/58.jpg)
SOLUTION:
UI Library
![Page 59: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/59.jpg)
UI Library: elementsSOLUTION
![Page 60: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/60.jpg)
UI Library: example
currency
typography
icon
box
select
buttons
SOLUTION
![Page 61: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/61.jpg)
SOLUTION:
Structure Styleguide
![Page 62: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/62.jpg)
Structure Styleguides:
A Structure Styleguide is designed to document an
application’s UI logic in all of its possible permutations.
SOLUTION
![Page 63: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/63.jpg)
structure scenarios
components
Living Styleguides:
real code Structure Styleguides: anatomySOLUTION
![Page 64: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/64.jpg)
Living Styleguides:
real code Structure Styleguides: componentsSOLUTION
![Page 65: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/65.jpg)
11 scenarios 16 scenarios
9 scenarios 6 scenarios
Living Styleguides:
real code Structure Styleguides: scenariosSOLUTION
![Page 66: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/66.jpg)
Living Styleguides:
real code Structure Styleguides: pagesSOLUTION
![Page 67: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/67.jpg)
![Page 68: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/68.jpg)
Living Styleguides:
real code Structure Styleguides: tooling
‣ Custom solution
‣ Built inside the application
‣ Deploying styleguide … deploys production
‣ Started basic … layered features
SOLUTION
![Page 69: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/69.jpg)
SOLUTION:
Templates (not views)
![Page 70: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/70.jpg)
Templates: the problems with ‘views’
Data Model View
V
SOLUTION
![Page 71: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/71.jpg)
Templates: view model
Data Model View Model Template
{} T
SOLUTION
![Page 72: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/72.jpg)
Templates:
Sample data
View Model Template
{}Data Model T
SOLUTION
![Page 73: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/73.jpg)
SOLUTION:
View Models
![Page 74: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/74.jpg)
View Model: exampleSOLUTION
![Page 75: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/75.jpg)
<% if @signed_in_user.present? %>
<%= @user.username %>
<%= @user.balance.format %>
<%= @cart.entries_count %>
<% if @cart.entries_count == 0 %>
...
<% end %>
<% end %>
Templates:
without view-model View Model: without (view)SOLUTION
![Page 76: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/76.jpg)
<% if data.user_signed_in? %>
<%= data.username %>
<%= data.balance %>
<%= data.shopping_cart_count %>
<% if data.shopping_cart_empty? %>
...
<% end %>
<% end %>
Templates:
without view-model View Model: with (template)SOLUTION
![Page 77: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/77.jpg)
{
:user_signed_in?
:username
:balance
:shopping_cart_count
:shopping_cart_empty?
}
=> …
=> …
=> …
=> …
=> …
Templates:
without view-model View Model: definedSOLUTION
![Page 78: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/78.jpg)
{
:user_signed_in?
:username
:balance
:shopping_cart_count
:shopping_cart_empty?
}
=> true,
=> jordan-lewis,
=> $314,
=> 3,
=> false
Templates:
view-model (application)Templates:
without view-model View Model: styleguide implementationSOLUTION
![Page 79: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/79.jpg)
{
: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-model View Model: backend implementationSOLUTION
![Page 80: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/80.jpg)
IMPLEMENTATION
Styleguide Driven Development
![Page 81: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/81.jpg)
1. Define components & scenarios
2. Build - UI directly in styleguide - backend
3. Assemble the page/feature
Templates:
view-model (application)Templates:
without view-model SDD: the processIMPLEMENTATION
![Page 82: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/82.jpg)
STEP 1:
Define Components & Scenarios
![Page 83: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/83.jpg)
Templates:
view-model (application)Templates:
without view-model Define: what your buildingIMPLEMENTATION
![Page 84: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/84.jpg)
Templates:
view-model (application)Templates:
without view-model Define: components and scenariosIMPLEMENTATION
![Page 85: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/85.jpg)
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-model Define: components and scenarios
Order Summary
1. with tax
2. no tax
3. handling fee
4. single item
5. multiple item
IMPLEMENTATION
![Page 86: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/86.jpg)
STEP 2:
Build UI and Backend
![Page 87: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/87.jpg)
Templates:
view-model (application)Templates:
without view-model Build: separation of concerns
Frontend isn’t waiting on backend
Backend isn’t waiting on frontend
IMPLEMENTATION
![Page 88: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/88.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 89: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/89.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 90: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/90.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 91: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/91.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 92: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/92.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 93: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/93.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 94: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/94.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 95: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/95.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 96: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/96.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 97: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/97.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 98: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/98.jpg)
Templates:
view-model (application)Templates:
without view-model Build UI: scenariosIMPLEMENTATION
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
![Page 99: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/99.jpg)
Templates:
view-model (application)Templates:
without view-model Build backend: hook up the view modelIMPLEMENTATION
{
: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
![Page 100: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/100.jpg)
STEP 3:
Assemble page or feature
![Page 101: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/101.jpg)
Templates:
view-model (application)Templates:
without view-model Assemble: components to build a pageIMPLEMENTATION
![Page 102: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/102.jpg)
Templates:
view-model (application)Templates:
without view-model Assemble: finished productIMPLEMENTATION
![Page 103: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/103.jpg)
REVIEW
The benefits of Styleguide Driven Development
![Page 104: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/104.jpg)
Templates:
view-model (application)Templates:
without view-model Benefits: Separate UI and backendREVIEW
![Page 105: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/105.jpg)
Templates:
view-model (application)Templates:
without view-model Benefits: Iterate quicklyREVIEW
![Page 106: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/106.jpg)
Templates:
view-model (application)Templates:
without view-model Benefits: Identify any gapsREVIEW
![Page 107: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/107.jpg)
Templates:
view-model (application)Templates:
without view-model Benefits: Ship faster & more frequentlyREVIEW
![Page 108: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/108.jpg)
Templates:
view-model (application)Templates:
without view-model Benefits: Free documentationREVIEW
![Page 109: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/109.jpg)
market.styleguide.envato.com
![Page 110: Simplify your workflow with Styleguide Driven Development](https://reader030.vdocuments.net/reader030/viewer/2022032700/55d1be2dbb61eb16768b477a/html5/thumbnails/110.jpg)
Templates:
view-model (application)Templates:
without view-model What’s next?REVIEW
‣ extract reusable parts
‣ open source
‣ release UI library
‣ add more content
‣ visual regression testing