Awesome

playground-binding.scala

My playground I use for playing with fancy and exciting technologies. This one's for scala, scalajs and binding.scala.

Purpose

The purpose of this playground is to explore, study and assess in the first place the binding.scala library, and secondly scalajs.

The showcases are intended to:

• be fairly simple and understandable (static/serverless SPA);
• highlight some aspects of the binding.scala library, like binding forms, fine-grained bindings, performance, interoperability with other JS libraries...
• explore some architectural/design patterns around reactive GUIs
• provide some functional content;
• be deployable/playable into scalafiddle.

You can view and play the showcases here:

Showcases

All the showcases come in a SPA (100% clientside application).

The binding.scala route library is used to enable the navigation and maintain the link between URLs and pages to display.

Calc

Purpose

Calc is a very simple and basic calculator.

Implementation details

The model is an immutable case class which holds the state of the calculator. The behaviour is implemented by this model as a partial function which accepts tokens (digit, operators).

The gui maintains the whole model in a single bindable variable, and every graphical element of the calculator (buttons, display) needing to be updated upon model change (reactive dom) is bound to that variable.

Led Matrix

Purpose

The idea under this showcase is to build a virtual matrix of cells, each cell having a color and is independently addressable.

Details

The view consists in binding each cell to a dom element (actually a span or an SVG rect) in order to render the surface. As the matrix can have a significant number of cells (~2000), it allows to appreciate the performance of the binding.scala library to handle the situation.

Beside this, some (simple) demos have been implemented that play with the virtual screen. Each demo displays a form which allows to set some parameters whose values are taken in real time.

• Constant color demo: display a single background color. The components r, g, b of the color can be adjusted in real time.
• Random demo: turns on random pixels with random colors.
• Plasma demo: display some (minimal) plasma effects.
• Lissajous curves demo: display a moving Lissajou curve with some adjustable paramters (δ ratio, speed).
• Fire demo: render the very classic (and old) Fire Effect.

Loan Calculator

Simple loan calculator which determines the monthly payments on a loan.

Tree View

Example of a simple tree view implementation with dynamic loading of elements.

Details

The model is a simple recursive structure built with Vars (mutable and observable sequence of elements).

The view is bound to the model and react by displaying parts of the tree that have changed.

Drag-me

The Drag-me showcase is quite similar to elm drag but with more features.

It allows the user to select, move and resize a simple rectangle form.

Details

The model is a simple structure holding both the basic geometric properties of the form (position and size) and the current edition mode (none, moving, resizing).

The view is bound to that model and react to reflect the change (selection, coordinates change, width/height change, etc.).

virtual-list

The virtual-list showcase is quite similar to virtual rendering 1000000 items.

The idea is to use a list that represents a subset of a larger set of data. That list is automatically updated on events (mouse move, drag, key up/down...), and the dom elements bound to the list items are refreshed accordingly.

SVG-editor

The SVG-editor showcase is an improvement of the Drag-me showcase using full SVG shapes for drawing.

It allows the user to select, move and resize a simple rectangle form (more to come).

Building and Running

The build can be launched with:

sbt fastOptJS dist

Then, open ./dist/index.html file in your browser.

Technologies

License

MIT © Chris Camel