Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 09 04:00
    notyy commented #222
  • Oct 09 03:59
    notyy closed #222
  • Oct 09 03:59
    notyy commented #222
  • Oct 08 20:28
    Atry commented #223
  • Oct 08 20:28

    Atry on master

    docs: fix typo Merge pull request #223 from Ja… (compare)

  • Oct 08 20:28
    Atry closed #223
  • Oct 08 20:20
    Jason-Cooke opened #223
  • Oct 07 03:30
    glmars commented #222
  • Oct 06 04:05
    notyy opened #222
  • Oct 04 11:29
    datalchemist commented #217
  • Oct 04 11:02
    datalchemist commented #217
  • Oct 04 06:58

    Atry on scalafmt

    (compare)

  • Oct 04 06:46

    Atry on master

    Run scalafmt Merge branch 'master' into scal… Merge pull request #221 from Th… (compare)

  • Oct 04 06:46
    Atry closed #221
  • Oct 04 06:46
    Atry synchronize #221
  • Oct 04 06:46

    Atry on scalafmt

    Update scalafmt to 2.0.1 Update sbt to 1.3.2 Merge pull request #215 from sc… and 2 more (compare)

  • Oct 04 06:06
    Atry commented #217
  • Oct 04 05:30
    glmars commented #217
  • Oct 04 05:09
    Atry closed #191
  • Oct 04 05:09

    Atry on master

    Update scalafmt to 2.0.1 Merge pull request #203 from sc… (compare)

Jordan Gwyn
@emanresusername
then i wanted to be able to set durations which got a little harder
  val DurationRegex = """\s*(\d+)\s*(\w+)\s*""".r
  def durationFromString(string: String): FiniteDuration = {
    string match {
      case DurationRegex(length, unit) ⇒
        Duration(length.toLong, unit)
    }
  }

  @dom
  def durationInputElem(value: Var[FiniteDuration]): Binding[HTMLInputElement] = {
    inputElem[FiniteDuration](value, durationFromString).bind
  }
sharing here in case there’s any obvious redflags with that approach
杨博 (Yang Bo)
@Atry
You can remove @dom and .bind for intInputElem
Jordan Gwyn
@emanresusername
cool, thanks
Jordan Gwyn
@emanresusername
i noticed in this example the interval is set in the top level object body and never changes
i was trying to set it inside a @dom annotated method and clear out the old interval and set a new one when a certain HTMLInputElement onchange happens but it it doesn’t seem to be working is that a known issue or is there a better way to do this pattern?
(that’s what i was hoping to use the duration input field above to do)
杨博 (Yang Bo)
@Atry
I suggest you have a look at https://stackoverflow.com/help/how-to-ask and ask it on stackoverflow
Jordan Gwyn
@emanresusername
haha sorry, thinking outloud too much i guess :sweat_smile: sorry for
spamming ya
杨博 (Yang Bo)
@Atry
Never mind. ScalaFiddle is a good website and you may want to use it.
Jordan Gwyn
@emanresusername
:thumbsup: thanks again
jfilali
@jfilali
There is this new trend to use mobx.js.org with react in order to emulate reactive streaming. Basically redux getting less popular . It pretty funny because for the most majority of CRUD application, redux is overkill. Finally a more simple approach using reactive stream like Binding is more scalable than the hype of react/redux and this have been going on for years. I pretty sure that sometime soon people will use Mobx.js without react because the shadow dom will become useless . but there is already so many scala-js library that does that .
Darcy Shen
@sadhen
these days
It wraps SemanticUI on Binding.scala, provides components defined in Ant.Design
I've implemented the most simple Pagination component
杨博 (Yang Bo)
@Atry
There is no component concept in Binding.scala.
There is only template.
I recommend to provide simple reusable templates in the form of method.
Darcy Shen
@sadhen
for example:
import com.sadhen.binding.component._
import com.sadhen.binding.component.tag.Pagination

@dom 
def render = {
  <Pagination defautCurrent={1} total={20}></Pagination>
}
杨博 (Yang Bo)
@Atry
Custom tags are designed to integrate with underlying non-bindable models, not custom templates.
Custom templates can be defined in simple methods. Like what we did in Play/Twirl.
jfilali
@jfilali

@Atry : Binding.scala should not be opinionated and it should let the user decide what make sense to him. Personally I can tell you that it is impossible to build a complex Saas UI without custom tags . Because you can easily get more than 4 nested tags. with a lot of different inline definition that can be nested itself with different child trees.
This the only way to get a cleaner Compoments reusable and build complexe UI.
Currently it is still not possible to do that : <MyComponentTest>test</MyComponentTest>
Instead you have to do that <MyComponentTest child="test" ></MyComponentTest>.

Which is not nice. And there is not way to verify at compile time if some properties are missing. I have been trying to use regular scala constructs for that but I reach the maximum level of complexity. Reaching that point we cannot longer develop more cleaner code with Binding.scala. I think this is something important and a real blocker for the people who really like Binding.scala and want to use it in real application.

