Pointers for your ‘next’ React Native project.
So now that React Native is the next best thing, since ‘sliced bread’, I feel a lot of people are rushing into React native projects, without much thought or guidance. Which means in the near future there might be multiple React Native projects which are just waiting to be a ‘maintenance nightmare’.
So I guess, I can do some good by providing some tips and tricks for a moderately maintainable and extensible React Native project. Please don’t consider them as facts but opinions from someone who has done a few moderately complex React Native projects and nothing else. And here are they: -
- For any ‘real life’ Mobile project always start with react-native-cli; if you must start with create-react-native-app/expo, please read its caveats here.
- Always opt for some kind of static typing mechanism; there are 2 main contenders: -
1. Flow — from the Facebook stable, it adds type information to your ES6 file and relies on babel to strip the type information. Your default react-native init project comes with a .flowconfig file, just make sure your project devDependency has the same flow-bin version.
2. Typescript — from the Microsoft stable is a mature beast; its an extension of ES6 and comes with its own compiler and linting tool (TSLint). Moreover its now easier than ever to setup RN with TS!
While both work equally well, I believe Typescript along with TSLint is easier to setup with better defaults and gives me what I want quickly. I found this video really helpful, so a proper shoutout to Leopotam!
You can also checkout my React Native, Typescript, Redux template project, it’s also using awesome-typescript-loader for faster reload times.
If you are just dipping your toe into React Native and/or ES6, the default react-native init project template (which comes with a default flowconfig) might be good enough to get started. Click here for more info.
But in the the long run I would definitely recommend you to migrate to Typescript, if possible.
- Stick with npm — this can be a controversial topic, and unfortunately I am not interested to add any more fuel to fire (or kitty scratches), but if it’s me; I would just stick to npm (as long as its version 5.x +).
- redux — this is a no brainer, unless you are really ‘the adventurous kind’, redux should be the application architecture of your choice. I would ask you to go one further and investigate into the Ducks pattern as I feel it makes your redux code, more succinct and easier to follow.
- So once you are aboard the ‘redux ship’, avoid the temptation to reinvent the wheel, as much as possible; there are multiple well-established redux middlewares(promises, database etc…); use them, and here google and github can be your best friend!
- Onto the editor, I am super impressed with VS Code customised with a few plugins(React Native, Advanced New File, TSLint, etc…) and they work extremely well, including ‘in-editor debugging’.
- And finally when you release your ‘amazing, slick, but the one-bug app’ and cannot afford to wait another 7 days for the iTunes approval process, well don’t; enlist the help of code-push (again from the MS stable) and soon you will be on your way to ‘RN Nirvana’.
And that’s it these are my tips for a successful React Native project. What do you think, let me know in the comments below. And have a safe journey ahead!!!