Fulfilling differing Android / iOS UI conventions from a single React Native codebase? - user-interface

Is this even possible?
Every overview / analysis of React Native I've found covers the basic reasons for using RN, and is either old (no Android, or "Android just released") or focuses on the fact that it compiles to native elements (ie. not HTML5)
What I'm missing is, how does an app built in React Native fulfill the style guides, conventions, and user expectations of how apps on each platform are supposed to behave? I don't want to make an Android app that looks like an iOS app, or vise versa.

As #jevakallio answered you can customize you UI to platform specific rules from Google or Apple.
Technically it can be done in several ways. If differences are small you can make conditional check with Platform module:
if (Platform.OS === 'ios') {
...
} else {
...
}
If differences are big then use file postfix (android or ios):
MyComponent.ios.js
MyComponent.android.js
https://facebook.github.io/react-native/docs/platform-specific-code.html
You even can make full different UI for each platform or device type (tablet or phone) saves all non-UI logic common.

The seminal resources for platform-specific style and interaction guides are the Material Design system for Android and the Human Interface Guidelines for iOS.
Implementing iOS-feeling UX on React Native is quite simple out of the box. Android apps may benefit from using react-native-material-design package to get native feeling controls.
One of the biggest challenges for web developers coming to mobile development via React Native (I am one) is to know what makes that native feel. This is a very subjective and touchy-feely topic, and cannot be easily solved by reading guides or applying logical engineering mindset to the problem.
I have found that using tons of popular apps and trying to reason about what makes them tick is a invaluable practice for this, as is critically evaluating your own work and putting time and care to details, as sometimes that is what makes all the difference.

Related

Is Flutter just for UI development?

In Flutter's official web page, Flutter is described as below:
"Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase."
My question is
1. Is it just for cross-platform UIs?
2. If it is, then how can you integrate with data models and all hardware features?
Thanks in advance!
Flutter is not just a framework that you can build great UI with. It uses the programming language Dart and the code is compiled to native platform code. It's not just for UI development as Google uses Flutter to make some of its applications like Stadia. Other companies like the New York Times build their apps with Flutter and those apps have functionality and they're entirely built with the Flutter framework.
So back to your question. It's not just for building beautiful UI's. Even in the documentation, it says:
natively compiled applications
So you can use Flutter to make cross-platform, native applications, not just for UI. It supports popular things like Redux, BLoC pattern, and many more for the reactivity of your app.
I recommend you take a look here to see some of the apps fully built with just the Flutter framework.
Flutter is UI plus business logic which means frontend, hence Flutter is a frontend SDK. Many people say that Dart is used for backend, but that’s not true, Dart is purely used for frontend logic and Flutter is indeed, 100% frontend. But…native Android and native iOS development too are “just” frontend, purely.
Because, the server side logic of any app is written using a backend language/framework which is not a responsibility for a frontend person (Android, iOS, Flutter or any other developer). Backend technologies to be used always depends on the company’s preferences. And remember, writing your backend in either of these frontend languages is not good for long-term lifespan of your app, most companies are not stupid, that they don’t use Kotlin or Dart or Swift in the backend to save money, they know that, ultimately, doing that will cost them even more than hiring backend devs separately because it is very rare (almost impossible) to find expert people who can code backends in Dart/Kotlin/Swift.
While JS has many existing, widely adopted stacks for backend, so the above is not same for web devs, they’ll be paid more for being a full-stack person.

Create custom styling in Xamarin

