In the midst of the covid-19 pandemic, we decided to do a little bit of technical spring cleaning.
This article is meant to highlight how and why we did the following to our Srvice Admin app:
- Migrated from React Native 0.59 to 0.62
- Converted our React Native app from Flow to Typescript
Spending a few hours to bump versions and migrating to a different programming language / type-checker was definitely worth it 😀
Converting 20K+ SLOC of Flow -> Typescript
Why?
We’ve been developing our app with Flow for the past year.
We initially chose Flow as our type-checker of choice as it seemed like Flow was a better-suited option due to its support and integrations for React + React Native.
As our codebase grew, we slowly started to realize some issues with Flow:
- The Flow server would constantly crash and would not restart on its own
- Type checks would pass with type issues (false negatives)
- VS Code integrations for Flow conflicted with VS Code Typescript extensions; after disabling the conflicting Typescript extensions, we were missing out on Intellisense and many other awesome VS Code features.
- Type checks would pass with type issues (false negatives)
- Not being able to emit plain JS
After experimenting with Typescript + React Native in a fresh project, we decided that it was worth migrating.
There are many blogs out there that cover their migration guides, motivations, and Pros + Cons lists, but we wanted to tell our story as well.
Migration
We recommend creating a new/fresh react-native project (in a different repository).
Since we heard great things about React Native v0.6x, mainly the performance differences, we decided to bump RN versions during this process as well.
We followed this doc for creating a fresh Typescript + RN project:
Make sure to upgrade to the latest stable version of the RN CLI in order to use that boilerplate template^ https://github.com/react-native-community/react-native-template-typescript#note-on-the-legacy-cli
After creating a new project/repository successfully, we copied over our Flow (.js) files into our new repository.
We manually installed our dependencies with the exact version numbers that we used in our flow project; to avoid breaking the app.
$ yarn add <some-package>@<some-version># run pod install after installing all desired
$ cd ios && pod install
We then installed this Babel plugin https://www.npmjs.com/package/babel-plugin-flow-to-typescript as a dev-dependency and ran the following command:
GNU Parallel can be used to optimize this
$ find ./app -name "*.js" -exec npx babel --plugins flow-to-typescript {} -o {}.ts \;Don’t forget about .jsx and .tsx files as well!
The plugin didn’t work perfectly so we had to manually polish some of the types and syntax. TypeScript was also more strict by default based on our tsconfig so we decided to fix any type-check issues along the way.
Make sure not to use any when it is not needed or leave a TODO comment and get back to cleaning up your types later.
Once we were done converting the app we ran a fresh build with:
$ yarn iosWe did some manual testing to see if anything broke and we ran our test suite.
Thank you for reading our article, we hope that it was meaningful/useful.
Follow us for more insightful tips and updates!
Follow Srvice on Instagram -> https://instagram.com/srvice.ca 🎉
Twitter -> https://twitter.com/srvice_ca?s=09
We’re reshaping the exchange of services. Check out Srvice.ca!
