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

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.

Jack Franklin

May 25, 2017
Tweet

More Decks by Jack Franklin

Other Decks in Technology

Transcript

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

    sold constantly Used by our flagship clients
  2. We can't iterate quickly, respond to bug reports, or build

    new features in a timely manner. We lack confidence in our system.
  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. 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> ) } }
  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. 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
  9. 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...
  10. One of the goals of this migration is to make

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

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

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

    "under the hood", tooling), we're able to keep work fun and interesting
  14. "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"
  15. "React's state model is less magical; its unidirectional data flow

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

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

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

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