ThoughtWorksInc/Binding.scala

General questions should be asked on StackOverflow, not here. This room focuses on development of Binding.scala.

JohnZorn

@nakedcity

Thanks for all the answers but still the question is what are you guys normally using diode, raw objects? I dont care about redux

Leonid Turnaev

@glmars

Yes. I used. Diode is the same as React (+ TypeScript :smile: ), only difference is Scala language.

Leonid Turnaev

@glmars

@mcku

Using MutationObserver, I am able to use jQuery based semantic-ui components without rewriting them in binding.scala from scratch

Could you check something like this: https://gist.github.com/glmars/a597f7c28931a38e2e9b3262279889a9 ?
The main ideas are using Element based selector in jQuery instead of string based and initializing of control right after creation.

Leonid Turnaev

@glmars

And if I my guess is correct you are using outdated jQuery facade (https://github.com/sjrd/scala-js-jquery)
There is new one: https://github.com/jducoeur/jquery-facade

Mustafa Kuscu

@mcku

I agree. I should admit that I never wanted to enter the jQuery zone. Because there already existed a separate semantic-ui project called stardust, which avoids jQuery completely. It is possible to inspire from that (which i did, too) and rewrite the components, as they did for the stardust. (http://react.semantic-ui.com, and for the dropdown, https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js ) But the rewrite can be an exhaustive task.

But the problem with the jQuery part is it only answers to queries after the element is on the dom. Therefore in a binding method, the element is still not mounted on the actual dom, if i understand it correctly. Nevertheless, i did not know this before and i have tried what you have suggested some time ago, and did not work and this is the conclusion i got after inspecting at the browser debugger.

Mustafa Kuscu

@mcku

There is also the udash jQuery facade. I was using that until i discovered that it was including a bootstrap dropdown (but later i partially realized that it was coming from udash-bootstrap), therefore removed it.

Mustafa Kuscu

@mcku

btw, i am using udash i18n for migrating existing translations from lingui. but modified it a little bit, so that {t("hello").bind} gives the correct translation. The idea came from here: https://lingui.js.org/tutorials/react-patterns.html#id1 and i think it is good, and that idea can be ported to scalajs

i think part of the work would be to write a sbt plugin that includes a macro to preprocess the code and extract messages, (lingui js uses babel for that), and a translating function that can utilize udash's translation provider and combining that with binding.scala. the result is very efficient and readable.

but i don't have the plugin yet. just the idea and a similar concept for the plugin of scalingua (https://github.com/makkarpov/scalingua) unfortunately i could not make it work in scalajs

Mustafa Kuscu

@mcku

for the udash translation wrapper, most of it is here https://gist.github.com/mcku/dd71065a93bf409e8688e75734fde6ce

JohnZorn

@nakedcity

@glmars dude do you have some example of integreation with diode?

Leonid Turnaev

@glmars

Integration with what? We didn't use diode with Binding.scala, before we switched to Binding.scala completely our stack was diode+scalajs-react.

Leonid Turnaev

@glmars

@mcku "i have tried what you have suggested some time ago, and did not work" Are you sure what problem was in initialization and not in missing watch/render/bind or something like this? In our case initialization after creation works well with https://getmdl.io/ and https://materializecss.com

Yang, Bo

@Atry

@mcku Your example for translation is impressive!

JohnZorn

@nakedcity

@glmars do you have an example of your current setup? I want to see how is your architecture specially for Vos

JohnZorn

@nakedcity

Do you guys know some project like storybook or cosmos that you can easily plug-in with Binding-scala

Leonid Turnaev

@glmars

Sorry, I couldn't post a full project. Could you ask something more concrete? Which aspect are you interested in? What does "Vos" mean?

JohnZorn

@nakedcity

Value Objects

I still find really handy Leonid to have one state than a bunch of objects across the app

but maybe I’m not seeing clear the approach that you have

for example in this example

https://github.com/Algomancer/Full-Stack-Scala-Starter/blob/master/client/src/main/scala/example/ScalaJSExample.scala

data has to be passed which I dont think it’s easy to manage in big projects

Leonid Turnaev

@glmars

Before Redux like comes in, there was a lot of projects without single state and without any problems :smirk: For example on desktop.

JohnZorn

@nakedcity

I have been working in programing for 20 years I know that but that no changes the fact that the pattern of having a store where you can select just partitions is more manageble than having to control a bunch of raw objects which as you mention was the main cause in the past of memory leaks

Leonid Turnaev

@glmars

Hmm I said nothing about memory leaks. In my opinion, if I have a problem, I will try to find a solution, but I don't have a problem with state about 20 years of my programming career :smile: If you have a problem you can try a single state paradigm of course :smirk:

JohnZorn

@nakedcity

Hahaha nice answer thanks for all the input :)

I get back to my atari now since that one was also working fine :)

Leonid Turnaev

@glmars

Nice joke :smile: :+1:

Mustafa Kuscu

@mcku

@mcku "i have tried what you have suggested some time ago, and did not work" Are you sure what problem was in initialization and not in missing watch/render/bind or something like this? In our case initialization after creation works well with https://getmdl.io/ and https://materializecss.com

@glmars I think my conclusion is wrong and jQuery can access the element. And your proposal is very elegant and valuable.
However, it's not done yet. dom.scala thinks it is inserting the element twice and throws an exception. But by tracing, i can confirm that the method is entered just once.
The element is here https://gist.github.com/glmars/a597f7c28931a38e2e9b3262279889a9#file-dropdown-initialize-scala-L17
And here is the exception: https://github.com/ThoughtWorksInc/Binding.scala/blob/v11.3.0/dom/src/main/scala/com/thoughtworks/binding/dom.scala#L106

message is: "Cannot insert SELECT twice!"

Any ideas? I have traced through debugger and it enters only once into the JQuery call. And there is only one jquery instance, as seen by the inspector.

Mustafa Kuscu

@mcku

Oh.. i think the example happened to be a corner case. because the <select>...</select> was being transformed into a <div>...</div> by jquery on the fly. and perhaps this is confusing the internals of binding.dom.

Mustafa Kuscu

@mcku

and it is successful if the element is not initially specified as a select and dynamically contructed, instead if specified as something already html div like this (which is as legit as the previous one)

val simple = <div class="ui selection dropdown">
  <input type="hidden" name="gender"/>
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>

yay, it works ;)

Leonid Turnaev

@glmars

Glad to hear. :+1:

Darcy Shen

@sadhen

https://github.com/sadhen/Binding-SemanticUI

Restart my project

Darcy Shen

@sadhen

@mcku Where is stardust?

I'm wondering if my work is useful for you.

However, I'm not front-end developer. Just for fun!

Wojtek Pituła

@Krever

I was thinking about developing a Binding subclass supporting async fetching based on cats effect. So you would give a F[T] and get binding with pending/failure/success distinction. Is there anything like that already?

Yang, Bo

@Atry

@Krever

Wojtek Pituła

@Krever

nice, thanks! Would you be interested in a PR to docs mentioning this module? Its rather hard to find now...

Yang, Bo

@Atry

to which docs?

There is a Scaladoc, which of course mentions the FutureBinding class.

Wojtek Pituła

@Krever

Readme, there is a section there but rather easy to miss and with no example

Yang, Bo

@Atry

I think it worth to be a page on WIKI, in case of making README too long

I would like to see you to create a PR for creating a link to the wiki page from README

Darcy Shen

@sadhen

https://github.com/sadhen/Binding-SemanticUI/tree/master/ant/src/main/scala

@Atry I've decided to hack on the meta programming part.

Where communities thrive

People

Repo info

Activity