Beyond the WAT
Why Component Design Still Matters
Becca Nelson • @beccaliz • becca.is
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
👩💻 The Mom Project
🏡 Chicago, IL USA
About Me
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6337310/lucy.png)
💜
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
component design
a11y
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
As I started working on the front-end more and more, there was this subtle attitude shift.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6269253/IMG_0020.png)
Have you ever tried using the builder pattern?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6273115/AF4DE014-05F5-45C2-9990-8CA9E8C75150.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6265376/image-115.png)
Great job working on the frontend! I think you should develop your skills more so you can be a strong contributor on the backend too!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6275940/mockup-419a3ad3_400x400_crop_center.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6273115/AF4DE014-05F5-45C2-9990-8CA9E8C75150.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6269254/IMG_0021.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6261860/ku1neu504sh01.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6261863/frontend-vs-backend.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6261868/iu.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6261871/iu-3.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Backend development is “hard and scary” while frontend development is just the pretty interface on top.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6261860/ku1neu504sh01.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6273149/Paper.Sketches.9.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
JavaScript has been a pretty historically unruly language.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
> [] + []
""
> [] + {}
"[object Object]"
> {} + []
0
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6269317/Browserify.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6269324/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757854/Angular_full_color_logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757858/webpack-tuts.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757859/6320506.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757860/typescriptlang.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757861/logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757863/iruTC031_400x400.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757865/babel.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757866/1200px-React-icon.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757871/backbone-js.sh-600x600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757877/0_g3ns8QALNBBH7CBA.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757881/avatar.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757884/zfY6lL7eFa-3000x3000.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757886/1200px-Node.js_logo.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757888/logo__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757890/enzyme-logo-mobile.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/4757891/download.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
It’s no longer just a necessary evil for building pretty UIs that we can pawn off on our junior engineers.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Component Design
What it looks like
Why it matters
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Framework-specific design patterns
Overarching guiding principles
Framework-specific design patterns
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
As JavaScript engineers in 2019, what does it mean to design good components?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
1. Accessibility
2. Scalability
3. Single Reponsibility
4. Testability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Accessibility
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
⚠️ Disclaimer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Semantic HTML
-
Using the most appropriate HTML tags for your content
-
Using HTML in a way that a user could navigate and understand the hierarchy of your site by using HTML alone.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Heading tags
Should be used in order
Should not be used to re-size content
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
<h1>Most important!</h1>
<h2>Second most important!</h2>
<h3>Third most important!</h3>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Most important!
Second most important!
Third most important!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
<div className="content">
<button onClick={() => doSomething()}>
Click me!
</button>
<a href="/my/route">Go home</a>
</div>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
<div onClick={() => doSomething()}>
// Content
</div>
❌
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
<i className="icon-email" title="Email me!"/>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
-
Keyboard navigation
-
Color contrast
-
Font size / scaling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
a11y Linter
Auditing Tools
http://a11yproject.com/resources
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Scalability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6337160/IMG_0027.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6347461/Screen_Shot_2019-07-10_at_4.44.41_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6269413/giphy__1_.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
No matter whether you are using dynamic or static types, no matter whether you are writing for the web or for the server...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Scalability is hard.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Because of people.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Bigger products = bigger teams.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
With bigger teams, the more we need to be explicit about the choices we are making and why we are making them.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6347504/iu-4.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Single Responsibility
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
What does it mean for a component to be single responsibility?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
It does only one thing.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6273159/3C2E6DBD-BCFF-4793-AB7C-8BC663244553.png)
<div className="card">
<div className="card__header">
<img className="card__image" src="/image"/>
Some header content
</div>
<div className="card__body">
Some body content
</div>
<button
className="card__toggle"
onClick={() => toggle()}
/>
</Card>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Single responsibility = testability & reusability
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
We can use naming to make it explicit that certain components belong together.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
<Card>
<CardHeader>
<CardImage src="/image"/>
Some header content
</CardHeader>
<CardBody>
Some body content
</CardBody>
</Card>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
<Card>
<Card.Header>
<Card.Image src="/image"/>
Some header content
</Card.Header>
<Card.Body>
Some body content
</Card.Body>
</Card>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6337318/Cubit-Modular-Shelving-System-Rainbow-Configuration.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Testability
class UserProfile extends React.Component {
state = {
profile: undefined
};
componentDidMount() {
fetch("/my/profile").then(response => {
this.setState({
profile: response.json()
});
});
}
render() {
if (this.state.profile) {
return (
<div className="user-profile">
<div>Name: {this.state.profile.name}</div>
<div>Email: {this.state.profile.email}</div>
</div>
);
}
}
}
global.fetch.mockImplementation(() => {
return new Promise(resolve => {
resolve({
ok: true,
json: () => {
return {
name: "Jane Smith",
email: "jane@example.com"
}
}
});
});
});
class UserProfile extends React.Component {
state = {
profile: undefined,
completed: false,
};
componentDidMount() {
...
}
render() {
if (!this.state.completed) {
return (
<a href="/profile/edit">Complete your profile!</a>
)
}
else if (this.state.profile) {
return (
<div className="user-profile">
<div>Name: {this.state.profile.name}</div>
<div>Email: {this.state.profile.email}</div>
</div>
);
}
}
}
class UserProfile extends React.Component {
state = {
profile: undefined,
completed: false,
};
componentDidMount() {
...
}
render() {
if (!this.state.completed) {
return (
<a href="/profile/edit">Complete your profile!</a>
)
}
else if (this.state.profile) {
return (
<div className="user-profile">
<div>Name: {this.state.profile.name}</div>
<div>Email: {this.state.profile.email}</div>
</div>
);
}
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6337182/iu-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Displaying Information
Interacting with outside world
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Another note on testing...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Testing is a core tenet of good component design.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Our tests can be living documentation of our components and how they are intended to work.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Why does this matter?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/6337200/IMG_0022.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
🤩 🥳 👏 💯
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Put yourselves in the shoes of a user, or a new teammate, or even yourself a year from now.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
What are the things that would help you to understand what is going on?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
What are the things that would help you to feel empowered to contribute without re-inventing the wheel or breaking existing functionality?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/451251/images/3598328/twitter.png)
beccaliz
Thank you!!
Beyond the WAT: Why Component Design Still Matters
By Becca Nelson
Beyond the WAT: Why Component Design Still Matters
n the tech community, sometimes JavaScript gets a bad rap. From its type inconsistencies to its 90’s-era syntax to its status as a “less important” programming language, JavaScript is sometimes seen as a necessary evil that should be avoided whenever possible. But as components become more complicated and accessible user interfaces become a bare minimum requirement, the work we do with this language is more important than ever. Let’s talk about good component design—what it looks like and why it matters.
- 1,201