diff options
Diffstat (limited to 'examples')
8 files changed, 149 insertions, 0 deletions
diff --git a/examples/workbench-example-app/.gitignore b/examples/workbench-example-app/.gitignore new file mode 100644 index 0000000..c41cff3 --- /dev/null +++ b/examples/workbench-example-app/.gitignore @@ -0,0 +1,5 @@ +target/ +.cache +.classpath +.project +.settings/ diff --git a/examples/workbench-example-app/README.md b/examples/workbench-example-app/README.md new file mode 100644 index 0000000..d674f09 --- /dev/null +++ b/examples/workbench-example-app/README.md @@ -0,0 +1,39 @@ +# Example Scala.js application + +This is a slightly less barebone example of an application written in +[Scala.js](http://www.scala-js.org/). In particular, it links +in libraries that are indispensible in being productive working with Scala.js. + +## Get started + +To get started, run `sbt ~fastOptJS` in this example project. This should +download dependencies and prepare the relevant javascript files. If you open +`localhost:12345/target/scala-2.11/classes/index-dev.html` in your browser, it will show you an animated [Sierpinski +triangle](http://en.wikipedia.org/wiki/Sierpinski_triangle) ([live demo](http://lihaoyi.github.io/workbench-example-app/triangle.html)). You can then +edit the application and see the updates be sent live to the browser +without needing to refresh the page. + +## The optimized version + +Run `sbt fullOptJS` and open up `index-opt.html` for an optimized (~200kb) version +of the final application, useful for final publication. + +## Dodge the Dots + +Take a look at the `dodge-the-dots` branch in the git repository if you +want to see a slightly more complex application that was made in 30 minutes +using this skeleton. Similar steps can be used for development or +publication. There's a live demo [here](http://lihaoyi.github.io/workbench-example-app/dodge.html). + +## Space Invaders + +There's also a `space-invaders` branch, also made in 30 minutes, with its own +[live demo](http://lihaoyi.github.io/workbench-example-app/invaders.html). + +## TodoMVC + +The `todomvc` branch contains an implementation of the [TodoMVC example application](http://todomvc.com/), which is used to compare how the exact same application would be implemented using different languages and frameworks. This application makes heavy use of [Scalatags](https://github.com/lihaoyi/scalatags) and [Scala.Rx](https://github.com/lihaoyi/scala.rx), with heavy use of the DOM via [scala-js-dom](https://github.com/scala-js/scala-js-dom), making it a good example of how reactive web pages could be built using ScalaJS, as well as use of standalone ScalaJS libraries. + +## Ray Tracer + +The `ray-tracer` branch contains a simple ray-tracer written using Scala.js, with a [live demo](http://lihaoyi.github.io/workbench-example-app/raytracer.html). diff --git a/examples/workbench-example-app/build.sbt b/examples/workbench-example-app/build.sbt new file mode 100644 index 0000000..4f7e197 --- /dev/null +++ b/examples/workbench-example-app/build.sbt @@ -0,0 +1,21 @@ +import scala.scalajs.sbtplugin.ScalaJSPlugin._ +import com.lihaoyi.workbench.Plugin._ + +scalaJSSettings + +workbenchSettings + +name := "Example" + +version := "0.1-SNAPSHOT" + +scalaVersion := "2.11.2" + +libraryDependencies ++= Seq( + "org.scala-lang.modules.scalajs" %%% "scalajs-dom" % "0.6" +) + +bootSnippet := "ScalaJSExample().main(document.getElementById('canvas'));" + +updateBrowsers <<= updateBrowsers.triggeredBy(ScalaJSKeys.fastOptJS in Compile) + diff --git a/examples/workbench-example-app/project/build.properties b/examples/workbench-example-app/project/build.properties new file mode 100644 index 0000000..0974fce --- /dev/null +++ b/examples/workbench-example-app/project/build.properties @@ -0,0 +1 @@ +sbt.version=0.13.0 diff --git a/examples/workbench-example-app/project/build.sbt b/examples/workbench-example-app/project/build.sbt new file mode 100644 index 0000000..7ed0b3e --- /dev/null +++ b/examples/workbench-example-app/project/build.sbt @@ -0,0 +1,3 @@ +addSbtPlugin("org.scala-lang.modules.scalajs" % "scalajs-sbt-plugin" % "0.5.5") + +addSbtPlugin("com.lihaoyi" % "workbench" % "0.2.3") diff --git a/examples/workbench-example-app/src/main/resources/index-dev.html b/examples/workbench-example-app/src/main/resources/index-dev.html new file mode 100644 index 0000000..3c03bc1 --- /dev/null +++ b/examples/workbench-example-app/src/main/resources/index-dev.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>Example Scala.js application</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> +</head> +<body style="margin: 0px"> + +<div> + <canvas style="display: block" id="canvas" width="255" height="255"/> +</div> + +<script type="text/javascript" src="../example-fastopt.js"></script> +<script type="text/javascript" src="/workbench.js"></script> +<script> + ScalaJSExample().main(document.getElementById('canvas')); +</script> +</body> +</html> diff --git a/examples/workbench-example-app/src/main/resources/index-opt.html b/examples/workbench-example-app/src/main/resources/index-opt.html new file mode 100644 index 0000000..4f1f784 --- /dev/null +++ b/examples/workbench-example-app/src/main/resources/index-opt.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>Example Scala.js application</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> +</head> +<body style="margin: 0px"> + +<div> + <canvas style="display: block" id="canvas" width="255" height="255"/> +</div> + +<script type="text/javascript" src="../example-opt.js"></script> +<script> + ScalaJSExample().main(document.getElementById('canvas')); +</script> +</body> +</html> diff --git a/examples/workbench-example-app/src/main/scala/example/ScalaJSExample.scala b/examples/workbench-example-app/src/main/scala/example/ScalaJSExample.scala new file mode 100644 index 0000000..e7e5326 --- /dev/null +++ b/examples/workbench-example-app/src/main/scala/example/ScalaJSExample.scala @@ -0,0 +1,43 @@ +package example +import scala.scalajs.js.annotation.JSExport +import org.scalajs.dom +import scala.util.Random + +case class Point(x: Int, y: Int){ + def +(p: Point) = Point(x + p.x, y + p.y) + def /(d: Int) = Point(x / d, y / d) +} + +@JSExport +object ScalaJSExample { + @JSExport + def main(canvas: dom.HTMLCanvasElement): Unit = { + val ctx = canvas.getContext("2d") + .asInstanceOf[dom.CanvasRenderingContext2D] + + var count = 0 + var p = Point(0, 0) + val corners = Seq(Point(255, 255), Point(0, 255), Point(128, 0)) + + def clear() = { + ctx.fillStyle = "black" + ctx.fillRect(0, 0, 255, 255) + } + + def run = for (i <- 0 until 10){ + if (count % 3000 == 0) clear() + count += 1 + p = (p + corners(Random.nextInt(3))) / 2 + + val height = 512.0 / (255 + p.y) + val r = (p.x * height).toInt + val g = ((255-p.x) * height).toInt + val b = p.y + ctx.fillStyle = s"rgb($g, $r, $b)" + + ctx.fillRect(p.x, p.y, 1, 1) + } + + dom.setInterval(() => run, 50) + } +} |