Browser + Node.js + Go Interop Examples/Tutorials

[haadcode]

As part of sprint ipfs/team-mgmt#310, we will create examples for go-ipfs and js-ipfs interop.

The goal is to demonstrate the interop functionality by showing files and data moving between the two implementations.

This issue is to track the development and progress of the interop examples.

[haadcode]

Gonna drop some design notes for these.

Example 1 - Cat a file

Demonstrates:

• add files via go-ipfs, ipfs.files.cat

Required components:

• go-ipfs cli, js-ipfs + ipfs-daemon in the browser

Steps:

• have one browser peer open and a go-ipfs daemon running
• 'ipfs add another-file.txt'
• copy file hash
• paste file hash in browser peer
• observe file contents appear

Notes:

• I want this to be s single .html file with minimal html, CSS and JS library overhead
• It contains minimal amount of external dependencies
• It should be easy to read what happens in the code
• It should not use any external tools, so that running and packaging the example is effortless
• The focus is on robust code and functionality, not on visuals
• The example code should be documented and presented as a tutorial

[haadcode]

Example 2 - File Manager

This one is more advanced example and as per the current design, will also use orbit-db. We may or may not end up using it.

Demonstrates:

• add files from go-ipfs, ipfs.files.cat, ipfs.files.ls
• ipfs.object.put, ipfs.object.get
• ipfs.pubsub

Required components:

• go-ipfs cli, js-ipfs + ipfs-daemon, orbit-db

Steps:

• have two browser peers open and a go-ipfs daemon running
• add a file via the first browser peer
• observe file appear in the second browser peer
• copy file hash
• 'ipfs cat '
• 'ipfs add another-file.txt'
• copy file hash
• 'node addfile.js peerID another-file.txt'
• observe file appear in browser peers
• close browser peers
• open a new browser peer
• observe all files appear

Notes:

• Idea here is to demonstrate more IPFS functionality via orbit-db
• Can't add directories in the browser. That might change the expected UX.
• Same notes as for Example1 apply here in terms of what the focus is in the implementation (clean, simple code, well documented, few deps, etc.)

[haadcode]

Example2 might be too advanced for our purposes for this sprint. It'd be really cool though...

[victorb]

Can't add directories in the browser. That might change the expected UX.

Should be possible to iterate through all the files and directories, so this one shouldn't be impossible to do.

Example 2 - File Manager

Not sure we need to make it as complicated as keeping the states in sync in multiple browser peers, think a flow like this would be simple enough:

1. Add directory with go-ipfs and go-ipfs daemon running
2. Navigate to hash in browser with js-ipfs
3. Be able to navigate directory in browser
4. Turn off go-ipfs
5. Open new tab with same hash, should now be loading from other js-ipfs daemon instead of go-ipfs daemon

Otherwise than that, looks good to me 👍

[daviddias]

09:26 <@daviddias> haad: what you are proposing sounds fun :) 
09:26 <@daviddias> keeping the latest root hash visible in the page
09:26 <@daviddias> so that people can mount it locally afterwards would also be a +1
09:27 <@daviddias> I guess the piece of feedback I have is just to make sure to work incrementally 
09:27 <@daviddias> It would be better to have a File browser where you can go through files, (very much like it is available in the webui or what whyrusleeping did a while ago)
09:28 <@daviddias> and then something that syncs across browsers
09:28 <@daviddias> I'll post these comments in IRC for logging :)

[daviddias]

Can't add directories in the browser. That might change the expected UX.

'Adding' is possible in js-ipfs (not js-ipfs-api), you just won't be able to drag and drop a dir as the browser doesn't support it, but you can drag and drop a dozen of files (at the same time) and then wrap those in a directory. Try out https://dropub.com to get a feel of that UX

[daviddias]

• The focus is on robust code and functionality, not on visuals

It should look minimally good (difference between no styles and at least some visual hints that explain what's happening)

I want this to be s single .html file with minimal html, CSS and JS library overhead

I don't think that for our audience, this will make things simpler, web developers are used to have modularity now. One single .html file is harder to maintain, becomes more brittle.

It should not use any external tools, so that running and packaging the example is effortless

No webpack or browserify??

[daviddias]

All comments aside, excited to have these demos, the Live File Browser with Orbit sounds super fun! :D

[dignifiedquire]

It would be great if these demos could also be made part of the interop test suite, at least in a reduced fashion. That way we always know that things are working or not.

[daviddias]

Example 1 - Cat a file
Demonstrates:
ipfs.files.add, ipfs.files.cat

Something changed here from the expectations defined in ipfs/team-mgmt#310

The interop demos cannot be js-ipfs to js-ipfs, that defeats the purpose, see the User Story in ipfs/team-mgmt#310, it is js-ipfs in the Browser accessing go-ipfs added content. See my review at: #714 (review) Let me know if you have questions.

[haadcode]

Something changed here from the expectations defined in ipfs/team-mgmt#310

Nothing has changed, we're still going for what was discussed. A lot was lost in translation, see my comment here #714 (comment). I made the wording more explicit in the designs above to reflect that it is intended that the files are added from go-ipfs.

[daviddias]

Closing this issue, let's follow on each example on their specific PR

• tutorial: Transfer Files  #714
• tutorial: File Exchange - Transfer files between desktop and browser using go-ipfs, js-ipfs and orbit-db #716