Slide 1

Slide 1 text

Diagram Like A Principal Engineer by Jeremy Lindblom @jeremeamia

Slide 2

Slide 2 text

1. Principal Engineers Engineering across team boundaries

Slide 3

Slide 3 text

$200k-$400k+ “Total Compensation” includes all salary, bonuses, equity, stock, and benefits. 3 Potential Compensation Sources: levels.fyi and Glassdoor

Slide 4

Slide 4 text

Software Engineer Leveling 4 JUNIOR SENIOR ⬗ Compensation is typically based on a predefined range for your level.

Slide 5

Slide 5 text

Software Engineer Leveling 5 JUNIOR PRINCIPAL SENIOR

Slide 6

Slide 6 text

Software Engineer Leveling 6 JUNIOR STAFF SENIOR PRINCIPAL

Slide 7

Slide 7 text

Software Engineer Leveling 7 JUNIOR STAFF SENIOR PRINCIPAL JUNIOR PRINCIPAL SENIOR STAFF

Slide 8

Slide 8 text

Software Engineer Leveling 8 DISTINGUISHED FELLOW JUNIOR STAFF SENIOR PRINCIPAL ⬗ No standards ⬗ Company-specific ⬗ Depends on company size

Slide 9

Slide 9 text

Principles of a Principal 1. Always Curious 2. Good Communication 3. Team Acceleration 4. Inter-team Focus 5. Engineering Experience 9

Slide 10

Slide 10 text

“The biggest issue on software teams is making sure everyone understands what everyone else is doing.” – Martin Fowler 10

Slide 11

Slide 11 text

Communication: Listen & Learn 11 ⬗ Customers ⬗ Company, orgs, & teams ⬗ Key people ⬗ Existing solutions ⬗ Current initiatives ⬗ Implementation details

Slide 12

Slide 12 text

Communication: Give & Guide 12 ⬗ Share information & skills ⬗ Define problems & solutions ⬗ Create documentation & diagrams ⬗ Create interfaces & contracts ⬗ Connect people

Slide 13

Slide 13 text

Principal Engineers… often serve as the “public API” for the orgs/teams they represent. 13

Slide 14

Slide 14 text

14 Don’t be a Gate. Be a Gateway.

Slide 15

Slide 15 text

2. Diagrams Boxes, lines, & arrows Boxes Arrows &

Slide 16

Slide 16 text

16 What to Diagram? ⬗ Structures – Systems and components, AND their relationships, at various layers of abstraction ⬗ Behaviors – Processes, workflows, data flows, state machines, etc.

Slide 17

Slide 17 text

17 When to Diagram? ⬗ Before implementation (Design ahead of projects and/or sprints) ⬗ During implementation (As part of a ticket or as things change) ⬗ After implementation (For documentation or onboarding) ANY TIME!

Slide 18

Slide 18 text

18 How to Diagram? ⬗ Standards: UML, ERD, C4, etc., or ad hoc ⬗ Mediums: Pen/Marker vs. Computer ⬗ Method: Drawing vs. Coding

Slide 19

Slide 19 text

Unified Modeling Language - UML 1. Software industry standard 2. Born in 1994 (Rational Software, now IBM) 3. Plenty of tooling available 19

Slide 20

Slide 20 text

Unified Modeling Language - UML 20

Slide 21

Slide 21 text

21

Slide 22

Slide 22 text

22 Activity Diagrams ⬗ Workflows, actions, etc. ⬗ Supports conditional and parallel logic ⬗ Fairly easy to read, Even for non-tech

Slide 23

Slide 23 text

23 Class Diagrams ⬗ Great for OOP, DB, and system design ⬗ Be as simple or detailed as you like ⬗ Focuses on relationships

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

25 Class Diagrams - Entity Relationship Diagram (ERD)

Slide 26

Slide 26 text

26 Sequence Diagrams ⬗ Implementation details ⬗ In reference to user ⬗ Shows e2e flow ⬗ Swimlanes can be classes, services, DBs, etc.

Slide 27

Slide 27 text

27 Why Diagram? 1. Improve development speed and quality Frontend developers use UI Mockups. Backend developers use UML diagrams.

Slide 28

Slide 28 text

28 Why Diagram? 2. You were asked to Sometimes other orgs (internal or external) want to see certain kinds of diagrams. 💡 Tip: Know your audience.

Slide 29

Slide 29 text

29 Why Diagram? 3. Prevent catastrophe! Remove confusion and provide A well-defined goal.

Slide 30

Slide 30 text

30 When I Should Have Diagrammed Lyrics by Jeremy Lindblom Original song by Bruno Mars “When I Was Your Man”

Slide 31

Slide 31 text

31 Same code but it seems just a little bit brittle now. My commits in the git log, but it don’t look the same. When my team talks about it, all I do is just wonder how Nothing turned out how I planned it out in my brain🧠.

Slide 32

Slide 32 text

32 It all just feels like foo— bar! 💩 Mmm, too new, too junior to realize…

Slide 33

Slide 33 text

33 That I should have diagrammed it, and shared the plan. Made sure we could understand it, before the work began. Showed you all my boxes📦 and arrows ⇄, so you could write a well-made program. Now there’s tech debt growing in a backlog without an end.

Slide 34

Slide 34 text

34 How could’ve we developed this in such a silly way? I guess a sequence diagram or two would’ve helped us see. Now we’ll never, never get to clean up this mess we’ve made! Oh—. And that haunts👻 me every time I open my IDE.

Slide 35

Slide 35 text

35 It all just feels like foo— bar! 💩 Mmm, too new, too junior to realize…

Slide 36

Slide 36 text

36 That I should have diagrammed it, and shared the plan. Made sure we could understand it, before the work began. Showed you all my boxes📦 and arrows ⇄, so you could write a well-made program. Now there’s tech debt growing in a backlog without an end.

Slide 37

Slide 37 text

37 At our team retro—, I was the first to say that it’s all wrong—! But I know it’s probably much too late⏰, To refactor this code to make it all be great, So I just want you to know—.

Slide 38

Slide 38 text

38 That I should have diagrammed it, and shared the plan. Made sure we could understand it, before the work began. Showed you all my boxes📦 and arrows ⇄, so you could write a well-made program. Now there’s tech debt growing in a backlog without an end.

Slide 39

Slide 39 text

39 Yeah, just tech debt and groaning😩, because I didn’t diagram.

Slide 40

Slide 40 text

3. Diagramming Tools A step above pen and paper

Slide 41

Slide 41 text

Types of Diagramming Tools Desktop Drawing (Visio, Rational Rose) Online Drawing (Lucid Chart, Miro, Gliffy, Diagrams.net) Code-based (Mermaid.js, PlantUML, yUML.me) 41

Slide 42

Slide 42 text

Mermaid.js “Mermaid lets you create diagrams and visualizations using text and code.” https://mermaid-js.github.io 42

Slide 43

Slide 43 text

Mermaid.js flowchart LR A((Start)) --> B[Call API] B --> C{Success?} C -->|Yes| D[Return Result] D --> E((End: Success)) C -->|No| F{Too Many Attempts?} F -->|Yes| G((End: Error)) F -->|No| H[Retry Call] H --> C 43

Slide 44

Slide 44 text

Selecting a Tool 1. Collaboration (sharing, access, cost) 2. Maintenance (keeping it up-to-date) 3. Embeddability (in docs or repos) 4. Customization 5. Easy to Learn 6. Usability 44

Slide 45

Slide 45 text

45 Let’s Draw Code!

Slide 46

Slide 46 text

46 Thanks! Any questions? Jeremy Lindblom @jeremeamia