docs(example): show folks how to use pull-streams instead

[dignifiedquire]

Always stream incoming data through pull streams and use browserify-aes directly from master now. I was able to add a 300Mb sized file with this quite quickly.

Fixes most issues in #952 I believe

[daviddias]

This was supposed to be the example that showed that "no extra batteries required". Kind of sad we lost that.

[victorb]

@diasdavid unpkg doesn't allow linking to a branch? We could also publish latest master ourselves on IPFS and link that instead

[dignifiedquire]

We don't have to keep this, with the new release that would be fine to use the unkpkg version again

[daviddias]

This is awesome, but we shouldn't have examples with undocumented (and already agreed to change) API

Needs this solved first. ipfs-inactive/interface-js-ipfs-core#126

[daviddias]

Awesome job @dignifiedquire! I'll keep this PR open until #988 (comment) is solved

[victorb]

Hm, a bit worried about this as most people haven't been exposed to pull-streams and we're supposed to support the API that most people use as well. This seems to amount to that even though you can use js-ipfs without using pull-streams, it's really inefficient and you should probably use pull-streams.

As this is supposed to be a simple example, I'm wondering if it's not best to stick with the non-pullstreams version.

[victorb]

Maybe we could show it's done with non-pullstreams in comments (risk of having code that is not being run though, might not actually work...) or make the pullstream into a separate example for better performance. We don't want to alienate people who see a js-ipfs example for the first time.

[dignifiedquire]

We are currently alienating people with the browser crashing, so I think having pull-streams is much better than crashing and being slow. node streams are really not meant to be used in the browser in most situations I don't think it's good to show examples with them, rather use non streaming methods by default and educate users about better options

[daviddias]

We will have both API and once they are properly documented, we can use them in the examples. This is one of the priorities for 0.27 (and probably the target thing to get it released)

[daviddias]

Actively working on ipfs-inactive/interface-js-ipfs-core#162 this week to then finish up this PR

[daviddias]

Who was interested on this PR, please review ipfs-inactive/interface-js-ipfs-core#162 (comment)

[daviddias]

Redirecting the efforts here to this PR #1086

[mitra42]

@diasdavid - it would be useful to leave issues open until they are solved, even if the solution is elsewhere. I for one have been watching this thread in the hope of finding the docs implied by its title, " show folks how to use pull-streams instead " with the direction to #1086 , I can't find any answer to this question in that issue nor in ipfs-inactive/interface-js-ipfs-core#162, and I'm probably not the only one waiting on docs before converting app code to use pull-streams.

[daviddias]

@mitra42 valid point. I tend to keep issues and PR open until they are fixed or converge elsewhere. It is hard to keep track of multiple issues discussing the same things and that is why I always leave a pointer saying that "x discussion continues at issue y".

@mitra42, for your case, ipfs-inactive/interface-js-ipfs-core#162 brought you something even better as you won't have to worry about pull-streams and just use ipfs.files.add with files and get hashes back. See the updated https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#add

See the updated example on #1086 that this PR was also updating (direct link here

js-ipfs/examples/exchange-files-in-browser/public/js/app.js

Lines 102 to 135 in f5e7561

	function onDrop (event) {
	onDragExit()
	$errors.className = 'hidden'
	event.preventDefault()
	if (!node) {
	return onError('IPFS must be started before files can be added')
	}
	const dt = event.dataTransfer
	const filesDropped = dt.files
	function readFileContents (file) {
	return new Promise((resolve) => {
	const reader = new window.FileReader()
	reader.onload = (event) => resolve(event.target.result)
	reader.readAsArrayBuffer(file)
	})
	}
	for (let i = 0; i < filesDropped.length; i++) {
	const file = filesDropped[i]
	readFileContents(file)
	.then((buffer) => {
	node.files.add(Buffer.from(buffer), (err, filesAdded) => {
	if (err) { return onError(err) }
	const fl = filesAdded[0]
	$multihashInput.value = fl.hash
	$filesStatus.innerHTML = `Added ${file.name} as ${fl.hash}`
	})
	})
	.catch(onError)
	}
	}

), as you will see there are no Readable or Pull Streams involved. I used this code files bigger than 750Mb, a significant improvement.

[mitra42]

Email sent as this goes into multiple topics.