SlideShare a Scribd company logo
Empathetic component design
Reusable UI components
Frank Linehan Senior Software Engineer
I’m Frank(ie)
Senior Software Engineer on Mobile APM
I like to build reusable patterns.
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.
Empathy is not
Sympathy
Developer Experience
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.
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?
A Empathetic API in practice
- with React
Make our users (hey that is us) feel good.
Make it easy to
understand
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.
Make it easier to use
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.
API Example
“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
Make it feel good
Namespaces are your friends
Namespaces are your friends cont...
“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
Why do this?
You will better understand the needs of your
customers at work.

More Related Content

What's hot

Artificially Intelligent chatbot Implementation
Artificially Intelligent chatbot ImplementationArtificially Intelligent chatbot Implementation
Artificially Intelligent chatbot Implementation
Rakesh Chintha
 
Dialogflow
DialogflowDialogflow
Dialogflow
Luca Maiano
 
How do Chatbots Work? A Guide to Chatbot Architecture
How do Chatbots Work? A Guide to Chatbot ArchitectureHow do Chatbots Work? A Guide to Chatbot Architecture
How do Chatbots Work? A Guide to Chatbot Architecture
Maruti Techlabs
 
Aaron laverypro1presentation
Aaron laverypro1presentationAaron laverypro1presentation
Aaron laverypro1presentation
AaronLavery
 
Usability in ABAP Programs - SITSP2011
Usability in ABAP Programs - SITSP2011Usability in ABAP Programs - SITSP2011
Usability in ABAP Programs - SITSP2011
Mauricio Cruz
 
Chatbot
ChatbotChatbot
Chatbot
Kamini Bharti
 
Machine learning helps face recognition march 2020
Machine learning helps face recognition march 2020Machine learning helps face recognition march 2020
Machine learning helps face recognition march 2020
iMOBDEV Technologies Pvt. Ltd.
 
Rajkumar
RajkumarRajkumar
Rajkumar
Rajkumar R
 
Cognitive Services APIs [Mihai Negrea]
Cognitive Services APIs [Mihai Negrea]Cognitive Services APIs [Mihai Negrea]
Cognitive Services APIs [Mihai Negrea]
ITCamp
 
Aparna Updated resume
Aparna Updated resumeAparna Updated resume
Aparna Updated resume
Aparna Vecham
 
Watson Conversation Services and Virtual Assistant - Basic Summary
Watson Conversation Services and Virtual Assistant - Basic SummaryWatson Conversation Services and Virtual Assistant - Basic Summary
Watson Conversation Services and Virtual Assistant - Basic Summary
Ganesh Ghag
 
Chatbot and Virtual AI Assistant Implementation in Natural Language Processing
Chatbot and Virtual AI Assistant Implementation in Natural Language Processing Chatbot and Virtual AI Assistant Implementation in Natural Language Processing
Chatbot and Virtual AI Assistant Implementation in Natural Language Processing
Shrutika Oswal
 

What's hot (12)

Artificially Intelligent chatbot Implementation
Artificially Intelligent chatbot ImplementationArtificially Intelligent chatbot Implementation
Artificially Intelligent chatbot Implementation
 
Dialogflow
DialogflowDialogflow
Dialogflow
 
How do Chatbots Work? A Guide to Chatbot Architecture
How do Chatbots Work? A Guide to Chatbot ArchitectureHow do Chatbots Work? A Guide to Chatbot Architecture
How do Chatbots Work? A Guide to Chatbot Architecture
 
Aaron laverypro1presentation
Aaron laverypro1presentationAaron laverypro1presentation
Aaron laverypro1presentation
 
Usability in ABAP Programs - SITSP2011
Usability in ABAP Programs - SITSP2011Usability in ABAP Programs - SITSP2011
Usability in ABAP Programs - SITSP2011
 
Chatbot
ChatbotChatbot
Chatbot
 
Machine learning helps face recognition march 2020
Machine learning helps face recognition march 2020Machine learning helps face recognition march 2020
Machine learning helps face recognition march 2020
 
