React NYC 11/9/2017

reactNYC youtube channel:   youtube.com/reactNYC
Slack Channel:              nycjs.org.now.sh

# Converting an application from angular 1.5 to react 16

## Overview
- It took 1 quarter
- 15 engineers, 100+ employees (a little smaller than VTS)
- 1700 files, 124k lines (over 6-8 months)
- How to get buy-in from the org?
  - Can make things faster, clear technical debt, improve stability, make great tests
  - Concrete: Performance, stable, attractive to candidates

## Side-by-side approach to the integration
i.e. gradually port the whole codebase. No stop the world approach
- Don't have to port the features you're already building
- Similar angularJS architecture to VTS

## Blending frameworks
- Routing
- ngreact
- Redux
  - [ ] Can we port our angular services to redux without making them be consumed by react?
  - Map redux actions and selectors to angular
  - Angular doesn't have to talk to react directly, can leverage redux
  - Create angular constant that is the redux store
- angular is allowed to call react, but react is not allowed to call angular
  - Except for changing routes
- Inject angular router into react

## Three phases
1. Bottom up
  - First do the small little components (e.g. avatars, pictures, etc.)
2. Page-by-page
  - Touch on the view/container components fully
  - Make the route map to an entire react component.
  - Can use the same feature testing on the components
3. Router switch
  - Change angular router to react router

## Incremental onboarding of people
1. Initial team
2. New hires
3. Whole team
- Kind of only relevant if we're hiring. We are not.

## Results
- +80% better page loads
- +infinite% tests
- Much happier

## Lessons
- Envision the final architecture from the get-go
- Don't adapt to angular. Try to do it as react-ish as possible. Refactor!
- Bridge angular and react router
  - This was pretty difficult and painful
  - Let them work together?
  - An angular component that takes some react router history and work together

## Question:
- You can implement many of the patterns that react uses in angular 1, why choose to rewrite your application?
  - Codebase was large, not well tested.
  - Looking at UX and page loading times, people were excited about what react brought to the table.
  - Would have been a big project anyway.

# Bringing Components to Legacy Code