RENÉ CACHEAUX • MOBILE ARCHITECT • ATLASSIAN • @RCACHATX

Coding for Humansnot computers

It’s not easy, we don’t teach it, it’s not natural.

What’s the big deal?

Readable = Fun

Code is Hard to Read

Time is MoneyWe can get time back to do all the things we love.

Code reviews, fixing bugs, adding new features all require reading.

Easy to read code is fun to work with and who doesn’t want fun?

🤐

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Tabs vs Spaces

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Prototypes

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Let’s Dive In

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

State of Affairs

We get Acclimated

It works! Done 😌

Fast, Faster…We are under constant pressure to deliver fast.

Difference between problem solving and building production code.

After years and years we get used to things and don’t see an issue.

State of Affairs

We Read A Lot

Smart CompilersLike, really smart.

When developing, we spend most time reading.

Indeed, the ratio of time spent reading versus writing is well over 10 to 1. We are constantly reading old code as part of the effort to write new code. ...[Therefore,] making it easy to read makes it easier to write.

R O B E R T C . M A R T I N , C L E A N C O D E : A H A N D B O O K O F A G I L E S O F T WA R E C R A F T S M A N S H I P

“

”

Opening a Project

Someone, somewhere is

reading your code from 5 years ago…

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

So what can we do about it?

Design Great Reading Experiences

Humans are complexWe all come from different cultures, different backgrounds, and different skill levels.

We ❤ Patterns

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

On-boarding

README.mdProvide a high level overview of how things are structured and leave the details out.

PatternsArchitectureOrganization Vocabulary

What should go in a README?

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Organizing Source

Before you can read something you have to

find the code.

Tell a Story Mapping View Controllers as Packages

Organizing Source

Robert Martin, ‘Uncle Bob’

Screaming Architecture

Example

Welcome Twitter

Sign Up

Log In

User’s Journey

Follows user’s journey, topmost being earliest and bottommost being latest.

Each view controller has its own group, acts like a package.

Callout

App Tab Bar

Callout

App Tab Bar

Nav Bar

Tabs

Follows vertical placement on screen.

Callout

App Tab Bar

Nav Bar

Search Compose Search Compose Search Compose

Global nav bar screens are placed at the root, follows placement left to right.

More examples of view controllers as packages.

Callout

App Tab Bar

Tabs

Follows left to right positioning of tabs.

Callout

App Tab Bar

Home Tab

Nav Bar

Nav Stack

Home Tab Actions

Home tab navigation based group organization.

Connect

Nav Bar

Home tab’s nav bar connect item.

Open Tweet Detail

Nav Stack

Home Tab Navigation

Tweet List Tweet Detail

Groups organized by nav stack order.

Mapping App to Source Organization

Temporal Physical

Re-usable Code

Re-usable code organized separately.

Screaming Architecture

What app is this?

What app is this?

Organize by domain instead of by technology.

Why use this?

Easier to manageEasy to Find CodeEasy to Read Cleaner Diffs

Why use this?

Side TipWe read code outside of Xcode, so make sure to mirror Xcode project group structure with file system.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

6666

UNDERLYING PRINCIPLE

Make it easy for you and your team to find code.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

View Controllers as Components

Component-based software engineering … is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems.W I K I P E D I A

“

”

View controllers are the foundation of your app’s internal structure … Because they play such an important role in your app, view controllers are at the center of almost everything you do.V I E W C O N T R O L L E R P R O G R A M M I N G G U I D E F O R I O S , A P P L E

“

”

Independent Loosely Coupled

Life of a Typical View Controller

🙈

Instead

View Controller Package

DependenciesAnything not inside the view controller’s group is an external dependency. Try to inject.

Break it Down

Child View Controller

Child View Controller

Break it Down

Cell Actions

Cell Actions

Break it Down

Each Cell as a View Controller

View controller containment is your friend 😍!

Why use this?

Easy to Read Single Responsibility

Incremental & Parallelize

Why use this?

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Use Cases

… a use case is a list of actions or event steps, typically defining the interactions between a role [user] and a system, to achieve a goal.W I K I P E D I A

“

”

Like TweetRefresh Tweet ListLog In Create Tweet

Twitter Use Cases

How can I use this?

Use Case + Command Pattern

Object-Oriented Software Engineering: A Use Case Driven Approach

Robert Martin, ‘Uncle Bob’

Use Case + Command Pattern

Use Case + NSOperation💑

Check out Apple’s ‘Concurrency

Programming Guide’

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Think of them as a recipe

Types of NSOperations

Sync (default) Async

Like TweetRefresh Tweet ListLog In Create Tweet

Twitter Use Cases

Twitter Use Cases

What typically goes into a Use Case NSOperation?

Notify to ReactNSData -> ModelsHTTP Get Persist Models

Typical Refresh Use Case

View controllers create & schedule use cases.

Cell View Controller

Cell Actions

Cell Actions

Why use this?

TestableReusableEasy to Read Flexibility

Why use this?

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

104104

UNDERLYING PRINCIPLE

Architecture plays a significant role. Pick one and stick with it.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Writing Code

Example

Negated condition.

Nested multiple levels.

Has to run at the end.

Positive condition & removed one level of nesting.

Will always run at the end of the method.

Silly NSNotification user info access.

New KeyboardAnimation type with failable initializer.

New KeyboardAnimation type with failable initializer.

Animation looks very generic, not specific to this method.

New method added to UIView via extension.

New method added to UIView via extension.

Still too many nested levels! 2 levels deep.

Removed one level with a guard.

Removed another level by moving logic into updateComposeFeedbackViewBottomConstraintConstant()

Two lines look related. Guard is only making sure there’s a window.

Simplified by extending UIWindow.

Simplified by extending UIWindow.

NSNotification is more of a distraction here.

Moved into new method that takes the keyboard animation.

Moved into new method that takes the keyboard animation.

Oh yea, and one last thing…

Before

After

The Art of Readable Code

Stay PositiveReturn EarlyAvoid Nesting Create New Types

Best Practices we Used

{ return <T> +

Optional ChainingGuardFailable Initializers Defer

Swifty Things we Used

? g { d { .?

Tons of other Swifty things…

Swift API Design Guidelines

Why use this?

Easy to Read

Why use this?

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Interface Builder 🙈

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

163163

UNDERLYING PRINCIPLE

Writing is hard, spend time researching and experimenting.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

Coding for Humans

Writing Code

Structuring Code

Building ProjectsFinding code quickly and welcoming newcomers.

Dividing code up to make code easy to understand.

Writing code that’s easy to read.

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

So those are just a few tips and tricks, where to go from here?

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

Putting into Practice

Putting into Practice

Automate

Code Review

Team Buy-inThe entire team needs to row together on this.

Be nit-picky at first, the team will get a rhythm going.

Automate as much as possible using scripts. Help and detection.

Re-organizingMake sure to stop development while re-organizing Xcode projects.

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

Agenda

C O D I N G F O R H U M A N S

S TAT E O F A F FA I R S

P U T T I N G I N TO P R A C T I C E

That’s It

We are all engineersWe want to build 😀 things and we want to do it in a reasonable time so we can enjoy other hobbies even coding.

Less BugsFunDeliver FasterSlow at first, lightning fast once established.

It’s fun when it’s easy to read and build.

More team members will understand.

Benefits

• Big cool statistic

• 2,569

• Add-Ons in Marketplace

Shoot for the moon!

Thank you! 🍻

RENÉ CACHEAUX • MOBILE ARCHITECT • ATLASSIAN • @RCACHATX

Don’t forget to grab a handout.