https://kotlinlang.org logo
Join Slack
Powered by
``` val tree = root( div(classes = "main", ren...
# russian
i
Copy code
val tree = root(
    div(classes = "main", render = h(
        users()
    )),
    users(),
    p("Test")
)

fun users() = ex {
    users.map {
        p(it.name)
    }
}

fun list() = e {
    ul(render = h(
        li("First"),
        li("Second")
    ))
}
s
Это чем то отличается от
Copy code
Section(
      key = "s1",
      title = "About",
      children = listOf(
        Text("About contents")
      )
    )
?
i
В конечном итоге - нет
Какие проблемы с этим подходом?
s
все if, for и прочую логику нужно заменять на map, filter и т.д. Т.е. исключительно функциональный подход
можно добавить лямбду elements { yeild(element) }
но это как раз тоже самое что +
в роли плюса выступает yeild
i
Copy code
val tree = root(
    div(classes = "main", render = h(
        e {
            if (condition) {
                users()
            } else {
                list()
            }
        }
    )),
    users(),
    p("Test")
)
s
только один элемент можно вернуть?
i
e - один елемент ex - лист
s
а если нужно в цикле что то понадобовлять и отфильтровать?
в случае ex - все равно функциональный подход?
например как написать вот это: for (user in users) { if (user.visible) { +user } }
i
ну конкретно этот пример прям просится функционально написать
s
да, все можно переписать в функциональный вид, но не все привыкли так писать. все привыкли писать процедурно
но вобще идея двух режимов интересная
можно сделать оба вида dsl, с функциональным подходом, и с некой функцией elements {} внутри которой использовать yeild (+)
i
Copy code
val tree = root(
    div(classes = "main", render = h(
        ex {
            val render = mutableListOf<VDom>()

            for (user in users) {
                if (user.visible) {
                    render += p(user.name)
                }
            }

            render.toList()
        }
    )),
    users(),
    p("Test")
)
если хочется циклы, но абсолютно бесполезно
да, поверх этого можно прикрутить такой DSL с (+)
s
твое предолжение - это flutter. я пробовал так писать, очень сложно переключится с процедурного на функциональный
все таки все привыкли к процедурному подходу
но, с другой стороны функциональный подход открывает новые горизонты по реактивному рендеру
i
я привык к JSX - там как раз таки в основном функциональный подход
s
например если изменился один элемент списка, то будет рендерится только он. в процедурном такое не получить
я привык к JSX - там как раз таки в основном функциональный подход
а вот и нет 🙂 все примеры на сайте реакта как раз и продауют его как процедурный
а, нет вру
еще одна проблема с заданием дочерних элементов в виде списка - его, как ни крути, сложнее читать
i
Copy code
const CandidatesViewComponent = ({candidates}: StateProps) => {
  return (
    <div className="container">
      <div className="row">
        {candidates.map((candidate: OsCandidateWithPerson) =>
          <div className="col-md-4"
               style={styles.candidate}
               key={candidate.id}>
            <Card>
              <CardHeader
                title={`${candidate.firstName} ${candidate.lastName}`}
                subtitle={`Status: ${candidate.status}`}
              />
              <CardText>
                Rating: {candidate.rating}
              </CardText>
              <CardActions>
                <Link to={`/candidates/${candidate.id}/view`}>
                  <FlatButton label="View Details"/>
                </Link>
              </CardActions>
            </Card>
          </div>
        )}
      </div>
    </div>
  );
};
s
из за того что скобки копятся очень быстро
i
вот типичный компонент на реакте
s
да, я ошибся про реакт. запутался
i
да, скобочки копятся. поэтому декомпозировать на функции
не пытаться описать все, как в примере выше
s
Copy code
div(className = "container",
    children = [div(
        className = "row",
        children = candidates.map { condidate ->
            div(
                className = "col-md-4",
                children = [card(
                    children = [
                        cardHeader(
                            title = "${candidate.firstName} ${candidate.lastName}",
                            subtitle="Status: ${candidate.status}"
                        )
                        cardText(
                            children = ["Rating: ", candidate.rating]
                        )
                        cardActions(
                            children = link(
                                to = "/candidates/${candidate.id}/view",
                                children = [flatButton(label = "View Details")]
                            )
                        )
                    ]
                )
            )]
        )]
    )
очень сложно читать
и писать, наверное тоже...
div(className = "container") { div(className = "row") { candidates.forEach { condidate -> div(className="col-md-4") { card { cardHeader( title = "${candidate.firstName} ${candidate.lastName}", subtitle="Status: ${candidate.status}" ) cardText { +"Rating: " +candidate.rating } cardActions { link(to = "/candidates/${candidate.id}/view") { flatButton(label = "View Details") } } } } } } }
это то что в kotlinx.html
+Div(className = "container") { +Div(className = "row") { candidates.forEach { condidate -> +Div(className="col-md-4") { +Card { +CardHeader( title = "${candidate.firstName} ${candidate.lastName}", subtitle="Status: ${candidate.status}" ) +CardText { +"Rating: " +candidate.rating } +CardActions { +Link(to = "/candidates/${candidate.id}/view") { +FlatButton(label = "View Details") } } } } } } }
а это с плюсиками
кстате вот тут хорошо видно: в kotlinx.html forEach сложно разглядеть
не пытаться описать все, как в примере выше
ну вот проблема в том, что в kotlinx.html даже если все сразу описывать, все равно хорошо читается
было бы круто чтобы выглядело как в kotlinx.html но не требовалось бы объявлять билдеры дополнительно (и кучи кода для реакта)
i
А мне нравится:
Copy code
fun candidatesViewComponent() = element {
    div(classes = "container", render = h(
        div(classes = "row", render = elements {
            candidates.map {
                div(classes = "col-md-4", style = "styles.candidate", render = h(
                    cardHeader(
                        title = "${it.firstName} ${it.lastName}",
                        subtitle = "Status: ${it.status}"
                    ),
                    cardText("Rating: ${it.rating}"),
                    cardActions(render = h(
                        link(to = "/candidates/${it.id}/view", render = h(
                            flatButton(label = "View Details")
                        ))
                    ))
                ))
            }
        })
    ))
}
Другое дело что в реальности все сложнее может стать
s
Идея так не умеет форматировать...
i
автореформат не сломал мне этот код
s
хм... мне он сделал такое:
Copy code
fun candidatesViewComponent() = element {
  div(
      classes = "container", render = h(
      div(
          classes = "row", render = elements {
        candidates.map {
          div(
              classes = "col-md-4", style = "styles.candidate", render = h(
              cardHeader(
                  title = "${it.firstName} ${it.lastName}",
                  subtitle = "Status: ${it.status}"
              ),
              cardText("Rating: ${it.rating}"),
              cardActions(
                  render = h(
                      link(
                          to = "/candidates/${it.id}/view", render = h(
                          flatButton(label = "View Details")
                      )
                      )
                  )
              )
          )
          )
        }
      }
      )
  )
  )
}
i
Видимо у меня специальные настройки в code style
s
1.2 - rc
или у меня )
i
Ну я точно code style менял, чтобы отступы меньше были
4 Views
Open in Slack
PreviousNext
Powered by