Scaling Front-End at

$tg-feijoa-500

@phenomnominal 2019

Hi, I'm Craig

Big ol' picture of my face!

$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.

  • 106
Loading comments...

More from Craig Spence