Подтвердить что ты не робот

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

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

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

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

Но как я буду создавать и настраивать пользовательский интерфейс?
Возьмем конкретный пример: стилизованный виджет выбора из Semantic-UI.
Он реализуется как список divs вместе с некоторыми JS для обработки выпадающего меню и множественного выбора.

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

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

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

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 2

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

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

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

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

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

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

Короче говоря, в настоящее время лучший способ - написать свой html и логику в Elm и ваши стили в CSS (или Sass/Less/Stylus/etc...). И основная часть вашей логики просто заключалась бы в переключении классов, которые вы кладете в divs, например, с помощью 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), и вы, вероятно, начнете видеть некоторые сообщения в блогах и компоненты, появляющиеся, когда люди начнут его освоить. (к сожалению, это то, что происходит, когда вы возитесь с режущим краем... хотя, если вы хотите присоединиться к радости открытия, сообщество Elm очень приветствуется, и это довольно весело, потому что кажется, что все учатся вместе: D)

Ответ 3

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

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

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

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

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