Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Image] Add a way to prefetch remote images to cache with Image.prefetch #6774

Closed
wants to merge 1 commit into from

Conversation

ide
Copy link
Contributor

@ide ide commented Apr 2, 2016

Adds Image.prefetch to prefetch remote images before they are used in an actual Image component. This is based off of #4420 by sospartan and skevy's work.

Test Plan:

  • Image demo in UIExplorer on Android and iOS. Performance is better on iOS but in both cases you can see that loading a prefetched image is faster than a non-prefetched one.
  • Using this in production
  • CI

@facebook-github-bot
Copy link
Contributor

By analyzing the blame information on this pull request, we identified @davidaurelio, @brentvatne and @dralletje to be potential reviewers.

@facebook-github-bot facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Apr 2, 2016
@ide
Copy link
Contributor Author

ide commented Apr 2, 2016

cc @mkonicek for Android changes. I believe you were satisfied with the Android implementation before. I cleaned it up a bit more but it is based on the same Fresco API.

cc @nicklockwood for iOS changes. I addressed your feedback you had in the previous PR, specifically removing the -Async suffix and moving the method out of the RCTNetworking class. I put the method in RCTImageLoader rather than in RCTImageViewManager for consistency with Android, because on Android the view managers can't simultaneously be bridge modules with exported methods so I had to make an ImageLoader module on Android instead.

@ide ide added Platform: iOS iOS applications. Android labels Apr 2, 2016
@bestander
Copy link
Contributor

FYI Buck build is broken

@facebook-github-bot
Copy link
Contributor

@ide updated the pull request.

Tests pass now - ide

return;
}
promise.resolve(true);
dataSource.close();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be in a finally block just in case the code above throws an exception?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll read the Fresco code more to see if this call is even necessary -- then we can either remove the unnecessary call, or will add a finally block if it is necessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

close() sets some internal state and I verified that the DataSource isn't automatically closed, so I believe it's correct to call close(). I'll add the finally blocks and ship this.

@mkonicek
Copy link
Contributor

mkonicek commented Apr 7, 2016

I think Nick might be too busy to review pull requests. Did he comment on the original PR? If you're using this in production might be fine to just #shipit and iterate on it.

@ide
Copy link
Contributor Author

ide commented Apr 7, 2016

@mkonicek thanks for the review. On the previous PR, Nick did comment on it and requested two changes that are both addressed in this PR. The iOS implementation is also quite small and easy to change if we'd like to.

Adds `Image.prefetch` to prefetch remote images before they are used in an actual `Image` component.

Test Plan:
- Image demo in UIExplorer on Android and iOS. Performance is better on iOS but in both cases you can see that loading a prefetched image is faster than a non-prefetched one.
- Using this in production
- CI
@facebook-github-bot
Copy link
Contributor

@ide updated the pull request.

@ide
Copy link
Contributor Author

ide commented Apr 7, 2016

@facebook-github-bot shipit

@facebook-github-bot
Copy link
Contributor

Thanks for importing. If you are an FB employee go to Phabricator to review.

@ide
Copy link
Contributor Author

ide commented Apr 8, 2016

@facebook-github-bot shipit

@facebook-github-bot
Copy link
Contributor

Thanks for importing. If you are an FB employee go to Phabricator to review.

@ide
Copy link
Contributor Author

ide commented Apr 8, 2016

@mkonicek could you look into why the merge failed?

@mkonicek
Copy link
Contributor

Buck can't see the CallerThreadExecutor class, even though the Buck build passed on CircleCI. @bestander Any idea why that happens?

@bestander
Copy link
Contributor

Investigating, Sandcastle complains about CallerThreadExecutor not being found

@bestander
Copy link
Contributor

A first guess - buckconfig in fbsource is different from buckonfig in react-native.
fbsource buckconfig may have something in ignore section

@bestander
Copy link
Contributor

@ide @mkonicek I think I got it.
Fresco in OSS RN is a few jars while in fbsource it is source code.
I suspect neither of

    react_native_dep('libraries/fresco/fresco-react-native:fbcore'),
    react_native_dep('libraries/fresco/fresco-react-native:fresco-react-native'),
    react_native_dep('libraries/fresco/fresco-react-native:fresco-drawee'),
    react_native_dep('libraries/fresco/fresco-react-native:imagepipeline'),

define CallerThreadExecutor in fbsource.
I'll take control and fix

@ghost ghost closed this in f7bcb3e Apr 13, 2016
@ide
Copy link
Contributor Author

ide commented Apr 14, 2016

@bestander thank you for investigating and figuring out how to get it to build =)

@ide ide deleted the image-prefetch branch April 18, 2016 10:46
zebulgar pushed a commit to nightingale/react-native that referenced this pull request Jun 18, 2016
Summary:Adds `Image.prefetch` to prefetch remote images before they are used in an actual `Image` component. This is based off of facebook#4420 by sospartan and skevy's work.
Closes facebook#6774

Differential Revision: D3153729

Pulled By: bestander

fb-gh-sync-id: ef61412e051a49b42ae885edce7905a8ca0da23f
fbshipit-source-id: ef61412e051a49b42ae885edce7905a8ca0da23f
aleclarson pushed a commit to aleclarson/react-native that referenced this pull request Sep 6, 2016
Summary:Adds `Image.prefetch` to prefetch remote images before they are used in an actual `Image` component. This is based off of facebook#4420 by sospartan and skevy's work.
Closes facebook#6774

Differential Revision: D3153729

Pulled By: bestander

fb-gh-sync-id: ef61412e051a49b42ae885edce7905a8ca0da23f
fbshipit-source-id: ef61412e051a49b42ae885edce7905a8ca0da23f
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Platform: iOS iOS applications.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants