Could you introduce your app in a few sentences?
Math Warriors is a game that brings real time 1vs1 math battles to our smartphones! The difference between Math Warriors and other math games is that it’s played online only, against other math fighters all over the world.
It’s a fun and exciting game for all ages where people can learn or improve their math skills. It’s suitable for everyone from grandkids to grandparents!
The game is available for Android and can be downloaded here. The iOS app is on the way as well (also made with React Native)!
What made you decide to use/switch to React Native?
This question will actually take us a few years back! You see, we are a team of web developers that has experimented with mobile apps in the past. That being said we did tried the
WebView solution, but the solution comes with a lot of limitations and especially the sub-par performance. And as hybrid web apps for mobile were growing larger and more complex they were also becoming slower. We wanted a better approach for coding mobile apps and still use web technologies, without having to code in native technologies that are also different for each platform.
Then, React Native came along. React existed for a few years already as a widespread technology and we decided to give it a try. We created an initial prototype and were amazed by the app performance and the small effort needed to make the technology work. The experience revealed that React Native is a game changer and we decided to go with it. It was a decision that our team is still very happy with!
How did you transition to React Native?
Actually pretty smoothly and easier than expected!
When I initially read about React’s concept, that you code HTML inside JavaScript... it looked weird. Previously we were coding with AngularJS 1.x and we were doing the exact opposite thing, putting JavaScript functionality in HTML, by writing Angular directives. And we were still using both HTML and JS files. Turns out though that after you grasp the React concept (React has a learning curve at the beginning) your new development paradigm feels easier to read, write and maintain as well. You develop a single component that contains both UI code in JSX (JavaScript syntax extension of HTML in React) and functional code in vanilla JS with a clear separation of these 2 at the same time! Only in 1 file! That is awesome!
Now, regarding React-Native particularly there are a few features that feel unintuitive for a web developer at the beginning but it’s not a discouraging thing for sure. Just to mention a couple of examples:
- Not all CSS properties or values of properties are supported yet. More and more keep coming as the framework evolves though.
- Showing simple text is not as simple as in pure React. In React-Native we need a combination of 2 components to achieve that: a Text & a View.
There is a more technical article I wrote about my first impressions on React-Native a few months back. It can be found here
Finally, official documentation is pretty decent and additions are made constantly by the RN team, as the framework adds more features and becomes more mature. The community is also pretty supportive and a lot of handy packages are developed and contributed by developers and companies as well.
Have your tried other cross platform technologies before using React Native?
Well yes and no!
React Native is a cross platform technology where developers code with web technologies and the platform transforms it to native mobile code. As far as I know there is only one other platform with a similar concept; NativeScript. Haven’t tried it so far but I would like to see it in action at some time! So in that sense no.
Besides NativeScript, as mentioned earlier, the team developed hybrid web apps for mobile in the past. That was with the help of Cordova; something we abandoned because of the performance issues. So, in that sense yes.
What has your experience been working with React Native in terms of app performance, have you noticed any impacts?
React Native is really good in terms of performance. You may encounter some performance issues when developing but usually you can find a way to solve the problem. The key here is to understand how React Native works - there is the JavaScript Realm, the Native Realm and the bridge between them. The less your code uses this bridge, the better performance your app will have.
For me, I only bumped into some issues with animation performance - sometimes they did not show at 60 FPS. I was able to figure out a solution with minimum effort and time though. When using animations it’s crucial to make use of the prop useNativeDriver when applicable; it ensures the minimum use of the bridge, by sending all the animation code to be executed to the native realm, so that way you don't have extra passes over the bridge
How has adopting React Native affected developer productivity?
Compared to what we tried before (hybrid web apps for mobile with AngularJS 1.x) productivity has increased.
For starters, with React Native we write less code in comparison to Angular because of the different philosophy of the 2 frameworks. Also, with few lines of code we now have direct access to native behavior and can control performance much much better. The only downside I can think of is delays when facing building issues (i.e. when adding a new external package) but still React-Native has made our development process faster and more efficient overall.
Which tools, libraries and frameworks are part of your development process with React Native?
Tools:
Editors: Atom & VSCode
Version control: Git with GitHub repositories
Linter: ESLint with airbnb configuration but a bit looser
Packages:
redux and react-redux for state management
react-native-i18n for translations management
react-native-fbsdk for facebook login integration
react-native-admob for showing interstitial ads
react-native-billing for integrating in app purchases in Android
What resources have you used to learn React Native? Books, tutorials, courses etc. Anything you can recommend?
Initially I had an introductory session from a friend who had already been writing React for a few months at the time. He talked to me about components, props and state, which are all fundamental to React. He did mention that there are 2 kinds of components: the stateful (or class based or smart or containers) and the stateless (or const based or dummies or presentational) ones and we did a small code example in React.
Then I jumped straight away to React Native official documentation and started taking a look at The Basics section in order to grasp the main idea, configure my environment and write a hello world example in React Native and run it in Android emulator.
After I grasped the very basics I now needed to start better understanding the concepts of state, props, JSX, lifecycle methods and flex. Thus, I went to read articles/tutorials about them and find out more. I mostly did Google searchs and found a few helpful resources such as the following:
Differences between React Components, Elements and Instances
Presentational and Container Components
React State
React Props
What is the difference between state and props in react
Passing data between React components: how to use props and callbacks
React lifecycle methods
A complete guide to Flexbox
Flexbox defense and flexbox froggy games
What are some things that you don’t like about React Native or that need to be improved?
React Native is not perfect yet!
First of all you cannot do everything. For example while developing Math Warriors we could not make the border radius of UI elements exactly as we wanted. You see the CSS property border-radius supports many different types of possible values but RN supports only DP (pixels). We couldn’t really add percentages and for a specific element we had to do a painful workaround to make it look like what we wanted. We managed to make it very alike to our design but we didn’t make it 100% identical.
Another thing is that RN is still under development which means that when new releases come out some things might not work as expected or things that previously worked now don’t. Usually solutions and workarounds come up fast and we are able to continue our work without spending too much time on platform fixes.
Finally, I have noticed that there are no mature out-of-the-box frameworks for developers to pick up and start writing cross platform components immediately (i.e. buttons, toast modals etc). There is Expo but it’s not mature enough yet and it comes with limitations. It’s not easy to integrate an existing project with it. It’s much simpler to start from scratch with it and there are community packages out there that are not built to work with expo yet. Expo is a pioneer in this area though and I believe that over the next months its team will deliver a solid framework for developers.
Anything else you would like to mention?
I would like to say a big thank you to my team :). For the time they have put in and their willingness to deliver quality on the product no matter what their role is.
I would like to thank you Celcius as well for this very interesting interview and for taking the time to do it.
Finally I would like to invite our readers to try out the Math Warriors game and see for themselves how fun and engaging it is!