Developing: First mobile app
Recently had an idea for a very simple mobile application, having been a runner for some time I already had an app for finding running events, but when I recently took up cycling I was surprised to see that nobody had created something similar for cyclists. While probably not a massive need, it is a nice things to have as most sites do not cover all available events, so a single source is handy.
As a Front-end/Web Application developer my first instinct was to head towards a hybrid solution, as Javascript is my strength and I had already gained some experience through work on a past project using Ionic, so it seemed like a good idea t the time.
As it was my own project, I decided on the riskier approach and went for Ionic2, which at the time was still in beta, biggest reason for that was the idea of killing 2 birds, maybe even 3, this way I would gain experience with IO2 and learn Angular2 in the same breath as well as hopefully end up with a pretty decent app.
The process started out quite simple, getting most of the view components setup and working was easy enough, the complexity began to come in when working in actual logic and reusing the components I had written, I quickly became unimpressed with what I believe to be extremely silly changes Angular made for V2, things that used to be dead simple like providers (formally services) had developed additional steps that to me seem quite unnecessary, like having to import and bootstrap a service within the parent layer (formally run method), before I could import and use it within a component, and unfortunately being in an RC state, it was quite frustrating having to find solutions to problems that quite frankly should never of existed to begin with.
In the end I persisted, not one for giving up easily, I figured there had to be a way to win within this scenario, so I carried on with the project and managed to get what I felt was a decent first stab completed.
As this project was the precursor to a larger idea that a friend and I were working on there was some waiting to be done before it could be submitted to the store, some general copy and designs and such.
During this time, I had heard about React Native from one of the guys at work, and as the project I was on was a React one, it seemed like a good idea to look into this, I was impressed with the idea of coding in JS to yield a native result.
While I had expected that this was likely to result in a faster application, I was most pleasantly surprised by the results, even in the initial stages the performance advantages were obvious, and being so close to react itself (it is dependent on it), it was pretty simple to learn, it was very well documented with proper code samples to go along with it. I only ran into a few hiccups, having come from a mostly FE background, some of the strictness was frustrating, even though understandable, at first, writing a stylesheet with no cascade as a Javascript object…
React Native also explicitly uses flex to control it’s layout, which is quite fantastic, but a little complicated when you are not familiar with it and its caveats, this is made even more complex by the lack of inspect tool that I had become so used too, a bit of a time rewind having to build layouts with the old ‘Save and refresh’ method, as the debugging version of the application is still an APK that gets installed onto an android emulator, or physical device if you connect one up. You can still make use of a browse for some debugging, but that is limited to what can be done in a console.
It did take a bit longer to develop the actual application in React Native, with the additional complexities, but the end result was a much better performing application.
Comparing the Ionic2 and React native applications, the most noticeable difference was start time, the Ionic2 took nearly 7 seconds before the first screen was displayed, while React Native was far closer to 2. From a users perspective, an application loading 3x faster is an absolute no brainier.
A final note, React Native, is not 100% pure native as the name may suggest, you still have your Javascript running, just with a far deeper integration into the device’s capabilities and methods, while the performance is excellent, and far exceeds that of a truly Hybrid/Webview solution.
If you are looking for something that yields a truly native result, a good option to look into would be Xamarin. I have no personal experience with it, but it has got a few more years under it’s belt than React Native which is currently still in RC, I would expect that in some cases the performance would be better at this stage and it is likely that it has better/more support within the specific OS’s, only time will tell what React Native can really do.
To read up more on React Native: Main website| Getting Started| Performance
App links: Lusus on Android | Lusus on IOS (Coming soon) Rendering HTML in your React Native application Working with RAW HTML in React native is unfortunately not a simple task, for an application I recently developed, the…medium.com Welcome to Lusus | Lusus: Cycling Database Welcome to Lusus | Lusus: Cycling Database
