Musicly/Noisli in React Native

December 09, 2017 0 Comments

Musicly/Noisli in React Native



Photo by Ben Kolde on Unsplash

This is my first blog on Medium and very first one on React Native, please skim to the next paragraph, if you don’t wish to hear my background. I hail from Core/Native iOS background with Objective-C & Swift and have tried Hybrid Development framework like Ionic, after which I never went back to Hybrid Development due to its varying/evolving/weby nature, though I like web development, as everybody else who cared for a great user experience, I also didn’t gave Hybrid frameworks a major space in the Mobile Apps world. That’s my overall contextual background for this post. Small introduction only, right? ;)

Please allow me to share my learnings with you, as I am pretty sure that you’ll be definitely getting some React native based facts at the end of the blog, even if you have/haven’t tried or even if you don’t plan to try it out.

Initially, when I heard a news that Facebook has released a cross platform framework, as most of us(at least people around me), I also presumed that its an yet another Hybrid framework hence I ignored the news altogether even when it said that its equivalent to a Native app, since thats the way most of the Hybrid frameworks promote themselves. But, after few days when I looked into their official pages, I saw that they really had Native app working behind the scenes by having Javascript as the interfacing language, which kinda triggered me to keep it in my bucket list, which was there for a very long time, as it usually does with me for anything I do every time.

Last weekend, I finally got that precious time and decided that instead of simply walking through the docs and trying out the already given sample, I’d actually build something to even try it out.

Recently, I’ve been using the Noisli chrome extension frequently to concentrate/focus while working and has shown a constant productivity increase by filtering out the external noise. I didn’t yet buy the app, since I mostly use it on my Mac just when working, but its also useful while meditating, while driving(Have tried listening in the car, it was fabulous, it gives a serene/ambient/divine feel).

So, I decided that I’d built my own version of ‘Noisli’ in React Native and i call it as ‘Musicly’, (‘Zingly’ was better la?).

Before talking about my experience with it, lets describe RN a bit for those new comers ;)

React Native is a cross platform framework (I won’t call it as a hybrid framework, since I give this name to those frameworks that loads UI into webviews) for building apps on iOS and Android and it inherits principles and syntax from ReactJS.

Pros of React Native:

It covers the major platforms: iOS & Android, which is very much sufficient for most of the businesses. Most of the code can be re-used across the platforms.

This is the selling point of React Native. It provides a handful of ready made components that can just be plugged and played, which eases the development process. For RAD, it is a BOON.

Developers don’t have to reload for changes to reflect, thus less build time and faster development. Think about making small UI changes by maintaining the app states, its definitely a BLISS.

Javascript has been the most preferred front-end language FOR YEARS.

Since it doesn’t use HTML/CSS to generate components, instead only creates a bridge to connect with native components, the USER EXPERIENCE is almost equal to a native app. Thus the next pros.

Since, javascript is used across the platforms, but still might need help from native team, which can be very small for custom UI components and creating other unavailable modules.

Cons of React Native:

Since javascript is only an interfacing language, its still very depending on the native code and thus on developers with skill sets of ObjectiveC/Swift for iOS & Java/Kotlin for Android.

Since, RN is anew, its still maturing and the open source community is still developing and there aren’t much open-source components/modules when compared to native.

Since React Native API’s needs to be updated each time when iOS or Android SDK gets an update, it takes a little bit more time for them to upgrade and not all the API’s gets updated at once.

You’re still in control of Facebook’s license(BDD).

Photo by Nicolas Picard on Unsplash
  • React JS uses virtual Dom to render UI components in browsers/webviews, whereas React Native uses native API’s as a bridge to render components on mobile. For example: It uses UIKit components/API’s for iOS through Objective-C or Swift and for Android, it uses the equivalent UI components via Java.
  • React Native uses <Text>, <View> whereas React JS uses <p>, <div>
Photo by Thomas Lefebvre on Unsplash

Jumping back to my experiences with React Native.

There are 3 ways to build RN apps:
1.) CRNA (Short for create-react-native-app) or Expo based app
2.) Expo ejected app
3.) React Native (‘react-native’ way)
1.) ‘CRNA (Short for create-react-native-app)’ or ‘Expo based app’ method:

Expo is a framework/tool that acts as an interface between React Native & developers to simplify the development process. It basically provides an XDE from which you can literally control the packager and run your app on Simulator/Emulator. And most of all, the Getting Started guide on the home page of RN suggests to use Expo hence its kinda official as well.

So, I started off with the default suggested way.

Pros of Expo:

Provides an XDE to control the packager and launch the simulator/emulator
Provides an Expo Client app for iOS & Android, which can be used to run your app on the device
Faster development, you just have to start the packager and you see your app live on simulator & device at the same time across platforms.
Works well for most of the apps that just displays data from the service.
+ all pros of RN