I'm about to start a new project in Xamarin, since we need to create a mobile app for Android and iOS. But we require that both platforms look exactly the same.
Is it possible to do this using Xamarin or is it only possible using something like Cordova?
Thanks!
require that both platforms look exactly the same
It depends upon what you mean by that statement.
In regards to Xamarin.Forms, "native" widgets are used on each platform so the "same" app's UI, deployed to a different platform, will look different (the difference can be slight or vary greatly based upon the controls used).
Web based / Hybrid apps tend to render fairly the same on each platform. Each platform does have its own HTML/CSS rendering engine so there are differences, and thus the CSS can vary from platform to platform to obtain the desired "sameness".
There are GUI frameworks that render their own controls/widgets and do not use the platform "native" ones. While a lot of these tend to be game related UI frameworks, there are many options available depending upon want you requirements are.
i.e.
OmniGUI : A Xamarin.Forms friendly cross-platform that renders its own controls and thus looks the same on each platform.
Flutter : Google's mobile UI framework that renders its own "widgets". While there are widget collections that have Material Design and Cupertino styles applied, you can use the basic widgets and style them in a "CSS" like analog using Google's Dartlanguage.
Many others...

NativeScript limitations

I´m evaluating differents mobile frameworks, and I think that nativescript is a good option. But I don't know if exists limitations on the development process. For example I had limitations on the styling (and that's not so important), but I want to know if in the future I can have a limitation and can´t use some native feature or external library.
Thanks!
I have been using NativeScript since v0.90. I have written multiple apps and over 40 plugins for NativeScript, so I am very familiar with the ins and outs of the platforms.
This post is features as of v6.50.
I can think of only a couple limitations;
Tooling sometimes leaves a lot to be desired, however using the IDE's supported make this better than the Native CLI in a lot of cases.
Sometimes errors aren't always propagated back from the app to the screen/ide -- so you have to do things like "adb logcat" to see the full error log to see the error that got filtered out by the CLI.
Native Services (i.e. background services) --- This is much better written as native code. The NS runtimes take memory while running; so a service you typically want as small of a memory footprint as possible -- I would not use anything but Java/ObjC for a background service.
OpenGL on android needs to run in a separate thread, NS by default switches you back to the main thread when returning from any native calls; this basically kills direct NS opengl calls. However, it is actually better to create any OpenGL stuff in Java or Kotlin anyways; and then have NS call into your native code that handles all the rendering, so this is more of a minor annoyance.
Beyond that I can't think of any "real" limitations; you have full access to the native platform and can actually style any control as long as you know how to do it via native calls; if for some reason the control doesn't support the normal css styling. I & others have used many Android and iOS libraries in our apps. You can easily reuse native android/ios components you have full access to anything out there that is available to a native iOS or Android app.
You can look at https://plugins.nativescript.rocks for a list of all the plugins in the NativeScript community.
I have been developing with Nativescript for some time now, and while finished product (application) is more than decent, the process of development is really painful. The primary reason for that are frequent bugs in Nativescript platform itself, and it's official plugin for VSCode.
I am currently working on Nativescript 2.0.0 and have been trying to update to newer versions since they came out, but there were always some errors, ether with Node, or with Gradle for Android, and that is just one of many problem examples I face with the platform. I wish they improve it in the near future.
For now native apis are fully accessible from JS but if you want you can do some library in native languages and call them from JS code too, about external libraries it depends if you mean native libraries or JS ones, but there quite many options/plugins done in JS code using some native libraries but in case not as JS plugin you can do it yourself with native libraries
Community support is low compared to other frameworks available in the market. This should improve as people adopt the framework. I see that as a limitation for now.
And Yes, Debugging is indeed a limitation.
Nativescript is the best cross-platform solution in my opinion, but like the others stated there can be limitations. Besides background services, accessing the hardware CAN be a bit tricky. I have been using it to work with BLE devices though, and once you understand how to interact with native APIs, it isn't so bad.
I've written one NS app (core).
Some of the cons are:
performance - loading and also run-time. I'm replacing an Android native app with a NS app (because it's cross platform) and few customers have complained that the new app is slower and jerky...I agree.
bugs in NS core. I think that they've spreading themselves too thin. They need to get their core product stable and improve it (i.e. make it faster).
plug-ins varying quality with minimal support. Here NS could curate a few important plug-ins and make people pay for it.
Yes it's free - but that's not a huge issue for me - I'd prefer to pay for a more polished product.
At the end of the day - the product works - have my app in the app-store and look forward to future improvements.

