The Vue example actually loads Vue in index.js as an import statement. I'm not really familiar with Vue, so maybe that isn't typical and I should put it as a script tag?
Re:Demoboard
by TekMol on Thursday November 22, 2018 @07:14AM
(#18509529)
Yes, that works when you have a compilation step on the server.
But it would be nicer to have a complete project in the browser.
Think of it this way: When someone hits 'export' and downloads the zip - how will they be able to run what they built? They need to set up a whole serverside toolchain. If you instead load vue clientside, the downloaded thing would work right away. Without any setup or dependencies.
This applies to the React example just as well.
The server side toolchain is how most devs do it these days. I personally prefer to skip it.
Demoboard is really made for throwing together a demo as quick as possible. But I think https://codesandbox.io would suit what you want perfectly. Have you given it a try?
Re:Demoboard
by TekMol on Thursday November 22, 2018 @07:21AM
(#18509554)
Demoboard would work just as well. It's just about how you set up the examples. One moment ... let me make an example without a server side toolchain involved ...
Yeah, I really do like this way of doing it. I might change the Vue example to do that. For React though, the HTML is usually empty, so it ends up hiding the dependencies within a tab that nobody looks at, so imports are a lot clearer.
Perhaps I could find a way to transform imports into script statements in the exported file. I'll have a think about it...
Re:Demoboard
by TekMol on Thursday November 22, 2018 @08:50AM
(#18509961)
Perhaps I could find a way to transform
imports into script statements in the exported file
Uhh no! That would be even more hidden magic. The beauty of your platform really shines when there is no hidden process. When the user can transparently see what happens.
There really is no difference between Vue and React in this regard. The React demo without a server side toolchain looks like this:
Re:Demoboard
by yodon on Thursday November 22, 2018 @11:21AM
(#18510851)
Packing up the imports into (a) boilerplate html and (b) boilerplate package.json would allow people to code stuff up quickly in your editor and then download it for integration in their own pipelines with minimal hassle (Maybe add buttons to download as zip with dependencies either in index.html or in packages.json?)
Re:Demoboard
by yodon on Thursday November 22, 2018 @12:34AM
(#18508081)
It's totally awesome but a bit more space around the preview would be great. I'm on an iPhone 6 Plus running the iPhone Chrome browser and I can't actually see the bottom of the linked preview pane, nor can I scroll down to see the bottom of it (trying to scroll down just invokes the refresh action in the browser)
Thanks for letting me know! I had tested it in Chrome's mobile simulator, and checked that it loaded on my phone, but hadn't actually tried scrolling. Will see if I can find a fix.
I'm kinda surprised that it works on phones at all - I'd really only been targeting browsers (because you don't usually do much coding on a phone), but other than the scroll issue it seems to work pretty well.
Re:Demoboard
by Robin_f on Thursday November 22, 2018 @07:07AM
(#18509495)
Really cool. Would be nice if it had a format option in the editor however. Copy pasting CSS around was becoming a bit annoying because I have to format it manually.
What I don't like is that some stuff seems to get loaded via hidden magic.
The Vue example loads vue.js. But it is not in the index.html. Why? It would be so much more useful if we could have it all editable in the code.
But it would be nicer to have a complete project in the browser.
Think of it this way: When someone hits 'export' and downloads the zip - how will they be able to run what they built? They need to set up a whole serverside toolchain. If you instead load vue clientside, the downloaded thing would work right away. Without any setup or dependencies.
This applies to the React example just as well.
The server side toolchain is how most devs do it these days. I personally prefer to skip it.
Demoboard is really made for throwing together a demo as quick as possible. But I think https://codesandbox.io would suit what you want perfectly. Have you given it a try?
Here we go:
https://frontarm.com/demoboard/?id=321f4d83-b0d8-4bd0-876b-0...
No more hidden magic. Everything happens in the browser. The user can use the downloaded thing without setting up a server side toolchain.
Perhaps I could find a way to transform imports into script statements in the exported file. I'll have a think about it...
There really is no difference between Vue and React in this regard. The React demo without a server side toolchain looks like this:
https://frontarm.com/demoboard/?id=2e5ca405-b011-4d00-988d-2...
https://github.com/styfle/awesome-online-ide
I'm kinda surprised that it works on phones at all - I'd really only been targeting browsers (because you don't usually do much coding on a phone), but other than the scroll issue it seems to work pretty well.
I wrote up an introduction with some details at https://frontarm.com/articles/announcing-demoboard/