Cons of Expo:

3rd party components/modules cannot be used
No easy support to debug your app on device as an independent app
Not all device specific capabilities can be tested.
No easy way to configure test/release build.

In my case, I wanted to have an Audio module, which is not yet provided by RN, but there are 3rd party modules available from the open source community, but since I can’t integrate external libraries into Expo based project, that option was ruled out. Hence, looked into the Expo API’s and fortunately, expo provides it. I integrated it into my app, after few struggles, but the main feature of the app is to play audio in the background mode, which is not feasible to easily test in an expo based app, since I can test my app on device only inside the Expo Client app for which I need to configure the background audio capabilities for the Expo client that’s not in my control.

Lessons learned from ‘Expo based app’ method:

Developing an app with a native device capability enabled is tough, after a while I was feeling like being wasted a long time to even check the possibilities of integrating the external modules/components into Expo based app.

So, I jumped onto the next option/method.

2.) ‘Expo ejected app’ method:

There is a process called ‘Eject’, which is like taking your app out of the Expo XDE configuration, but it will still use something called ExpoKit (Hence the Audio API’s I used will still work) and it will also ask for your expo credentials to do so.

I ejected my app from using Expo, after which it will use ExpoKit from which my Audio Api’s are called/triggered.

Pros of Expo Ejected app:

Integrate 3rd party components/modules
You can continue to use Expo API’s
You can still run your app on Expo client apps.

Cons of Expo Ejected app:

No easy support to debug your app on device as an independent app
Not all device specific capabilities can be tested.
No easy way to configure test/release build.

I got you. You’re wondering, that all those Cons remain in the same place except 3rd party modules integration.

Yes, exactly, so here I had the advantage of changing the Expo’s Audio API’s(Less featured to the 3rd party Audio module that had more features, but I stayed with Expo Audio in this case.

Lessons learned from Expo ejected app method:

But, I was again limited to test my app as an independent one on the device and hence weren’t able to play the audio in the background.

Hence, Expo Ejected app method also doesn’t suit any app with native capabilities as it makes testing a tough job, though you’d have an option to debug them as separate/native project, I found issues with them and was just fed up with Expo, finally.

So, tried out the last method, which was originally suggested by RN, but for some reason they moved onto expo using CRNA(short for Create React Native App), which is kinda confusing because it should instead have been CRNEA (Create React Native Expo App)

3.)‘React Native (‘react-native’ way)’ method:

Finally, I was at the verge of trying out the last option/method.

Now, Expo was out of my way and I got the freedom to use the vast options given by the open source community, though its still immature, there are quite a good number of options available as of yet.

So, since Expo was out, I can’t use any of the ExpoKit API’s, so I took the decision of changing my Audio module to ‘react-native-sound’, which has more number of features than what Expo had and since I had my code neatly written in a separate component, it was easier for me simply remove the Expo API’s and integrate ‘react-native-sound’ API’s.

When I installed the app on the device and closed the app(moved to the background), and when I saw(sorry ‘heard’) it playing in the background, I felt a sigh of relief.

Photo by Spencer Pugh on Unsplash

Pros of React Native app:

Integrate 3rd party components/modules
+ all pros of RN

Cons of React Native app:

Cant use Expo Client app, i miss it :( ;)
I still had to have Xcode/Android-Studio to run the separate/native project to install/debug on my device

Then I tweaked the app a little bit to match my UI taste and here’s the final app:

‘Musicly — the React Native Noisli’ app screenshot

Here are the open-sourced codes, placed in their respective branches in the same repo:

CRNA (create-react-native-app) or Expo based app
Expo Ejected app
React Native (‘react-native’)
Photo by Al x on Unsplash

Expo guys have done a fabulous job, no doubt on it and they’re still trying to add more capabilities with a small team, which is fantastic.

Expo would still work for majority of the apps, specifically for RAD(Rapid Application Development) iterations, it is still not in the main stream and needs rapid enhancements for the major players or the big guys to start using it.

I found the React Native(react-native) or the last method/approach as the easiest one, since i was not restricted/limited by anything, basically it comes as part of the person’s attitude as well, since I do prefer to work in a boundary-less/flexible/liberal environment. And when i get the flexibility to add/modify anything as i wished it feels good and most of all, you’re very close to the native projects that puts power in your hands and thus its control, which makes this as a viable option for Musicly app that i developed along my learning way and i hope that it is the same for any similar device capability based apps.

That’s all i had to say. If you’ve got something useful, then please don’t hesitate to clap, as it may reach many and might be useful to many others via Medium’s machine learning algo’s.

Expo fans, please thrash me in the comments!

Photo by Quino Al on Unsplash

Tag cloud