Crank: Crank.js killer demo?

[mcjazzyfunky]

Does anybody know by any chance a Crank.js demo that really kicks React's butt?
All the examples and demos that I've seen in Crank.js so far look very nice, of course, but frankly I have not seen anything that could not more or less equally nicely be implemented in React (by using some smart custom hooks, of course).
Would be great if anybody could show an example where the implementation in Crank.js really, really shines compared to its React counterpart. Thanks :)

---

[EDIT] The term "killer demo" may be a bit strong. I did not mean that the demo had to be extremely flashy or of a miniumum extent in lines of code. It's not really important whether the "killer demo" has 20 lines of code or more than 1000. But the implementation with Crank.js should actually be much easier (which often also implies: more concise) than its React counterpart.

For example, here is a small but quite nice IMHO "killer demo" which shows pretty well the power of React hook functions (if you do not think that this is a "killer demo" then just think about how this would have been implemented 18 months ago with the UI library of your choice):

function Metronome({ bpm = 60 }) {
  const [tock, setTock] = useState(false)

  useInterval(() => setTock(it => !it), 60000 / bpm)

  return <div>Metronome: {bpm} bpm => {tock ? 'Tock' : 'Tick'}</div>
}

https://codesandbox.io/s/jolly-bash-t511f?file=/src/index.js

[gihrig]

In case no such demo is forthcoming and someone would like to create a Medium clone, the Real World demo project looks like a killer app that would really show off the simplicity of Crank in relation to React, and pretty much every other front end framework in existence. While at the same time demonstrating Crank's utility in a real world application.

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more See how the exact same Medium.com clone (called Conduit) is built using any of our supported frontends and backends. Yes, you can mix and match them, because they all adhere to the same API spec 😮😎

[brucou]

Well, this seems to be in the early days, so I will be surprised if there is too much existing code. As a matter of fact, the fact that there is a TodoMVC is quite good and I found it useful to understand more or less the idea.

If we talk about a similar thing that, in addition, would match the observations of the authors on React/Suspense, I would precisely recommend:

• a Suspense demo (I think there are four suspense demo made by the react team, can't find it). Or
• Concurrent Mode demo: for example this.

Those are places where async and generators should be able to bring the same functionality (e.g. not blocking the main thread, divide long tasks into reschedulable small tasks, etc.).

[cpryland]

The example of implementing Suspense in the docs seems quite powerful and convincing on its own.

[mcjazzyfunky]

@brucou That 3D demo is really amazing ... (hope nobody expects me to implement that - LOL) ...
I like Brian's concise implementation of that TodoMVC demo, but it seems to me that the reason conciseness is mainly based on the obvious high skills of Brian as a software engineer and not necessarily because Crank is so much better suited for this TodoMVC example than React. If he had implemented that in React (plus some smart event library or whatever) the result would have been also quite nice and concise, I'm sure.

@brucou @cpryland Yeah thanks, that Suspense stuff could be a good example.

@brainkim Do you have by any chance a more or less small running example regarding that Suspense stuff implemented with Crank? ... three days ago there was this interview with you on "entwickler.de" where you where talking something about caching challanges when using Suspense the React way.
Do you have by any chance a little running example about that in Crank.js and I will try to implement the same thing in React (or something similar), then we could have two implementations to compare. Would that be possible? Of course it's easier for me if the Suspence example is reasonable small ;-)

[workingjubilee]

...probably the real killer demo would revolve around animation control. Having explicit advancement makes you the master of the clock. Animation in React is agony because everything is "reactive" rather than, well... generative.

[wmadden]

I agree with @gihrig. Ultimately the value of this framework to the broader JavaScript audience will be in its capacity to enable real-world applications. TodoMVC is a great start, but often criticised for its low complexity compared to real-world projects.

Compared specifically with React, being able to reproduce features like concurrent rendering and Suspense (which were motivated by the real-world needs of the React community and which have taken the core team years of development effort) would be a very impressive demonstration of Crank's advantages over React.

[mcjazzyfunky]

Okay, thank you very much to everybody for the helpful responses and ideas.
Frankly, I think my description above was a bit misleading. I should not have used the term "killer demo" while at the end of the day all I wanted was just a few small but very interesting use cases and Crank demos that show why some of Cranks design decisions may be more helpful than their React counterpart.
I would suggest that I close this issue now and instead I'd like to encourage you whenever a little example that shows quite specteculary Crank's power and could be a good candidate for the Crank documentation comes to your mind, to open a new issue for that. Thanks a lot to all.

[brainkim]

https://github.com/brainkim/crank-three-boxes/

I did the boxes demo. Seems to run fine in Crank.js though I am not an expert in performance.

[mcjazzyfunky]

@brainkim Really great - well done :-) One question: Where exactly do I find the React code that was the base for your Crank demo (or have you done everything on your own from scratch?) ... Paul's link is not really working...

[brainkim]

I think the actual react-three-fiber example can only be found in the commit history of the codebase, and judging from conversations with the maintainer it appears to have been deliberately unpublished so I won’t share it. The performance of the Crank demo meanwhile is more or less comparable to raw Three.js so I didn’t think it was necessary to find the examples.

[brucou]

Great stuff. Shame though that Paul removed the demo. In any case, the Svete demo (and now crank) are showing the limitations of either React or Paul's demo implementation.

[fritx]

@brainkim hello may I add this demo
https://github.com/brainkim/crank-three-boxes/
in to the collection of
https://coldemo.js.org/ ?

[brainkim]

@fritx sure!

[waynebaylor]

I took a stab at implementing the RealWorld spec with crank:
https://github.com/waynebaylor/realworld-starter-kit