Awesome Open Source
Awesome Open Source

playground-binding.scala

release FOSSA Status build-status quality-gate-status lines-of-code Maintainability technical-debt Scala Steward badge Analytics

StackShare Scala Scala.js Binding.scala

play

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:

View !

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.

Links:
Play | View Scalafiddle

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.

Links:
Play | View Scalafiddle

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.

Links:
Play | View Scalafiddle

Tree View

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

Links:
Play | View Scalafiddle

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.

Links:
Play | View Scalafiddle

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.

Links:
Play | View Scalafiddle

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).

Links:
Play |

Building and Running

The build can be launched with:

sbt fastOptJS dist

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

Technologies

scala-logo

scalajs-logo

binding.scala-logo

materializecss-logo

fontawesome-logo

License

MIT © Chris Camel

FOSSA Status


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Reactjs (72,862
Scala (38,718
Html5 (12,426
Router (2,074
Bindings (927
Font Awesome (873
Playground (764
Materializecss (565
Scalajs (453
Data Driven (170
Related Projects