I have an app build using cordova. However, making it look properly on android is being a bit though. I read reac-native documentation and I thought about combining the current state of the app, embedding it on a web view and building the rest of the app using react-native.
The reason behind this is that I feel more comfortable building the android specific ui of the app (like sidebars, and menus) using react-native than cordova, and I want to know if this approach makes sense. Is react native web view as powerful as cordova? Does this make any sense?
Thanks and regards
Despite React Native owns a WebView component I believe that this component is not appropriate for your approach.
From the docs:
WebView renders web content in a native view. You can use this
component to navigate back and forth in the web view's history and
configure various properties for the web content.
The purpose of React Native WebView is simply "renders web content".
I believe that you can not simply put your current Cordova code inside a React Native Web View and "it works". If your current Cordova app is more than simple HTML pages and use some Cordova Plugin, for example, you will have problems at this point.
Added to this the fact that strange architecture will probably increase the maintenance cost.
And about React Native to be as powerful as Cordova: I would say that React Native is more promising and very powerful, but actually Cordova has a ecosystem more mature and consistent. Maybe you should take a look at NativeScript.
Is react native web view as powerful as Cordova?
Answer: It's more powerful than Cordova
Unlike Cordova/PhoneGap your code runs in a JS runtime on the OS, but the UI is rendered as native components. This makes it very different than Cordova/PhoneGap.
You can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.
As for Cordova, you're bound to the limitations of the WebView.And since JavaScript is single threaded, you will at one point run into issues if there are too many things going on in your application code. Such as sluggish animations etc...
Related
Note: I am not asking how to detect if an app uses React Native somewhere inside it (already has an answer here).
I wonder which pages (screens) inside an app is using RN and which pages are not, by examining the apk file or runtime checks etc. For instance, the Facebook app uses RN. However, it only uses RN for some seldom-used pages - that is completely a different story than using in every page.
Thanks for any ideas!
For who are interested in this: Maybe try to examine the threads, since JS engine is in a separate thread (if I remember correctly). If the page is rendered via React Native (JavaScript), the JS thread must need some CPU.
(P.S. I switch to Flutter in the end, so I no longer look at React native samples.)
Do I get an advantage by using ReactJS for frontend if I'm planning to create mobile apps with React Native (maybe much faster development since some of the code can be reused)?
Or it does it not matter if it is ReactJS, Vue or Angular 2, as long I use Javascript so that I still can reuse the code for React native?
Yes you can, but you have to adopt Higher Order Components (HOC) Stateless Functional Components in order to fully reuse your code.
The Difference:
Basically, ReactJS and React Native are almost identical, except for their component. Therefore, the best way to reuse code is to create separate independent components using HOC which can be called from both side using stateless functional component.
https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665
You can use the platform-specific extensions feature of React Native to automatically load the platform specific javascript modules. Then you need to put all your common code in a regular javascript modules and provide platform specific implementations in modules with corresponding extensions.
You can check how to do that here Code sharing between React and React Native applications
I have been building a mobile app and I just hit a major performance issue when I ported my app to Android. One of the major issues was that the transitions were "not native" enough. I decided to take a different approach to cope with such issue: a webView inside a native wrapper.
Is it a good practice to build an app with Ionic and have a native Android wrapper for the nav bar, transitions, and keyboard? One thing that confuses me is that Ionic comes with Cordova integrations that I don't really need if I have the wrapper.
In ionic framework official documentation,you can see that ionic framework is Performance obsessed.
Speed is important. So important that you only notice when it isn't there. Ionic is built to perform and behave great on the latest mobile devices. With minimal DOM manipulation, zero jQuery, and hardware accelerated transitions.
hybrid development involves developing apps as Web apps that run in a browser, and then wrapping them in such a way that they run as native apps on mobile operating systems like iOS and Android. Also hybrid development greatly simplifies management of your app's life cycle, the hybridized versions of the Web app can be registered with Apple's App Store and Google's Play Store.
If you want to enhance the performance and the user experience of your hybrid application,you have to follow some best practices.
Here are some performance tips:
1.Crosswalk: That's the main tool for major performance improvement (in Android 4.4 < where it doesn't have the Chromium browser built in). If installing crosswalk using the ionic cli causes errors and bugs (as it almost surely will), download Intel XDK and you can test/debug/build your app from there using Crosswalk very easily.
2.One more thing I have witnessed that causes some major performance issue is background images and gradients, i'm still not sure about opacity performance overall but when I have taken out these two the scrolling and transition went super fast.
Use hardware based css (translate3d) to move stuff around the DOM.
3.ionic run android will make an APK, but it is much better to do ionic build android
5.Use ng-if instead of ng-show, see difference
4.Minify JS and CSS, concat, and strip debug in your gulpfile.js.
5.Use ionic's collection-repeat as much as possible otherwise use one time binding in ng-repeat
6.Don't use more filters in view. Instead of that use "$filter" in code.
Filters can have a negative impact on performance. Use directives where possible.
7.Reduce DOM as much as possible. It tooks too much CPU load.
8.Use one time binding '::' as much as possible even in directive parameters.
eg: A value passed through to a directive. my-directive::parameter1
It means less watchers, which means better performance.
9.Avoid $scope.$apply() as this processes all the things. Use $scope.$digest() instead and it will only be processed from the scope it is called from.
10.Keep your $$watchers to an absolute minimum!
11.Only bundle what you need. Make sure you're including the bare minimum in terms of libraries etc.
12.Avoid JQuery and its plugins.
please check this video that will help you a lot to enhance the performance of your hybrid application.
All the best.
I'm contemplating on using React Native for a new web app. Is it possible to ship both iOS and Android apps using it?
I know that it's on the roadmap, but it's unclear to me whether it's going to be a separate open-source project (e.g., React Android vs React Native), or just one (e.g., React Native).
TLDR: Most likely you can. But it depends on your use cases.
You can aim for about 80~99+% code reuse (depending on how much Android/iOS native views/modules you use eg. Do you have custom graphics code or low-level TCP networking code; Those can only be done in native code; And expose as API to your JS code. The amount of the platform-specific JS code is actually minimal. Plus you can also use platform check like if (Platform.OS === 'android'){} to solve that) of code reuse, which is pretty nice. Dropbox and other companies have done similar projects: using c++ to build a 'shared' component between iOS and Android project, while implementing most of the UI code in native iOS(Objective-c or swift) and Android(java). But now you are doing C++ with Java and Objective-C or Swift, more language to master, more complexity and more brain juice went down the drain. And it probably took some super tough gymnastic move to make different native code work in both iOS and Android, plus debugging...
React Native just makes it a lot easier to write almost everything in JavaScript. But there is a catch, only about 80% of the JS code could be shared. In the foreseeable future, you still need to write 'platform-specific' JS code for Android and iOS versions.
That's why FB said they aim for 'Learn once, code anywhere' instead of 'run' everywhere.
But it's still very nice other than code reuse(80+% code reuse is still a big improvement comparing to maintaining 2 entirely different versions: Android and iOS ya?)
Cmd +R to refresh the app is a GREAT boost for development speed. Waiting for a big project to compile just makes you felt you were dying inside.
Declarative UI you get for free, because of using React. This is another great plus! As you don't need to 'dig' into your specific UI code that often anymore. Data changed? Just 'flush' it and UI just update accordingly. No brain juice wasted.
I just ported my not so complicated Android React Native App to iOS. And it took me 3 days. The request for and iOS version for the App came as a rather abrupt and unplanned move. So could definitely be even faster had I built the Android with a plan for iOS too. Huge win:)
Another great benefit is able to do hot code push without going through the hellish 1 week app store review process. So no more, "YAY, our app is approved. Let's release. Oh Shiiit. Critical bug and our app keeps crashing(that's gonna keep happening for at least a week before your fix is live). And you have to beg Apple to speed up the process". This is possible because the major part of the code base would be written in JS and with tools like AppHub or CodePush, you could almost instantly deploy code to your users. This is conditionally allowed by Apple.
3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code, and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.
Lastly, as an open-source project, project longevity tends to be a concern. Not an issue for React Native. Internally used by(FB Ads Manager) and backed by FB(a dozen FB Engineers?) by Facebook, with close to 500 contributors and 25k Stars, React Native is full of life. Seeing is believing :) (https://github.com/facebook/react-native)
EDIT 1
I realized that I am apparently a bit biased and only talked about the good stuff about React Native. So do checkout https://productpains.com/product/react-native/ and Github issues to have a full picture. It's definitely not silver bullet. That being said, it satisfies most of my use case and I couldn't see me use native iOS or Android anytime soon.
EDIT 2
The Facebook F8 conference app released by Facebook (duh..) is 100% open source and they have a really nice tutorial to show you how you could have both iOS and Android native experience(90% as good as native ?), and at the same time, achieved 85% code re-use. check it out --> https://makeitopen.com
EDIT 3
You may also want to checkout Flutter and its pros & cons :)
It doesn't make sense to have a single codebase if you want a truly native experience. At the moment we have things like NavigatorIOS in React Native which provides an iOS-style UI for navigating between app screens, but if we were to just start using that on Android it wouldn't feel like a true Android app.
Therefore I'd expect to see a NavigatorAndroid component or similar when the time comes, and the same for various other components that behave differently between the platforms.
One benefit that you would get is that any application logic - maybe a store, or your backend interactions - could be written in a JavaScript file and then included by both iOS and Android.
So while you won't get that write-once run-everywhere developer experience from React Native I would expect to see a solution that gives first-class UI on both platforms while encouraging as much reuse as possible. I personally also hope to see strong build tools to help develop and ship on multiple platforms.
React Native for Android has just been released, Android folder will be creating along side with iOS folder upon creating a new project.
Just another tip as NavigatorIOS was mentioned. Facebook are not really maintaining the code for NavigatorIOS. Instead they are focusing on Navigator.
Yes. We're running it in production with about 5m registered users.
Some things are a little behind iOS but catching up quickly. It's a good wagon to be on.
React Native is designed so that you can deploy to both iOS and Android. There is a caveat, of course.
React Native has supported iOS for much longer, coming to Android only recently. So, there are some differences in terms of what is supported on each platform.
For example, if you place borders on Text, they will show up on iOS, but not on Android. In order to overcome this, you need to place a View around the Text, and apply a border to that. Luckily, React Native makes it easy to integrate separate stylesheets for each platform (or even platform-specific styling on a single stylesheet).
Support for Android is continuously evolving, so it will only be a matter of time before React Native for Android is on par with iOS. Nevertheless, this shouldn't deter you. In my experience, it's a great way to quickly develop for both platforms, and it does save some headaches.
you don't need to maintenance separate code base for android & ios. Actually you can use same code base for build android & ios. I recommend to read the react-native documentation(according to react-native version you are using) before using any inbuilt component in your code.
Eg:- TextInput component onKeyPress function supports for ios only.
if ur are using external lib check these lib support for both ios and android.
Anyway you have to configure external lib separately(install) both android and ios.
hope this will helpful.
I have a question about Android Studio: Does AS supports AngularJS code while designing XML files, e.g. for small animations or effects?
SUMMARY : NO
There is no way you can write Angular JS code while developing Android Native app. You can use Angular in a WebView (using js/html so), that's all.
AngularJS is a completely different technology than what is used in native Android apps. Native Android apps use Java and/or C for their code, which is compiled when you build the app. AngularJS is a framework for web development, running specifically on Javascript (a completely different technology than Java).
You can build apps without using native Java or C code, but there are tradeoffs. As noted in other answers, you can display webpage views as apps (using technologies like Cordova]), or use frameworks like React Native to write code in Javascript that then gets compiled to a native app. You could use AngluarJS in the webview instance, since it just displays a webpage, however not in something like React Native. I highly encourage you to check both of these (and other options) out, but keep in mind that they have their own limitations and tradeoffs – no one way is the "right" way to build an app.
In summary: No, AngularJS is a web technology, not a native app technology.
new answer = Yes... Sort of, you can do it with:
https://www.nativescript.org/
It translates javascript, angular and typescript code into native components!
Apparantly it's possible to use nativescript in Android Studio with:
https://docs.nativescript.org/runtimes/android/getting-started/hello-world
Android Does not support AngularJs. but still if you want to use you can use it in webview.