Elm: Как бы вы создали и стиль своего интерфейса?

Question

В течение последних нескольких дней я узнал о Вяжем, и это было освежающим опытом. Так много, что я не хочу возвращаться на Землю JS, :-(.

Моя проблема в том, что я до сих пор не вижу способа создать веб-приложение с вязами, и мне бы хотелось, чтобы некоторые рекомендации и советы:

evancz/start-app отлично подходит для организации структуры приложения
evancz/effects вместе с elmfire может обрабатывать разговор с Firebase

Но как бы я построить и стиль пользовательского интерфейса
Давайте рассмотрим конкретный пример:..? styled select widget from Semantic-UI.
Он реализован как список divs, а также некоторые JS для обработки выпадающего меню и multi-select.

альтернативы я нашел до сих пор являются:

1. Включить CSS семантические и в JS (это требует JQuery) и использовать ports вклиниться в JS событий виджета.
2. Включите только CSS Semantic и попытайтесь создать функциональность в Elm.
3. Оба строят функциональность и стиль в Elm (adam-r-kowalski/Elm-Css).
4. Забудьте о семантике и переделайте сайт в Bootstrap, используя circuithub/elm-bootstrap-html.

Есть ли другие альтернативы или виджеты, которые можно было бы повторно использовать, которые мне не хватает?

Контейнер TheSeamau5/TabbedPages, конечно, пугает. Будут ли другие виджеты выполнять эту работу?

Опять же, я бы хотел использовать Elm для моего проекта, но у меня нет знаний и времени, чтобы написать все виджеты.

Для контекста, виджеты, которые я использую из Semantic являются:

• Два меню гамбургер, один на каждой стороне экрана.
• В стильном выборе.
• Раскрытие треугольников, скрытие/отображение большего количества контента.
• Карусельное изображение изображений, с превью/рядом и точками внизу.

Еще раз спасибо за работу, которую вы вкладываете в Вяз, и любые советы, которые вы можете дать мне.

PS: Я также разместил этот вопрос в списке рассылки elm.

Answer 1

Я знаю, что на этот вопрос ответили долгое время назад, но я подумал, что добавлю свои 0,02 доллара за Elm 0.17 и 0.18. Проверьте Material Design Lite components, for 0.17 и forked for 0.18.

Live Demo site является гладким и исчерпывающим.

Answer 2

Прежде всего, как автор контейнера TabbedPages, я хотел бы извиниться за сложность. Этот компонент действительно предназначен как эксперимент, чтобы увидеть, что возможно, используя Elm и Elm Architecture вместе со встроенными стилями. Короче говоря, идея компонента состоит в том, чтобы использовать компоненты tabs + swipeable pages, где содержимое как вкладок, так и страниц неизвестно, и все это стилизовано с использованием встроенных стилей. Это, вероятно, самый сложный путь для создания компонента, хотя он имеет свои преимущества.

Что касается внедрения виджетов, подумайте о Elm как о средстве разработки Html (например, супер продвинутого нефрита). Это означает, что вы можете просто написать html и дать каждому div некоторые классы и стилизовать эти классы в CSS (или любые предварительные процессы или выберете). Это означает, что нет, ваши виджеты не будут нуждаться в такой же работе, как TabbedPages.

Лучшим способом действий, вероятно, будет включение CSS и, возможно, повторение части JS в Elm. Это даст вам много гарантий от Elm, не заплатив слишком много затрат при работе с компонентом.

Что касается компонентов в дикой природе, то, к сожалению, в настоящее время их мало, поскольку Элм еще молод. Вероятно, это изменится в будущем, но в настоящее время это не так.

Наконец, для меню гамбургер, есть две большие пакеты в Элм, которые обеспечивают SVG иконки

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

Между ними есть как чуть менее 1000 икон выберите (я думаю, я действительно не рассчитывал), и они просто функции, поэтому они очень просты в использовании. Они производят Svg, что является еще одним именем для типа Html, поэтому вы можете просто работать с двумя взаимозаменяемыми.

Короче говоря, в настоящее время лучший способ - написать свой html и логику в Elm и ваши стили в CSS (или Sass/Less/Stylus/etc ...). И основная часть вашей логики просто заключалась бы в переключении классов, которые вы помещали в divs, например, с помощью jQuery.

Для этого я рекомендую следующие архитектуры Вязов:

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), и вы, вероятно, начнете видеть некоторые сообщения в блогах и компоненты, появляющиеся, когда люди начнут его освоить. (к сожалению, это то, что происходит, когда вы возитесь с режущим краем ... хотя, если вы хотите присоединиться к веселью открытия, сообщество Elm очень приветливое, и это довольно весело, потому что кажется, что все учатся вместе: D)

Answer 3

Я тоже подумал об этом, применив Bootstrap, вы можете использовать классы CSS, но это может стать беспорядочным.

В конце вы будете писать отдельные файлы CSS и использовать LESS или SASS или Stylus или какой-либо другой язык, который компилируется в CSS.

Так что в вашем коде Элм, используйте CSS классы:

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

Я бы с портами, чтобы обернуть внешние JS компоненты.