This app was mentioned in 3 comments, with an average of 1.67 upvotes
There was no mention of React-Native at the time when I posted :P The playground app I don't think is a good example. Check out F8 that was recently published by Facebook for a conference of theirs. The code is open source on github that you can look at to learn from and use to practice compiling to your ios/android device.
Facebooks F8 app was released recently, it's a pretty good example I think? It's open source on github if you want to peek at the source code.
I can't vouch as much for Xamarin as when trying that I ran into odd issues:
- magic
behaviour of linking the UI builder to C# classes breaking, finding a fix was frustrating, in the end solution was to delete the file and restore it(presumably a file watcher). To be fair you can do this all with code instead which should avoid the problem, I delegated the Xamarin evaluation to a Junior dev and these are the issues I was brought over to help with.
- some odd issues building with Xcode where the app would start and immediately exit/crash
- working with JSON was not pleasant(horrible syntax or define an interface/schema which is a huge pain to interact with a JSON API service)
- socket.io lib behaving unexpectedly compared to the browser client.
You could chalk it up to lack of experience/knowledge of C#/Xamarin, which may be true. I've heard similar problems from multiple other devs I know of elsewhere though.
React-Native on the hand has been a good experience so far, albeit I think the learning curve might initially be an issue for some.
Take a look at React-Native. You code in JS(ES6/ES2015) and can compile iOS/Android and now Universal Windows apps. Alot of the business logic can also be shared with a web project(or desktop with Electron say).
UI is declared with JSX(mix of JS and XML, you can do pure JS but JSX isn't as bad as it might look at first glance once you actually give it a go), since iOS and Android platforms differ in some cases with approach to UI design, some UI code will be tailored to a specific platform but usually you can share it between the two. You may have heard that RN isn't write once, run everywhere
but learn once, write anywhere
, it's not a magic bullet.
These UI's are native UI components, all UI and animations are run on a separate thread from the JS runtime so you get great performance without worry of the JS code blocking UI rendering.
That said business logic in JS is shareable, most of your logic will probably be here so you only have one bug to fix and one codebase to write to support your platforms.
Checkout this upcoming IDE Deco, not everyone likes the idea of doing UI purely by code, this IDE will ease that with it's handy features as shown in the short video :) Facebook also develops Nuclide which is a package you can add to Atom to give it React/React-Native IDE like support, seriously checkout these cool features.
Where it gets awesome is not only can you use live-reload(skips compiles if you're only updating JS code for fast iteration/tweaks on a feature/design) you have Hot-Module-Replacement(HMR) which takes live-reload a step further updating a UI element in place(you could tweak colour/position/text/etc several views down your apps hierarchy without having to navigate back there). This is instant changes that can happen on command or when you save your source file. If you've ever had to iterate on part of an app like this and wait for compiles+navigate each time you can see the value in this :)
When the app is already installed in the VM or device you can just point it the packaging server and avoid recompiling each day at work, which is great when you have multiple devices in sync all at once, you can do some rapid UI prototyping with a designer right next to you!
If you cause an error you can get a big red screen with plenty of information(including suggestions to fix or github issues that may be related) about the problem. If it was just a typo, make the fix and reload the JS, again no long compile wait in this case(even if compiles are only a few seconds, instant updates are quite nice!). Your apps state can be restored as well, with Redux managing your state you're able to do time-travel
like stepping through the debugger(Chromes debug tools work as well which are fantastic and some IDEs will integrate with this too) but you can go backwards too. Redux also allows you to snapshot the state of your app, your testers could send this with a bug report and you'd be able to see exactly how they go to their bug/crash in the app thanks to the time-travelling feature :) (to be fair this isn't always the case when dealing with async logic depending how your using Redux). Redux and React are also great for doing unit testing with.
If you're just using JS can bypass the long review times on iOS, great for quick bugfixes! This is allowed by Apple. Not such a big win on Android I guess, but worth knowing.
You can interact with native libraries for each platform with a small wrapper that interfaces with the JS bridge. So if something is better to do native or you have a library you'd like to use on that platform, you can do so. You're even able to run React-Native as part of a native app if you want to slowly transition over, Facebook has been doing this.
I've heard of some alternatives like Ionic being 25mb for a barebones app. The situation isn't hugely better with React-Native, I believe bare bones is about 7.5mb, less if you remove x86 support(can't recall how popular that is on Android devices, Galaxy Tab 3 had it from memory). Facebook's F8 app is 15mb for it's apk, source code is available on github too if you're curious to take a peek.
If you're not familiar with modern JS development, it's a fast changing language/environment so the newer syntax(ES6/ES2015) may complicate things a bit as you'll see various ways to do the same thing, React is similar as it's grown, when learning online from various places take note of when that information was written, things are in a better state now but I can understand developers being confused initially. The way React works along with complimentary libs like Immutable and Redux may also be different from how you'd normally approach development, these later two are optional and you can ease in to them(don't try learn it all at once!).
It's a very active community, keeping up to date and being able to choose a lib from competing choices can be difficult, often there isn't any clear winner/standard for some things(and when there is, something tends swoop in to replace it).
React-Native from what I understand will never achieve 1:1 parity with native platform APIs, you may get such through third-party providers catering to API requirements you have or you may have to use some native code yourself if what you're after isn't available, A colour picker was a good example at the time when I started for something I wanted but did not exist. Knowing what type of app you'll be building and features you'd need upfront can help decide if RN is right for you.