Fiddles for scala-js.org

[ochrons]

A new version of Scala(JS)Fiddle is in the works and can be previewed at https://fiddle.scala-js.org/embed?gist=3dfc003dedd4da5d821d&files=SierpinskiTriangle.scala

The biggest difference to the original http://scala-js-fiddle.com is that this new ScalaFiddle is designed to be embeddable on a web page, so that it can be used as part of documentation, tutorials, blog posts etc. Internally it's using the same compiler integration developed by Li Haoyi but with better configurability and extendability. More information about the new features can be found at https://github.com/ochrons/scala-js-fiddle/blob/embeddable/Usage.md

As for scala-js.org website, the idea is to embed ScalaFiddle on the landing page and inside the documentation to appropriate locations. Naturally the fiddle(s) on the front page is the most important one and should be considered carefully. If you look at what other sites like golang.org or typescriptlang.org do with they fiddles (or playgrounds) it feels like a missed opportunity. The examples are either simplistic or contrived (who wants to calculate Pi?)

For Scala.js I'd like to see fiddles that are:

• fun
• visually pleasing
• portray benefits of Scala
• easy to play with
• look familiar enough to JS devs

Remeber that in ScalaFiddle not all the code needs to be visible/editable, so the fiddle may contain a larger "boilerplate" and only show the relevant part to the user.

Let's collect great ideas and actual fiddles here and select the best on the website front page.

[jducoeur]

Get @lihaoyi to donate his Asteroids game? (Probably a bit too big, I suppose, but the principle is reasonable -- there have to be some simple visual games that would make a good fiddle.)

[ochrons]

Another thing closely related to this is the support framework provided by ScalaFiddle itself. Right now there is the Page object that provides basic functionality for printing HTML/text and accessing the canvas element for drawing things. Depending on the fiddles we want/need, this could be expanded with more functionality to make the actual fiddle code less boilerplatey.

[jducoeur]

I assume we're trying to avoid any backend state? Otherwise, I'd suggest the ToDoList, simply because it's a commonly-used proof of concept. (Could do a front-end-only version of that anyway.)

[ochrons]

Now that scalafiddle.io has launched, let's get this thing going. Please add your ideas or even links to ScalaFiddle so we can choose the Best Possible Fiddle to represent Scala.js to first-time visitors :)

[lihaoyi]

1 vote for https://scalafiddle.io/sf/KOsXSKv/0 😄 it would probably require 350-400px high to show off the code properly, but it uses a nice scattering of Scala/Scala.js features and it looks pretty.

If you're going to have a browsable carousel of examples, https://scalafiddle.io/sf/4beVrVc/1 would be cool to have as part of it. Too big to really see all the code properly, but really pretty

[jducoeur]

... y'know, I remember how impressed I was the first time I saw that image (more or less), when it took hours to draw on a top-end machine...