Plunker, jsfiddle or any alternative?

Question

Plunker, jsfiddle or any alternative?

cognitom opened this issue 9 years ago · 36 comments

We need a good platform to show the demo, to reproduce the bug, ...etc.
As a playground for the Riot users, what is the best option? Some requirements here:

put HTML, JavaScript, CSS, and Tag file
API for creating the demo dynamically (because the example code is hosted on GitHub)
user can fork it
nice looking (I hope...)

AFIK, Only Plunker accepts the .tag files. So Plunker seems better for me. (but not the best)
Any alternatives? Let us know your recommended platform :)

Candidates

Static: Plunker, JSBin, CodePen, JSFiddle
Dynamic: Runnable, jsapp

aMarCruz commented 9 years ago

👍

Answer 1 · 2015-08-16T07:55:03.000Z

@rsbondi @Mouvedia how about?

Answer 2 · 2015-08-16T08:29:10.000Z

My order of preference:

Plunker (multiple files)
JSBin (console output)
CodePen (popular, looks nice. But hides code like the head tag)
JSFiddle (feels slow)

Answer 3 · 2015-08-16T10:08:40.000Z

@gregorypratt thanks. Me, too. Almost same preference.

How about runnable? I've just run into this site.
https://runnable.io/

Looks pretty but still beta and unstable...
http://code.runnable.com/VOIYIALkqgAnHDmj/node-js-socket-io-and-react-js

Answer 4 · 2015-08-16T13:47:26.000Z

http://jsapp.us might be interesting too for the server side of things.

Answer 5 · 2015-08-16T14:36:50.000Z

@Mouvedia thanks, I'll add it to the list avobe.

@gregorypratt @GianlucaGuarini I've made a small tool to open the code on Plunker. Would you have a look?

try this link: http://riotjs.com/examples/plunker/?app=todo-app
source: https://github.com/riot/examples/tree/master/plunker

Answer 6 · 2015-08-16T14:43:17.000Z

Plunker:
Pros:

multiple files
full control of head
zen coding
better search
public/private
code formatting
markdown for readme

Cons:

slow
unreliable embedding

Maybe @cognitom 's tool could be adapted to help overcome the embedding issue?

Answer 7 · 2015-08-16T15:13:43.000Z

Runnable has been around for a while and as mentioned seemed unstable when I tried it. I don't see a repository for it, not open source?

I have not seen jsapp before but it looks like the last commit on the project was on Sep 25, 2011 fwiw.

Answer 8 · 2015-08-16T15:22:16.000Z

additional requirements:

maintained
isomorphic ready
cross-browser

Answer 9 · 2015-08-16T19:47:32.000Z

I like too much the console output and the "Convert to html/js/css" features of jsbin, and we have full control of the header, jshint, themes, etc.
In paid plan we can force the theme color and font when other users open our bins.

Butt it seems obvious (to me) to use a syntax highlighter, load dynamically the code, and put a link to one or more of these sites.

SyntaxHighlighter by Alex Gorbatchev

Answer 10 · 2015-08-16T21:04:19.000Z

@cognitom WOW you did a great job I can't wait to include your examples in riot.github.io I like the way you have linked them to plunker and I would like to keep using it for now. Let's discuss about a possible switch to "whatever" platform once we realize that it does not fit anymore our needs.

✌️

Answer 11 · 2015-08-17T01:02:17.000Z

Thanks all!
jsbin has much cleaner look and I love the console feature, too. But at this time, Plunker's "multiple file" has higher priority, I think. (BTW, we have chance to send PR to jsbin to support .tag files as like .jsx)
https://github.com/jsbin/jsbin/

Conclusion:

let's go with Plunker (at this time)
"open in Plunker" button
use Plunker not in "embed mode" for "Playground" example
centralize examples in riot/examples

And keep our eyes on dynamic demo service like jsapp and runnable.

Answer 12 · 2015-08-17T01:07:03.000Z

@aMarCruz syntax highlighter is a good idea 👍 I'm thinking about some custom tags for our example site.

code viewer (syntax highlighter)
markdown viewer
iPhone previewer (just wrap iframe with the iPhone silhouette)

Answer 13 · 2015-08-17T01:24:43.000Z

One more, console emulator would be nice, too. Something like this:

console.log = function(log, dom) { 
  return function (text) {
    log(text)
    dom.value += text
  };
}(console.log, document.getElementById("console"))

Then, we'll see the error on the page or Plunker. Here's jsbin's one.

Answer 14 · 2015-08-17T06:46:39.000Z

So having demos directly under the website is not even an option? We could make a jekyll template so that setting up a new demo is easy. Clearly the best looking option.

I guess live edits are the biggest motivation for embeddable demos.

Answer 15 · 2015-08-17T07:06:16.000Z