Should I choose Xamarin native or Xamarin.Forms for existing Android app?

We have an android application and want to recreate it for cross platform.
What are the facts for or against Xamarin native and forms?
The advantage of native would be, we could reuse all the xml-layouts while we have to recreate the iOS view in either XAML or XIB?
Is there anything what is really a blocker?
I'll comment based on Giorgi's answer with some actual insight and refer to the copied bullet points:
This is a resume of the experience i've gathered in the past 6 months:
Xamarin.Forms is best for:
Apps that require little platform-specific functionality
Wrong. With DI you can use any device functionality you could possibly want. Check out XLabs on GitHub if you doubt this.
Apps where code sharing is more important than custom UI
Kind of nonsense really. You can write your own renderers to represent controls of each platform in the way you want. I've also written more difficult renderers for custom controls such as a SideDrawer. In android i was done in 2 days, iOS about 2 weeks (android renderer was just a wrapper for the native control)
Developers comfortable with XAML
well yeah and anyone who enjoys convenient UI development. Mind you that there is a learning curve with xaml (which i already knew at the time i started from WPF development). But from what i have seen it's not that different from android.
Xamarin.iOS & Xamarin.Android are best for:
Apps with interactions that require native behavior
While hacking your solution up natively is certainly faster you can instead be done rather quick if purchase good controls / know a good native implementation and mirror it in C#, since the API in C# is very similar to the native one.
Apps that use many platform-specific APIs
Not sure why Xamarin is doing anti advertisement against forms. I had little trouble with it so far
Apps where custom UI is more important than
code sharing
Probably true, but it's also harder to keep UI functionality inline and you will need more manpower.
Things to consider about forms:
Forms seems to be stabilizing at the moment and i am sure Microsoft will do their best to turn it into a solid, reliable product (build issues have been a nightmare in the past sometimes, but it has gotten better over time)
The XAML for Xamarin is less developed compared to WPF XAML, though very similar. Recent nuget updates however provide mirrored functionality at an impressive rate. The vast majority of features you expect and love about XAML are present.
List performance is bad if you don't do your research (here). Performance increased loads in that area.
If i had to make the choice again i'd still go for forms. While there are sometimes things which seem flawed / bad you can usually figure out a clean fix somehow, while spending most of your time actually developing the app. (sometimes you will still find things which just make you frown why something isn't implemented, like the Margin property being implemented only just after microsoft purchased xamarin)
If you end up having a requirement of nested lists, make sure to have a look at embeded native controls in order to achieve the maximum performance - this was essential for a product i was working at. See this
According to Xamarin.Forms main page:
Xamarin.Forms is best for:
Apps that require little platform-specific functionality
Apps where code sharing is more important than custom UI
Developers comfortable with XAML
Xamarin.iOS & Xamarin.Android are best for:
Apps with interactions that require native behavior
Apps that use many platform-specific APIs
Apps where custom UI is more important than code sharing
Giorgis answer is the right one, but since you added some more constraints here are my thoughts.
I would analyze the current app. How much code is business logic which can be shared? How customized is the UI, should it look more native or more the same and how will it change in the future? If you plan to change a lot in UI and platforms should look similar, it might be easier to switch to forms.
Also consider if are you planning to develop for Windows Phone? If yes, you might save a lot of time just for this third platform.
After all there is one thing which I would also keep in mind. Developing in Xamarin.Forms does not mean, you cannot develop native. It is just an additional framework. In worst case you can still do everything natively.
Personally I use Xamarin.iOS & Xamarin.Android with MvvmCross, that way I can keep full control of the native UI on each platform while maximizing code reuse.
From Xamarin website (who knows better than them?):
Xamarin.Forms is best for:
Data entry apps
Prototypes and proofs-of-concept
Apps that require little platform-specific functionality
Apps where code sharing is more important than custom UI
[https://developer.xamarin.com/guides/xamarin-forms/]
With Xamarin.Forms at runtime, each page and its controls are mapped to platform-specific native user interface elements.
With Native Xamarin.Android and Xamarin.iOS apps leverage platform-specific hardware acceleration, and are compiled for native performance. This can’t be achieved with solutions that interpret code at runtime.
"Xamarin.iOS - The best way to build native iOS apps."
Ship native app bundles on the App Store. Our Ahead-of-Time (AOT) compiler compiles Xamarin.iOS apps directly to native ARM assembly
code, meaning your app is a native platform binary.
Access any iOS API. We bring 100% of Apple’s iOS SDK to C#, enhancing Objective-C APIs with stronger types and .NET naming
conventions so you feel right at home.
Call existing Objective-C code from C#. Use your existing Objective-C code, frameworks, and custom controls in your Xamarin app
using our automatic binding generator.
Build WatchKit apps. Use Xamarin Studio or Visual Studio to build new Watch Apps, edit Watch user interfaces in the iOS Designer, and
debug Watch apps in the iOS Simulator.
Stay up-to-date with Apple. We released same-day support for iOS 5, iOS 6, iOS 7, and iOS 8 so your apps can take advantage of the
latest iOS features as soon as possible.
[https://www.xamarin.com/platform]
"Xamarin.Android - The best way to build native Android apps."
Ship native Android packages. Xamarin.Android uses just-in-time compilation for sophisticated runtime optimization of your app’s
performance, meaning your app is a native Android APK.
Access any Android API, including new form factors. We bring 100% of Google’s Android APIs to C#, enhancing Java APIs with async support
and .NET naming conventions so you feel right at home.
Call existing Java code from C#. Use your existing Java code, frameworks, and custom controls in your Xamarin app using our
automatic binding generator.
Build Android Wear apps. With access to 100% API support for Android Wear, create full-featured applications capable of running on
Android Wear devices. Stay up-to-date with Android. Xamarin stays
up-to-date with the most current APIs from Google, so you can always
use the latest features in your apps.
[https://www.xamarin.com/platform]

What is the memory footprint of a phonegap application compared to its native counterpart?

I am evaluating pros and cons of Phonegap (Cordova) versus its native application. Does anyone have any baseline information and then include features and functions?
Here are the main pros and cons of using Cordova / Phonegap:
The pros of Cordova / Phonegap:
You just need HTML5/CSS/Javascript skills and you do not require any specific knowledge of Objective-C, which makes things simpler for creating your applications.
You have single code base for all platforms (iOS, Android, Windows 7, mobile web), which means that you can deploy your applications for several platforms very quickly!
Rapid testing and deployment (up until you Phonegap it, at which point you're subject to App Store review conditions, etc)
With Phonegap, you can still take advantage of distribution and integrated payment via the App Store or Android Market
The cons of Cordova / Phonegap:
Poor performance, especially if your applications are graphically intense, (eg: like games). You can implement caching or leverage some 3rd party solutions (i.e. Sibblingz) for native graphics acceleration; but for the most part, native applications are much faster/smoother than mobile web apps
Lack of pre-built UI widgets, transitions, standard controls, etc. Your development time can take longer, especially if you want polished-looking applications with a native look and feel. You can try using Sencha Touch, JQuery Mobile, plugins, or similar tools with pre-built UI elements, but you'll probably still need to spend a good amount of time styling the applications to look native.
So, in my opinion, if you want to include "full features" (like good performances, fast app, access to native components, etc) for your application, you'd better create a native application.
Phonegap / Cordova is much more like a convenient tool for creating "web like applications" very quickly, and in an easier way (especially if you already know about HTML/Javascript/CSS, for instance).
I think you would use Phonegap / Cordova if you want an application which is not too sophisticated, you want to deploy your app quite quickly, and / or you're feeling comfortable with HTML/javascript/CSS but not with Objective-C.
Hope these answers help.

Resources