Rajkumar
RajkumarRajkumar
Rajkumar
 
Cognitive Services APIs [Mihai Negrea]
Cognitive Services APIs [Mihai Negrea]Cognitive Services APIs [Mihai Negrea]
Cognitive Services APIs [Mihai Negrea]
 
Aparna Updated resume
Aparna Updated resumeAparna Updated resume
Aparna Updated resume
 
Watson Conversation Services and Virtual Assistant - Basic Summary
Watson Conversation Services and Virtual Assistant - Basic SummaryWatson Conversation Services and Virtual Assistant - Basic Summary
Watson Conversation Services and Virtual Assistant - Basic Summary
 
Chatbot and Virtual AI Assistant Implementation in Natural Language Processing
Chatbot and Virtual AI Assistant Implementation in Natural Language Processing Chatbot and Virtual AI Assistant Implementation in Natural Language Processing
Chatbot and Virtual AI Assistant Implementation in Natural Language Processing
 

Similar to Empathetic component design

Introduction To Domain Driven Design
Introduction To Domain Driven DesignIntroduction To Domain Driven Design
Introduction To Domain Driven Design
Paul Rayner
 
Hci 3
Hci 3Hci 3
How to Embed UX Thinking in Your Next API
How to Embed UX Thinking in Your Next APIHow to Embed UX Thinking in Your Next API
How to Embed UX Thinking in Your Next API
Pronovix
 
Agent Oriented Programming PPT
Agent Oriented Programming PPTAgent Oriented Programming PPT
Agent Oriented Programming PPT
OECLIB Odisha Electronics Control Library
 
ITFT - Software
ITFT -  SoftwareITFT -  Software
ITFT - Software
Shruti Kunwar
 
Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...
Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...
Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...
Keerthi Mindnotix
 
Interface design
Interface designInterface design
Interface design
Jahan Zaib Afzal
 
Abap for functional consultants
Abap for functional consultantsAbap for functional consultants
Abap for functional consultants
Mohammad Mousavi
 
A holistic guide to annotated wireframes for app development
A holistic guide to annotated wireframes for app developmentA holistic guide to annotated wireframes for app development
A holistic guide to annotated wireframes for app development
Concetto Labs
 
Bagels & Bytes: Data Scientist Event
Bagels & Bytes: Data Scientist EventBagels & Bytes: Data Scientist Event
Bagels & Bytes: Data Scientist Event
Amazon Web Services
 
User Experience Distilled
User Experience DistilledUser Experience Distilled
User Experience Distilled
Hindu Dharma
 
Software design.edited (1)
Software design.edited (1)Software design.edited (1)
Software design.edited (1)
FarjanaAhmed3
 
Machine Learning in the AWS Cloud
Machine Learning in the AWS CloudMachine Learning in the AWS Cloud
Machine Learning in the AWS Cloud
MeetupDataScienceRoma
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
Sarah Dutkiewicz
 
Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...
Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...
Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...
CA API Management
 
Want to integrate your business phone system or contact center with your CRM?
Want to integrate your business phone system or contact center with your CRM?Want to integrate your business phone system or contact center with your CRM?
Want to integrate your business phone system or contact center with your CRM?
Coreyskute Turner
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
Jigyasa Makkar
 
Role of an Architect in Software Usability Engineering
Role of an Architect in Software Usability EngineeringRole of an Architect in Software Usability Engineering
Role of an Architect in Software Usability Engineering
thinakes
 
SlideShare Test-1
SlideShare Test-1SlideShare Test-1
SlideShare Test-1
Michael Maverick
 
Api best practices
Api best practicesApi best practices
Api best practices
Saravanan R.S
 

Similar to Empathetic component design (20)

Introduction To Domain Driven Design
Introduction To Domain Driven DesignIntroduction To Domain Driven Design
Introduction To Domain Driven Design
 
Hci 3
Hci 3Hci 3
Hci 3
 
