榆树:你会如何构建和设计你的UI？

Question

在过去的几天里,我学习了榆树,这是一次令人耳目一新的体验.这么多,我不想回到JS土地,:-(.

我的问题是我仍然没有看到用榆树制作网络应用程序的方法,我希望得到一些指导和建议:

evancz/start-app非常适合组织应用程序的结构.与elmfire一起使用
evancz/effects可以处理与Firebase的对话.

但是我如何构建和设计UI？
让我们举一个具体的例子:来自Semantic-UI的样式化选择小部件.
它被实现为div的列表,以及一些JS来处理下拉列表和多选.

到目前为止我找到的替代方案是:

1. 包括Semantic的CSS和JS(它需要JQuery)并使用ports来挂钩widget的JS事件.
2. 仅包含Semantic的CSS并尝试在Elm中构建功能.
3. 两者都构建了Elm (adam-r-kowalski/Elm-Css)的功能和风格.
4. 忘记Semantic并使用circuithub/elm-bootstrap-html重做Bootstrap中的站点.

是否还有其他替代方案,或者可以重复使用的小工具,我错过了？

该TheSeamau5/TabbedPages容器肯定是恐吓.其他小部件需要这么多工作吗？

再一次,我喜欢将Elm用于我的项目,但我自己也没有知识也没有时间自己编写所有小部件.

对于上下文,我使用Semantic的小部件是:

• 两个汉堡包菜单,屏幕两侧各一个.
• 风格精选.
• 披露三角形,隐藏/显示更多内容.
• 类似于卡鲁塞尔的图像显示,其中包含prev/next和底部的点.

再次感谢您为榆树所做的工作,以及您可以给我的任何建议.

PS:我也在elm的邮件列表中发布了这个问题.

Answer 1

首先,作为TabbedPages容器的作者,我想为复杂性道歉.该组件实际上是一个实验,可以看到使用Elm和Elm Architecture以及内联样式的可能性.简而言之,组件的想法是允许选项卡+可滑动页面组件,其中选项卡和页面的内容都是未知的,并且整个事物使用内联样式进行样式设置.这可能是制造组件最困难的途径,尽管它有其优点.

至于实现小部件,可以将Elm想象成一种创作Html的方法(就像一个超级高级的Jade).这意味着您可以只编写html并为每个div提供一些类,并在CSS中设置这些类(或者您选择的任何预处理程序).这意味着,不,您的小部件不需要像TabbedPages那样多的工作.

最好的做法可能是包含CSS,并可能重做Elm中的JS部分.这将为您提供榆树的许多保证,而无需在组件上花费太多的成本.

至于野外的成分,遗憾的是目前还没有很多,因为榆树还很年轻.这可能会在未来发生变化,但目前情况并非如此.

最后,对于汉堡包菜单,Elm中有两个提供svg图标的优秀软件包

1. TheSeamau5 /榆树材料-图标
2. jystic /榆树-字体真棒

在两者之间有一些不到1000个图标可供选择(我想,我还没有真正算过),它们只是功能,所以它们非常容易使用.它们产生Svg的只是该Html类型的另一个名称,因此您可以互换地使用这两个名称.

简而言之,目前,最好的方法是在Elm中创建html和逻辑,在CSS中创建样式(或Sass/Less/Stylus/etc ......).而你的大部分逻辑只是在切换你在div中放置的类,就像使用jQuery一样.

为此,我建议遵循Elm架构:

init : Options -> Model

update : Action -> Model -> Model
-- or update : Action -> Model -> (Model, Effects Action) 
-- if you need effects like http

view : Address Action -> Model -> Html

对于内联样式,暂时不要太担心.这是一项正在进行中的工作,并且在该空间中发生了许多突破(例如elm-css),并且当人们开始掌握它时,您可能会开始看到一些博客文章和组件出现.(不幸的是,当你修补最前沿时会发生这种情况......但是,如果你想加入发现的乐趣,榆树社区非常热情,这很有趣,因为似乎每个人都在一起学习:D)

Answer 2

我知道很久以前就回答了这个问题,但我想我会为Elm 0.17和0.18增加0.02美元.查看Material Design Lite组件,为0.17,分叉为0.18.

在现场演示网站是光滑和详尽.