Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactiveConf: Lessons Migrating Complex Software

ReactiveConf: Lessons Migrating Complex Software

Jack Franklin

October 26, 2017

More Decks by Jack Franklin

Other Decks in Technology


  1. !

  2. Started 2 years ago, built on Angular 1 Tickets being

    sold constantly Used by our flagship clients
  3. 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
  4. Write the React component import React, { Component } from

    'react' class ListingsButton extends Component { // code left out to save space :) render() { return ( <a href="" className="">Buy now!</a> ) } }
  5. But how do we embed this within Angular? Angular directives

    are used as if they were custom HTML elements: <li> <h2>Rihanna at The O2</h2> <listings-button url="...">Buy now</listings-button> </li>
  6. We can continue this strategy, migrating the other components to

    React: <li> <react-component name="ListingsTitle" props="..." /> <react-component name="ListingsButton" props="..." /> </li>
  7. 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 ( <li> <ListingsTitle ... /> <ListingsButton ... /> </li> ) } }
  8. 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
  9. One of the goals of this migration is to make

    it easier to fix bugs with confidence.
  10. Release early, release o!en ! Easier to react 2 to

    a bug if release causes it 2 pun very much intended
  11. The next time you touch some code, you'll know more

    about it than before. So why make it perfect now?
  12. By providing a mix of migration tasks (big, small, visual,

    "under the hood", tooling), we're able to keep work fun and interesting
  13. "React's state model is less magical; its unidirectional data flow

    really simplifies code and makes it easier to reason about"
  14. "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"
  15. "We will improve our mobile load time + performance so

    users on mobiles should see fewer issues and have a nicer experience"
  16. We put a lot of work into making sure things

    don't go wrong on production. But unfortunately they will, at some point.
  17. There are two types of developer 3 3 shamelessly stolen

    from Twitter! https://twitter.com/beerops/status/866808660030345218
  18. 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! :)
  19. 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