We shipped migrated code the
day a!er starting this
migration.
Slide 27
Slide 27 text
The Theory
Components (or directives in Angular)
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Migrating a component
Slide 35
Slide 35 text
Write the React component
import React, { Component } from 'react'
class ListingsButton extends Component {
// code left out to save space :)
render() {
return (
Buy now!
)
}
}
Slide 36
Slide 36 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 37
Slide 37 text
No content
Slide 38
Slide 38 text
With ngReact
Rihanna at The O2
Slide 39
Slide 39 text
We can continue this strategy, migrating the other
components to React:
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 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 42
Slide 42 text
And update our template
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
And we now rinse and repeat
as we replace Angular with
React.
Slide 45
Slide 45 text
Tests
Slide 46
Slide 46 text
We cannot break the store
Slide 47
Slide 47 text
Unit tests
Migrated from Angular to React + added to as
appropriate.
Unit tests are coupled to the
implementation code.
Slide 50
Slide 50 text
Acceptance tests
Automated tests that are entirely
decoupled to the application code.
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Slow to run - so we select key
user flows to cover.
Slide 53
Slide 53 text
Team
Slide 54
Slide 54 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 was a year
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
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
knowledge-base.md
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
Migrations are a good excuse
to upgrade your tools.
Slide 85
Slide 85 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 86
Slide 86 text
Talking
Slide 87
Slide 87 text
The most important people to
convince are not in your tech
team.
Slide 88
Slide 88 text
And they don't care about
frameworks
Slide 89
Slide 89 text
"React's lifecycle methods and
small API is easier for developers
to learn"
Slide 90
Slide 90 text
"React's state model is less
magical; its unidirectional data flow
really simplifies code and makes it
easier to reason about"
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 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 93
Slide 93 text
"We will improve our mobile load
time + performance so users on
mobiles should see fewer issues
and have a nicer experience"
Slide 94
Slide 94 text
Fix bugs that cause pain for
other departments
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Keep people in the loop
Slide 97
Slide 97 text
Deal with !
Slide 98
Slide 98 text
http://gunshowcomic.com/648
Slide 99
Slide 99 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 100
Slide 100 text
There are two types of
developer 3
3 shamelessly stolen from Twitter! https://twitter.com/beerops/status/866808660030345218
Slide 101
Slide 101 text
Those who have broken production
Those who are about to break
production
Slide 102
Slide 102 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 103
Slide 103 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 104
Slide 104 text
It's a two way street
Slide 105
Slide 105 text
Takeaways
Slide 106
Slide 106 text
1. Don't migrate for the sake of
it
Slide 107
Slide 107 text
2. Plan, plan and plan again
Slide 108
Slide 108 text
3. Cross business
communication is so
important.
Slide 109
Slide 109 text
4. Prioritise based on pain
points in your current
application
Slide 110
Slide 110 text
5. Mix up tasks based on
difficulty + type to keep it
interesting
Slide 111
Slide 111 text
6. Have metrics to track
progress internally and
externally
Slide 112
Slide 112 text
7. Don't expect to migrate
perfectly the first time
Slide 113
Slide 113 text
! Thank you!
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
@Jack_Franklin
jack@thread.com
Pictures from pixabay.com