News for hackers. Stuff that matters.
Re:React Native at Instagram by martin_bigio on Monday February 06, 2017 @04:37PM (#13584356)
@martinbigio here in case anyone has questions
Re:React Native at Instagram by k-mcgrady on Monday February 06, 2017 @05:16PM (#13584777)
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.
Re:React Native at Instagram by alexpersian on Monday February 06, 2017 @06:30PM (#13585365)
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?

Re:React Native at Instagram by dilap on Monday February 06, 2017 @11:55PM (#13587150)
Wow, sounds like they've really managed to bring a web-quality experience to native.

Excellent work.

Re:React Native at Instagram by scottmf on Monday February 06, 2017 @05:22PM (#13584820)
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.

Re:React Native at Instagram by marksomnian on Monday February 06, 2017 @07:09PM (#13585691)
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.
Re:React Native at Instagram by ryancouto on Tuesday February 07, 2017 @12:43AM (#13587358)
huge pet peeve of mine too, it just started happening a few months ago. hope he responds to this.
Re:React Native at Instagram by heyheyhey on Tuesday February 07, 2017 @05:34PM (#13593597)
i'm on iOS but today's IG update just got rid of this problem. been suffering this problem for the past week or so.
Re:React Native at Instagram by golf1052 on Monday February 06, 2017 @05:46PM (#13585037)
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?
Re:React Native at Instagram by firloop on Monday February 06, 2017 @05:01PM (#13584634)
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?
Re:React Native at Instagram by dtwhitney on Monday February 06, 2017 @05:25PM (#13584859)
I'll be more blunt: please fix ListView :)
Re:React Native at Instagram by spicyj on Monday February 06, 2017 @05:39PM (#13584973)
You may be interested in https://github.com/facebook/react-native/commit/a3457486e39d.... It's likely not production-ready yet but hopefully will become really good soon.
Re:React Native at Instagram by martin_bigio on Monday February 06, 2017 @05:44PM (#13585015)
Brace yourself, FlatList is coming :)
Re:React Native at Instagram by cgarg on Monday February 13, 2017 @03:55AM (#13634003)
When can we expect this in production?
Re:React Native at Instagram by kartickv on Tuesday February 07, 2017 @12:16AM (#13587243)
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?

Re:React Native at Instagram by martin_bigio on Tuesday February 07, 2017 @07:42AM (#13588946)
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 :)
Re:React Native at Instagram by javiercr on Monday February 06, 2017 @04:58PM (#13584602)
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!

Re:React Native at Instagram by martin_bigio on Monday February 06, 2017 @05:42PM (#13584998)
No, we didn't use any of those. For unit testing we used Jest <3 and for e2e an internal library developed by FB
Re:React Native at Instagram by arstaetro on Monday February 06, 2017 @04:54PM (#13584535)
Are you considering to build the camera part with react or keep it native cause react wont add the needed functionality?
Re:React Native at Instagram by martin_bigio on Monday February 06, 2017 @04:58PM (#13584592)
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.

Re:React Native at Instagram by htormey on Monday February 06, 2017 @04:59PM (#13584616)
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?

Re:React Native at Instagram by martin_bigio on Monday February 06, 2017 @05:08PM (#13584708)
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/a3457486e39d...) for a sneak peek of what's coming up :).

Re:React Native at Instagram by htormey on Monday February 06, 2017 @05:26PM (#13584865)
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.

Re:React Native at Instagram by mwcampbell on Monday February 06, 2017 @07:48PM (#13585913)
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?
Re:React Native at Instagram by losvedir on Monday February 06, 2017 @06:30PM (#13585368)
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?
Re:React Native at Instagram by martin_bigio on Monday February 06, 2017 @08:43PM (#13586212)
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.
Re:React Native at Instagram by WA on Tuesday February 07, 2017 @04:27AM (#13588210)
How much code can be shared between React (web) and React Native?

Edit: Answered in other comment below. Share logic, no UI.

Re:React Native at Instagram by rfvisuals on Monday February 06, 2017 @10:41PM (#13586803)