How to Embed UX Thinking in Your Next API
How to Embed UX Thinking in Your Next APIHow to Embed UX Thinking in Your Next API
How to Embed UX Thinking in Your Next API
 
Agent Oriented Programming PPT
Agent Oriented Programming PPTAgent Oriented Programming PPT
Agent Oriented Programming PPT
 
ITFT - Software
ITFT -  SoftwareITFT -  Software
ITFT - Software
 
Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...
Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...
Feeling Overwhelmed by the App Development Process_ Let a Service Provider Be...
 
Interface design
Interface designInterface design
Interface design
 
Abap for functional consultants
Abap for functional consultantsAbap for functional consultants
Abap for functional consultants
 
A holistic guide to annotated wireframes for app development
A holistic guide to annotated wireframes for app developmentA holistic guide to annotated wireframes for app development
A holistic guide to annotated wireframes for app development
 
Bagels & Bytes: Data Scientist Event
Bagels & Bytes: Data Scientist EventBagels & Bytes: Data Scientist Event
Bagels & Bytes: Data Scientist Event
 
User Experience Distilled
User Experience DistilledUser Experience Distilled
User Experience Distilled
 
Software design.edited (1)
Software design.edited (1)Software design.edited (1)
Software design.edited (1)
 
Machine Learning in the AWS Cloud
Machine Learning in the AWS CloudMachine Learning in the AWS Cloud
Machine Learning in the AWS Cloud
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...
Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...
Developers are People Too! Building a DX-Based API Strategy Ronnie Mitra, Pri...
 
Want to integrate your business phone system or contact center with your CRM?
Want to integrate your business phone system or contact center with your CRM?Want to integrate your business phone system or contact center with your CRM?
Want to integrate your business phone system or contact center with your CRM?
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
Role of an Architect in Software Usability Engineering
Role of an Architect in Software Usability EngineeringRole of an Architect in Software Usability Engineering
Role of an Architect in Software Usability Engineering
 
SlideShare Test-1
SlideShare Test-1SlideShare Test-1
SlideShare Test-1
 
Api best practices
Api best practicesApi best practices
Api best practices
 

More from Frank Linehan

Composition vs inheritance
Composition vs inheritanceComposition vs inheritance
Composition vs inheritance
Frank Linehan
 
Anti patterns in the wild
Anti patterns in the wildAnti patterns in the wild
Anti patterns in the wild
Frank Linehan
 
How mobile APM UI manages state at New Relic
How mobile APM UI manages state at New RelicHow mobile APM UI manages state at New Relic
How mobile APM UI manages state at New Relic
Frank Linehan
 
Future of ui be micro
Future of ui be micro Future of ui be micro
Future of ui be micro
Frank Linehan
 
Angular pres
Angular presAngular pres
Angular pres
Frank Linehan
 
Jwt
JwtJwt
AngularU Recap
AngularU RecapAngularU Recap
AngularU Recap
Frank Linehan
 

More from Frank Linehan (7)

Composition vs inheritance
Composition vs inheritanceComposition vs inheritance
Composition vs inheritance
 
Anti patterns in the wild
Anti patterns in the wildAnti patterns in the wild
Anti patterns in the wild
 
How mobile APM UI manages state at New Relic
How mobile APM UI manages state at New RelicHow mobile APM UI manages state at New Relic
How mobile APM UI manages state at New Relic
 
Future of ui be micro
Future of ui be micro Future of ui be micro
Future of ui be micro
 
Angular pres
Angular presAngular pres
Angular pres
 
Jwt
JwtJwt
Jwt
 
AngularU Recap
AngularU RecapAngularU Recap
AngularU Recap
 

Recently uploaded

Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
Intelisync
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Operating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptxOperating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptx
Pravash Chandra Das
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 

Recently uploaded (20)

Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Operating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptxOperating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptx
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 

Empathetic component design

  • 1.
  • 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.
  • 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.
  • 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
  • 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
  • 20.
  • 21. Why do this? You will better understand the needs of your customers at work.