3 ms·

@martinbigio here in case anyone has questions

arstaetro 10y ago
Are you considering to build the camera part with react or keep it native cause react wont add the needed functionality?
- martin_bigio 10y ago
  No plans for powering camera using React Native for now. We already have great native infra for that and regardless, IMHO RN might not be the best technology to implement those kind of immersive ultra-performant flows. We see space for React Native to grow inside of Instagram on flows similar to the ones mentioned on the blog post.
javiercr 10y ago
Did you guys use any other libraries from the React ecosystem to implement these features? (redux, normalizr, redux-saga, etc.) Also, what approach did you use for testing the RN flows? (unit testing, e2e testing, etc). BTW, thanks for sharing your experiences!
- martin_bigio 10y ago
  No, we didn't use any of those. For unit testing we used Jest <3 and for e2e an internal library developed by FB
htormey 10y ago
Great article Martin. Do you have any performance figures or tips that you learned when porting the save feature? Specifically how was performance across Android/iOS?
- martin_bigio 10y ago
  Great question. First off, worth mentioning there are many performance metrics you might want to measure. On one hand start up times, but since you specifically mentioned Save, I assume you want to learn more about scroll perf (i.e.: dropped frames, memory usage, time to render next pages, etc). We don't have numbers we can share but but the React Native team is working on further improving this. Check out Spencer's commit (https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 https://github.com/facebook/react-native/commit/a3457486e39d...) for a sneak peek of what's coming up :).
  - htormey 10y ago
    Awesome, thanks for that link! So far I have been pretty happy with react native. On Android myself and another developer I have been working hit some issues around images on Android. Part of the issues were our own fault: overlaying a transparent image provided by our designers instead of asking for a non transparent one, not using flags like renderToHardwareTextureAndroid. Others were due to our use of the navigation library, react-native-router-flux, which on Android is backed by fragments. This caused a bunch of overdraw issues (i.e previously pushed views, which were not visible were being rendered in the background). We are planning on migrating away from this routing library to another one. I'd love to read more articles about react native and performance based on real world examples at scale so please keep publishing them.
  - mwcampbell 10y ago
    To what extent is React Native performance on iOS limited by the fact that an iOS application using JavaScriptCore outside of a WKWebView can't use the JIT compiler, but only the interpreter?
firloop 10y ago
What would be the biggest hurdling block to rewrite the main feed into React Native? As a follow-up, do you think there's a performant enough ListView implementation in RN to build the feed with?
- dtwhitney 10y ago
  I'll be more blunt: please fix ListView :)
  - spicyj 10y ago
    You may be interested in https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 https://github.com/facebook/react-native/commit/a3457486e39d.... It's likely not production-ready yet but hopefully will become really good soon.
    - martin_bigio 10y ago
      Brace yourself, FlatList is coming :)
      - cgarg 10y ago
        When can we expect this in production?
k-mcgrady 10y ago
Probably OT but a bug that's been driving me crazy for a while now. When I open Instagram it reloads the feed every time as if the app had been purged from memory. This means if I accidentally close the app and reopen it my scroll position is lost and thanks to the sort algorithm the feed order has changed and I can't get back to where I was.
- scottmf 10y ago
  Same issue with Facebook web when I use the browser's back button to view my newsfeed. I'll see a post which interests me for a few seconds and then it's gone. Happens often.
- alexpersian 10y ago
  See this every time. Also on iOS if you have the app open, lock the phone, and then unlock you will be at the home screen. Almost as if the app ran out of memory or crashed in the background. Side effects of RN?
- alexpersian 10y ago
  See this every time. Also on iOS if you have the app open, lock the phone, and then unlock you will be at the home screen. Almost as if the app ran out of memory or crashed in the background. Side effects of RN?
- marksomnian 10y ago
  To me it seems like the feed is deterministic, that is, even between refreshes it stays the same, and when there are new posts on the top the old ones are still in the same order.
- dilap 10y ago
  Wow, sounds like they've really managed to bring a web-quality experience to native. Excellent work.
- ryancouto 10y ago
  huge pet peeve of mine too, it just started happening a few months ago. hope he responds to this.
deleted 10y ago
[deleted]
golf1052 10y ago
Not surprised to see no mention of UWP (Windows app dev) but I would figure that Instagram for Windows 10 Mobile would also be similar to the iOS/Android apps because UWP supports React Native?
losvedir 10y ago
Thanks for the post, very interesting! The post talks about the percentage of the code shared between iOS and Android. Is there any shared code with the web as well, or is that a completely separate react app?
- martin_bigio 10y ago
  Although the Instagram website is a React App we are not reusing any code atm. This is something I personally want to explore at some point though.
  - WA 10y ago
    How much code can be shared between React (web) and React Native? Edit: Answered in other comment below. Share logic, no UI.
rfvisuals 10y ago
thoughts on React Monocle? https://github.com/team-gryff/react-monocle https://github.com/team-gryff/react-monocle
kartickv 10y ago
Thanks, Martin, for appearing here. I've read a few times that apps developed in React Native have an odd look-and-feel, or had noticeable touch latency, or aren't performant enough or native-quality. Every time I tried an app built using a hybrid framework, it felt second-tier. Has that been your experience? When you moved any UI from UIKit or native Android views to React Native, was it worse in any way? Did it require a lot of work to get back to native-quality UX?
- martin_bigio 10y ago
  I've only seen such thing on infinite non-optimized listviews on old Android crappy phones, but, new listview infra that solves this is coming up soon :)

