Elm: Bạn sẽ xây dựng và tạo kiểu cho giao diện người dùng của mình như thế nào?

Question

Trong vài ngày qua tôi đã học về Elm, và đó là một trải nghiệm thú vị. Rất nhiều điều mà tôi không muốn quay trở lại vùng đất JS, :-(

Vấn đề của tôi là tôi vẫn không thấy cách tạo ra một ứng dụng web bằng cây du, và tôi rất thích một số hướng dẫn và tư vấn:

evancz/start-app là rất tốt cho việc tổ chức cấu trúc của ứng dụng
evancz/effects cùng với elmfire có thể xử lý nói chuyện với Firebase

Nhưng làm thế nào tôi sẽ xây dựng và phong cách giao diện người dùng
Hãy lấy một ví dụ cụ thể:..? một styled select widget from Semantic-UI.
Nó được thực hiện dưới dạng danh sách các div, cùng với một số JS để xử lý menu thả xuống và chọn nhiều.

Các phương án tôi đã tìm thấy cho đến nay là:

1. Bao gồm CSS và JS Semantic của (nó đòi hỏi JQuery) và sử dụng ports để móc vào các sự kiện JS của widget.
2. Chỉ bao gồm CSS của Semantic và cố gắng xây dựng chức năng trong Elm.
3. Cả hai đều xây dựng chức năng và kiểu dáng trong Elm (adam-r-kowalski/Elm-Css).
4. Quên về ngữ nghĩa và làm lại trang web trong Bootstrap sử dụng circuithub/elm-bootstrap-html.

Có các lựa chọn thay thế hoặc tiện ích con nào khác có thể được sử dụng lại mà tôi bị thiếu không?

Hộp chứa TheSeamau5/TabbedPages chắc chắn đáng sợ. Các tiện ích con khác có yêu cầu nhiều công việc này không?

Một lần nữa, tôi rất muốn sử dụng Elm cho dự án của mình, nhưng tôi không có kiến ​​thức cũng như thời gian để tự viết tất cả các tiện ích.

Đối với ngữ cảnh, các vật dụng tôi đang sử dụng từ ngữ nghĩa là:

• Hai menu hamburger, một trên mỗi bên của màn hình.
• Chọn theo kiểu.
• Hình tam giác tiết lộ, ẩn/hiển thị thêm nội dung.
• Hiển thị hình ảnh giống như hình cái chuông, với giá trị prev/next và dấu chấm ở dưới cùng.

Cảm ơn một lần nữa vì công việc bạn đang đưa vào Elm và mọi lời khuyên bạn có thể đưa cho tôi.

PS: Tôi cũng đã đăng câu hỏi này trong danh sách gửi thư của elm.

Answer 1

Tôi biết câu hỏi này đã được trả lời một thời gian dài, nhưng tôi nghĩ rằng tôi sẽ thêm $ 0,02 cho Elm 0,17 và 0,18. Hãy xem Material Design Lite components, for 0.17 và forked for 0.18.

Live Demo site trơn và đầy đủ.

Answer 2

Trước hết, với tư cách là tác giả của vùng chứa Tabbedpages, tôi xin lỗi vì sự phức tạp. Thành phần đó thực sự có nghĩa là một thử nghiệm để xem những gì có thể sử dụng Elm và Kiến trúc Elm cùng với các kiểu nội tuyến. Tóm lại, ý tưởng của thành phần là cho phép các thành phần tab + trang có thể vuốt được khi nội dung của cả tab và trang không xác định và toàn bộ nội dung được tạo kiểu bằng cách sử dụng kiểu nội tuyến. Đây có lẽ là con đường khó khăn nhất để tạo thành phần, mặc dù nó có những ưu điểm của nó.

Để triển khai tiện ích con, hãy nghĩ về Elm như một phương tiện để viết Html (giống như một Jade siêu tiên tiến). Điều này có nghĩa rằng bạn chỉ có thể viết html và cung cấp cho mỗi div một số lớp và tạo kiểu cho các lớp đó trong CSS (hoặc bất kỳ trình xử lý trước nào bạn chọn). Điều này có nghĩa là, không, các tiện ích của bạn sẽ không cần nhiều công việc như TabbedPages.

Khóa học hành động tốt nhất có thể là bao gồm CSS và có thể làm lại phần JS trong Elm. Điều này sẽ cung cấp cho bạn rất nhiều bảo đảm từ Elm mà không phải trả quá nhiều chi phí khi làm việc trên thành phần.

Đối với các thành phần trong tự nhiên, tiếc là không có nhiều hiện có như Elm vẫn còn trẻ. Điều này có thể sẽ thay đổi trong tương lai, nhưng hiện tại không phải như vậy.

Cuối cùng, đối với các menu hamburger, có hai gói lớn trong Elm đó cung cấp các biểu tượng svg

1. TheSeamau5/elm-material-icons
2. jystic/elm-font-awesome

Giữa hai có giống như một chút dưới 1000 biểu tượng để chọn từ (tôi nghĩ rằng, tôi đã không thực sự tính) và họ chỉ là chức năng, vì vậy họ đang siêu dễ sử dụng. Họ sản xuất Svg mà chỉ là một tên khác cho các loại Html vì vậy bạn chỉ có thể làm việc với hai thay thế cho nhau.

Trong ngắn hạn, hiện tại, cách tốt nhất để thực hiện là viết html và logic của bạn trong Elm và các kiểu của bạn bằng CSS (hoặc Sass/Less/Stylus/etc ...). Và phần lớn logic của bạn sẽ đơn giản bao gồm trong việc chuyển đổi các lớp bạn đưa vào các div, giống như với jQuery.

Để làm như vậy, tôi khuyên bạn nên làm theo kiến ​​trúc 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 

Đối với phong cách nội tuyến, đừng lo lắng quá nhiều cho thời điểm này. Đó là một công việc đang diễn ra và rất nhiều đột phá đang diễn ra trong không gian đó (như elm-css) và có thể bạn sẽ bắt đầu thấy một số bài đăng trên blog và các thành phần xuất hiện bất cứ khi nào mọi người bắt đầu làm chủ nó. (Thật không may, đây là những gì xảy ra khi bạn tinker với các cạnh cắt ... mặc dù, nếu bạn muốn tham gia vào niềm vui khám phá, cộng đồng Elm là rất chào đón và nó khá thú vị bởi vì có vẻ như tất cả mọi người đang học cùng nhau: D)

Answer 3

Tôi tự hỏi về điều này là tốt, liên quan đến việc sử dụng Bootstrap, bạn có thể sử dụng các lớp CSS nhưng điều đó có thể bị lộn xộn.

Cuối cùng, bạn sẽ viết các tệp CSS riêng biệt và sử dụng LESS hoặc SASS hoặc Stylus hoặc một số ngôn ngữ khác biên dịch sang CSS.

Vì vậy, trong mã Elm của bạn, sử dụng lớp CSS:

div [ class "whatever" ] [ text "Hello world" ] 

tôi sẽ đi với cổng để bọc các thành phần JS bên ngoài.