How to onCommunicate isClearly() ?!

A presentation at Ember.js Europe Q2 in June 2022 in Frankfurt, Germany by Thomas Gossmann

Slide 1

Slide 1

How to onCommunicate isClearly() ?! Thomas ‘gossi’ Gossmann

Slide 2

Slide 2

GOAL Improve communication within an interdisciplinary team WHERE I will shake and disrupt your naming skills WHY Trigger different ways of thinking for new vocabulary

Slide 3

Slide 3

  1. Why we are not onCommunicating isClearly() ! 2. How to onDetect to isNotCommunicatingClearly() ? 3. How to communicate clearly :)

Slide 4

Slide 4

Part I Why we are not onCommunicating isClearly() !

Slide 5

Slide 5

Why we are NOT onCommunicating isClearly() ! Bold Statement: - onPurpose onIntentionally inFullAwareness => Because of theLanguage we onUse

Slide 6

Slide 6

Developers speak … dev-lish - Dialects: - CRUDlish RESTlish FrontendLish BackendLish

Slide 7

Slide 7

Developers speak … dev-lish - Dialects: - CRUDlish RESTlish FrontendLish backend_lish

Slide 8

Slide 8

Example: A Developer in a Restaurant… “Hey <FoodOrderAndDeliveryProvider>, here is my onOrder handler and whenever you think I am isReady, please call it”

Slide 9

Slide 9

Nouns vs. Verbs we eat nouns we buy nouns from the store we sit on nouns we sleep on nouns Nouns Verbs boring - just things static interesting dynamic Yegge, S. (2006)

Slide 10

Slide 10

Developers and English Language (Verbs, Nouns, …) - Not all of us are native english speakers Technical language has a very high gravity on our words (CRUD, REST, click) The two hardest problems in computer science: 0. 1. Cache invalidation → We’ll receive education to solve the hardest algorithms Naming things → Who had a linguistic course?

Slide 11

Slide 11

Part II How to onDetect to isNotCommunicatingClearly() ?

Slide 12

Slide 12

Methods for Detection 1. 2. 3. The Sound of Code Find the Imposter Do you speak Domain Language? → The Trap we Built

Slide 13

Slide 13

Method 1: The sound of code? Sonofication of Code - Does the code tell a story? Is the story the same of the business/domain? Does the code sound wrong?

Slide 14

Slide 14

