Photo by on Pietro Jeng Unsplash A deliberate mixture of metals and other elements makes stronger and/or more versatile metals… When your company provides video streaming to global entertainment brands like and it’s crucial for software developers to operate with unified source code and workflows, and to do so in the most platform-agnostic way possible. technology Festival De Cannes SXSW This is the challenge faced by the R&D team at , as we develop video streaming apps for a growing list of global entertainment brands like the ones mentioned above. We started exploring as one of the obvious solutions but were initially unsure how effective it would be, since hybrid apps, which rely on a heavy layer, rarely present with good UX. On the other hand, we soon found that the based framework can achieve native-level performance, for those powered components have not shown noticeable performance degradation in comparison to those programmed in . SHIFT72 React Native WebView React JavaScript Objective-C We have been using for almost a year now and things have been going well. We released our first powered app on and are very close to releasing our new mobile apps. It seems like a fitting time to review our development journey and provide some insight for those considering as we approach the one year mark. Whether the way is rugged or easy? Here is the report. React Native React Native Apple TV React Native The fundamental difference between React and React Native Whether using or , developers rely on for UI and for logic. This is done through _virtual DOM_s that represents nodes and a reconciliation algorithm that dictates the UI update in an on-demand manner. React React Native JSX JavaScript JSX More native than web Although and share this commonality, there is a fundamental difference: doesn’t use to render elements; instead, it relies on and to draw actual pixels on the user’s screen. This differs from where final modifications are passed onto real ,_ think about an tag defined in file. In order to display the designated image on , the tag is actually backed by a native class , which renders a with the properties contained in passed through. It is this encapsulation of underlying UI frameworks, that makes more consistent across various platforms. If were to expose platform specific APIs directly, we would end up with ad-hoc ( ) code for different platforms, which fundamentally contradicts our primary intention — to create a concise and converged code base. React Native React React Native HTML Cocoa Touch Android UI React DOM_s . To illustrate this difference in HTML <Image/> JSX iOS RCTImageView UIImageView props React Native React Native JavaScript With this difference understood, we progressed forward onto some real work. Implementing the Web API Layer Luckily for us is the official language of This means the battle-hardened source code of our existing web system can largely be re-used and the development of new API requests and model layers can easily be achieved by copy-and-pasting the sub-directory. This opens up more time for valuable and meaningful work. JavaScript React Native. /api We also found that a wider range of projects on GitHub could be used. However, since doesn’t use , anything that manipulates on object can not work. For these situations we can only keep the pure logic of the destined project, such as a protocol parser for example. Because of this, it’s very helpful if the project draws a clear line between the logic and UI layer. JavaScript React Native HTML document Implementing the UI Layer This is where we encountered our first real obstacle: implementing the UI layer for the app. At the moment, (0.46.x) appears to not include a full fledged focus engine, nor parallax animation. Due to this, we had to tinker until we found a way to fully support remote controls. Luckily for us, again, ’s intuitive logic flow and modularized source code made adding this feature a lot easier than expected. We’ll leave the modification of for another article, but to showcase the end result, see below. Apple TV React Native TVOS React Native React Native Next, we added more effects, per the requirement for mobile platforms, and rarely noticed lagging animation or sluggish transition in production; however, we did see slow animation in development build, which was likely . caused by the debugger Following the same design pattern of we encapsulated repeatedly used UI elements into s, as this ensures those elements only need to be developed once, and then can be used again anywhere. React, Component Implementing multi-tenancy mechanisms The tension we are facing differs from a lot of other R&D teams who normally work on builds across the development stages (development, staging, product, etc.), in which case can be used to define parameters for these different builds. react-native-config At we are required to deploy executable for various clients, and in some cases the executable needs to enlist meta data from multiple clients. Our clients also generally demand different tints, layouts and even UX flows, which can hardly be reflected by static configuration entries. So we don’t rely on , but rather on a combination of native multi-tenancy mechanisms (i.e., and ) and module dependency. This has worked well for us so far. SHIFT72 react-native-config Xcode targets build variant JavaScript To do so, we indicate the for different targets or variants. Then these entry files decide which components it relies on. Each entry also contains a object that mandates minor presentation tweaks on general purpose components, like tint and layout, if applicable. xxx.index.js index context Component Trees Conclusion With now using for app development, we can go shopping for the best parts from the world of and the world of This is great whenever we are looking for a solution. An interesting discovery we also made along the way is that developers with strong backgrounds in web can help the app team by fixing components, optimizing code and revising some obscured implementations, such as nested . Conversely, the know-how also helps our app developers establishing their web development capabilities. This highlights a key point: has not only made our apps cross-platform, but also our team. After all, if , then maybe somehow the same principle works on apps and the people who make them. SHIFT72 React Native React Native. JavaScript Promise React Native a deliberate mixture of metals and other elements can make stronger and/or more versatile metals References _TLDR => Having set up a number of React Native projects, learnt the quirks and pitfalls, I’ve started to settle on a…_medium.com How I set up my React Native Projects _Update. It’s been almost a year since I wrote this story. You can read my latest finding on this topic in the story…_hackernoon.com Image Caching in React Native _React Native is an exciting framework that enables the developer to easily build native apps using a common web…_moduscreate.com React Native ListView with Section Headers - Modus Create _Why should we add multiple targets to our apps?_medium.com Adding multiple target pipelines for React Native Apps (and Fastlane CircleCI deployment) pt. 1 _This problem has been bugging me for a while now and I am stuck. I want to animate the color property of my text when a…_stackoverflow.com Animate text color change in React-Native _Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the…_reactjs.org Optimizing Performance - React _React provides a declarative API so that you don't have to worry about exactly what changes on every update. This makes…_reactjs.org Reconciliation - React _React provides developers with many methods or “hooks” that are called during the life-cycle of an component, which…_medium.com Understanding React — Component life-cycle _Component state is a way of holding, processing and using information that is internal to a given Component and allows…_medium.com Understanding ReactJS — setState Special thanks to @ for the surgeries. Mathew Joubert
