Devlog for day 11 of my #100DaysOfCode and #Devember coding challenge.

Checklist

Daily Requirements

• 1 hour of coding #100DaysOfCode #Devember
• Devlog #Devember

Extra Tasks

• self study following my own syllabus
• startup or personal project work
• job related tasks
• get involved with Open Source

Progress Report

So I said I’d write a better explanation for the non-bug fixing code I did over the past few days and here goes:

• Flow is interesting. I can see how it’s better than using React’s built-in prop-types. However, it’s a bit annoying that the official docs make no mention of them including Flow in the default generated project. I had to ask on StackOverflow to find out what the new syntax was that showed up recently in new projects yet not in any of the example code in the docs.
  • I guess it’s understandable as Flow support for React was greatly improved recently, but that was over the summer. An entire season has passed with no doc update to mention the inclusion of this new Flow syntax. This is yet another pet peeve of mine when it comes to React Native’s docs.
  • One issue I’m working through at the moment is Flow not finding the react-native-background-geolocation module. I suspect it’s related to one of these issues.
  • The suggestion to use flow-typed won’t work for me as react-native-background-geolocation isn’t one of their included definitions.
  • The suggestion to use a generic flow-typed module export file might work, though I don’t really want to pull in an entire new dependency to just fix one minor error.
  • Until I have time to test and figure out the best course of action, this will just have to be an error that I live with seeing in my editor.
• I used eslint to make my code cleaner and it worked. It helped me identify some issues that I had that crept up in my code as things I wrote changed over time. Mistakes I normally wouldn’t make when writing from scratch, but I can see happening through bug fixes as JavaScript syntax is so flexible. I fully recommend using prettier + eslint as it will help you catch these bugs in real time.
• For integrating react-navigation with redux, this is the canonical example that you should follow:
  • The redux page in the official docs are fine for a simple explanation and introduction, but lack a lot of detail and don’t do any code splitting to help you with code structure design.
  • Meanwhile, the full example code has no comments so you will need to be familiar with both react-navigation terminology and redux terminology in order to understand why files are split up and named the way they are. In particular, you will need to understand what react-navigation means by router and how they are used.
  • If you have trouble and need more examples of how to structure your code, this repo may help.
  • If you need an example of someone using the ducks pattern, you can check this Github issue. Obviously, it’s not perfect as it’s not working, but if you read through the thread, you should be able to figure things out.
• For integrating redux-persist, v5 was a major API break from v4. I had previously used v4 and created what turned out to be a less modular version of the new PersistGate feature. It worked well and I had used it in both my previous MVP projects. PersistGate is much better though and having it be a component someone else built makes me happier as I trust the eyes of many people using the same open source project over just me using my own implementation; no matter how simple it may have been.
  • If you are moving from v4 to v5 on a new project, my suggestion is to just follow the README and re-implement everything (code structure, file structure) from scratch following their recommendations. The time it took for me to try and migrate my code ended up being far too long and brittle. It works, but you’ll find yourself having to rewrite some parts. I ended up just redoing everything from scratch and it turned out to go a lot faster and smoother despite having to throw away old code and rewrite things.

Having worked with React Native for a whole year, I have to say that Expo and boilerplates like create-react-native-app were the biggest boons to the React Native ecosystem in 2017. The learning curve gets real steep when you start having to try and integrate native code modules. Especially if you do not have experience in native iOS or Android development. I ended up using Expo for as long as possible for one of my projects and it was fantastic. I wholeheartedly recommend using it and give it my favorite React Native project award for 2017.

And with that, my last post of the year is done (too busy to write another). Happy New Year and see you in 2018!

Copyright © 2011-2020 Ho Yin Cheng