1 Fun and Profit Systems and Component Libraries for Wait ...
Transcript of 1 Fun and Profit Systems and Component Libraries for Wait ...
![Page 1: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/1.jpg)
1
Wait, We Can Re-use this? Design Systems and Component Libraries for
Fun and Profit
CMS Philly
May 1, 2020
![Page 2: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/2.jpg)
2
About me
when I started...
https://www.flickr.com/photos/31206276@N07/albums/72157607864494439
Zivtech Opening Party, 2008
Mt. Airy Meetup, 2008
![Page 3: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/3.jpg)
3
now...
![Page 4: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/4.jpg)
4
Promet Fast Facts
● Founded in 2004
● HQ in Chicago - distributed team
● Full service web design and development agency
● Specializes in Drupal, Wordpress, and open source
● Clients span government at all levels, nonprofits and
associations, Fortune 500 corporations, and start-ups.
● Hundreds of site launches
● Frequent sponsor and presenter
![Page 5: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/5.jpg)
5
Government Clients
![Page 6: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/6.jpg)
6
Why Are We Here?
We want to…
● Reuse more items across projects
● Improve tooling for reuse
● Use design system for clients
● Build a component library
Deliver projects faster…
![Page 7: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/7.jpg)
7
Why Are We Here?
![Page 8: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/8.jpg)
8
● Coders and non-coders alike
● New(ish) to component libraries
● Foster examples
● Drupal mostly but Wordpress too
Audience
![Page 9: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/9.jpg)
9
Nouns
● Design System
● Component Library
● Emuslify
● Drupal blocks
● Drupal layout builder
![Page 10: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/10.jpg)
10
A design system is a collection of reusable components, guided by clear
standards, that can be assembled together to build any number of
applications.
Design System
https://www.invisionapp.com/inside-design/guide-to-design-systems/
component style guide methodology vision or context library + ++
![Page 11: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/11.jpg)
11
● Source of truth
● Common language
○ What is this thing called?
● Documentation
Design System
![Page 12: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/12.jpg)
12
Atomic Design
● Methodology for creating design systems
● http://atomicdesign.bradfrost.com/
![Page 13: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/13.jpg)
13
Atomic Design
atoms molecules
organisms
![Page 14: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/14.jpg)
14
Component Library
● The place you store your components
● Think of it as a happy place● Living toolbox● Many out there:
http://styleguides.io/tools.html
https://github.com/aleksip/component-based-theming
Lovett Library, Philadelphia
![Page 15: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/15.jpg)
15
Storybook.js
![Page 16: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/16.jpg)
16
● Component Library “setup”
● Component Library tool (storybook)
https://emulsify.info/
Emulsify
![Page 17: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/17.jpg)
17
Emulsify
● Component Library “setup”
+
![Page 18: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/18.jpg)
18
Emulsify
● Component Library “setup”
+
![Page 19: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/19.jpg)
19
The Story
● Largish distributed team○ 50+ people
● Similar clients○ counties, universities
● Similar designs● Similar components
○ Banners, groups of images etc
The heroes
![Page 20: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/20.jpg)
20
● A fresh start● A new path● A new style guide● A new set of
○ Menus○ Blocks○ Hero slide carousel thingee○ Grid of images
New Client
![Page 21: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/21.jpg)
21
● A fresh start● A new path● A new style guide● A new set of
○ Menus○ Blocks○ Hero slide carousel thingee○ Grid of images
New Client
![Page 22: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/22.jpg)
22
22
New Client
Can’t you just use what we did last time?
![Page 23: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/23.jpg)
23
Why can’t we reuse that?
![Page 24: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/24.jpg)
24
Carousel Component
![Page 25: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/25.jpg)
25
CSS:
/scss/partials/_paragraphs.scss
template:
/templates/field/field--paragraph--field-multiple-carousel-items--multiple-display-carousel.html.twig
javascript:
/js/theme.js
Carousel Component
![Page 26: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/26.jpg)
26
Drupal Strategies for Reuse
● Modules
● Theme Layer
○ Templates, JS, CSS
● Data Model
○ Content types, entities
● Configuration
![Page 27: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/27.jpg)
27
Drupal Modules
● Some useful ones for “components”
○ Views Slideshow
○ bootstrap simple carousel
● Each one does something different
● Not always flexible
![Page 28: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/28.jpg)
28
Drupal Themes
● Often a direct representation of Drupal internal data structures○ Hard to reuse if the data model changes
● Often locked into specific methodology○ Bootstrap vs Foundation○ Radix vs Zen○ Do you just keep the same base theme forever?
![Page 29: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/29.jpg)
29
Drupal Data Model and Config
● This is the actual stuff we want to change!
● Difficult to reuse● Needs a different strategy
Drupal config on enterprise site
![Page 30: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/30.jpg)
30
Client Overlap
Components Content typesIntegrationsFunctionality
Content typesIntegrationsFunctionality
Client A Client B
![Page 31: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/31.jpg)
31
Let’s Use Components
Front-endDev community
Drupal components community
![Page 32: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/32.jpg)
32
What Does that Look Like?
All of the stuff and things are in one place:
![Page 33: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/33.jpg)
33
What Does that Look Like?
In Drupal you are just embedding:
![Page 34: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/34.jpg)
34
What Does that Look Like?
Live preview in Storybook.js:
![Page 35: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/35.jpg)
35
The New Workflow
Designers design:
![Page 36: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/36.jpg)
36
The New Workflow
Front-end dev creates components:
atoms
molecules
organisms
![Page 37: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/37.jpg)
37
QA Right Away
Accessibility and other QA outside of CMS:
![Page 38: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/38.jpg)
38
Accessibility and other QA outside of CMS:
FRONT END DEVS DON’T HAVE TO TOUCH DRUPAL
![Page 39: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/39.jpg)
39
Add to Drupal / Wordpress Templates
Requires in-depth knowledge of Drupal.
We are getting better at this.
![Page 40: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/40.jpg)
40
The Drupal End
Want a more flexible way of implementing components
Not tied to the name of the component
Flexible data source
Flexible number and other options
want to avoid this
![Page 41: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/41.jpg)
41
“Flexible” Blocks
“Card” blocks
![Page 42: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/42.jpg)
42
“Flexible” Blocks
“Group” blocks
![Page 43: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/43.jpg)
43
“Flexible” Layouts
Combine with Layout Builder
![Page 44: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/44.jpg)
44
Challenges
● Naming things is hard
● What is this?○ Carousel?
■ JS Library?○ 3 card?○ Block? Paragraph?
It’s a Gryffindor lol
![Page 45: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/45.jpg)
45
Challenges
● Things in Storybook are not “exactly” the same as CMS○ Card widths and javascript myths
● Learning curve for Storybook.js
● Learning curve for templating components● Weird velocity
Components for your project
Please wait while we figure out how many sprints we have left
![Page 46: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/46.jpg)
46
Challenges
● “Globals”● Not everything “fits”
○ It is OK to cheat● User Interface
○ Naming things again○ State of Layout Builder
● Multiple teams○ Are we working on the same
thing?
![Page 47: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/47.jpg)
47
Recommended
● Design “champion”
○ Create similar components
across projects
● Dev “champion”
○ Owns component library
tooling
● Similarity across projects
![Page 48: 1 Fun and Profit Systems and Component Libraries for Wait ...](https://reader036.fdocuments.net/reader036/viewer/2022081410/6298c3ac16295b589a689646/html5/thumbnails/48.jpg)
48
Next Steps
● More examples of templating in Drupal
● More use cases
● Sharing reusable blocks
● Distribution or example site