Enterprise Mobile App
Design Patterns
The Passion
of
Lazy
DEVNEXUS
Atlanta
–
February
17,
2016
Slide 2
Slide 2 text
Patrick Seda
@pxtrick
• Independent Mobile App Architect
• 25+ Years as a Software Professional
• 6+ Years in Mobile Development
• Apps: Enterprise to Children’s games
Slide 3
Slide 3 text
Agenda:
- Discuss my “Laziness”
- 8 Design Patterns
- Call to action
Slide 4
Slide 4 text
The longer I work
on this ...
The less effort I
Want to spend
“Lazy”
Slide 5
Slide 5 text
The Passion
of
Lazy
Quality
Slide 6
Slide 6 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Defining Moment (number 1)
January 15, 1990:
Crash of the
entire AT&T
long-distance
network
Slide 7
Slide 7 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Defining Moment (number 2)
Slide 8
Slide 8 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Design Patterns
Slide 9
Slide 9 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Christopher Alexander
Slide 10
Slide 10 text
PATTERN NAME:
Solution:
Motivation:
Lean Mobile Data
Monstrous legacy data
Create new endpoints
specifically targeting
your EXACT mobile needs
Slide 11
Slide 11 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Lean Mobile Data
Legacy Web Service
Application Context
UI
for data
presentation
Data
/endpoint
Slide 12
Slide 12 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Lean Mobile Data
IMPROVED Web Service
Application Context
/endpoint
UI
for data
presentation
/endpoint2
Data
Slide 13
Slide 13 text
PATTERN NAME:
Solution:
Motivation:
App Defines Api
Impedance mismatch with data
Define the structure
the app wants, then write
the API to match
Slide 14
Slide 14 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
App Defines API
IMPROVED Web Service
Application Context
/endpoint
UI
for data
presentation
/endpoint2
Data
Defined by the app
Slide 15
Slide 15 text
PATTERN NAME:
Solution:
Motivation:
Decoupled Navigation
Complex navigation
Buttons become stupid,
delegate all behavior to a
mediating controller
Slide 16
Slide 16 text
PATTERN NAME:
Solution:
Motivation:
Datasource Strategies
Swappable data sources
Hide data sources behind
proxy objects, each of which
is a swappable Strategy
Slide 17
Slide 17 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Datasource Strategies
Application Context
HTTP /
XHR
Web Service
WS
Proxy
Mock WS
Proxy
Mock
Data
Speakers
Processing
&
UI Render
/speakers
getSpeakers()
getSpeakers()
Slide 18
Slide 18 text
PATTERN NAME:
Solution:
Motivation:
Tap Mutex
Deviations from intended UX
Prevent users from misusing
the UI by disallowing
asynchronous events
Slide 19
Slide 19 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Tap Mutex
Speakers
Speaker
Details
Application Context
Assemble,
Create, &
Render
Navigation
Callback
Slide 20
Slide 20 text
PATTERN NAME:
Solution:
Motivation:
No Harsh Waiting
Inconsistent wait times
Don’t allow activity indicators
to exist for short durations,
set a minimum lifetime
Slide 21
Slide 21 text
PATTERN NAME:
Solution:
Motivation:
Client-side Session
An app is not a website
Introduce a session timeout
within the app, track UI
interaction, not server hits
Slide 22
Slide 22 text
PATTERN NAME:
Solution:
Motivation:
Lifecycle Gatekeeper
OS doesn’t understand your app
Provide a single entry point
for app state events,
define dispatch behavior
Slide 23
Slide 23 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Lifecycle Gatekeeper
iOS Android
Slide 24
Slide 24 text
Additional Notes and Illustrations
Design Excellence
Patrick Seda
Lifecycle Gatekeeper
PAUSE
Handler
RESUME
Handler
Application Context
OS – App State Machine
RESUME
Handler
Lifecycle
Gatekeeper
RESUME
Slide 25
Slide 25 text
The Passion
of
Lazy
Quality
Slide 26
Slide 26 text
Call
To
Action
Slide 27
Slide 27 text
DEVNEXUS
Atlanta
–
February
17,
2016
Thank
You
Slide 28
Slide 28 text
Patrick Seda
@pxtrick
[email protected]
linkedin.com/in/patrickseda
speakerdeck.com/pxtrick