Scaling Front-End at
@phenomnominal 2019
$tg-feijoa-500
@phenomnominal 2019
Hi, I'm Craig
$tg-pohutukawa-800
@phenomnominal 2019
I'm about to leave
@phenomnominal 2019
$tg-tasman-500
I've spend the last 5 years working with a whole bunch of super and talented individuals...
@phenomnominal 2019
$tg-tasman-500
@phenomnominal 2019
Building this!
@phenomnominal 2019
Front
End
We call it
$tg-mordor-30
@phenomnominal 2019
is how we do Front End at Trade Me.
Fr
End
$tg-waitomo-500
@phenomnominal 2019
I'd love to share the story of with you!
$tg-pohutukawa-800
Fr
End
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-bluff-oyster-30
The past...
Part I
@phenomnominal 2019
1999
@phenomnominal 2019
2004
@phenomnominal 2019
@phenomnominal 2019
2009
@phenomnominal 2019
@phenomnominal 2019
2010
@phenomnominal 2019
@phenomnominal 2019
Trade Me
API
@phenomnominal 2019
Trade Me
for iOS
2011
@phenomnominal 2019
~200 employees
@phenomnominal 2019
Trade Me
Touch
2013
@phenomnominal 2019
295 employees
@phenomnominal 2019
Trade Me
Touch
2014
@phenomnominal 2019
356 employees
@phenomnominal 2019
@phenomnominal 2019
@phenomnominal 2019
"Coming in 2015"
This was the first trap.
@phenomnominal 2019
NextGen
@phenomnominal 2019
NextGen
4x JavaScript developers
1x HTML & CSS developer
1x BA
1x Tester
1x Designer
(and a cast of thousands supporting us!)
NextGen
@phenomnominal 2019
Learnable
Maintainable
Consistent
Testable
Scalable
@phenomnominal 2019
We started
building.
and
and
.
@phenomnominal 2019
It was good.
@phenomnominal 2019
NextGen
Embrace modern practices
Lovely new codebase
Exciting new technology
Great new team!
The sky's the limit!!!
All the collaboration!!
@phenomnominal 2019
NextGen
Quality & maintainability
What does good look like?
Imperfect, generic APIs
Build speed
Do we have the right skills?
@phenomnominal 2019
Test
Automate
all the things!
@phenomnominal 2019
This was the second trap.
What does it mean to be a tester?
What does it mean to be a developer?
What does it mean to be an engineer?
@phenomnominal 2019
@phenomnominal 2019
Tractor
Automation UI & test code generation tool
@phenomnominal 2019
NextGen
Deploy without breaking things
Sharing code!
Integration?
Upgrades?
Consistency?
Separate applications?
@phenomnominal 2019
Multiple breakpoints?
More testing?
Heaps to learn?
Complexity?
Improve delivery speed
NextGen
@phenomnominal 2019
Build a platform for the future
Predict the future?!
Rapid technology change?!
Quirky foundations?!
Cautious culture?!
Premature abstraction?!
NextGen
@phenomnominal 2019
Split view layer from monolith
This is so far away...
"NextGen is coming"...
Server rendered vs client...
Full stack?
NextGen
@phenomnominal 2019
Responsive web for Trade Me
Massive paradigm shift.
Massive website.
Massive expectations.
One designer.
NextGen
@phenomnominal 2019
It was hard.
We built a heap of
stuff.
random
stuff.
@phenomnominal 2019
Stuff that needs to be designed.
Stuff that needs to be designed.
just
@phenomnominal 2019
This was the third trap.
@phenomnominal 2019
$tg-tasman-50
@phenomnominal 2019
Tangram
Design system & component library
$tg-tasman-100
@phenomnominal 2019
2016
503 employees
(already late)
@phenomnominal 2019
Tangram + NextGen = ?
$tg-tasman-300
Preview
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-silver-fern-100
This was the fourth trap.
We have an unversioned API
Doomed to fight Conway's law
@phenomnominal 2019
$tg-silver-fern-100
Preview + Logo = ?
Trade Me?
@phenomnominal 2019
$tg-silver-fern-100
We shipped something.
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-hokey-pokey-900
“Slow, so very unusable slow.
John Key admitting to a housing crisis slow.”
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
Slow
Doesn't feel like Trade Me
Behind schedule
Not easy to build stuff
@phenomnominal 2019
2017
548 employees
@phenomnominal 2019
@phenomnominal 2019
shift
Down
$tg-silver-fern-900
"Up
lift"
@phenomnominal 2019
$tg-feijoa-50
@phenomnominal 2019
$tg-feijoa-50
FrEnd has to be as fast as Touch
This was the fifth trap.
@phenomnominal 2019
$tg-pohutukawa-700
@phenomnominal 2019
$tg-pohutukawa-700
@phenomnominal 2019
We got our own space
$tg-hebe-500
This was the sixth trap.
@phenomnominal 2019
We started rebuilding.
$tg-waitomo-800
@phenomnominal 2019
$tg-tasman-100
@phenomnominal 2019
Design Vision
$tg-glacier-600
@phenomnominal 2019
2018
599 employees
$tg-tasman-500
@phenomnominal 2019
To get to this point.
@phenomnominal 2019
$tg-pohutukawa-900
The Traps.
Over promising, under delivering
Ignoring underlying culture
Not finishing what we start
Living in a bubble
Misunderstanding the problem
Fighting organisational structure
@phenomnominal 2019
$tg-jaffa-900
Over promising.
@phenomnominal 2019
$tg-hokey-pokey-900
Ignoring culture.
@phenomnominal 2019
$tg-mordor-900
Not finishing.
@phenomnominal 2019
$tg-hebe-900
Fighting Conway.
@phenomnominal 2019
$tg-bluff-oyster-900
Misunderstanding.
@phenomnominal 2019
$tg-bluff-oyster-900
Isolation.
@phenomnominal 2019
$tg-feijoa-900
@phenomnominal 2019
$tg-bluff-oyster-30
The present...
Part II
@phenomnominal 2019
2019
670 employees
$tg-tasman-500
@phenomnominal 2019
$tg-tasman-500
@phenomnominal 2019
$tg-tip-top-500
is live right now at trademe.nz
Fr
End
@phenomnominal 2019
$tg-pohutukawa-900
Fr
End
is not a slam dunk.
@phenomnominal 2019
Fr
End
is still hard.
@phenomnominal 2019
Front
End
is still hard.
@phenomnominal 2019
Designing a good user interface is still hard.
@phenomnominal 2019
$tg-kiwifruit-700
Front End is not always taken seriously.
@phenomnominal 2019
Building a user interface on TM Classic is "easy".
$tg-paua-700
@phenomnominal 2019
$tg-silver-fern-20
FrEnd hasn't explained the problems that it solves.
@phenomnominal 2019
$tg-pinot-50
@phenomnominal 2019
$tg-hokey-pokey-500
@phenomnominal 2019
$tg-hokey-pokey-500
Education
Organisational structure
Communication
Change management
Expectation management
Scale
Buy-in
Location
Perception
@phenomnominal 2019
$tg-feijoa-500
We changed everyone's job titles without realising it!
@phenomnominal 2019
$tg-pinot-50
@phenomnominal 2019
$tg-bluff-oyster-30
The future...
Part III
@phenomnominal 2019
Default to Open
Open source Tangram
Open sharing
Open communications
Open web
@phenomnominal 2019
No "I" in Trade Me
Monorepo as an enabler
Automate and help others
Break down silos
Learn from mistakes
Treat it as a real change
@phenomnominal 2019
Be a tidy FrEnd
Clean up after ourselves
Focus on consistent UX
Look after each other's stuff
Keep Trade Me beautiful
@phenomnominal 2019
Can't eat your ghost chips
Ship small, and often
Deliver value
Experimentation by default
DevOps and DesignOps culture as catalyst
@phenomnominal 2019
Always blow on the pie
Call before you dig
Engineering
Data-driven continuous improvement
@phenomnominal 2019
She's a pretty big job
Replace Trade Me Classic
One domain
Build once, run everywhere?
API first
Embrace specialisation
So...?
@phenomnominal 2019
@phenomnominal 2019
$tg-bluff-oyster-30
Mistakes.
@phenomnominal 2019
$tg-bluff-oyster-30
Gambles.
@phenomnominal 2019
$tg-bluff-oyster-30
Losses.
@phenomnominal 2019
$tg-bluff-oyster-30
Wins.
@phenomnominal 2019
$tg-glacier-900
If we want to scale
@phenomnominal 2019
$tg-pohutukawa-600
Software is hard
@phenomnominal 2019
$tg-paua-500
Front end is hard
@phenomnominal 2019
$tg-feijoa-800
Change is really hard
@phenomnominal 2019
People are the
hardest
most important.
@phenomnominal 2019
So we should start there.
@phenomnominal 2019
Thanks!
Scaling Front End at Trade Me (short)
By Craig Spence
Scaling Front End at Trade Me (short)
A 5 year look back over the challenges and successes of building the new look Trade Me site.
