‘Learn something new everyday’

Well, as long as the ‘everyday’ part of this quote is not taken too literally, we at Teks do try to learn new stuff on a regular basis. At present, our iOS app development team is real excited about trying the first preview of Swift 3 – which was released at last week’s Apple WWDC event. The second quarter of 2016 is on its way out, and among the set of new apps that we are planning to launch soon – two are worth a special mention, since they have been made with an all-new technology, React Native. In today’s edition of AppBoard Tuesday, we will be putting the spotlight on the React Native tool, and how it is useful for making native applications:

1. Underlying language – React Native uses Javascript to create native views, and allows coders to manage view controllers in a systematic, programming-oriented manner. The technology was brought along by Facebook in early-2015, for making applications for the iOS and Android platforms with a never-before ease (native apps with a web-based language). This is not a tool for making web-wrapper apps…mobile apps that offer high-end native experience can be built, and built easily, with it.
2. Different from (and better than) HTML5 – A significant point of difference between React Native apps and HTML5 apps is, while the former operates on the Javascript VM of smartphones, the latter works within the webview. Most mobile app developers feel that this somewhat limits the performance of HTML5 applications. React Native also makes use of several interesting UI components – adding up to the overall native experience of the published software.
3. Community support and third-party libraries – React Native is a relatively new technology, and as with all new technologies, it requires regular learning and upgradation on the part of those who use it to make apps. This is where the importance of third-party libraries online comes into the picture. It is next to impossible to create custom additional functionalities within the framework, and even for using the latest features – taking reference from external libraries is essential. Android and iOS app developers who work with React Native should also keep an eye out on official PRs and community announcements.
4. Shared features with React – The Facebook and Instagram-managed React.js arrived in March 2013, and it forms the backbone of the React Native technology for building cross-platform native apps. There are several common features between React and React Native – right from unidirectional data flow (using ‘props’) and re-rendering, to the entry point that has a single rendering option (with the ‘render’ function). It won’t be stretching matters much if we say that React itself is the single biggest feature of React Native.

Note: JSX is the name of React’s Javascript extension.

         5. Components rendered as platform widgets – Experts from the field of iPhone app development highlight this as one of the most important advantages of using React Native. For each component called within the tool (using Javascript), a native platform widget gets rendered, adding to the convenience of developers (particularly those who have experience of coding in Javascript and/or Objective-C). With a framework like Apache Cordova, native components can be approximated and smooth UIs can be created – but React Native takes truly native app development to an altogether new level.

          6. React Native vs Xcode – This one makes for an interesting little comparison. When we started out with the two React Native applications, we felt that the new technology, with all its re-rendering – will be on the slower side…certainly slower than Xcode. However, during actual implementation, it was found that this difference was more than offset by the fairly large volume of ‘click-and-drag’ requirements in Xcode, to create methods, elements, constraints, and the like. Views have to be declared only once in React – and provided that component data changes as and when necessary, the development can go on without a hitch. Xcode is, of course, still the ‘set IDE’ for building iOS applications, but React Native is a great alternative for apps that need to have cross-platform compatibility.

Note: To deploy the final build of an app, Xcode is required.

          7. Apps can be reloaded live in simulator – Another fascinating feature that drew our (and that of many other professionals who make mobile apps) attention to React Native. Developers can simply save their programs within the framework. This, in turn, does away with the need of repeated compilation – and the application can just be reloaded real-time in the simulator, for coders to see the results. Just like the swift development cycle for web projects that Facebook maintains (on average, half a day for each project), React Native ensures that that the mobile app cycle will be short too.

           8. Virtual Document Object Model – This is also a feature that React Native shares with React. Whenever any component is re-rendered in the framework, a virtual document object model (virtual DOM) gets created, which is a lot easier to work with than the elements present in a real DOM. The virtual DOM uses the component tree to generate element representations, and makes the overall process quicker and considerably more systematic. All changes in the component tree can be checked first, before they are applied to the real DOM.

            9. It’s all about the UI – With React Native, mobile app makers and designers have to worry less while working on custom interfaces and layouts. Instead of trying to second-guess the final users’ navigation path at every stage, coders only have to make their view declarations optimal (so that different shapes and states can be properly handled). Thanks to React’s greater machine understandability, detecting design bugs and issues also becomes an easier task.

             10. The speed factor – React Native offers as close a native app development experience as possible (unlike several other cross platform frameworks that do not seem close to either Android and iOS). While the speed of Javascript cannot be as high as that of true native code – it is possible to run React Native applications at 55-60 fps. All that the developers have to do is make sure that the Javascript thread is not blocking out the UI in any way. Animations, as and where applied, are fast and glitch-free as well.

Hybrid app frameworks like Ionic (with AngularJS) also do a fair job, but React Native is lighter than most of them – and hence, is more efficient. The fact that React has already climbed to the 6th position in the top-ten starred Github projects is a clear indicator of the popularity of this technology. We enjoyed using React Native for makingthe two new applications, and are looking forward to implement it in certain future projects too. It’s a very handy cross-platform tool.

And that, readers, is the end of yet another week’s AppBoard Tuesday (ABT). If you have worked with React Native, do write in to us – sharing your experience and opinion about the technology. New programmers can get in touch with their development-related queries too.

AppBoard Tuesday will return in a week’s time, with another relevant app development-related topic. Till the next time, love thy apps!