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.
Related
Suppose there exists a Javascript library written in plain Javascript and commonly used on vanilla, non-frameworked websites. How does one go about creating an Angular library that can easily be npm installed that would make the library seamless to use in an Angular app?
I cannot find any good demonstrations of this process in the Angular docs or on the wider web.
Just for instance, there is a fantastic Javascript library called p5.js, which is not straightforward to use with Angular. How would one go about creating an Angular module that you can simply import into your own Angular module and use all of its great features with full Angular support?
Personally, I would go with Angular CLI. Angular CLI v6 has ng-packgr built in.
Take a look at the create library story. Its pretty straightforward and it will get you started quickly and guide you with the best practices for updates as well.
Update: For Angular CLI v7 and later, see documentation here
Wrapping a native library for Angular is a complex process as the specifics change from library to library. That being said, there are commonalities we could take advantage of.
The main 3 concerns when designing a wrapper library are:
Detecting changes in your Angular library and delegating them to the native library.
Detecting native events and bubbling them into your Angular library.
Switching execution in and out of Angular using NgZone.
Other considerations might be performance, scalability, adding new tools over the existing ones, etc. No matter what library you're dealing with, you'll probably end up wrapping a function with a function, a class with a class, a module with a module, etc. Let's say the native library has 1000 features. Would you implement all of them one by one?
There are ways to avoid having to manually implement each and every element in the native library while still bringing their features into your wrapper library.
I've answered this in more details here
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 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.
There's a specific app that I want to make, and I was wondering if I can use JavaScript to code it entirely.
There are a number of frameworks out there that let you write your code in HTML, CSS, and JS and then compile/build apps to native devices I for instance Apache Cordova or Phone Gap do this.
Choices are countless. Try Cordova for hybrid app development.
You're most likely thinking of a single page HTML5-based "app".
(though it's arguably not an app, it's just a web page).
These are often built using frameworks such as Angular, Backbone, or Ember.
Watch out, there's still constant debate on the merits of HTML5 vs. native apps.
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.