Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front Trends: Migrating complex software
Search
Jack Franklin
May 25, 2017
Technology
1
740
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
Share
More Decks by Jack Franklin
See All by Jack Franklin
Advanced React Meetup: Testing JavaScript
jackfranklin
1
190
Components on the Web: Frontend NE
jackfranklin
1
740
ReactiveConf: Lessons Migrating Complex Software
jackfranklin
0
400
Migrating from Angular to React: Manc React
jackfranklin
1
140
Half Stack Fest: Webpack
jackfranklin
4
470
FullStackFest: Elm for JS Developers
jackfranklin
1
200
Codelicious: Intro to ES2015
jackfranklin
0
330
PolyConf: Elm for JS Developers
jackfranklin
0
250
JSCamp Romania: Elm for JS Developers
jackfranklin
1
250
Other Decks in Technology
See All in Technology
クレジットカードを製造する技術
yutadayo
4
440
All your memory are belong to… whom?
ennael
PRO
0
530
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
320
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
360
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
140
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
300
普通の Web エンジニアのための様相論理入門 #yapcjapan / YAPC Hakodate 2024
ytaka23
2
260
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
2
140
XPを始める新人に伝えたい近道の鍵
nakasho
1
240
AWS Lambdaで実現するスケーラブルで低コストなWebサービス構築/YAPC::Hakodate2024
fujiwara3
3
840
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
280
KDD2024参加報告
cyberagentdevelopers
PRO
0
190
Featured
See All Featured
Building Adaptive Systems
keathley
37
2.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
2
210
Documentation Writing (for coders)
carmenintech
65
4.3k
Art, The Web, and Tiny UX
lynnandtonic
295
20k
Building Applications with DynamoDB
mza
90
6k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Atom: Resistance is Futile
akmur
261
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
403
65k
How STYLIGHT went responsive
nonsquared
94
5.1k
Transcript
! From Angular to React @Jack_Franklin
Migrating complex so!ware
None
None
None
None
None
The Store
Started 2 years ago, built on Angular 1 Tickets being
sold constantly Used by our flagship clients
The store works well. But changing it is very tricky.
Legacy codebase An old version of Angular 1 Feature bloat
Original developers have gone
We can't iterate quickly, respond to bug reports, or build
new features in a timely manner. We lack confidence in our system.
The Four T's — Tech — Tests — Team —
Talking
Tech
None
Big bang vs incremental
None
None
None
None
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
https://www.martinfowler.com/bliki/ StranglerApplication.html
http://2017.theleaddeveloper.com/ | @saleandro
We shipped migrated code the day a!er starting this migration.
The Theory Components (or directives in Angular)
None
None
None
None
The plan
None
None
Migrating a component
1. Find all dependencies that a directive uses
2. Migrate all of those one by one to React
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> ) } }
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>
None
With ngReact <li> <h2>Rihanna at The O2</h2> <react-component name="ListingsButton" props="..."
/> </li>
We can continue this strategy, migrating the other components to
React: <li> <react-component name="ListingsTitle" props="..." /> <react-component name="ListingsButton" props="..." /> </li>
None
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> ) } }
And update our template <react-component name="ListingsItem" props="..." />
None
And we now rinse and repeat as we replace Angular
with React Forever.
Tests
We cannot break the store
Unit tests Migrated from Angular to React + added to
as appropriate.
https://www.sitepoint.com/test-react-components-jest/
Unit tests are coupled to the implementation code.
Acceptance tests
None
Automated tests that are entirely decoupled to the application code.
Because they are slow to run, we keep acceptance tests
to our core user journeys
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
Team
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...
Momentum & Prioritisation
One of the goals of this migration is to make
it easier to fix bugs with confidence.
Pick work based on bugs and churn rate, not code
quality
None
None
None
Mix larger, multi-week work with short, 1-2 day work, to
keep momentum.
None
Break down large work into smaller cards and pull requests
Feature branches
None
None
Release early, release o!en Encourages small pull requests and units
of work
Release early, release o!en Keeps momentum up in the team
and keeps risk to a minimum
Release early, release o!en ! Easier to react 2 to
a bug if release causes it 2 pun very much intended
The scout's rule Always leave things better than when you
found them.
A migrated codebase is not a perfect code base
The next time you touch some code, you'll know more
about it than before. So why make it perfect now?
The lo!ery factor Thanks to https://twitter.com/aaronjrandall for the term
None
Metrics, metrics, metrics
None
None
None
None
Tooling
hashtag fatigue
Migrations are a good excuse to upgrade your tools.
By providing a mix of migration tasks (big, small, visual,
"under the hood", tooling), we're able to keep work fun and interesting
Talking
The most important people to convince are not in your
tech team.
And they don't care about frameworks
"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"
"React's lifecycle methods and small API is easier for developers
to learn"
"React's state model is less magical; its unidirectional data flow
really simplifies code and makes it easier to reason about"
None
"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"
"We will improve our mobile load time + performance so
users on mobiles should see fewer issues and have a nicer experience"
Fix bugs that cause pain for other departments
None
Keep people in the loop
Deal with !
http://gunshowcomic.com/648
We put a lot of work into making sure things
don't go wrong on production. But unfortunately they will, at some point.
There are two types of developer 3 3 shamelessly stolen
from Twitter! https://twitter.com/beerops/status/866808660030345218
Those who have broken production Those who are about to
break production
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! :)
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
None
None
It's a two way street
Takeaways
1. Don't migrate for the sake of it
2. Plan, plan and plan again
3. Cross business communication is so important.
4. Prioritise based on pain points in your current application
5. Mix up tasks based on difficulty + type to
keep it interesting
6. Have metrics to track progress internally and externally
7. Don't expect to migrate perfectly the first time
Thank you ! @Jack_Franklin ! Please come and say hello
:) Pictures from pixabay.com