Any examples of pure functional Scala.js GUIs?

[William Harvey]

Hi Everyone,

I am interested in building a Scala.js frontend for a web application that is written in a pure functional style.  Specifically, I would like to try to see how much mileage I can get out of the "onion architecture" proposed by John De Goes (link), but I am a bit unsure of the best practices for attaching an interpreter for the pure FP program to something like the slurry of events pouring in via DOM callbacks (inversion of control).  I have a feeling that FRP should be in the glue somewhere, but I am hoping to learn a bit from the approaches that others have taken (if anyone has even attempted this).

Does anyone have any examples of pure functional Scala.js GUIs, or any recommendations on libraries or resources that I might look into for building a pure functional Scala.js frontend?

Thank you very much!

William Harvey

[博 Bo 杨 Yang]

Have you seen Binding.scala. There is a monad-based data-binding mechanism behind its HTML template syntactic sugar.

在 2017年1月25日星期三 UTC+8下午10:50:52，William Harvey写道：

[Naftoli Gugenheim]

What about for handling clicks?

--
You received this message because you are subscribed to the Google Groups "scala-user" group.
To unsubscribe from this group and stop receiving emails from it, send an email to scala-user+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[杨 Yang博 Bo]

You can use `onAction` attribute: For example: 

	import javafx.application.Application
	import javafx.event.{ActionEvent, EventHandler, EventType}
	import javafx.stage.{PopupWindow, Stage, Window, WindowEvent}
	final class FxmlSample extends Application {
	@fxml override def start(primaryStage: Stage): Unit = {
	import javafx.scene.layout.VBox
	import javafx.scene.control._
	import javafx.scene.Scene
	def newWindow(text: String) = fxml.show {
	<Stage title={text}>
	<scene>
	<Scene>
	<Label>{text}</Label>
	</Scene>
	</scene>
	</Stage>
	}
	val myScene = <Scene>
	<VBox>
	<Button onAction={ event: ActionEvent => newWindow("Newly created window")}>New Window</Button>
	</VBox>
	</Scene>
	fxml.show(primaryStage, myScene)
	}
	}
	object FxmlSample {
	def main(args: Array[String]): Unit = {
	Application.launch(classOf[FxmlSample], args: _*)
	}
	}

To unsubscribe from this group and stop receiving emails from it, send an email to scala-user+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

杨博 (Yang Bo)

[博 Bo 杨 Yang]

And for Scala.js, use onclick

在 2017年1月26日星期四 UTC+8下午6:40:10，nafg写道：

[David Barri]

I recommend scalajs-react. I use it in a very large webapp in a very FP-manner. 99% of my app is pure and very strongly typed.

Some of the more FP-oriented online demos are:

* Callback + option monad stack

* State monads

* Lenses

(Disclaimer: am author of scalajs-react.)

[David Barri]

Forgot to mention, it also comes with other stuff that become essential when you're building something Big and Serious.

* SPA router

* Unit testing

* UI property testing (!) & integration test scripting (I love this one)

* Performance management

Those are the highlights, there are other links on the project page.

(Again - Disclaimer: am author of scalajs-react.)

[Naftoli Gugenheim]

What is this, Binding.scala for JavaFX??

To unsubscribe from this group and stop receiving emails from it, send an email to scala-user+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

杨博 (Yang Bo)

--

You received this message because you are subscribed to the Google Groups "scala-user" group.

To unsubscribe from this group and stop receiving emails from it, send an email to scala-user+...@googlegroups.com.

[Naftoli Gugenheim]

So, that would not be monad-based...

[杨博]

A GUI framework need to interactive with real world, and real world is not pure.

In Binding.scala, the entire flow to  handle an event is:

(impure onclick handler) -> (monad-based data flow) -> (impure dom)

To unsubscribe from this group and stop receiving emails from it, send an email to scala-user+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

杨博 (Yang Bo)

[Naftoli Gugenheim]

Some data points...

https://github.com/Ahnfelt/react4s -- uses an emit method to send data instead of just calling a Unit-returning method on the props

Elm - instead of event attributes taking Unit-returning functions, they return an arbitrary "message" type, and you compose your "view" function with an update function that is Msg -> Model -> Model.

I think that could be implemented as an abstraction on top of React. I wouldn't mind having something like that in Scala.

--

[杨博]

You can easily implement those helpers in Binding.scala as you did in ReactJS https://facebook.github.io/react/docs/two-way-binding-helpers.html

To unsubscribe from this group and stop receiving emails from it, send an email to scala-user+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "scala-user" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/scala-user/fVho37sFuDo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to scala-user+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

杨博 (Yang Bo)

[Siddhartha Gadgil]

Is this documented anywhere? A search on Binding's github repository for fxml yielded nothing.

Thanks,

Siddhartha

On Wednesday, February 22, 2017 at 10:53:04 AM UTC+5:30, 杨博 wrote:

You can easily implement those helpers in Binding.scala as you did in ReactJS https://facebook.github.io/react/docs/two-way-binding-helpers.html

2017-02-22 12:02 GMT+08:00 Naftoli Gugenheim <nafto...@gmail.com>:

Some data points...

https://github.com/Ahnfelt/react4s -- uses an emit method to send data instead of just calling a Unit-returning method on the props

Elm - instead of event attributes taking Unit-returning functions, they return an arbitrary "message" type, and you compose your "view" function with an update function that is Msg -> Model -> Model.

I think that could be implemented as an abstraction on top of React. I wouldn't mind having something like that in Scala.

On Wed, Jan 25, 2017 at 9:50 AM William Harvey <harv...@cse.ohio-state.edu> wrote:

Hi Everyone,

I am interested in building a Scala.js frontend for a web application that is written in a pure functional style.  Specifically, I would like to try to see how much mileage I can get out of the "onion architecture" proposed by John De Goes (link), but I am a bit unsure of the best practices for attaching an interpreter for the pure FP program to something like the slurry of events pouring in via DOM callbacks (inversion of control).  I have a feeling that FRP should be in the glue somewhere, but I am hoping to learn a bit from the approaches that others have taken (if anyone has even attempted this).

Does anyone have any examples of pure functional Scala.js GUIs, or any recommendations on libraries or resources that I might look into for building a pure functional Scala.js frontend?

Thank you very much!

William Harvey

--
You received this message because you are subscribed to the Google Groups "scala-user" group.

To unsubscribe from this group and stop receiving emails from it, send an email to scala-user+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "scala-user" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/scala-user/fVho37sFuDo/unsubscribe.

To unsubscribe from this group and all its topics, send an email to scala-user+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

杨博 (Yang Bo)

[杨博]

See https://github.com/ThoughtWorksInc/Binding.scala/wiki/FXML

You can try the 11.0.0-M1 version for the FXML feature.

To unsubscribe from this group and all its topics, send an email to scala-user+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

杨博 (Yang Bo)