Go Do

A few words on how I built our app Go Do and what I learnt from that.  

Warning also contains some highly subjective ranting.

So a quick bit of background. Go Do is an app that allows you to find events in your local area. You can get it here www.justgo.doThere are only two of us working on Go Do. I did all the development and Carl did the design. All in all it took about 7 months to build and launch on both ios and android. We chopped and change the design quite a bit in that time as well. That also includes the time spent on the backend but here i’m only going to cover the front end.

React Native

Go Do is built using React Native. I choose to use React Native simply because I already knew React and Javascript. I did consider using xamarin for a bit mainly because its C#. I even considered trying it with F# but the end goal here was to build something before I ran out of cash and learning something new would have set me back.

So it turns out React Native is a really good bit of engineering generally speaking it just works and so far I have written no native code at all. I did create the IOS splash screen in Xcode but that is literally all I had to do. The app has only a few lines of platform specific code in it, mostly to do with the android back button. This ability to deliver on both platforms from a single code base is just awesome 

   Tom’s Tips – for a single code base app

  • If you can design your app so it’s the same on both platforms. You can potentially half your workload this way. Yes they have different design principles and guidelines so just stay within both. Plus the “experience” will be near identical which is what you want
  • Design your app so it’s scalable and works on any screen size. This does take some careful thought and you will need to compromise but you have to do this on android anyway so why not get iPad thrown in for free on iOS?

The other good bits about React Native  –

Live/Hot reloading – Not having to recompile all the time means you can constantly be tweaking and testing and believe me you will do a lot of that.

CSS – This is so much better than web development. I just declare my style objects in with my components and they are even type safe! If i need to share them I stick them in a module and import them.

Code push –  Allows you to push out updates over the wire to fix bugs and tweak the app without going back though approval. It has its limits and it’s a bit hard to get set up but it’s worth it.

Community – For a young tech there are a lot of good github projects. I’m using AirB&B’s maps 

Performance – The performance is amazing it feels like any native app. You do however need to understand how to optimise react

and the not so good bits –

Updating – this seems to cause lots of issues every time I do this I have to reinstall all the react native modules im using.

Changing the project name – I started the project with a different name and tried to change it half way though. It was so painful I gave up.

Hot reloading – somehow I broke this and never got it working again. Which is a shame as it’s awesome.

Gesture response – The performance is great but the way this works seem very unreactive and rather complicated. I’ll caveat this that I have no idea how they could do it better.

JavaScript! – Understand that writing javascript is my job but its 2017 we could do better!  When you program you are building your own maze. When you program in JS you don’t even get a match to find your way around.

  Tom’s Tips – for surviving JavaScript

  • Use Typescript or Flow it can be a pain to set up but it will give you semi decent tooling which will save you time in the long run.
  • Use functional programming principles as much as possible. You don’t need to know what a monad is but you should understand the concepts purity and immutability. If you like this makes your maze 2d not 3d.
  • Avoid using “this” wherever you can.

 

Architecture

First point you would do well to use stateless functional components wherever possible.  It makes you application easy to reason about. The ideal is you pass you view a single state object and it will render correctly. Keep that in mind and your on the right track.

For state management I don’t use redux. I have in the past but I have a few reasons for not using it on this project

  1. I don’t like making actions and dispatching them when I could just call the reducer function directly
  2. If you don’t use time travel or the redux dev tools you don’t need actions.
  3. It only does half the job. Setting state. Side effects are well.. side lined

Instead I use a modified version of this approach which is a JS implementation of the Elm architecture

It does more but with less boilerplate and I find it simpler. I also use Ramda a lot mainly for for mutating the state. I have used ImmutableJS in the past but i found it hard to debug and overly complex. It’s probably more efficient but in this app that’s never going to be the bottleneck. Ramda is great but it confuses the hell out of TypeScript at times.

In elm each “Action” is a pure function that takes the current app state – mutates it and returns it. However In addition it also can return an optional list of “Effects”. These are side effecty functions that return promises.

The beauty of this is approach is the core of you app is easy to test and reason about. As its only pure function that make up your app you can easily test that when this happens it should set the state to this and make this call to the server.

I started by using ramda a lot and just composing up functions. What I found however if that this mixed data structure of the app state and list of effects was not so easy to work with. The problem is you need to be able to compose pure “Mutators” that just act on the state on one level and “Actions” that also add effects on another. For example a “Load Data” action is both triggered directly from a refresh, or as part of the “Initialize App” Action

So I would end up with concise but hard to read code like this. Here the “Action” takes the app state but returns the state and a list of effects if any. 

 

const setLoadingStatusToLoading = (appModel:AppModel) => setLoadingStatus(Loading, appModel);
const loadEventResult = (model:AppModel) => makeResponse([loadEvents(model.mapLocation)],model);
export const loadEventsAction = pipe( setLoadingStatusToLoading, loadEventResult);

So instead I switched to a functor based approach. Don’t worry about the terminology the code is easy to read.


const setUserLocationAction = (location:Region):Action => (update) => {
   return update.map(setUserLocation(location))
       .map(setSearchLocation(location))
       .addEffect(setUserLocationWatch)
       .chain(setMapLocationAndLoadEvents(location))
}

Granted these don’t do the same job but stay with me and hopefully its enough to get the idea. Now “Actions” must always take and return an “Update” object. This has a few functions on it.

  • Map is just a mutation of the app state which i call model.
  • AddEffect adds an effect to the list by default this is always empty.
  • Chain is used to compose actions together.

I find this easier to read and follow

 

The Short

So to conclude I found React Native to be surprisingly trouble free. I would definitely recommend it. Yes its has a cost but it beats building the same app twice.  If you had something really technically complex you wanted to achieve then you may want to go native. Still I suspect even then a hybrid approach would save time.

Using a functional approach greatly simplifies things. It makes the code easier to follow and easy to change. Trust me I’ve built enough OOP MVC apps to know this.

And lastly the one size fits all approach to app design is a huge win if you can make it work.

 

So check out our app… oh and go and do something fun.

 

 

 

Comments are closed.