Method 1: The sound of code? interface ThingArgs { thing: { isOn: boolean; 1. onClick: () => void; // will set isOn to true Underline self-named words }; } export class ThingComponent extends Component<ThingArgs> { @action onClick(): void { this.args.thing.onClick(); } static template = hbs<Icon @icon={{this.thing.isOn}} /> <Button @onClick={{this.onClick}}> on </Button>; }

Slide 15

Slide 15

Method 1: The sound of code? interface ThingArgs { thing: { isOn: boolean; 1. Underline self-named words Thing onClick isOn onClick: () => void; // will set isOn to true }; } export class ThingComponent extends Component<ThingArgs> { @action onClick(): void { this.args.thing.onClick(); } static template = hbs<Icon @icon={{this.thing.isOn}} /> <Button @onClick={{this.onClick}}> on </Button>; }

Slide 16

Slide 16

Method 1: The sound of code? interface ThingArgs { thing: { isOn: boolean; 1. 2. Underline self-named words Thing onClick isOn Connect the words in code execution order to tell a story: onClick: () => void; // will set isOn to true }; } export class ThingComponent extends Component<ThingArgs> { @action onClick(): void { this.args.thing.onClick(); } static template = hbsonClick the button to onClick the thing to be isOn <Icon @icon={{this.thing.isOn}} /> <Button @onClick={{this.onClick}}> on </Button>; }

Slide 17

Slide 17

Method 1: The sound of code? interface ThingArgs { thing: { isOn: boolean; 1. 2. Underline self-named words Thing onClick isOn Connect the words in code execution order to tell a story: onClick: () => void; // will set isOn to true }; } export class ThingComponent extends Component<ThingArgs> { @action onClick(): void { this.args.thing.onClick(); } static template = hbsonClick the button to onClick the thing to be isOn <Icon @icon={{this.thing.isOn}} /> <Button @onClick={{this.onClick}}> on 3. Find the Action: </Button>; }

Slide 18

Slide 18

Method 1: The sound of code? 3. The Action: <Button @onClick={{this.onClick}}>

Slide 19

Slide 19

Method 1: The sound of code? 3. The Action: <Button @onClick={{this.onClick}}> 4. Reverse Engineer code into User Story: As a… User I want to… onClick a button So that… I can onClick

Slide 20

Slide 20

Method 2: Find the Imposter

Slide 21

Slide 21

Verbs… - Are the actions/instructions into a system Are questions to ask for facts about the system Commands Queries requestNounTermination() sellNoun() purchaseNoun() whichNounMethod() isNounAvailable() canPurchase(noun) = Command-Query-Separation (C-Q-S)

Slide 22

Slide 22

Method 2: Find the Imposter interface ThingArgs { thing: { isOn: boolean; ● ● Are your actions … commanding? Are your questions…. asked? onClick: () => void; // will set isOn to true }; } export class ThingComponent extends Component<ThingArgs> { Thing onClick isOn @action ✅ ❌ ❌ onClick(): void { this.args.thing.onClick(); } static template = hbs<Icon @icon={{this.thing.isOn}} /> <Button @onClick={{this.onClick}}> on </Button>; }

Slide 23

Slide 23

Are your Actions … commanding? onClick the button to onClick the thing to be isOn - Turn code into prose Actions are the verbs in your sentence Grammar: Subject verb object.

Slide 24

Slide 24

Are your Actions … commanding? class Customer { payWithCreditCard(thing) { // pay here } }

Sound: Customers pays (for) a thing. As Question: Can a customer pay (for) a thing?

Slide 25

Slide 25

Are your Actions … commanding? class Customer { onPayWithCreditCard(thing) { // pay here } }

Sound: Customers on (for) a thing. As Question: Can a customer on (for) a thing? onVerbNoun … wants to be command, “does” on ! THIS SENTENCE NO VERB !

Slide 26

Slide 26

Are your Questions … asked? if (hasPotatoes) { // what is true here? }

Slide 27

Slide 27

“When you go to the supermarket, can you bring 5 eggs and if they have potatoes can you bring 10?” Jack. 32. A 10eggs developer

Slide 28

Slide 28

Are your Questions … asked? let eggs = 5; if (hasPotatoes) { eggs = 10 } Question known: hasPotatoes Question asked: hasPotatoes()

Slide 29

Slide 29

Verbs vs. Facts - The answer of a question is a fact about the system Facts are for conditions const potatoesAvailable = hasPotatoes(); if (potatoesAvailable) { }

Slide 30

Slide 30

Computed Facts class Supermarket { get potatoesAvailable() { return this.potatoes.length > 0; } }

Slide 31

Slide 31

Imposter Facts or Questions? class Supermarket { get hasPotatoes() { return this.potatoes.length > 0; } } get verbNoun() … wants to be a fact, masked as a question … wants to be a question, masked as a fact

Slide 32

Slide 32

Where is this coming from? Do we transport the <element onclick=””> into dev-lish? Hungarian Notation? - bNoun fnVerb The Hungarian Notation of Frontend? → → isNoun, hasNoun onVerb

Slide 33

Slide 33

Method 3: Do you Speak Domain Language? - How we use our favorite verbs? What stories do we tell?

Slide 34

Slide 34

Method 3: Do you Speak Domain Language? CRUD CREATE READ UPDATE DELETE “You can’t tell a bedtime story with only the verbs create, read, update and delete” (Golo Roden) Roden, G. (2022a)

Slide 35

Slide 35

Once upon a time, there was a king and queen who wished themselves a daughter. Their wish came true and a princess was created. One day, that princess updated her location to the big dark forest and retrieved there is a big grey wolf. In an assault the big grey wolf updated the isDeleted flag of the princess to true. King and queen updated their profileStatus to sad. The king also updated the hunters location to the big dark forest and the task to delete the big grey wolf. The brave hunter deleted the big grey wolf and updated the isDeleted flag of the princess to false. And if they haven’t been deleted, they lived happily ever after…

Slide 36

Slide 36

Method 3: Do you Speak Domain Language? REST POST GET PUT/PATCH DELETE

Slide 37

Slide 37

Method 3: Do you Speak Domain Language? Frontend click mouseDown touchStart …

Slide 38

Slide 38

Developers: Our verbs… CREATE READ UPDATE DELETE POST GET PUT/PATCH DELETE click mouseDown touchStart … → Technical Language Which feature is this? click → POST → CREATE

Slide 39

Slide 39

The Trap we Built… - Trap: -

The sound we onCreate The imposters we onAccept The technical language we onUse Discussion: - Shall sound more “natural” Faster Focus the uninteresting parts Avoids thinking We think in the grammar of the programming language (Sometimes) prevent us from thinking in facts, questions and actions

Slide 40

Slide 40

Part III How to communicate clearly :)

Slide 41

Slide 41

Use English Translate from Technical to Domain Language Becoming a Product-Minded Software Engineer

Slide 42

Slide 42

Use English: Asking Questions vs. Checking Facts if (hasPotatoes) { ❌ ✅ } if (hasPotatoes()) { } if (potatoesAvailable) { ✅ }

Slide 43

Slide 43

Use English: Computed Facts ❌ class Supermarket { get hasPotatoes() { return this.potatoes.length > 0; } } ✅ class Supermarket { get potatoesAvailable() { return this.potatoes.length > 0; } }

Slide 44

Slide 44

Use English: Ask your Questions {{! with octane }} // with polaris {{#if (can “buy potatoes”)}} import { canBuyPotatoes } ‘supermarket-logic’; … something about potatoes {{/if}} <template> {{#if (canBuyPotatoes)}} … something about potatoes {{/if}} </template>

Slide 45

Slide 45

Use English: Active Verbs for Actions ❌ class Supermarket { get onProceedPayment() { return this.potatoes.length > 0; } } ✅ class Supermarket { get pay() { return this.potatoes.length > 0; } }

Slide 46

Slide 46

Translate from Technical to Domain Language CRUD REST DOM Events → Repository → Event Sourcing → only GET and POST → GraphQL → Sockets →? Roden, G. (2022b)

Slide 47

Slide 47

Translate from Technical to Domain Language {{! components/button.hbs }} <button type=”button” {{on “click” @push}}> {{yield}} </button> Technical Name Domain Name <Mailbox> <Mail {{swipe “left” this.delete}}></Mail> </Mailbox>

Slide 48

Slide 48

Translate from Technical to Domain Language As a… As a… User I want to… onClick a button So that… I can onClick <Button User I want to… push a button So that… I can turn on the lights <Button @onClick={{this.onClick}} > @push={{this.turnOnTheLights}} >

Slide 49

Slide 49

Technical Proxy Methods <form {{on “submit” this.submit}}> export class NounComponent extends Component { @action {{! some fields }} </form> submit(event: SubmitEvent) { // collect data const data = new FormData(event.currentTarget); // pass this off to business logic this.pay(data); } }

Slide 50

Slide 50

Becoming a Product-Minded Software Engineer ❌ DON’T - Assimilate with technical language Use dev-lish Name properties, getters, methods, etc. ✅ DO -

Adapt domain language Use english Practice naming questions, actions and facts (consciously) Revise prose (treat your code like a blog article) Extract Business Logic from Components - Components glue UI and business logic together Unit Test your business logic Write business logic once, connect it from multiple components Orosz, G. (2019)

Slide 51

Slide 51

Becoming a Product-Minded Software Engineer - Improve your Naming Skills Make an inventory of your ubiquitous language -

Aggregates, Entities, Value Objects Actions/Commands, Questions and Facts In collaboration with designers (eg. OOUX) In collaboration with domain experts (eg. Event storming) Practice Domain-driven Design => The vocabulary of your team Culture your Domain - Better communication with designer, product and qa departments Validate product features and operations Gossmann, T. (2021)

Slide 52

Slide 52

References - Gossmann, T. (2021). The Hidden Skill and Art of Naming Things. https://gos.si/blog/the-hidden-skill-and-art-of-naming-things/. Orosz, G. (2019). The Product-Minded Software Engineer. https://blog.pragmaticengineer.com/the-product-minded-engineer. Pavlutin, D. (2019). Coding like Shakespeare: Practical Function Naming Conventions. https://dmitripavlutin.com/coding-like-shakespeare-practical-function-naming-conventions/. Roden, G. (2022a). CRUD? Bloß nicht! // deutsch. https://www.youtube.com/watch?v=MoWynuslbBY. Roden, G. (2022b). HTTP-Statuscodes: Alle benutzen sie falsch?! // deutsch. https://www.youtube.com/watch?v=2ZOFCl3E-_c Yegge, S. (2006). Execution in the Kingdom of Nouns. https://steve-yegge.blogspot.com/2006/03/execution-in-kingdom-of-nouns.html.

Slide 53

Slide 53

Thank you!