@tipiirai , that's what I tried to say.
@cognitom , preview in mobiles is a good idea.

About embedded live edit with real-time output, see an interesting example in http://maquettejs.org/
This has an option for "open in codepen", too.
EDIT: The tutorial is good: http://maquettejs.org/tutorial/01-intro.html

Answer 16 · 2015-08-17T07:37:14.000Z

@tipiirai yeah, of course it's an option. But I'm not sure we need jekyll, because example page would be a kind of SPA. I think it will be easier to test it if we host the SPA part and example codes in the same repo. And we can host it under http://riotjs.com/example/. In either case, hosting on riot.github.io or examples repo, it's not matter for the visitors. Thoughts?

Answer 17 · 2015-08-17T07:56:40.000Z

@aMarCruz maquettejs's demo looks cool and attractive!
Technically can we do that with Riot.js? I'm guessing about the template cashing in Riot.js. If we can update the tag file definition on the fly, let's try making the live demo 👍

Then, how about...

Playground: one live demo (if we can), only tag file is editable. It might include simple expressions, a loop and an event handler.
Basic examples: static demo with code viewer and "open in Plunker" button
More examples: just link to riot/examples repo

Answer 18 · 2015-08-17T08:39:20.000Z

Re: #2 (comment)

if you don't mind I might take the output from some of these custom tags and re-produce them in RiotGear

Answer 19 · 2015-08-17T08:47:20.000Z

@gregorypratt sounds great! Pls 👍

Answer 20 · 2015-08-17T09:18:41.000Z

Thank you for the answer. I guess you are right that this it's not matter for the visitors. We should strive for usability and not looks.

It looks from above that Plunker offers the greatest amount of cons so let's go with it. Glad you took a stab on this and move forward! This examples repository is highly needed.

btw: is it possible to tweak the CSS of plunker?

Answer 21 · 2015-08-25T14:29:03.000Z

@tipiirai sorry, I've missed your last question.

btw: is it possible to tweak the CSS of plunker?

I don't think so... There could be some hackish way, but it might be unstable.
Anyway, fortunately, I've just realized that the code below works fine:

riot.compile(src)
riot.mount('.preview', 'sample')
setTimeout(function(){
  riot.compile(src.replace('world', 'Tokyo'))
  riot.mount('.preview', 'sample')
}, 3000)

This means Riot can mutate the tag definition on the page. Fantastic!
And also, we don't have to show bit ugly Plunker on our page with iframe. Now we can move forward ;)
I'll try to combine this with Ace.

Answer 22 · 2015-08-25T16:24:46.000Z

Here's a proof of concept ✌️
I'm going to add CSS and apply "riotjs.com" template, later.

Answer 23 · 2015-08-26T05:44:59.000Z

The ability to alter tags offers a fantastic way to customize applications later. Definitely an advantage in Riot.

Answer 24 · 2015-08-26T06:14:16.000Z

@cognitom the editor looks awesome. Maybe we could also pick one of the color schemes I've used on colorsublime You can decide any of them and I will send you the ace src theme files

Answer 25 · 2015-08-27T06:27:41.000Z

Awesome!!

I would like to tweak the UI/CSS a bit. Can I?

Answer 26 · 2015-08-27T06:35:31.000Z

@cognitom can't we use an iframe to evaluate the code coming from the editor? Your demo seems to break if I use scoped css inside a tag. I think we could try the window.postMessage across the parent and the iframe to evaluate the code, what do you think?

Answer 27 · 2015-08-27T06:42:34.000Z

@GianlucaGuarini agreed. It's better to use iframe. Good catch, thanks!

Answer 28 · 2015-08-27T07:15:17.000Z

@tipiirai sure! Feel free to modify it.

Answer 29 · 2015-08-29T17:34:05.000Z

One thing that I've found a bit annoying with jsbin + friends is the difficulty of being able to step through the code in the dev tools. Would like be possible to add in ??

Answer 30 · 2015-09-09T08:50:44.000Z

I updated the looks of the live editor:

Hoping to see that live soon!

Answer 31 · 2015-09-09T09:11:37.000Z

@tipiirai cool!

Answer 32 · 2015-09-09T12:41:38.000Z

Maybe a collapsible frame with the documentation of tags would be useful?

related: http://meta.stackoverflow.com/questions/303865/warlords-of-documentation-a-proposed-expansion-of-stack-overflow

Answer 33 · 2015-09-09T22:51:15.000Z

@tipiirai cool, thanks!

Answer 34 · 2015-09-13T14:53:29.000Z

After some thought and struggling, I've given up making the example page on this repo. For the sake of translation and maintenance, I've realised that it should be on riot/riot.github.io. Yeah, you were right 😸
Have a look at riot/riot.github.io#32, thanks.

Answer 35 · 2019-06-22T06:09:08.000Z

You can try out JSitor.com.