We shipped migrated code the
day a!er starting this
migration.
Slide 25
Slide 25 text
The Theory
Components (or directives in Angular)
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
The plan
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Migrating a component
Slide 34
Slide 34 text
1. Find all dependencies that a
directive uses
Slide 35
Slide 35 text
2. Migrate all of those one by
one to React
Slide 36
Slide 36 text
3. Write the React component
import React, { Component } from 'react'
class ListingsButton extends Component {
// code left out to save space :)
render() {
return (
Buy now!
)
}
}
Slide 37
Slide 37 text
But how do we embed this within Angular?
Angular directives are used as if they were custom HTML elements:
Rihanna at The O2
Buy now
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
With ngReact
Rihanna at The O2
Slide 40
Slide 40 text
We can continue this strategy, migrating the other
components to React:
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
And now we can migrate this into one big React
component!
import React, { Component } from 'react'
import ListingsTitle from './listings-title'
import ListingsButton from './listings-button'
class ListingsItem extends Component {
render() {
return (
)
}
}
Slide 43
Slide 43 text
And update our template
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
And we now rinse and repeat as we replace Angular
with React
Forever.
Slide 46
Slide 46 text
Tests
Slide 47
Slide 47 text
We cannot break the store
Slide 48
Slide 48 text
Unit tests
Migrated from Angular to React + added to as
appropriate.
Unit tests are coupled to the
implementation code.
Slide 51
Slide 51 text
Acceptance tests
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Automated tests that are
entirely decoupled to the
application code.
Slide 54
Slide 54 text
Because they are slow to run,
we keep acceptance tests to
our core user journeys
Slide 55
Slide 55 text
We also run our acceptance
tests in IE11 to catch any IE
bugs.
Soon we hope to run them across all browsers we support, both desktop & mobile
Slide 56
Slide 56 text
Team
Slide 57
Slide 57 text
Keeping people happy and productive
We knew this migration was going to be at least 6
months, more likely closer to a year. 1
1 It's been 9 months so far...
Slide 58
Slide 58 text
Momentum & Prioritisation
Slide 59
Slide 59 text
One of the goals of this migration is to make it easier to
fix bugs with confidence.
Slide 60
Slide 60 text
Pick work based on bugs and
churn rate, not code quality
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
Mix larger, multi-week work
with short, 1-2 day work, to
keep momentum.
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
Break down large work into smaller cards and pull
requests
Slide 67
Slide 67 text
Feature branches
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Release early, release o!en
Encourages small pull requests and units of work
Slide 71
Slide 71 text
Release early, release o!en
Keeps momentum up in the team and keeps risk to a
minimum
Slide 72
Slide 72 text
Release early, release o!en
! Easier to react 2 to a bug if release causes it
2 pun very much intended
Slide 73
Slide 73 text
The scout's rule
Always leave things better than when you found them.
Slide 74
Slide 74 text
A migrated codebase is not a
perfect code base
Slide 75
Slide 75 text
The next time you touch some code, you'll know more
about it than before.
So why make it perfect now?
Slide 76
Slide 76 text
The lo!ery factor
Thanks to https://twitter.com/aaronjrandall for the term
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Metrics, metrics, metrics
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Tooling
Slide 84
Slide 84 text
hashtag fatigue
Slide 85
Slide 85 text
Migrations are a good excuse
to upgrade your tools.
Slide 86
Slide 86 text
By providing a mix of migration
tasks (big, small, visual,
"under the hood", tooling),
we're able to keep work fun
and interesting
Slide 87
Slide 87 text
Talking
Slide 88
Slide 88 text
The most important people to
convince are not in your tech
team.
Slide 89
Slide 89 text
And they don't care about
frameworks
Slide 90
Slide 90 text
"Well, Angular 1 is reaching end
of life and React offers a much
be!er component model that
fits our ideas of how to build
so"ware"
Slide 91
Slide 91 text
"React's lifecycle methods and
small API is easier for
developers to learn"
Slide 92
Slide 92 text
"React's state model is less
magical; its unidirectional data
flow really simplifies code and
makes it easier to reason
about"
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
"Right now when you ask us for
a new feature, or bug fix, it's
hard and takes a long time to
fix and have confidence that
we've not inadvertently broken
anything else"
Slide 95
Slide 95 text
"We will improve our mobile
load time + performance so
users on mobiles should see
fewer issues and have a nicer
experience"
Slide 96
Slide 96 text
Fix bugs that cause pain for
other departments
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
Keep people in the loop
Slide 99
Slide 99 text
Deal with !
Slide 100
Slide 100 text
http://gunshowcomic.com/648
Slide 101
Slide 101 text
We put a lot of work into making sure things don't go
wrong on production.
But unfortunately they will, at some point.
Slide 102
Slide 102 text
There are two types of
developer 3
3 shamelessly stolen from Twitter! https://twitter.com/beerops/status/866808660030345218
Slide 103
Slide 103 text
Those who have broken production
Those who are about to break
production
Slide 104
Slide 104 text
Apologies to the 3 people who
bought tickets for a concert on
the wrong day in Tokyo
because of me !
We did fix it though and sort these people out! :)
Slide 105
Slide 105 text
1. What? went wrong
2. Why? did we not catch it
3. How? did we fix it
4. How? will we prevent it happening again
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
It's a two way street
Slide 109
Slide 109 text
Takeaways
Slide 110
Slide 110 text
1. Don't migrate for the sake of
it
Slide 111
Slide 111 text
2. Plan, plan and plan again
Slide 112
Slide 112 text
3. Cross business
communication is so
important.
Slide 113
Slide 113 text
4. Prioritise based on pain
points in your current
application
Slide 114
Slide 114 text
5. Mix up tasks based on
difficulty + type to keep it
interesting
Slide 115
Slide 115 text
6. Have metrics to track
progress internally and
externally
Slide 116
Slide 116 text
7. Don't expect to migrate
perfectly the first time
Slide 117
Slide 117 text
Thank you !
@Jack_Franklin
! Please come and say hello :)
Pictures from pixabay.com