Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

!

Slide 3

Slide 3 text

Migrating complex so!ware @Jack_Franklin

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Thank you Kristina!

Slide 6

Slide 6 text

Thank you Kristina! From now on I'll be taking steps to avoid elevators.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

The Store

Slide 12

Slide 12 text

Started 2 years ago, built on Angular 1 Tickets being sold constantly Used by our flagship clients

Slide 13

Slide 13 text

The store works well. But changing it is very tricky.

Slide 14

Slide 14 text

Legacy codebase An old version of Angular 1 Feature bloat Original developers have gone

Slide 15

Slide 15 text

We lack confidence in our system.

Slide 16

Slide 16 text

The Four T's — Tech — Tests — Team — Talking

Slide 17

Slide 17 text

Tech

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Big bang vs incremental

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Bit by bit ! Release early and often, one bit by a time Learn as we migrate and get better at it Don't break any existing functionality

Slide 25

Slide 25 text

https://www.martinfowler.com/bliki/ StranglerApplication.html

Slide 26

Slide 26 text

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.

    Slide 48

    Slide 48 text

    https://www.sitepoint.com/test-react-components-jest/

    Slide 49

    Slide 49 text

    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 [email protected] Pictures from pixabay.com

    Slide 116

    Slide 116 text

    No content