Are you considering to build the camera part with react or keep it native cause react wont add the needed functionality?

martin_bigio 10y ago
No plans for powering camera using React Native for now. We already have great native infra for that and regardless, IMHO RN might not be the best technology to implement those kind of immersive ultra-performant flows. We see space for React Native to grow inside of Instagram on flows similar to the ones mentioned on the blog post.

javiercr 10y ago

Did you guys use any other libraries from the React ecosystem to implement these features? (redux, normalizr, redux-saga, etc.) Also, what approach did you use for testing the RN flows? (unit testing, e2e testing, etc). BTW, thanks for sharing your experiences!

martin_bigio 10y ago
No, we didn't use any of those. For unit testing we used Jest <3 and for e2e an internal library developed by FB

htormey 10y ago

Great article Martin. Do you have any performance figures or tips that you learned when porting the save feature? Specifically how was performance across Android/iOS?

martin_bigio 10y ago
Great question. First off, worth mentioning there are many performance metrics you might want to measure. On one hand start up times, but since you specifically mentioned Save, I assume you want to learn more about scroll perf (i.e.: dropped frames, memory usage, time to render next pages, etc). We don't have numbers we can share but but the React Native team is working on further improving this. Check out Spencer's commit (https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 https://github.com/facebook/react-native/commit/a3457486e39d...) for a sneak peek of what's coming up :).
- htormey 10y ago
  Awesome, thanks for that link! So far I have been pretty happy with react native. On Android myself and another developer I have been working hit some issues around images on Android. Part of the issues were our own fault: overlaying a transparent image provided by our designers instead of asking for a non transparent one, not using flags like renderToHardwareTextureAndroid. Others were due to our use of the navigation library, react-native-router-flux, which on Android is backed by fragments. This caused a bunch of overdraw issues (i.e previously pushed views, which were not visible were being rendered in the background). We are planning on migrating away from this routing library to another one. I'd love to read more articles about react native and performance based on real world examples at scale so please keep publishing them.
- mwcampbell 10y ago
  To what extent is React Native performance on iOS limited by the fact that an iOS application using JavaScriptCore outside of a WKWebView can't use the JIT compiler, but only the interpreter?

firloop 10y ago

What would be the biggest hurdling block to rewrite the main feed into React Native? As a follow-up, do you think there's a performant enough ListView implementation in RN to build the feed with?

dtwhitney 10y ago
I'll be more blunt: please fix ListView :)
- spicyj 10y ago
  You may be interested in https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 https://github.com/facebook/react-native/commit/a3457486e39d.... It's likely not production-ready yet but hopefully will become really good soon.
  - martin_bigio 10y ago
    Brace yourself, FlatList is coming :)
    - cgarg 10y ago
      When can we expect this in production?

k-mcgrady 10y ago

Probably OT but a bug that's been driving me crazy for a while now. When I open Instagram it reloads the feed every time as if the app had been purged from memory. This means if I accidentally close the app and reopen it my scroll position is lost and thanks to the sort algorithm the feed order has changed and I can't get back to where I was.

scottmf 10y ago
Same issue with Facebook web when I use the browser's back button to view my newsfeed. I'll see a post which interests me for a few seconds and then it's gone. Happens often.
alexpersian 10y ago
See this every time. Also on iOS if you have the app open, lock the phone, and then unlock you will be at the home screen. Almost as if the app ran out of memory or crashed in the background. Side effects of RN?
alexpersian 10y ago
See this every time. Also on iOS if you have the app open, lock the phone, and then unlock you will be at the home screen. Almost as if the app ran out of memory or crashed in the background. Side effects of RN?
marksomnian 10y ago
To me it seems like the feed is deterministic, that is, even between refreshes it stays the same, and when there are new posts on the top the old ones are still in the same order.
dilap 10y ago
Wow, sounds like they've really managed to bring a web-quality experience to native. Excellent work.
ryancouto 10y ago
huge pet peeve of mine too, it just started happening a few months ago. hope he responds to this.

deleted 10y ago

[deleted]

golf1052 10y ago

Not surprised to see no mention of UWP (Windows app dev) but I would figure that Instagram for Windows 10 Mobile would also be similar to the iOS/Android apps because UWP supports React Native?

losvedir 10y ago

Thanks for the post, very interesting! The post talks about the percentage of the code shared between iOS and Android. Is there any shared code with the web as well, or is that a completely separate react app?

martin_bigio 10y ago
Although the Instagram website is a React App we are not reusing any code atm. This is something I personally want to explore at some point though.
- WA 10y ago
  How much code can be shared between React (web) and React Native? Edit: Answered in other comment below. Share logic, no UI.

rfvisuals 10y ago

thoughts on React Monocle? https://github.com/team-gryff/react-monocle https://github.com/team-gryff/react-monocle

kartickv 10y ago

Thanks, Martin, for appearing here. I've read a few times that apps developed in React Native have an odd look-and-feel, or had noticeable touch latency, or aren't performant enough or native-quality. Every time I tried an app built using a hybrid framework, it felt second-tier. Has that been your experience? When you moved any UI from UIKit or native Android views to React Native, was it worse in any way? Did it require a lot of work to get back to native-quality UX?

martin_bigio 10y ago
I've only seen such thing on infinite non-optimized listviews on old Android crappy phones, but, new listview infra that solves this is coming up soon :)