docs: add docs for tx deps prefetching optimisation #3499

Dhaiwat10 · 2024-12-24T10:16:43Z

Closes Add documentation for tx dependency optimisation technique #3495

Release notes

In this release, we:

Added documentation for a contract call optimisation technique via pre-fetching dependencies which can result in as much as 2x faster transactions for users.

Summary

This PR adds documentation explaining how pre-fetching contract call/transaction dependencies can speed up transactions for users, and a recommended implementation for devs.

Checklist

All changes are covered by tests (or not applicable)
All changes are documented (or not applicable)
I reviewed the entire PR myself (preferably, on GH UI)
I described all Breaking Changes (or there's none)

vercel · 2024-12-24T10:16:47Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fuels-template	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 24, 2024 5:34pm
ts-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 24, 2024 5:34pm
ts-docs-api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 24, 2024 5:34pm

codspeed-hq · 2024-12-24T10:28:03Z

CodSpeed Performance Report

Merging #3499 will degrade performances by 44.35%

_{Comparing dp/tx-prefetch-deps-docs (85f738f) with master (41c72fb)}

Summary

❌ 1 regressions
✅ 17 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

	Benchmark	`master`	`dp/tx-prefetch-deps-docs`	Change
❌	`should successfully conduct a custom transfer between wallets (x20 times)`	50.3 ms	90.3 ms	-44.35%

danielbate

Nice work Dhai, do you think this could have it's own section in the docs around front-end optimisations? And I think those diagrams could do with some more love, maybe generate them with a flow chart tool.

apps/docs/src/guide/contracts/optimising-contract-calls.md

danielbate · 2024-12-24T10:42:52Z

apps/docs/src/guide/contracts/optimising-contract-calls.md

+
+This can be mitigated by preparing the contract call _before_ the user presses 'Submit Transaction'. If the transaction is prepared beforehand, the SDK only has to send the transaction to the network and wait for it to be confirmed. This reflects the actual speed of the chain to the user.
+
+You can experience this yourself by trying out this [demo](https://fuel-wallet-prefetch-experiment-75ug.vercel.app/).


Hmm should this be brought inside the SDK? Is it more beneficial for this to live inside a snippet?

This = demo or the hook?

Where does this URL come from?

https://fuel-wallet-prefetch-experiment-75ug.vercel.app/

The demo, usually we don't have any external deps for the docs, the links is from an external projects on Dhai's github

danielbate · 2024-12-24T10:43:18Z

apps/docs/src/guide/contracts/optimising-contract-calls.md

+
+We recommend creating a `usePrepareContractCall` hook:
+
+```tsx


Should this all be in a snippet for forwards compatibility?

It could be; but that would mean us having to create a new project for snippets since this is a React snippet. In the interest of speed and considering how important this info is for our ecosystem projects, I think it is fine if we create the snippets in a separate PR. Nick wants us to announce this asap on Twitter

As much as we love teaching devs how to fetch data in React, we still have two more weeks of code freeze. 🙂

I disagree, this is not about teaching people how to fetch data in React. It's about the overall idea of preparing contract calls in advance, leading to a faster transaction experience.

About the code freeze, this is not adding any new code. Can we not get this in?

danielbate · 2024-12-24T10:44:08Z

apps/docs/src/public/txdep1.png

I think eliminated is the wrong wording here, as we are instead optimistically preparing the transaction.

Doesn't it makes sense in the context of a tranasction's lifetime for the end user?

@danielbate Agreed, the request is optimistically fetched, not eliminated.

It is eliminated from the contract call's lifecycle, so I strongly think it is eliminated in that context.

Co-authored-by: Daniel Bate <[email protected]>

Dhaiwat10 · 2024-12-24T17:24:19Z

@danielbate in the interest of getting this out there and speed; can we proceed with these diagrams for now? I personally think they are ok, but yes we could do better. Also: will we be able to merge/release this now during the code freeze?

github-actions · 2024-12-24T17:52:25Z

Coverage Report:

Lines	Branches	Functions	Statements
76.33%(+0%)	69.84%(+0%)	74.2%(+0%)	76.34%(+0%)

Changed Files:

Coverage values did not change👌.

arboleya · 2024-12-24T17:56:05Z

apps/docs/.vitepress/config.ts

+              {
+                text: 'Optimising Contract Calls',
+                link: '/guide/contracts/optimising-contract-calls',
+              },


It seems confusing to mix React tips with core contract documentation.

A simple React recipe demoing the example hook may suffice.

I disagree that this is a React tip. Like I mentioned here: #3499 (comment)

arboleya · 2024-12-24T17:57:01Z

apps/docs/src/guide/contracts/optimising-contract-calls.md

@@ -0,0 +1,106 @@
+# Optimizing Contract Calls


We are not optimizing contract calls.

Suggested change

# Optimizing Contract Calls

# Optimizing Contract Estimation in React Apps

I disagree, the estimation itself isn't optimized - it's just done in advance which leads to faster/optimised contract calls.

arboleya · 2024-12-24T18:09:34Z

apps/docs/src/guide/contracts/optimising-contract-calls.md

+
+The below flowchart shows this entire process:
+
+![Transaction Lifecycle in the SDK without prefetching](../../public/txdep1.png)


Hmm, I'm hesitant about adding images to the docs.

danielbate · 2024-12-24T21:13:16Z

If there is an immediate need to communicate this to the community, this can be done independently to the TS SDK documentation. Could do this via a Twitter thread with diagrams and stackblitz rather than breaking the code freeze and pushing something we aren't all happy with.

docs: add docs for tx deps prefetching optimisation

6142254

Dhaiwat10 added the docs Requests pertinent to documentation label Dec 24, 2024

Dhaiwat10 self-assigned this Dec 24, 2024

Dhaiwat10 requested review from digorithm, arboleya, Torres-ssf, danielbate, nedsalk, petertonysmith94 and maschad as code owners December 24, 2024 10:16

vercel bot deployed to Preview – fuels-template December 24, 2024 10:18 View deployment

vercel bot deployed to Preview – ts-docs December 24, 2024 10:18 View deployment

Update spell-check-custom-words.txt

4b69693

vercel bot deployed to Preview – ts-docs December 24, 2024 10:24 View deployment

vercel bot deployed to Preview – fuels-template December 24, 2024 10:26 View deployment

vercel bot deployed to Preview – ts-docs-api December 24, 2024 10:28 View deployment

danielbate reviewed Dec 24, 2024

View reviewed changes

Dhaiwat10 and others added 5 commits December 24, 2024 22:43

reword

885d5a2

Co-authored-by: Daniel Bate <[email protected]>

reword

f4ff5d2

Co-authored-by: Daniel Bate <[email protected]>

reword

91103a3

Co-authored-by: Daniel Bate <[email protected]>

reword

ab0b6ca

Co-authored-by: Daniel Bate <[email protected]>

reword

76b97dd

Co-authored-by: Daniel Bate <[email protected]>

vercel bot deployed to Preview – ts-docs-api December 24, 2024 17:21 View deployment

vercel bot deployed to Preview – ts-docs December 24, 2024 17:21 View deployment

vercel bot deployed to Preview – fuels-template December 24, 2024 17:25 View deployment

fix md lint

85f738f

vercel bot deployed to Preview – ts-docs-api December 24, 2024 17:30 View deployment

vercel bot deployed to Preview – fuels-template December 24, 2024 17:30 View deployment

vercel bot deployed to Preview – ts-docs December 24, 2024 17:34 View deployment

arboleya reviewed Dec 24, 2024

View reviewed changes

Dhaiwat10 requested a review from danielbate December 24, 2024 18:28

Dhaiwat10 closed this Dec 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add docs for tx deps prefetching optimisation #3499

docs: add docs for tx deps prefetching optimisation #3499

Dhaiwat10 commented Dec 24, 2024 •

edited

Loading

vercel bot commented Dec 24, 2024 •

edited

Loading

codspeed-hq bot commented Dec 24, 2024 •

edited

Loading

danielbate left a comment

danielbate Dec 24, 2024

Dhaiwat10 Dec 24, 2024

arboleya Dec 24, 2024

danielbate Dec 24, 2024 •

edited

Loading

danielbate Dec 24, 2024

Dhaiwat10 Dec 24, 2024

arboleya Dec 24, 2024

Dhaiwat10 Dec 24, 2024

danielbate Dec 24, 2024

Dhaiwat10 Dec 24, 2024

arboleya Dec 24, 2024

Dhaiwat10 Dec 24, 2024

Dhaiwat10 commented Dec 24, 2024

github-actions bot commented Dec 24, 2024

arboleya Dec 24, 2024

Dhaiwat10 Dec 24, 2024

arboleya Dec 24, 2024

Dhaiwat10 Dec 24, 2024

arboleya Dec 24, 2024

Dhaiwat10 Dec 24, 2024

danielbate commented Dec 24, 2024


		This can be mitigated by preparing the contract call _before_ the user presses 'Submit Transaction'. If the transaction is prepared beforehand, the SDK only has to send the transaction to the network and wait for it to be confirmed. This reflects the actual speed of the chain to the user.

		You can experience this yourself by trying out this [demo](https://fuel-wallet-prefetch-experiment-75ug.vercel.app/).


		We recommend creating a `usePrepareContractCall` hook:

		```tsx

	# Optimizing Contract Calls
	# Optimizing Contract Estimation in React Apps


		The below flowchart shows this entire process:

		![Transaction Lifecycle in the SDK without prefetching](../../public/txdep1.png)

docs: add docs for tx deps prefetching optimisation #3499

docs: add docs for tx deps prefetching optimisation #3499

Conversation

Dhaiwat10 commented Dec 24, 2024 • edited Loading

Release notes

Summary

Checklist

vercel bot commented Dec 24, 2024 • edited Loading

codspeed-hq bot commented Dec 24, 2024 • edited Loading

Merging #3499 will degrade performances by 44.35%

Summary

Benchmarks breakdown

danielbate left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielbate Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dhaiwat10 commented Dec 24, 2024

github-actions bot commented Dec 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielbate commented Dec 24, 2024

Dhaiwat10 commented Dec 24, 2024 •

edited

Loading

vercel bot commented Dec 24, 2024 •

edited

Loading

codspeed-hq bot commented Dec 24, 2024 •

edited

Loading

danielbate Dec 24, 2024 •

edited

Loading