Front Trends: Migrating complex software

Front Trends: Migrating complex software

A talk about migrating complex software, based on my experience of Angular => React at Songkick.

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

May 25, 2017
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 7.
  6. 9.

    Started 2 years ago, built on Angular 1 Tickets being

    sold constantly Used by our flagship clients
  7. 12.

    We can't iterate quickly, respond to bug reports, or build

    new features in a timely manner. We lack confidence in our system.
  8. 14.
  9. 15.
  10. 17.
  11. 18.
  12. 19.
  13. 20.
  14. 21.

    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
  15. 26.
  16. 27.
  17. 28.
  18. 29.
  19. 30.
  20. 31.
  21. 32.
  22. 36.

    3. 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> ) } }
  23. 37.

    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>
  24. 38.
  25. 40.

    We can continue this strategy, migrating the other components to

    React: <li> <react-component name="ListingsTitle" props="..." /> <react-component name="ListingsButton" props="..." /> </li>
  26. 41.
  27. 42.

    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> ) } }
  28. 44.
  29. 46.
  30. 52.
  31. 55.

    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
  32. 56.
  33. 57.

    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...
  34. 59.

    One of the goals of this migration is to make

    it easier to fix bugs with confidence.
  35. 61.
  36. 62.
  37. 63.
  38. 65.
  39. 68.
  40. 69.
  41. 72.

    Release early, release o!en ! Easier to react 2 to

    a bug if release causes it 2 pun very much intended
  42. 75.

    The next time you touch some code, you'll know more

    about it than before. So why make it perfect now?
  43. 77.
  44. 79.
  45. 80.
  46. 81.
  47. 82.
  48. 83.
  49. 86.

    By providing a mix of migration tasks (big, small, visual,

    "under the hood", tooling), we're able to keep work fun and interesting
  50. 87.
  51. 90.

    "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"
  52. 92.

    "React's state model is less magical; its unidirectional data flow

    really simplifies code and makes it easier to reason about"
  53. 93.
  54. 94.

    "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"
  55. 95.

    "We will improve our mobile load time + performance so

    users on mobiles should see fewer issues and have a nicer experience"
  56. 97.
  57. 101.

    We put a lot of work into making sure things

    don't go wrong on production. But unfortunately they will, at some point.
  58. 102.

    There are two types of developer 3 3 shamelessly stolen

    from Twitter! https://twitter.com/beerops/status/866808660030345218
  59. 104.

    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! :)
  60. 105.

    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
  61. 106.
  62. 107.
  63. 109.
  64. 117.