Not sure what is your opinion on that but it will be great for us to know what is you decide to support that or not so we can do a well aware decision on the future usage of Binding.scala. Also you can also point to us what it would take to change the code and maybe we can build a separate custom build for that. This is my feedback and

Thank you !

杨博 (Yang Bo)
@Atry
I did not understand what's the meaning of maximum level of complexity
jfilali
@jfilali
  @dom def apply(usersPage: Var[SubMenuInUsers]) : Binding[Node]= {


      usersPage.bind match {
        case AllUsersPage() =>  AllUsersComponents(
          Graphql.DoAjaxAndReturnDom(
            request = QueryBinding(AllUsersInATable.formGroupDefinitionsFrag, AllUserInATable.usersFrag),

            displayOnSuccess = (result:ValueResult) => AllUsersInATable(
              result.obj("data").obj("formGroupDefinitions").list(),

              result.obj("data").obj("users").list(),

              (result:ValueResult) => SomeNestingComponent(
                  "title",
                  value2,

              )

              onClickUserId = (userId:String) => (e:Event)=> {
                usersPage := SingleUserPage(Var(userId))
              }
            )
          )
        ).bind
        case SingleUserPage(userId) =>  SingleUserMatrix.Container().bind
        case GroupPage =>  GetAllGroupDefinitions().bind
      }

    }
@Atry : This is the kind of code you end up in a real world scenario. It is hard to read and friendly.
there is way to improve it always but in a fast rapid development environment, you need to do it right immediately.
杨博 (Yang Bo)
@Atry
Do you think <AllUsersComponents> is better than AllUsersComponents()?
jfilali
@jfilali
```
<AllUsersComponents>
    <GraphQL
        request = {QueryBinding(AllUsersInATable.formGroupDefinitionsFrag, AllUserInATable.usersFrag)}
    >
        <Success>
        {
            (result) => <AllUsersInATable
                definitions = result.obj("data").obj("formGroupDefinitions").list(),
                users = result.obj("data").obj("users").list()
                >
                {
                    (result) => <SomeNestingComponent title ="title", value2 = "value2">


                }
                </AllUsersInATable>
        }
        </Success>

    </GraphQL>
</AllUsesComponents>
```
This is easier to work with, you just copy paste some xml there and there and you extend you application with your own template/components
It look the same but in reality it make a lot of difference.
杨博 (Yang Bo)
@Atry
        AllUsersComponents(
          Graphql.DoAjaxAndReturnDom(
            request = QueryBinding(AllUsersInATable.formGroupDefinitionsFrag, AllUserInATable.usersFrag),

            displayOnSuccess = (result:ValueResult) => AllUsersInATable(
              result.obj("data").obj("formGroupDefinitions").list(),

              result.obj("data").obj("users").list(),

              (result:ValueResult) => SomeNestingComponent(
                  "title",
                  value2,

              )

              onClickUserId = (userId:String) => (e:Event)=> {
                usersPage := SingleUserPage(Var(userId))
              }
            )
          )
        )
It does not convince me.
I don't know if you have any experience in PHP or Play/Twirl templates.
You may find Binding.scala is very similar with PHP.
jfilali
@jfilali
No I haven't use PHP or Play/Twirl. I used React in the past. Some people like this notation.
杨博 (Yang Bo)
@Atry
Do you like colon-equals for assignment or a single equal symbol?
I prefer not to fight convention in these minor things
jfilali
@jfilali
@Atry : This is a good article but let me give you a example with JavaFX
why is there fxml ?
杨博 (Yang Bo)
@Atry
Binding.scala supports HTML and FXML, not because we dislike ScalaTags syntax.
Because HTML and FXML are existing languages.
So you can copy and paste them from your favorite design tools
nawfalhasan
@nawfalhasan
杨博 (Yang Bo)
@Atry
@nawfalhasan Binding.scala's partial updating is very fast, even faster than vanillajs for some operations. However, the benchmark does not count operations faster than 16ms.
Nikolay Artamonov
@nartamonov
@Atry But why is memory consumption is so high according to benchmark? 24 MB after adding 10000 rows. Is it expected result for such frameworks like Binding.scala, or not?
杨博 (Yang Bo)
@Atry
Because of scala-js/scala-js#2675 I guess
Nikolay Artamonov
@nartamonov
Okay, so there is hope it will be optimized in future :+1:
nawfalhasan
@nawfalhasan
I see. Fair enough..
Jordan Gwyn
@emanresusername
@Atry finally got things together here’s a complete version of the project i was asking about about before. hopefully this can be useful as a resource example using Binding.scala in the wild as well
杨博 (Yang Bo)
@Atry
@emanresusername, very impressive.
I think it can be a benchmark for DOM-based animation also
Jordan Gwyn
@emanresusername
Thanks! Hope it's at least entertaining if not useful :sweat_smile: