4 ms·

When porting a React Native app to android 85% of the iOS version was reused: "At the time of shipping Ads Manager for Android, that approach yielded around 85

by ahupp 11y ago

When porting a React Native app to android 85% of the iOS version was reused: "At the time of shipping Ads Manager for Android, that approach yielded around 85 percent reuse of app code."

pbreit 11y ago
Yeah, the promise is not "write once, run everywhere". It's 1) write in a familiar way and 2) reuse a substantial amount.
- SomeCallMeTim 11y ago
  Which is unlike using Ionic Framework, where I've gotten about 98% code reuse between platforms. The only place that I usually end up making platform-specific changes is where Ionic has an iOS-specific layout change that breaks the look of a custom component on iOS. That and sometimes native-only features like Push Notifications that need to be handled slightly differently on each platform. But the latter is about a half dozen lines of stock code that take the iOS result and hand it to a common handler. I'm probably sticking with Ionic for now, though I'm planning to try out Meteor for my next project that has backend requirements. Meteor can install the Ionic SCSS as a plug-in, so you CAN get the best of both worlds.
  - spicyj 11y ago
    If you want the exact same app on both platforms, you can do that on React Native too. The Facebook apps don't do that because we believe it gives a worse user experience.
    - deleted 11y ago
      [deleted]
    - SomeCallMeTim 11y ago
      Ionic does not give you the exact same app on both platforms. There are dozens of platform-specific styles in the CSS that make each target behave more like a native app. A custom-styled native app, but one that follows platform conventions. I also absolutely abhor the fact that React mixes HTML with JavaScript. It just feels so completely wrong to me.
  - Bahamut 11y ago
    I have had performance issues using Ionic myself, and I have been intensely dissatisfied with Cordova & its ecosystem. In addition, I have had some pain with Ionic when trying to implement special behavior, mainly due to how the internals work. React Native is much more a step in the right direction IMO, although the Ionic team's work on Ionic 2 with Angular 2 could provide an interesting paradigm to compete on that front.
    - SomeCallMeTim 11y ago
      I haven't had performance issues with Ionic; Angular certainly has known issues with too-many-listeners, though Ionic offers a workaround for the most serious case (long list views).
  - aikah 11y ago
    > Which is unlike using Ionic Framework, where I've gotten about 98% code reuse between platforms. Ionic is using HTML widgets , not actual IOS or Android widgets like React Native , Titanium or others. So you are basically developping an HTML client inside a webview and calling it an APP. Of course you'll be able to reuse 98% of the code that ran into a web browser. But it will look like an HTML website.
    - joeyspn 11y ago
      > But it will look like an HTML website. This is simply not true anymore. For simple CRUD apps, our customers can't tell the difference between a native app and an Ionic app. The ionic team has done a great job simulating the native animations and interactions of iOS and Android. If you don't believe it just try it. It costs 30 secs to install Ionic via npm and deploy one of the demo apps to an Android or iOS device. For more complex apps I'd consider using a native framework tho. As usual it all depends on the use case.
  - squints 11y ago
    Started out building our apps in Ionic, but switched to React Native as soon as it was released. The Ionic app just didn't feel native. Not even close. React Native has been absolutely amazing so far. So excited for Android!
    - joeyspn 11y ago
      Ionic has started to feel native only recently, but I agree that React Native for iOS (and now Android) sounds like a superior alternative. I'm very tempted to try it in my next project.
vjeux 11y ago
One realization I had when designing the API of React Native is that if you want to be able to share any component you need to have the lower level primitives to be shared. So I went on making them: View, Text and Image. I also realized that the same layout engine was required so implemented a shared layout which ended up being flexbox. What amazed me the most during this journey is that most platforms have actually very similar low level building blocks but unfortunately slightly incompatible in many ways. The 85% number is mind blowing, it turns out that those few building blocks are actually a large part of what it takes to build a high quality mobile app.
- swhipple 11y ago
  > What amazed me the most during this journey is that most platforms have actually very similar low level building blocks but unfortunately slightly incompatible in many ways. I've been looking at porting a React application to React Native, and was somewhat concerned about this myself. I have several custom components that make up the UI, which might not have a 1:1 translation between HTML/CSS to native components or may behave slightly differently across platforms. A different route I've considered is using Crosswalk as a shell around the application and exposing Android/iOS APIs through JavaScript with Crosswalk extensions. It may not feel perfectly native but it would be more consistent across platforms. I'm a novice in this area, so I'm curious if anyone else has looked into the different approaches and the conclusions they've drawn.

