We have multiple teams working on an app which is built using React Native. Currently, each team has the entire setup of the app and develops and tests it's piece of the code and finally, merges the code to the master where it's onboarded to the release train. This causes issues, for instance, a package upgrade done by one team could cause a regression in another feature using the same package.
Has any team implemented a smarter method of coding with react native? In the web world, we would have a shell UI, with a navigation bar. Each component would have a link on the navigation bar and load inside an iframe when their component was clicked. As such, each team doesn't necessarily needed to have the the entire UI piece setup on their machines. Also their code wouldn't mess around with code from other teams as their code would sit in their repository. They would have separate build and release cycles.
Related
I'm working on an application that is written in TypeScript and built with Create React App (CRA). The application needs buttons for reseting various things, so people carrying out manual software testing can do their job. How can I convince CRA to leave the test functionalities out when compiling a production build? I wouldn't want to leave a "loaded gun" behind a simple if statement and a runtime configuration option that might accidentally be turned on one day.
I'm not sure if it is a good practice, but I would have place these buttons with some html tags like data-test-show and hide them (display none or something).
On the test environment I would add some css styles for that attribute to show such elements.
Some cross-platform tools (like Xamarin native and RubyMotion) allow the development of two separate views for Android and iOS, while keeping the business logic shared for both of them. Others (like Apache Cordova or Xamarin.Forms) share both UI and business layer, with the option to use platform-specific overrides when necessary.
What is the state of the interpreted JavaScript frameworks (NativeScript, React Native or Appcelerator)? Are they all focused on creating single UI with platform overrides, or do they allow creating two separate views for each platform? For example, is it possible to create a view using Fragments in Android, but a different view on iOS (since Fragments do not exist there)?
Cordova uses WebView, that mean GUI level will be the same for both Android and iOS but different per Device version. In case of Android each client has own Chronium version and it can break UI behaviour. So developers use Crosswalk to set fixed Chronium version. (extra 20M to your application).
BTW Ionic that uses Cordova architecture uses native behaviour per platform. For example for Android Tabs located at the top, on iOS - at the bottom
On other hand Xamarin (C#), React-Native(JS) and NativeScript(JS) call native APIs. They don't use WebView but generate Native code.
For example if you create button - it will look different: on Android - material theme, on iOS - iPhone theme
Anyways, the bottom line is: everything depends on resources and time. If you want to build application fast, with the same view - I would go on Ionic2+ Angular2 + Cordova.
If you you have more time - go on React-Native or NativeScript (Still has poor documentation) or Xamarin (C#).
React-native's slogan is Learn once, write everywhere. So, you can choose what suits your needs, you can:
Share UI between platforms.
Share Only business logic.
So, the answer for react-native is yes. You can create separate UIs or you can share it.
Since you are writing components, one way of separating this logic is to write component.android.js and component.ios.js and the platform loads the appropriate one for you. Note that you can also do that programmatically.
You can see that in action in the official f8 app made by facebook using react-native
As far as I've searched it appears to be impossible to load modules (=plugins/libraries?) dynamically (I'm very new to React Native..).
What I'd like to accomplish is to let the user of the app load additional functions as she/he desires.
Example:
A user wants to add a music plugin to the app.
Intuitively, I'd long for something like dynamic library loading. The user would fetch the library, it'll be loaded into the code and can then be executed. However, in React Native it seems like there are only modules that can be loaded?
Alternatively, I'd hope that auto-updating the app would allow to add modules "on-the-fly" ( https://github.com/aerofs/react-native-auto-updater or www.npmjs.com/package/react-native-hot-load ). But I fear that this is only for JS and data content?
The ability to dynamically add functionality to the app is an essential part of the app. I have no previous experience worth mentioning in mobile app development.
Question: Is it possible to dynamically add functionality (also native in nature) to React Native apps?
If not, would there be a workaround?
EDIT: I have found the following repository on github: https://github.com/yusefnapora/react-dynamic-linking-example .
Unfortunately, without any description. I have no idea about Objective-C, but the repo name sounds promising. Anybody knows what its purpose is?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Can someone explain how react native works?
Found a lot of good articles about getting started, components usage, exporting modules.. but,
Googling about how react native works doesn't really help, but this article http://tadeuzagallo.com/blog/react-native-bridge that explains how native modules are exported and what happens when javascript calls them.
.. Still I find it difficult to understand (as a javascript dev) things like,
how first render happens on the screen, what are the functions of those 3 threads and how they communicate with each other, what is this javascript event loop, why do we need batched calls and how it is batched, etc..,
Can someone share an article/explain it in a javascript developer perspective?
thanks!
I will try to describe how React Native works. It's a bit complicated.
And first of all I will like to recommend this URL to learn about basics internal mechanism of React Native:
Read: https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html
So you are writing code in JS/JSX (JavaScript) or TS/TSX (TypeScript) but Android uses primarily Java (for sake of this answer, we know it's Kotlin now) and iOS use Swift/Objective-C so how the java script code is running in your Java Virtual Machine or Dalvik Virtual Machine or whatever iOS use.
So here is the problem how to run JavaScript code in Android Machine (iOS machine),
1) Use WebView, but WebView is slow, there is a lot going on in a WebView, so much heavy lifting is done for you by the Android/IOS Machine to run Web Pages in your application. Page loads slowly, scrolling jerks and what not. That's why Cordova and PhoneGap apps don't work well.
2) We don't need WebView right, we need light-weight JavaScript compiler(interpreters) which can compile only a set of JS instructions not all of them. A program which targets only core JavaScript and read new defined XML/ReactNative tags. React-Native tags (Image, FlatList, Text etc) are converted on JS side and converted to JS methods calls not on Android/IOS side.
Read: https://reactjs.org/docs/react-without-jsx.html
JSX is first converted to JS first.
3) Here, JavaScript-Virtual Machine comes into play which is completely different from JVM or DVM. And can run on JVM or DVM.
React Native uses : JavaScriptCore
Read: https://www.raywenderlich.com/1227-javascriptcore-tutorial-for-ios-getting-started (This is for IOS)
Here is one and open source for you to look around
https://github.com/LiquidPlayer/LiquidCore: This is even contains a file system, react-native does not.
Note: Same idea FB used for NodeJs = backend JavaScript.
4) JS-Bundle: So now you can run JS code in your application, but how do you ship it. You will create one file i.e merge of the all the files and library files into one and call it JS-Bundle.
Simple command for Android
node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform android --bundle-output ../jsbundle/index.android.jsbundle --assets-dest ../jsbundle/res
5) JS-Bridge: Like the name provides bridge methods and components to communicate JavaScript and Native-Code(Android Java). How do they communicate, like everything else in React-Native, using JSON. JSON commands are sent to UiManager in native code to create UI on an asynchronous thread, which adds these commands into MessageQueue and process them.
Read: https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8
Also Read : https://tadeuzagallo.com/blog/react-native-bridge/
6) Threads:
JS-Thread : Handles UI commands as explained earlier. JS thread is
created as soon you invoke React-Native view from Android Code (Starting React Activity) and handles every view create or change command from React Native.
Native-Thread(Main Thread): Take press or touch events and pass them to JS-VM,
JS-VM passes them to your code, if success , process them and View change events are passed to your JS-Thread.
Async-Threads Now I don't have much idea about how do you create threads inside your JS/JSX code. Maybe it's possible but before it was not.
So for a JS point view your writing JS code that will run on light weight browser that is ReactView.
Read: https://www.codementor.io/#saketkumar95/how-react-native-works-mhjo4k6f3
I'm building in FlashDevlop as pure AS3.
I'm looking at building a kiosk that uses two screens. Its used to administer tests. So one screen has the test, second the controls for admin the test. I have played with wide app but its not very elegant and I really would like both screens to run full screen on each screen. Is it possible to have one air app spawn two native air windows? A secondary question is it possible to detect multiple screens and target a screen to full screen to? Even something as simple as checking the window size to detect would work, im just not sure I can move and if the low level api will fullscreen on that screen. I could not find any examples of this in the docs.
What docs did you look into? I found it right away.
You'll need the Screen class if you want information on the screens that are connected to the PC. And here's some documentation on using it.
To create new windows, just instantiate a new NativeWindow class and call activate() on it when you're done configuring.
There's a lot of other useful stuff for you in the flash.display package. All the AIR stuff is marked with a little AIR icon. I have to admit that it would have been easier to find if they had put these classes in a separate AIR package.