Component Driven Development - DrupalCamp London 2017
30
Component driven frontend development DrupalCamp London 2017 John Ennew @deesonlabs
-
Upload
john-ennew -
Category
Software
-
view
197 -
download
4
Transcript of Component Driven Development - DrupalCamp London 2017
Component driven frontend developmentDrupalCamp London 2017
John Ennew
@deesonlabs
1. What is Component Driven Development2. Fitting this into a Drupal workflow3. Tools and approach
@deesonlabs
Pages
@deesonlabs
We’re not designing pages we’re designing a system of components
- Stephen Hay
@deesonlabs
To Components
@deesonlabs
Header
Footer
Content listing
@deesonlabs
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
Button
InfoPanel
InfoPanelListing
Fitting this into an application development workflow
@deesonlabs
@deesonlabs
UX
Design
Time
PSD
Wireframes
Application Development
@deesonlabs
UX
Design
Frontend
Application Development
Time
PSD
HTML / CSS Styleguide
Wireframes
UX
Time
@deesonlabs
Design
Frontend
Application Development
Wireframes
@deesonlabs
@deesonlabs
Pattern library
Wireframe Pattern Definition Page
Title
Fields
Title - StringDate - StringImage upload - image
Pattern library
Definition Page Task Tickets
Title
Fields
Title - StringDate - StringImage upload - image
Image dimensions
Ticket numberTicket summaryTicket descriptor
Definition Page
Title
Fields
Title - ArrayDate - StringImage - Base64
Evolving Solution
Drupal integration
HTML CSS
JS Img
Twig CSS
JS Img
Static Styleguide Drupal theme
HTML CSS
JS Img
Living Styleguides
@deesonlabs
Tools and approach
@deesonlabs
@deesonlabs
Separation of concerns
@deesonlabs
Separation of concerns
@deesonlabs
Small component (Atom)
button.html.twig
@deesonlabs
Composite component (Molecule)
@deesonlabs
Composite component (Organism)
Use in Drupal
@deesonlabs
Our compilation tooling
@deesonlabs
In Conclusion
@deesonlabs
• Decouple UI elements from application development
• Use component design process to focus on reducing complexity and increasing reusability
• Move away from a waterfall design process
Thank you
@deesonlabs
@deesonlabs
Atomic Design by Brad Frost—An Event Apart videohttps://vimeo.com/179245570
http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
A Maintainable Styleguide - Lonely Planet
