|
| 1 | +--- |
| 2 | +layout: blog |
| 3 | +post-type: blog |
| 4 | +by: Guillaume Massé |
| 5 | +title: Scastie is out of beta and available to everybody! |
| 6 | +--- |
| 7 | + |
| 8 | +The Scala Center team is extremely happy to announce that |
| 9 | +[Scastie](https://scastie.scala-lang.org) is out of beta! That means anyone can |
| 10 | +use Scala in the browser over at |
| 11 | +[scastie.scala-lang.org](https://scastie.scala-lang.org)! |
| 12 | + |
| 13 | +## What is Scastie? |
| 14 | + |
| 15 | +**Scastie is... Scala + sbt in your browser!**. You can: |
| 16 | + |
| 17 | +- use any version of Scala (scalac), or even alternate backends such as Dotty, Scala.js, Scala Native, and Typelevel Scala. |
| 18 | +- use any library published on Maven. |
| 19 | +- save and share Scala programs/builds with anybody |
| 20 | + |
| 21 | +This is all possible because Scastie is based on sbt, allowing us to support newer |
| 22 | +Scala versions and resolve library dependencies on Maven. |
| 23 | + |
| 24 | +Want to see what Scastie can do? Check out our [ray tracer demo using Scala.js on Scastie](https://scastie.scala-lang.org/9ZgBIUCQQ6u8bRaJFLI0Yg) below! |
| 25 | + |
| 26 | +<a href="/resources/img/blog/scastie/scastie2.png" target="_blank"> |
| 27 | + <img alt="scastie screenshot" |
| 28 | + src="/resources/img/blog/scastie/scastie2.png"> |
| 29 | +</a> |
| 30 | + |
| 31 | + |
| 32 | +## How does Scastie work? |
| 33 | + |
| 34 | +When a user evaluates their code, the browser sends all its input to our server. |
| 35 | +We run your code in an isolated Java Virtual Machine on our servers. We |
| 36 | +integrated a scaladex interface to allow you to search the Scala ecosystem and |
| 37 | +include any published Scala library in your project. You don’t need to remember |
| 38 | +what the latest version number of a specific library is anymore! |
| 39 | + |
| 40 | +The output will be streamed back to the user. A specific protocol will allow the |
| 41 | +client to interpret different events such as compiler errors, runtime |
| 42 | +exceptions, instrumentation, console output, etc. |
| 43 | + |
| 44 | +We also enable a worksheet mode, which feels much like a worksheet in an IDE. |
| 45 | +This lets a user write code as top-level expressions, without having to put code |
| 46 | +inside of a class or object with a main method. Worksheet mode gives you two |
| 47 | +ways to interleave your results; on the one hand, when an expression is |
| 48 | +evaluated, you can see the value and type of the evaluated expression to the |
| 49 | +right of the code that you wrote. On the other hand, worksheet mode also makes |
| 50 | +it possible to do a kind of literate programming; that is, you may interleave |
| 51 | +code and HTML blocks much like in notebook environments such as iPython |
| 52 | +notebooks. |
| 53 | + |
| 54 | +## New features |
| 55 | + |
| 56 | +So, what's new since we released our original beta a couple of months ago? Other |
| 57 | +than a stabler Scastie with fewer bugs, we have a brand new UI, support for |
| 58 | +sharing snippets, and support for Scala.js! |
| 59 | + |
| 60 | +### New UI |
| 61 | + |
| 62 | +We collaborated with <a href="https://www.47deg.com/" target="_blank">47Deg</a> to provide a fresh UI. |
| 63 | + |
| 64 | +<a href="/resources/img/blog/scastie/newui.png" target="_blank"> |
| 65 | + <img alt="scastie screenshot" |
| 66 | + src="/resources/img/blog/scastie/newui.png"> |
| 67 | +</a> |
| 68 | + |
| 69 | +### Sharing |
| 70 | + |
| 71 | +The main purpose of Scastie is to help people learn and communicating with code |
| 72 | +examples. |
| 73 | + |
| 74 | +In the last few months, we've worked hard to provide a new sharing model. Now |
| 75 | +it's possible to save, fork, and update snippets! Just like JSFiddle, you can |
| 76 | +now fork an existing snippet, change it however you like, and then login with |
| 77 | +GitHub to save it! |
| 78 | + |
| 79 | +When logged in through GitHub, you can now create new snippets or edit existing |
| 80 | +ones. |
| 81 | + |
| 82 | +### Scala.js |
| 83 | + |
| 84 | +Since the intial release of our beta, we also added support for Scala.js! In Scala.js mode, once your code is compiled, your snippet is run in your browser. |
| 85 | + |
| 86 | +HTML DOM elements referred in your code such as images appears in the editor for convenience. This feature is illustrated in this example: [such doge!](https://scastie.scala-lang.org/MasseGuillaume/KuKtYXx1SpW7gu5HUTmPSA/1). |
| 87 | + |
| 88 | +Since the execution environment is your browser, you can set breakpoints in your |
| 89 | +javascript inspector. Source mapping is enabled and allowing you to step into |
| 90 | +your Scala code. |
| 91 | + |
| 92 | +<a href="/resources/img/blog/scastie/Scala-js-debug.png" target="_blank"> |
| 93 | + <img alt="scastie screenshot" |
| 94 | + src="/resources/img/blog/scastie/Scala-js-debug.png"> |
| 95 | +</a> |
| 96 | + |
| 97 | +You can try it out yourself: [ray tracer](https://scastie.scala-lang.org/9ZgBIUCQQ6u8bRaJFLI0Yg) |
| 98 | +([Li Haoyi](https://github.com/lihaoyi) is the author of this demo) |
| 99 | + |
| 100 | +## What's next |
| 101 | + |
| 102 | +### Google Summer of Code |
| 103 | + |
| 104 | +Dmitrii Petukhov was accepted as a Google Summer of Code student to work on |
| 105 | +[Auto-completion and type |
| 106 | +information](https://summerofcode.withgoogle.com/organizations/4568241046290432/#5494264097144832). |
| 107 | +Rory Graves, an ENSIME contributor, is the mentor for this project. ENSIME is an |
| 108 | +IDE server. It can power text editors such as vim an eclipse with IDE |
| 109 | +functionnalities such as autocompletion. |
| 110 | + |
| 111 | +### Scala Center's Plan |
| 112 | + |
| 113 | +The Scala Center will continue the development of Scastie. We want to improve |
| 114 | +the integration with Scala projects. We will add an embedded mode were you can |
| 115 | +include Scastie in your documentation. We also want to use existing data sources |
| 116 | +such as StackOverflow or GitHub to have more code examples. |
| 117 | + |
| 118 | +## Talk to us! |
| 119 | + |
| 120 | +Thoughts or opinions about Scastie? Join us over on [Scala Contributors]( |
| 121 | +https://contributors.scala-lang.org/t/introducing-scastie-an-interactive-playground-for-scala/494) |
| 122 | +to contribute to the discussion. |
| 123 | + |
| 124 | +## Brought to you by |
| 125 | + |
| 126 | +Scastie is an original idea from Aleh Aleshka ([OlegYch](https://github.com/OlegYch/)). |
| 127 | + |
| 128 | +<div> |
| 129 | + <a href="https://scala.epfl.ch/" target="_blank" style="border:none;"> |
| 130 | + <img alt="scalacenter logo" |
| 131 | + style="padding: 15px; height: 60px" |
| 132 | + src="/resources/img/blog/scalacenter/scala-center-swirl.png"> |
| 133 | + </a> |
| 134 | + Scala Center is covering the hosting cost and the engineering work. |
| 135 | + |
| 136 | + <a href="https://www.47deg.com/" target="_blank" style="border:none"> |
| 137 | + <img alt="47deg logo" |
| 138 | + style="padding: 15px; height: 60px;" |
| 139 | + src="/resources/img/blog/scalacenter/47deg-logo.png"> |
| 140 | + </a> |
| 141 | + 47Deg worked on the UI design. |
| 142 | +</div> |
0 commit comments