Migrating From AngularJS To React
1 like477 views
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.
![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>);
}](https://image.slidesharecdn.com/migratingfromangularjstoreact-adiramsalem-170807225121/85/Migrating-From-AngularJS-To-React-45-320.jpg)
Migrating From AngularJS To React
- 1. Migrating from AngularJS to React Adir Amsalem, Front End Developer adiramsalem AdirAmsalem@amsalemadiradira@wix.com
- 2. Story Time
- 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
- 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
- 35. App Widgets Updates its height and notify an external service
- 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