I have decided to swap development over for my mobile app side project from native swift to cross platform React native. The immediate road block that occurs to me when I try and begin doing this is wondering how to access all the libraries I was using in Swift via Cocoapods in react native. For example I am using a ton of Amazon Web Services Swift libraries and the Chameleon Swift color library. Is there a way to convert all these swift libraries/make them accesible in React Native or will I have to look for react native/javascript versions of all these libraries?
There are a lot of pre-built React Native components both written by the Facebook team and also the react native community. However, it seems from your question that you have some very specific native code that you will need to find a way to run in your future React Native application.
The best answer I can give to your question "which libraries should I use if any of them" with the information provided is "it depends".
I have built a few React Native mobile applications for both Android and iOS, and functionality that would have existed in Swift in these applications can be sometimes written in JavaScript - for instance, calling a web service using the fetch api that is built into React Native. If the AWS service you are calling accepts a basic HTTP request, then that could be something that you could write yourself in JavaScript.
If you are doing something more complex such as downloading a file from S3, you may need to use something like the community built react-native-fetch-blob, which has worked well for when I needed to download files. You would need to provide whatever SWS Auth tokens in the request header that are needed.
Another option is to write your own Native Module. These are chunks of application logic that you call from javascript in react native. They are very powerful as they allow you to do essentially anything you could have done before in a straight native app. They are written in the native platform language, so Obj-C for iOS, Java for Android, (but if you are feeling ambitious you could probably write them in Swift - I haven't tried). These native modules could then call out to the AWS Swift libraries that you have that already exist. My instinct says this may be the solution that would fit your needs best. The obvious downside to native modules is that they are native, so you would need to write one for each platform you support (iOS and Android, presumably).
There is also the option of simply incorporating React Native into your existing application. The idea being you can slowly either build out new components of your app in React Native or rewrite current logic into React Native in a piecemeal approach, taking smaller bites at a time so the whole task seems less daunting.
Finally, the Chameleon Swift appears to be a UI library. It doesn't seem like you would want to keep using this library if you went with React Native, as React Native is the "front-end" of a mobile application (amongst other things). HOWEVER, if you felt so desirous, you could write a native module that, in theory, could call the chameleon library to provide you with things like hex values for colors. I don't know if this would work well and would likely not be very performant, so I couldn't recommend you attempt to continue to use this library in a straight react-native app (but for sure if you used a hybrid app, see above!). React native has it's own cool tools, however, that you can use to make your app more awesome (here, here, here).
Phew, I hope this was useful.
Related
I am new to the world of Hybrid Application.
I have read in a lot of place that React Native fails to prove its computational power as compared to Native approaches.
Is it possible to write JavaScript code and when stuck, use the NATIVE CODE (JAVA AND SWIFT) in the same file to gain computational power.
I just want to know that JavaScript+ Android+ Swift programming can be written simultaneously in the same app to make use of every feature altogether? Maybe for convenience or better productivity
Short answer: No
Longer Answer: The closest thing React Native has to what you're talking about is implementing modules from native code, but you do that through JavaScript.
Quote from the Documentation on How to Implement Native UI Components:
There are tons of native UI widgets out there ready to be used in the
latest apps - some of them are part of the platform, others are
available as third-party libraries, and still more might be in use in
your very own portfolio. React Native has several of the most critical
platform components already wrapped, like ScrollView and TextInput,
but not all of them, and certainly not ones you might have written
yourself for a previous app. Fortunately, it's quite easy to wrap up
these existing components for seamless integration with your React
Native application.
Side Note: I have not used React Native before.
not in the same file, no, but in the same project. For some work, you will need to use third-party libraries (most of theme are writen with native langages), or create your own modules on android and ios and then use it for react native, those module will be writen on java for android and objective-c and swift ect for ios.
And for my little experience, react native is simple to use and you can build app very fast, mostly if you are used with javascript, but for my opinion, it's far from being a complete framework, it's not mature.
I am planning on working on a personal project where I utilize React native for most of the Business Logic and Front End.
I want it to work on Windows 10, but it would be great if it was compatible with IOS/Android as well.
While I know React native itself has that capability, the catch here is that I want to utilize heavy machine learning throughout the project in Python for now, and then perhaps C++.
I did some research and many people suggested running a flask server and calling the Python code via its API. The problem with that is that that then delegates the machine learning tasks to the server, and not the client.
1) Is there a way to "embed" the python server to only exist in the React-Native back-end (Node js) environment? Or perhaps in this case it just calls a python script and awaits results?
2) Is is possible to achieve this task while also packaging it in a '.exe' or '.apk' file?
I'm interested in re-using some Python code, take a look at http://www.transcrypt.org, which promises cross-compilation of Python to JavaScript.
This may not directly answer your question but I'm sure it does help you take a decision.
So, with my experience I can suggest you these things:
1) Use React-Native bridge: If you're relying on ML algorithms that are readily available and you don't need much of modifications at deeper level, then you can consume the APIs provided in Windows AI and ML. I'm suggesting you this because you are saying that you'll be developing it for Windows. If you want the same for Android and iOS, I guess there are APIs readily available which are similar to Windows'. You can find about react native bridge and how can you consume the above mentioned APIs in these links - Link1 and Link2
2) Use NAPI or C++ Addon for Node.js: As you said you can be relying on C++ in future, I would suggest this to you. This allows you to consume C++ Libraries in Node.js. Also, as Python is C-callable, if I'm not wrong we can call Python in C++ and vice-versa. I suggest you to read about these things before you proceed. You can read about NAPI and C++ Addons for Node.js.
You can also find a lot of blog posts and tutorials on the things I mentioned both the alternative I've given above.
I was thinking about building a scheduling/time tabling app with Node JS that is primarily used in/as a mobile native app. Im certain I have worded the specifications wrong, but I was hoping for some guidance on where to start researching:
Any useful libraries/services
The general way to go about using Node JS for mobile
Anything you might think it useful
Thanks!
I am assuming you want to launch this mobile app natively on multiple platforms (IOS/Android/WP).
If that's the case, you can directly go for hybrid app frameworks which will help you write once and deploy natively on multiple devices. The best two hybrid frameworks that I found are React Native and Xamarin ( different people can have different opinions about different hybrid frameworks )
React Native will give you the opportunity to use JSX which is very close to Javascript. While in Xamarin you'll work purely in C#.
As far as your question regarding deploying natively via node.js is concerned, I don't think it's possible. If you read this blog post. It says the following.
Technically, you can run Node on Android, but not iOS. This is because Node uses Google’s V8 JavaScript engine. The V8 engine compiles JavaScript to a native code before executing it, a process known as Just-In-Time (JIT) compiling. iOS does not allow JIT compiling unless the device is jailbroken which why Node applications cannot be deployed native on iOS.
Obviously, any mobile strategy that ignores iOS is doomed to fail
So my suggestion would be to use one of these hybrid frameworks for front end and build a node.js based backend service where you can write a REST API to retrieve results for calls you make from the frontend.
There are tons of tutorials out there regarding how to build REST API's in node.js. this can be a good start.
I have to build a mobile app that's needs a high level of reactivity. I thought to use meteor.js just for my back end and build the app using native technologies. Can this work?
Yes it can, but you need to evaluate how reliable it will be.
If you're thinking about using JavaScript to write your native app (e.g. React Native) then you have good NPM packages that can help you with this task. For example:
https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
But if you're thinking about writing completely native code for iOS and Android and still have a DDP connection to use everything from Meteor you'll need to find a third part library written for your platform.
I've tried this in the past and had a bad experience. Once Meteor started getting updates the library broke and my app would not work anymore. This means you would need to find a well maintained project that is always up to date.
I hope I could help a little. It's not a simple decision, but if you research hard enough you can find out what's the best way to do it.
I advice you give it up if you wanna an app with high reactivity and high performance.
What does React Native use under the covers to interface with iOS and Android? Cordova uses a WebView to effectively display a webpage inside of a native container; Does React Native use the same approach? If not, What approach does it use?
As you noticed React Native is not based on Cordova. It is not a website which looks like an app shoveled into a WebView.
React Native uses a JavaScript runtime, but the UI is not HTML and it doesn't use a WebView. You use JSX and React Native specific components to define the UI.
It provides a native-level performance and look and feel but some UI parts have to be configured separately for iOS and Android. For example Toolbars are completely different, but TextInput can be the same for both Operating Systems.
For new update refer #f4z3k4s answer.
React Native app comprises two parts: Native part and Javascript part.
To run Javascript
React Native uses JavaScriptCore (JavaScript engine in Safari) on Android/ iOS simulators and devices.
In case of Android, React Native bundles the JavaScriptCore along with the application.
In case of iOS, React Native uses the JavaScriptCore provided by the iOS platform.
To communicate Javascript with Native part
React Native bridge is used. It is a layer that is responsible for communication between the Native and Javascript thread. It is written in C++/Java.
Steps Involved
After developer runs react-native run-ios or react-native run-android
React Native CLI spawns a node packager/bundler (metro) that would bundle the javascript code into a single main.bundle.js file.
React Native CLI launches React Native app and at first loads the native entry point of the app.
The Native thread spawns the JavascriptCore thread.
The Native thread now sends messages via the RN Bridge to start the Javascript app.
Javascript thread starts issuing instructions to the Native thread via the RN Bridge. The instructions include what views to load, what information is to be retrieved from the hardware, etc.
The Native thread will perform these operations and send the result back to the Javascript thread assuring that the operations have been performed.
Source
On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari.
Source
2022 Update
As React Native has changed a lot in recent times and will change a lot in the near future, I thought it's timely to update this answer:
New components to understand:
Hermes:
React Native team developed their own Javascript Engine in C++, called Hermes. If enabled, Hermes will be shipped with your app as a context for executing Javascript (instead of JSC), promising to make your app's bundle smaller, and your app's execution faster.
JSI (Javascript Interface):
It is a unified, lightweight, general-purpose layer for (theoretically) any JavaScript engine. It's implemented in C++, just as the engine, but decoupled from the engine. This makes it possible to hold references of native objects on the JS thread, eliminating the need for the bridge, thus eliminating the need to stringify everything and making React Native way faster altogether as the stringification is the bottleneck currently. It also makes it easier to switch between JS engines. As JSI is developed in C++, it makes it easier for developers to share native code between Android and iOS. For example, you can develop native code in C++, call it both on iOS and Android from Javascript through the help of JSI. Both platforms can execute C++ code, iOS can use it really easily through Objective C as it is a superset of C. Android needs a bit more work with the help of Android NDK (Native Development Kit) and JNI (Java Native Interface, responsible for Java <=> C++ translation).
Bridge will be split into two parts, read more:
Turbo modules
This is a new way of interacting with the native side, interoperable with JSI. It allows lazy initialization of packages, thus making the startup time of apps having lots of native dependencies way shorter.
Fabric renderer
Re-architecture of the UI manager, that is interoperable with JSI and Turbo modules. Instead of the Shadow Tree (or Shadow Thread) that was formerly used for calculation the layout of elements (it was coupled with the bridge), Fabric makes it possible to use the new powerful JSI features to render the ui without having to stringify anything. This will deliver truly native-like performance.
Extras:
Code generation
By using the typed JavaScript (Typescript or Flow) as the source of truth, we can generate interface files needed by Fabric and TurboModules.
New answer for the original question:
React Native uses React on the Javascript side to allow developers to develop applications. Instead of HTML, that's React's rendering context on the web, React Native uses Fabric as a renderer, which is a C++ renderer, which in the end, renders truly native elements on the UI thread (native) of your React Native application. As opposed to the previous model, that used a bridge and stringification between the UI thread and the JS thread to pass data between the two, a new adapter layer, called JSI is implemented, which makes it possible to hold references of C++ objects in JS. Thus, the source of truth for React Native applications will be held in C++ world, allowing both the native and the JS side to share data between the two without any need for stringifying anything, in a synchronous fashion.