Interactive documentation for JSX

[bvaughn]

This issue was originally reported by @viebel via facebook/react/issues/10646:

The interactive version of the "JSX in depth" article got a nice traction today on Hacker News.

The interactive snippets are powered by the Klipse plugin (I'm the author of the plugin). The evaluation is done on the client side: no server is involved at all!

Would you consider trying the Klipse plugin on the official react documentation?

[viebel]

Hello guys,
Please share your thoughts and concerns about this idea.

As a starter, here is the main value points and the concerns as I see it:

Value to the readers

they can experiment with the code snippets without having to leave the page.

Concerns

the size of the javascript files:

• klipse plugin: 1.1 MB, 224KB zipped
• babel: 1.4 MB, 459 KB zipped
• codemirror: a few KBs

[bvaughn]

Those file sizes are valid concerns certainly. I think we could potentially do some things to mitigate them. On the Babel REPL (source code here) we do a couple of things to help with this:

• Load all big libs (eg Babel, big plug-ins) from CDN to benefit from browser cache.
• Defer loading any plug-ins until needed.
• Load them into a web-worker context so that compilation doesn't slow down the UI thread.

[viebel]

Before reducing the footprint, would you like to give it a try on one or two pages of the react documentation and feel how it feels both on desktop and on mobile?

[bvaughn]

I think it would be reasonable to put together a minimal proof-of-concept to see how the UX was before we worry too much about performance optimizations, sure.

[viebel]

Hello guys,

I've been working on an integration of Klipse using [gatsby-plugin-klipse] (https://github.com/ahmedelgabri/gatsby-plugin-klipse) written by @ahmedelgabri. Here is the Work-In-Progress pull request #236
Let's continue the discussion there.

[bvaughn]

I'm going to close this issue for now, for the reasons I mentioned in my comment on PR #236. I'm happy to keep talking about and re-evaluate any new ideas of proofs of concept though! ❤️