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 a

n intern

developer

senior JavaScript developer

development technical lead

at

bout to leave

@phenomnominal 2019

But it's a good thing!

$tg-pohutukawa-800

@phenomnominal 2019

It's time to reflect and download!

$tg-hokey-pokey-500

@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

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

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

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

$tg-tasman-200

@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 13 cross-functional squads across Trade Me.

Fr

End

@phenomnominal 2019

$tg-tip-top-500

               is built using our robust, flexible and accessible component library, based off our  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, allowing us to be confident in changes we make.

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.

  • 583
Loading comments...

More from Craig Spence