by ahupp 11y ago

When porting a React Native app to android 85% of the iOS version was reused: "At the time of shipping Ads Manager for Android, that approach yielded around 85 percent reuse of app code."

pbreit 11y ago

Yeah, the promise is not "write once, run everywhere". It's 1) write in a familiar way and 2) reuse a substantial amount.

SomeCallMeTim 11y ago
Which is unlike using Ionic Framework, where I've gotten about 98% code reuse between platforms. The only place that I usually end up making platform-specific changes is where Ionic has an iOS-specific layout change that breaks the look of a custom component on iOS. That and sometimes native-only features like Push Notifications that need to be handled slightly differently on each platform. But the latter is about a half dozen lines of stock code that take the iOS result and hand it to a common handler. I'm probably sticking with Ionic for now, though I'm planning to try out Meteor for my next project that has backend requirements. Meteor can install the Ionic SCSS as a plug-in, so you CAN get the best of both worlds.
- spicyj 11y ago
  If you want the exact same app on both platforms, you can do that on React Native too. The Facebook apps don't do that because we believe it gives a worse user experience.
  - deleted 11y ago
    [deleted]
  - SomeCallMeTim 11y ago
    Ionic does not give you the exact same app on both platforms. There are dozens of platform-specific styles in the CSS that make each target behave more like a native app. A custom-styled native app, but one that follows platform conventions. I also absolutely abhor the fact that React mixes HTML with JavaScript. It just feels so completely wrong to me.
- Bahamut 11y ago
  I have had performance issues using Ionic myself, and I have been intensely dissatisfied with Cordova & its ecosystem. In addition, I have had some pain with Ionic when trying to implement special behavior, mainly due to how the internals work. React Native is much more a step in the right direction IMO, although the Ionic team's work on Ionic 2 with Angular 2 could provide an interesting paradigm to compete on that front.
  - SomeCallMeTim 11y ago
    I haven't had performance issues with Ionic; Angular certainly has known issues with too-many-listeners, though Ionic offers a workaround for the most serious case (long list views).
- aikah 11y ago
  > Which is unlike using Ionic Framework, where I've gotten about 98% code reuse between platforms. Ionic is using HTML widgets , not actual IOS or Android widgets like React Native , Titanium or others. So you are basically developping an HTML client inside a webview and calling it an APP. Of course you'll be able to reuse 98% of the code that ran into a web browser. But it will look like an HTML website.
  - joeyspn 11y ago
    > But it will look like an HTML website. This is simply not true anymore. For simple CRUD apps, our customers can't tell the difference between a native app and an Ionic app. The ionic team has done a great job simulating the native animations and interactions of iOS and Android. If you don't believe it just try it. It costs 30 secs to install Ionic via npm and deploy one of the demo apps to an Android or iOS device. For more complex apps I'd consider using a native framework tho. As usual it all depends on the use case.
- squints 11y ago
  Started out building our apps in Ionic, but switched to React Native as soon as it was released. The Ionic app just didn't feel native. Not even close. React Native has been absolutely amazing so far. So excited for Android!
  - joeyspn 11y ago
    Ionic has started to feel native only recently, but I agree that React Native for iOS (and now Android) sounds like a superior alternative. I'm very tempted to try it in my next project.

vjeux 11y ago

One realization I had when designing the API of React Native is that if you want to be able to share any component you need to have the lower level primitives to be shared. So I went on making them: View, Text and Image. I also realized that the same layout engine was required so implemented a shared layout which ended up being flexbox. What amazed me the most during this journey is that most platforms have actually very similar low level building blocks but unfortunately slightly incompatible in many ways. The 85% number is mind blowing, it turns out that those few building blocks are actually a large part of what it takes to build a high quality mobile app.

swhipple 11y ago
> What amazed me the most during this journey is that most platforms have actually very similar low level building blocks but unfortunately slightly incompatible in many ways. I've been looking at porting a React application to React Native, and was somewhat concerned about this myself. I have several custom components that make up the UI, which might not have a 1:1 translation between HTML/CSS to native components or may behave slightly differently across platforms. A different route I've considered is using Crosswalk as a shell around the application and exposing Android/iOS APIs through JavaScript with Crosswalk extensions. It may not feel perfectly native but it would be more consistent across platforms. I'm a novice in this area, so I'm curious if anyone else has looked into the different approaches and the conclusions they've drawn.