Scaling Front-End at
@phenomnominal 2019
$tg-feijoa-500
@phenomnominal 2019
Hi, I'm Craig
$tg-pohutukawa-800
@phenomnominal 2019
I was a
n intern
developer
senior JavaScript developer
development technical lead
at
bout to leave
@phenomnominal 2019
So I decided to reflect
$tg-pohutukawa-800
@phenomnominal 2019
$tg-tasman-500
I spent 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 called it
$tg-mordor-30
@phenomnominal 2019
$tg-pinot-500
is a collection of applications, libraries, and tools, built with current best practices.
Fr
End
@phenomnominal 2019
$tg-tip-top-800
is a mindset for designing, crafting, and delivering experiences that our users love.
Fr
End
@phenomnominal 2019
is how to 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
But first, a warning!
$tg-hokey-pokey-500
@phenomnominal 2019
This tale may seem like a horror movie.
$tg-jaffa-500
@phenomnominal 2019
$tg-glacier-500
Let's talk about the past, present, and future of
Fr
End
@phenomnominal 2019
$tg-mordor-500
Let's talk about going big, going home, and going back to the drawing board...
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-silver-fern-100
@phenomnominal 2019
$tg-bluff-oyster-30
The past...
Part I
$tg-waitomo-700
@phenomnominal 2019
@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
@phenomnominal 2019
Trade Me
for iOS
2011
@phenomnominal 2019
~200 employees
@phenomnominal 2019
Trade Me
for Android
@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
@phenomnominal 2019
"Coming in 2015"
This was the first trap.
@phenomnominal 2019
NextGen
Goals
Embrace modern development
Deploy without breaking things
Quality and maintainability
Build a platform for the future
Split the view from the monolith
Responsive web for all Trade Me
@phenomnominal 2019
NextGen
Team
4x JavaScript developers
1x HTML & CSS developer
1x BA
1x Tester
1x Designer
(and a cast of thousands supporting us!)
@phenomnominal 2019
stack
Framework
NextGen
@phenomnominal 2019
@phenomnominal 2019
Stable - released 2010
Familiar patterns
Open Source
Application platform
Backed by Google
Superheroic JavaScript MVW Framework
HTML & CSS
NextGen stack
@phenomnominal 2019
Bundling & Tooling
NextGen stack
@phenomnominal 2019
@phenomnominal 2019
@phenomnominal 2019
JavaScript that scales
Riskier - released 2014
Familiar
Open Source
Compile time type-checking
Created by Microsoft
Ideology
NextGen
@phenomnominal 2019
Learnable
Maintainable
Consistent
Testable
Scalable
@phenomnominal 2019
We started
building.
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
Robot Framework?
Angular Protractor?
@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
Lower barrier to entry
Shift workload from dev to test
Build on top of the right tool
Gently introduce code
@phenomnominal 2019
Tractor
@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're just rebuilding Trade Me!
Look how much stuff we've built!
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.
We were trying to eat the elephant whole.
We knew it was a redesign.
We knew we had to make it easier somehow...
@phenomnominal 2019
$tg-tasman-50
@phenomnominal 2019
Tangram
Design system & component library
Maximise reuse
Maximise skill multiplication
Maximise consistency
More designers!
$tg-tasman-100
@phenomnominal 2019
Tangram Colours
@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.
We knew it wasn't fast.
We were not proud.
We started training.
@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
Too much JavaScript
Too many DOM nodes
Too many loaders
Too many API calls
Too many features
Too ambitious?
Too many developers
@phenomnominal 2019
Not enough yellow
Not enough character
Not enough information
Not enough charm
Not enough Trade Me?
Not enough user testing
Not enough features
@phenomnominal 2019
Too much to do
Not enough training
Too many reviews
Not enough tooling
Not enough components
Too many bugs
@phenomnominal 2019
Too many problems to keep going.
@phenomnominal 2019
Too much at stake to stop?
@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
One Framework. Mobile & Desktop.
Total rebuild of the platform
Patterns designed for mobile
Open Source
Delayed, but with a plan
Backed by Google
$tg-pohutukawa-700
@phenomnominal 2019
We got our own space
$tg-hebe-500
This was the sixth trap.
@phenomnominal 2019
We started rebuilding.
A few things paid off:
Good abstractions
Trusted tests
Problem domain expertise
External help
Perseverance and optimism
$tg-waitomo-800
Consistent code style
@phenomnominal 2019
Tangram
First thing to be rebuilt
$tg-tasman-100
Same look as AngularJS version
Tightened up APIs
Removed confusing abstractions
Adopted Angular conventions
Automated where possible
@phenomnominal 2019
Design Vision
$tg-glacier-600
Design & Tangram & FrEnd
Best of what Trade Me could be
Design Ops culture
Progressive design thinking
Design + Tech collaboration
Modern design tooling
@phenomnominal 2019
2018
599 employees
$tg-tasman-500
@phenomnominal 2019
$tg-paua-700
Rebuilding FrEnd for the third time
Rebuilding Tangram for the third time
Rebuilding Trade Me for the fourth time...
@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.
Massively under delivering
Years late
Constantly fighting to catch up
No trust that we could succeed
Reputation hit
Burn out
@phenomnominal 2019
$tg-hokey-pokey-900
Ignoring culture.
Throwing technology at stuff
Not reassuring
Not communicating enough
Not understanding perceptions
Not listening enough
Not growing our people
@phenomnominal 2019
$tg-mordor-900
Not finishing.
Always another fire to fight
Too much work in progess
Nothing shipped until too late
We just built stuff
Not seeing the real problems
Check out all this 80%
@phenomnominal 2019
$tg-hebe-900
Fighting Conway.
Optimising the wrong thing
Building on invalid assumptions
Organisation radically changed
Bad abstractions
No one could agree how
@phenomnominal 2019
$tg-bluff-oyster-900
Misunderstanding.
It's a product problem
It's a technology problem
It's a design problem
It's a problem
@phenomnominal 2019
$tg-bluff-oyster-900
Isolation.
Missing out on context
Need to focus to solve the problems
Removing ourselves further
Drinking the cool aid
Confirmation bias
@phenomnominal 2019
$tg-feijoa-900
Hindsight is 20/20
These are hard problems
But it all seems quite obvious now
@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-tip-top-500
is a responsive web application, built using the latest version of Angular.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
is well-engineered, using current best practise patterns for building modern web applications.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
is built to enable a consistent UX, that takes into account the complexities of a highly interactive application.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
looks, feels and acts like Trade Me, but allows the personalities of the verticals to shine through.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
is being built by 20 cross-functional squads across Trade Me.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
is built using a robust, flexible and accessible component library, based off the Tangram Design System
Fr
End
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
@phenomnominal 2019
$tg-tip-top-500
is well-tested, meaning that big changes can be made with confidence.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
values quality, and uses all kinds of automation to maintain that high standard.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
uses Angular Universal for server-side rendering, to enable great SEO, and much-needed speed on mobile.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
is built to be a Progressive Web App, using the latest web standards for native-like experiences.
Fr
End
@phenomnominal 2019
$tg-tip-top-500
evangelists are flying around the country, training, engaging, and spreading the good word.
Fr
End
@phenomnominal 2019
$tg-pohutukawa-900
Fr
End
is not a slam dunk.
@phenomnominal 2019
is too big.
Fr
End
@phenomnominal 2019
Fr
End
is slow to build.
@phenomnominal 2019
Fr
End
is slow on mobile.
@phenomnominal 2019
Fr
End
is not the only website we have.
@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
Building a user interface on TM Classic is "easy".
$tg-paua-700
@phenomnominal 2019
$tg-kiwifruit-700
Front End is not always taken seriously.
@phenomnominal 2019
Fr
End
takes something that is "easy", and makes it hard.
@phenomnominal 2019
$tg-tip-top-500
takes something that is very, very hard and makes it hard.
Fr
End
@phenomnominal 2019
$tg-silver-fern-20
FrEnd hasn't explained the problems that it solves.
@phenomnominal 2019
$tg-silver-fern-20
The team who built FrEnd didn't understand the context of their internal users.
@phenomnominal 2019
$tg-silver-fern-20
We spent 5 years moving forward without bringing everyone along for the ride.
@phenomnominal 2019
$tg-silver-fern-20
I, personally, didn't really understand the problem.
@phenomnominal 2019
$tg-pinot-50
@phenomnominal 2019
$tg-hokey-pokey-50
Technology Problems
Slow build
Performance
Experimentation
Testing and validation
State management
PWA
@phenomnominal 2019
$tg-feijoa-100
Design Problems
Consistency
Character
Animations
Pattern extraction
Native
@phenomnominal 2019
$tg-glacier-200
Product problems
Roll-out
Experimentation
Delivery velocity
Prioritisation
Chopping block
@phenomnominal 2019
$tg-hokey-pokey-500
@phenomnominal 2019
$tg-hokey-pokey-500
People Problems
@phenomnominal 2019
$tg-hokey-pokey-500
Education
Organisational structure
Communication
Change management
Expectation management
Scale
Buy-in
Location
Perception
@phenomnominal 2019
$tg-feijoa-500
Full-stack developer
Front-end engineer
@phenomnominal 2019
$tg-pinot-500
Quality assurance tester
Test automation engineer
@phenomnominal 2019
$tg-jaffa-500
User interface designer
User experience/product designer
@phenomnominal 2019
$tg-pinot-50
@phenomnominal 2019
$tg-bluff-oyster-30
The future...
Part III
@phenomnominal 2019
$tg-waitomo-700
@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.
Didn't ship soon enough.
Didn't prove the technology.
Didn't know the problem.
Didn't understand the user.
@phenomnominal 2019
$tg-bluff-oyster-30
Angular.
TypeScript.
Monorepo.
JavaScript.
Design system.
Gambles.
@phenomnominal 2019
$tg-bluff-oyster-30
Losses.
Timelines.
Mental health.
Personal brand.
Relationships.
Deadlines.
@phenomnominal 2019
$tg-bluff-oyster-30
Wins.
People.
JavaScript.
Tangram.
Accessibility.
Automation.
Evangelism.
@phenomnominal 2019
$tg-glacier-900
If you truly 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 hard
@phenomnominal 2019
People are the
hardest
most important.
@phenomnominal 2019
So start there.
@phenomnominal 2019
Thanks!
Scaling Front End at Trade Me
By Craig Spence
Scaling Front End at Trade Me
A 5 year look back over the challenges and successes of building the new look Trade Me site.
