Reading code (Dev2Next)

Slide 1

Slide 1 text

Reading Code Dev2Next, Oct 3rd 2024 https://maritvandijk.com/

Slide 2

Slide 2 text

Reading Code • We spend more time reading code than writing code

Slide 3

Slide 3 text

Reading Code We read code when: • adding features • fi xing bugs • understanding a new system • doing code reviews • learning new technologies • etc.

Slide 4

Slide 4 text

Reading Code "developers on average spend as much as 58% of their time comprehending existing source code" - Felienne Hermans, The Programmer's Brain

Slide 5

Slide 5 text

Reading Code • We spend more time reading code than writing code • But we don't practice reading code explicitly (much)

Slide 6

Slide 6 text

Readability When we do talk about readability, it's often about writing readable code.

Slide 7

Slide 7 text

Reading Code "How to teach programming (and other things)?" by Felienne Hermans https://www.youtube.com/watch?v=g1ib43q3uXQ

Slide 8

Slide 8 text

Reading Code • What if we practice reading code explicitly?

Slide 9

Slide 9 text

Code Reading Club • Code Reading Club https://codereading.club/

Slide 10

Slide 10 text

The stars aligned Do you want to join our code reading club?

Slide 11

Slide 11 text

Code Reading Club • Printed code sample • Structured exercises

Slide 12

Slide 12 text

Examples of exercises • First glance (1 min.)

Slide 13

Slide 13 text

Code reading exercise First glance The goal of this exercise is to practice getting a fi rst impression of code. (1 min) Independently - Glance at the code Note down the fi rst thing that catches your eye. Then note the second thing that catches your eye. Think about why you noticed those things fi rst.

Slide 14

Slide 14 text

1 min.

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Examples of exercises • First glance • Identify components & relationships

Slide 17

Slide 17 text

Examples of exercises • First glance • Identify components & relationships • Most important lines

Slide 18

Slide 18 text

Examples of exercises • First glance • Identify components & relationships • Most important lines • Identify concepts

Slide 19

Slide 19 text

Examples of exercises • First glance • Identify components & relationships • Most important lines • Identify concepts • Summary

Slide 20

Slide 20 text

Code Reading Club Learned about ... • reading code

Slide 21

Slide 21 text

Code Reading Club Learned about ... • reading code • other peoples' perspectives

Slide 22

Slide 22 text

Code Reading Club Learned about ... • reading code • other peoples' perspectives • making my own assumptions explicit https://maritvandijk.com/code-reading-club/

Slide 23

Slide 23 text

Reading Code

Slide 24

Slide 24 text

Reasons why code is confusing 1. Lack of knowledge 2. Lack of information 3. Lack of processing power in the brain

Slide 25

Slide 25 text

Cognitive processes • Long term memory • Short term memory • Working memory

Slide 26

Slide 26 text

Lack of knowledge • Programming domain • Language / syntax • Programming constructs / algorithms • Business domain • Domain concepts • Business logic

Slide 27

Slide 27 text

Dealing with a lack of knowledge • Create a list • Research • Memorise (if relevant)

Slide 28

Slide 28 text

Lack of information • Unknown details • Unfamiliar names • Code connected in unknown ways • Too many things at once

Slide 29

Slide 29 text

Dealing with lack of information • Chunking

Slide 30

Slide 30 text

Dealing with lack of information • Chunking • Concepts & patterns

Slide 31

Slide 31 text

Lack of processing power in the brain • Too many processing steps • Too many variables

Slide 32

Slide 32 text

Dealing with lack of processing power in the brain • Memory aids • Dependency graph • State table

Slide 33

Slide 33 text

Dependency graph

Slide 34

Slide 34 text

State table public class NestedLoop { public static void main(String[] args) { for (int i = 0; i < 2; i++) { System.out.println("i is: " + i); for (int j = 0; j < 2; j++) { System.out.println("j is: " + j); } } } }

Slide 35

Slide 35 text

Dimensions of code reading • Structure • Domain • Concepts • Context 💔

Slide 36

Slide 36 text

Structure Code is not read linearly

Slide 37

Slide 37 text

Domain • Behavior • Data

Slide 38

Slide 38 text

Concepts

Slide 39

Slide 39 text

Context

Slide 40

Slide 40 text

Reading Code The bigger picture

Slide 41

Slide 41 text

Understanding a new code base • Joining a new team / organisation • Using a new code base

Slide 42

Slide 42 text

Reading Code • What does the code do?

Slide 43

Slide 43 text

Context

Slide 44

Slide 44 text

Reading Code A good place to start: • Check out the code

Slide 45

Slide 45 text

Help in the IDE

Slide 46

Slide 46 text

Help in the IDE • Project structure • Build & run • README • Dependencies • Diagrams

Slide 47

Slide 47 text

Strategies • Identify components • Identify relationships / dependencies • Identify concepts • Gain context

Slide 48

Slide 48 text

A slice of the application

Slide 49

Slide 49 text

Find a starting point

Slide 50

Slide 50 text

Find a starting point • Generic • Main method • Endpoint • Speci fi c • Error message / Exception • Logic / Functionality

Slide 51

Slide 51 text

Help in the IDE

Slide 52

Slide 52 text

Help in the IDE • Search • Navigate

Slide 53

Slide 53 text

Strategies • A particular use case • Draw your own diagrams

Slide 54

Slide 54 text

Reading Code Understanding a piece of code

Slide 55

Slide 55 text

Reading Code • Structured exercises

Slide 56

Slide 56 text

Help in the IDE

Slide 57

Slide 57 text

Help in the IDE • Structure • Hints from your IDE • Tests • Debugging • Refactor for understanding • Context

Slide 58

Slide 58 text

Strategies • Structured exercises • Memory aids • Dependency graph • State table • Gain context

Slide 59

Slide 59 text

Reading Code What's next?

Slide 60

Slide 60 text

Structured exercises • Code Reading Club: https://codereading.club/ • Code Reading Club Resources: https://github.com/CodeReadingClubs/Resources • The Programmer's Brain - Felienne Hermans