This document discusses migrating from AngularJS to React. It begins by providing some background on AngularJS and browser history. It then outlines an agenda for the migration, including planning, execution, and examples. For planning, it recommends starting small, transitioning components in parallel, and thoroughly understanding the existing codebase. For execution, it suggests deploying to production quickly, rethinking designs rather than copying, and reasoning from first principles. Examples cover bootstrapping, dependency injection, and testing in React. The takeaways are to remember this is a migration, not a rewrite, and to learn from past mistakes when adjusting to new requirements.

1. Migrating from
AngularJS to React
Adir Amsalem, Front End Developer
adiramsalem AdirAmsalem@amsalemadiradira@wix.com

2. Story Time

3. Jim Clark
Marc Andressen

4. April, 1994

5. March, 1995
Netscape own 75% of the
browser market

6. August, 1995
Microsoft releases
Internet Explorer 1

8. January, 1997
Netscape releases
Netscape Navigator 4.0

9. November, 2000
Netscape releases
Netscape Navigator 6.0

10. 1997 - 2000
Microsoft releases
new version every year

11. Would you use 2-3 years old
Chrome?

13. Browser Market - 2003
Microsoft - 94.4%
Netscape - 1.4%

14. Joel Spolsky
CEO & Co-Founder of StackOverflow

16. They did it by making the single worst strategic
mistake that any software company can make:
They decided to rewrite the code from scratch.
- Joel Spolsky
“
“

17. Hi.
I am Adir Amsalem.
● Front end @ Wix
● Co-organizer @ YGLF
Lithuania
Ukraine
Vilnius
Kyiv
Dnipro
Wix Engineering Locations
Israel
Tel-Aviv
Be’er Sheva

18. AGENDA
Planning
Execution
Examples

19. More than 450 engineers (40% of all Wix)
Deploy to production
every 8 minutes
30 dev groups
diverse tech stack
Over 200 micro
services in production

20. Planning
01

21. Start small,
one step at a time
Tip #1
Remember: migration, not a
complete rewrite.

22. Wix
Stores
Cart

23. Slowly transition
everything else in parallel
Tip #2
As a side job, while product
features are still top priority.

24. Know what you
don’t know
Tip #3
It’s better to start in 2 weeks delay,
than to finish in 3 months delay.

25. Know the project
intimately
Tip #4
Identify every flow, component and
bug fix. Years of programming work.

27. Execution
02

28. Put it on production
as fast as possible
Tip #1
Simple systems are easier to
debug.

29. Re-think, don’t
copy-paste
Tip #2
Ask why. Learn from past mistakes.
Adjust to new requirements.

30. “Reason from first principles”
- Elon Musk, CEO of Tesla, SpaceX & Neuralink

31. App
Widgets

32. App
Widgets
OnClick

33. App
Widgets
Expands

34. App
Widgets
Notifies App

35. App
Widgets
Updates its height
and notify an
external service

36. AngularJS
Widget:
$scope.$emit(‘contentChanged’);

37. AngularJS
Directive on top component:
$scope.$on(‘contentChanged’, () => {
// ...
});

38. React
?

40. Examples
03

41. Bootstrapping & Dependency Injection

42. // import ...
const localStorage = window.localStorage;
const biLogger = configureBILogger();
const httpClient = configureHttpClient();
const stores = configureStores({
localStorage,
biLogger,
httpClient
}, initialState);
const appLoader = AppLoader(App);
ReactDOM.render(
<Provider {...stores}>
<appLoader/>
</Provider>,
document.getElementById('root')
);

43. interface StoresDependencies {
httpClient?: HttpClient;
biLogger?: BILogger;
localStorage?: ILocalStorage;
}
interface StoresInitialState {
cart?: ICart;
}
function configureStores(dependencies: StoresDependencies, initialState) {
const siteStore = getSiteStore(dependencies, initialState);
const cartStore = getCartStore(dependencies, initialState);
return {
siteStore,
cartStore
};
}

44. function getSiteStore(dependencies: StoresDependencies, initialState) {
const {localStorage, biLogger} = dependencies;
return new SiteStore({
localStorage,
biLogger
});
}
function getCartStore(dependencies: StoresDependencies, initialState) {
const {httpClient} = dependencies;
const {cart} = initialState;
return new CartStore({
httpClient,
cart
});
}

45. componentDidMount() {
const {siteStore, cartStore} = this.props;
Promise.all([
siteStore.getSettings(),
cartStore.getCart()
]).then(() =>
this.setState({loaded: true}));
}
render() {
const {loaded} = this.state;
return (<div>
{loaded
? <ComponentToWrap {...this.props}/>
: <LoadingSpinner/>}
</div>);
}

46. Testing

48. Takeaways

49. Thank You
adiramsalem AdirAmsalem@amsalemadiradira@wix.com

50. Q&A
adiramsalem AdirAmsalem@amsalemadiradira@wix.com