Wiąz: Jak zbudujesz i ukształtujesz swój interfejs?

Question

Przez ostatnie kilka dni poznałem Wiąz i było to odświeżające doświadczenie. Tak bardzo, że nie chcę wracać do kraju JS, :-(.

Moim problemem jest to, że nadal nie widzę sposobu na stworzenie aplikacji internetowej z wiązem i chciałbym wskazówek i porady:

evancz/start-app jest wielki za organizację struktury aplikacji
evancz/effects wraz z elmfire może obsługiwać rozmowy z Firebase

Ale jak będę budować i styl UI
Weźmy konkretny przykład:..? styled select widget from Semantic-UI.
Jest zaimplementowany jako lista elementów div, wraz z niektórymi JS do obsługi menu rozwijanego i wielokrotnego wyboru.

Alternatywy znalazłem do tej pory to:

1. Include CSS semantycznego i JS (wymaga JQuery) i używać ports hak do widgetu zdarzeń JS.
2. Uwzględnij tylko kod CSS semantyczny i spróbuj zbudować funkcjonalność w wiąz.
3. Obie budują funkcjonalność i styl w Elmie (adam-r-kowalski/Elm-Css).
4. Zapomnij o Semantic i przerób witrynę w Bootstrap za pomocą programu circuithub/elm-bootstrap-html.

Czy istnieją inne alternatywy lub widżety, które można ponownie wykorzystać, których mi brakuje?

Kontener TheSeamau5/TabbedPages z pewnością jest onieśmielający. Czy inne widżety wymagałyby tak dużo pracy?

Jeszcze raz, chciałbym użyć Elm do mojego projektu, ale nie mam wiedzy ani czasu, aby samemu napisać wszystkie widżety.

Dla kontekście widgety używam od semantyczne są:

• Dwa menu hamburger, po jednym z każdej strony ekranu.
• Wybrany styl.
• Trójkąty ujawnień, ukrywanie/pokazywanie większej zawartości.
• Widok podobny do karuzeli obrazów, z prev/next i kropkami u dołu.

Jeszcze raz dziękuję za pracę, którą wkładasz do Wiązu, i wszelkie rady, które możesz mi udzielić.

PS: Też wysłałem to pytanie na liście mailowej Wiązu.

Answer 1

Wiem, że odpowiedź na to pytanie została odłożona dawno temu, ale pomyślałem, że dodaję 0,02 USD do Wiązów 0,17 i 0,18. Sprawdź numery Material Design Lite components, for 0.17 i forked for 0.18.

The Live Demo site jest śliski i wyczerpujący.

Answer 2

Przede wszystkim, jako autor kontentu TabbedPages, chciałbym przeprosić za złożoność. Ten komponent jest naprawdę rozumiany jako eksperyment, aby zobaczyć, co jest możliwe przy użyciu Elm i Elm Architecture wraz ze stylami wbudowanymi. W skrócie, ideą komponentu jest umożliwienie zakładki + przesuwanie elementów strony, w których zawartość zarówno kart, jak i stron jest nieznana, a cała rzecz jest stylizowana za pomocą stylów wbudowanych. Jest to prawdopodobnie najtrudniejsza droga do stworzenia komponentu, choć ma swoje zalety.

Jeśli chodzi o implementowanie widgetów, pomyśl o Elmie jako sposobie tworzenia HTML (jak super zaawansowana Jade). Oznacza to, że możesz po prostu napisać html i dać każdemu div pewne klasy i style tych klas w CSS (lub dowolnie wybranym pre-procesorze). Oznacza to, że nie, twoje widżety nie będą wymagały tak dużej pracy jak TabbedPages.

Najlepszym sposobem działania byłoby prawdopodobnie włączenie CSS i prawdopodobnie ponowne wykonanie części JS w Elm. To dałoby wiele gwarancji z Elm bez konieczności ponoszenia zbyt dużych kosztów związanych z pracą nad komponentem.

Jeśli chodzi o komponenty w dziczy, niestety obecnie nie ma zbyt wielu, ponieważ Elm jest jeszcze młody. Prawdopodobnie ulegnie to zmianie w przyszłości, ale obecnie tak nie jest.

Wreszcie, dla menu hamburger, istnieją dwie wielkie pakiety w Elm, które dostarczają ikony svg

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

między dwoma tam jakby nieco poniżej 1000 ikon, aby wybierz (myślę, że tak naprawdę się nie liczyłem) i są po prostu funkcjami, więc są bardzo łatwe w użyciu. Produkują one Svg, która jest po prostu inną nazwą dla typu Html, więc możesz po prostu pracować z tymi dwoma zamiennie.

Krótko mówiąc, obecnie najlepszym sposobem na zrobienie jest napisanie html i logiki w Elmie i stylach w CSS (lub Sass/Less/Stylus/etc ...). A większość twojej logiki polegałaby po prostu na przełączaniu klas, które umieszczasz w div, jak w jQuery.

Aby to zrobić, polecam następujące architektury 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 

chodzi o style inline, nie martw się zbytnio w tym momencie. Jest to praca w toku i wiele przełomów dzieje się w tej przestrzeni (jak np. Elm-css) i prawdopodobnie zaczniesz widzieć posty na blogu i komponenty pojawiające się, gdy ludzie zaczną go opanowywać. (niestety, tak się dzieje, gdy majstrujesz z nowinkami ... chociaż, jeśli chcesz dołączyć do zabawy odkrywania, społeczność Wiązów jest bardzo przyjazna i jest całkiem zabawna, ponieważ wydaje się, że wszyscy uczą się razem: D)

Answer 3

Zastanawiam się również nad tym, jeśli chodzi o używanie Bootstrapa, możesz używać klas CSS, ale to może stać się kłopotliwe.

Na koniec napiszesz osobne pliki CSS i użyjesz LESS lub SASS lub Stylus lub innego języka kompilującego CSS.

Więc w kodzie Elm, użyć klas CSS:

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

pójdę z portów do owijają JS zewnętrznych komponentów.