When building reusable React components keep empathy in mind. Especially when building things for your internal development teams!

2. Empathetic component design
Reusable UI components
Frank Linehan Senior Software Engineer

3. I’m Frank(ie)
Senior Software Engineer on Mobile APM
I like to build reusable patterns.

4. What is Empathy?
The action of understanding, being
aware of, being sensitive to, and
vicariously experiencing the feelings,
thoughts, and experience of another of
either the past or present without
having the feelings, thoughts, and
experience fully communicated in an
objectively explicit manner.

5. Empathy is not
Sympathy

6. Developer Experience

7. Why think about Developer Experience (DX)?
● DX is about how developers feel while using your API – it’s emotive.
● The Principle of Least Astonishment states that the result of performing some
operation should be obvious, consistent, and predictable, based upon the
name of the operation and other clues.

8. Design with developer empathy
What is the problem we’re trying to solve?
Who are we solving this problem for?
What exactly do we want the users of our API to feel?
What kind of experience are we trying to create and what kind of emotional
response are we aiming for?

9. A Empathetic API in practice
- with React
Make our users (hey that is us) feel good.

10. Make it easy to
understand

11. Self documenting
React proptypes are a great way to
self document a component.
By specifying what types of props a
component expects during
development. Engineers will know
what the component needs to function.

12. Make it easier to use

13. Make it Easier To Use: Worry about data
Concept of “Dumb” React components: are
composable, easy to configure, and not
opinionated on how they are used.
These “dumb” components might take data as a
prop or specify the API call the component
should make.
Management of fetching data is up to the owner
of the reusable component, she could use a API
package of generic API calls.
Separating the data calls from the “dumb”
component.

14. API Example

15. “dumb” components should have
enough state to be useful.
There should be some way to pass the
useful data up to the parent, letting the
parent know when the state has
changed.
Make it Easier To Use: A little state goes a long way

16. Make it feel good

17. Namespaces are your friends

18. Namespaces are your friends cont...

19. “Programs must be written for people to read, and only incidentally for machines to
execute.” – Hal Abelson, Structure and Interpretation of Computer Programs
“The best programs are written so that computing machines can perform them
quickly and so that human beings can understand them clearly. A programmer is
ideally an essayist who works with traditional aesthetic and literary forms as well
as mathematical concepts, to communicate the way that an algorithm works and
to convince a reader that the results will be correct.” – Donald E. Knuth, Selected
Papers on Computer Science

21. Why do this?
You will better understand the needs of your
customers at work.