Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ccamel/playground-binding.scala

:balloon: My playground for playing with scala, scalajs and binding.scala
https://github.com/ccamel/playground-binding.scala

binding data-driven font-awesome html5 materializecss playground react router scala scalajs

Last synced: 3 months ago
JSON representation

:balloon: My playground for playing with scala, scalajs and binding.scala

Awesome Lists containing this project

README 

        
playground-binding.scala

========================

[![release](https://img.shields.io/github/release/ccamel/playground-binding.scala.svg?style=flat)](https://github.com/ccamel/playground-binding.scala/releases/latest) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fccamel%2Fplayground-binding.scala.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fccamel%2Fplayground-binding.scala?ref=badge_shield) [![build-status](https://travis-ci.org/ccamel/playground-binding.scala.svg?branch=master)](https://travis-ci.org/ccamel/playground-binding.scala)

[![quality-gate-status](https://sonarcloud.io/api/project_badges/measure?project=ccamel_playground-binding.scala&metric=alert_status)](https://sonarcloud.io/dashboard?id=ccamel_playground-binding.scala)

[![lines-of-code](https://sonarcloud.io/api/project_badges/measure?project=ccamel_playground-binding.scala&metric=ncloc)](https://sonarcloud.io/dashboard?id=ccamel_playground-binding.scala)

[![Maintainability](https://api.codeclimate.com/v1/badges/2f7756339782c433b1d1/maintainability)](https://codeclimate.com/github/ccamel/playground-binding.scala/maintainability)

[![technical-debt](https://sonarcloud.io/api/project_badges/measure?project=ccamel_playground-binding.scala&metric=sqale_index)](https://sonarcloud.io/dashboard?id=ccamel_playground-binding.scala)

[![Scala Steward badge](https://img.shields.io/badge/Scala_Steward-helping-brightgreen.svg?style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAMAAAARSr4IAAAAVFBMVEUAAACHjojlOy5NWlrKzcYRKjGFjIbp293YycuLa3pYY2LSqql4f3pCUFTgSjNodYRmcXUsPD/NTTbjRS+2jomhgnzNc223cGvZS0HaSD0XLjbaSjElhIr+AAAAAXRSTlMAQObYZgAAAHlJREFUCNdNyosOwyAIhWHAQS1Vt7a77/3fcxxdmv0xwmckutAR1nkm4ggbyEcg/wWmlGLDAA3oL50xi6fk5ffZ3E2E3QfZDCcCN2YtbEWZt+Drc6u6rlqv7Uk0LdKqqr5rk2UCRXOk0vmQKGfc94nOJyQjouF9H/wCc9gECEYfONoAAAAASUVORK5CYII=)](https://scala-steward.org)

[![Analytics](https://ga-beacon.appspot.com/UA-99060629-2/welcome-page)](https://github.com/igrigorik/ga-beacon)



[![StackShare](https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/ccamel/playground-binding-scala) [![Scala](https://img.shields.io/badge/scala-2.12.8-blue.svg?style=flat)](https://www.scala-lang.org/) [![Scala.js](https://img.shields.io/badge/scala.js-0.6.28-blue.svg?style=flat)](https://www.scala-js.org) [![Binding.scala](https://img.shields.io/badge/binding.scala-11.8.1-blue.svg?style=flat)](https://github.com/ThoughtWorksInc/Binding.scala)



[![play](https://img.shields.io/badge/%F0%9F%8E%BE-Play%20with%20demo-7799cc.svg?style=flat)](https://ccamel.github.io/playground-binding.scala/index.html)



> 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](https://www.scala-lang.org/api/current/scala/PartialFunction.html) which accepts tokens (digit, operators).



The gui maintains the whole model in a single [bindable variable](https://static.javadoc.io/com.thoughtworks.binding/unidoc_2.11/11.0.0-M1/index.html#com.thoughtworks.binding.Binding$$Var),

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](https://en.wikipedia.org/wiki/Plasma_effect).

- _Lissajous curves_ demo: display a moving [Lissajou curve](https://en.wikipedia.org/wiki/Lissajous_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](https://static.javadoc.io/com.thoughtworks.binding/unidoc_2.11/11.0.0-M2/index.html#com.thoughtworks.binding.Binding$$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](http://elm-lang.org/examples/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](http://www.lab4games.net/zz85/blog/2012/06/23/virtual-rendering-1000000-items-efficiently/).



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:



```bash

sbt fastOptJS dist

```



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



## Technologies



[![scala-logo][scala-logo]][scala]



[![scalajs-logo][scalajs-logo]][scalajs]



[![binding.scala-logo][binding.scala-logo]][binding.scala]



[![materializecss-logo][materializecss-logo]][materializecss]



[![fontawesome-logo][fontawesome-logo]][fontawesome]



## License



[MIT] © [Chris Camel]



[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fccamel%2Fplayground-binding.scala.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fccamel%2Fplayground-binding.scala?ref=badge_large)



[scala]: https://www.scala-lang.org/

[scala-logo]: doc/assets/logo-scala.png



[scalajs]: https://www.scala-js.org/

[scalajs-logo]: doc/assets/logo-scalajs.png

[binding.scala]: https://github.com/ThoughtWorksInc/Binding.scala

[binding.scala-logo]: doc/assets/logo-binding.scala.png

[materializecss]: http://materializecss.com/

[materializecss-logo]: doc/assets/logo-materializecss.png

[fontawesome]: http://fontawesome.io/

[fontawesome-logo]: doc/assets/logo-fontawesome.png



[scalafiddle]: https://scalafiddle.io



[SPA]: https://en.wikipedia.org/wiki/Single-page_application



[Chris Camel]: https://github.com/ccamel

[MIT]: https://tldrlegal.com/license/mit-license