Elm: come creeresti e stili la tua interfaccia utente?

Question

Negli ultimi giorni ho imparato a conoscere Elm, ed è stata un'esperienza rinfrescante. Tanto che non voglio tornare in JS land, :-(.

Il mio problema è che non vedo ancora un modo per produrre un'app Web con elm, e mi piacerebbe qualche consiglio e consiglio:

evancz/start-app è grande per organizzare la struttura del app
evancz/effects insieme elmfire in grado di gestire a parlare con Firebase

Ma come vorrei costruire e lo stile UI
Facciamo un esempio concreto:..? un styled select widget from Semantic-UI.
È implementato come un elenco di div, insieme ad alcuni JS per gestire il menu a discesa e la selezione multipla.

Le alternative che ho trovato finora sono:

1. Includere CSS e JS di Semantic (richiede JQuery) e utilizzare ports di agganciare in eventi JS del widget.
2. Includere solo CSS di Semantic e provare a creare la funzionalità in Elm.
3. Entrambi creano funzionalità e stile in Elm (adam-r-kowalski/Elm-Css).
4. Dimentica Semantic e ripristina il sito in Bootstrap utilizzando circuithub/elm-bootstrap-html.

Ci sono altre alternative o widget che potrebbero essere riutilizzati che mi mancano?

Il contenitore TheSeamau5/TabbedPages è certamente intimidatorio. Altri widget richiederebbero molto lavoro?

Ancora una volta, mi piacerebbe utilizzare Elm per il mio progetto, ma non ho la conoscenza né il tempo di scrivere tutti i widget da solo.

per il contesto, i widget che sto usando da Semantic sono:

• Due menu hamburger, uno su ogni lato dello schermo.
• Una selezione in stile.
• Triangoli di apertura, che nascondono/mostrano più contenuti.
• Una visualizzazione simile a un carosello di immagini, con prev/next e punti nella parte inferiore.

Grazie ancora per il lavoro che stai dedicando a Elm e ogni consiglio che puoi darmi.

PS: Ho anche postato questa domanda nella mailing list di elm.

Answer 1

So che a questa domanda è stata data risposta molto tempo fa, ma ho pensato di aggiungere $ 0.02 per Elm 0.17 e 0.18. Controlla il Material Design Lite components, for 0.17 e forked for 0.18.

Il Live Demo site è liscio ed esauriente.

Answer 2

Prima di tutto, come autore del contenitore TabbedPages, mi scuso per la complessità. Quel componente è davvero inteso come un esperimento per vedere cosa è possibile utilizzare Elm e l'architettura Elm insieme agli stili in linea. In breve, l'idea del componente è quella di consentire una tabulazione + componenti delle pagine scorrevoli in cui i contenuti di entrambe le schede e le pagine sono sconosciute e l'intera cosa è in stile utilizzando gli stili in linea. Questa è probabilmente la via più difficile per realizzare un componente, sebbene abbia i suoi vantaggi.

Per quanto riguarda l'implementazione dei widget, pensate a Elm come mezzo per creare Html (come una super avanzata Jade). Ciò significa che puoi semplicemente scrivere html e assegnare a ogni div alcune classi e definire le classi in CSS (o qualsiasi altro pre-processore che scegli). Ciò significa che, no, i tuoi widget non avrebbero bisogno di tanto lavoro quanto TabbedPages.

Il miglior modo di agire sarebbe probabilmente quello di includere il CSS e probabilmente ripetere la parte JS in Elm. Questo ti darebbe molte garanzie da Elm senza dover pagare troppo del costo del lavoro sul componente.

Per quanto riguarda i componenti in natura, sfortunatamente non ce ne sono molti attualmente in quanto Elm è ancora giovane. Questo probabilmente cambierà in futuro, ma al momento non è così.

Infine, per i menu di hamburger, ci sono due grandi pacchetti a Elm che offrono svg icone

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

Tra i due c'è come un po 'meno di 1000 icone per scegliere da (penso, non ho davvero contato) e sono solo funzioni, quindi sono super facili da usare. Producono Svg che è solo un altro nome per il tipo Html in modo da poter lavorare con i due in modo intercambiabile.

In breve, al momento, il modo migliore per procedere è creare il tuo html e la logica in Elm e i tuoi stili in CSS (o Sass/Less/Stylus/etc ...). E la maggior parte della tua logica consisterebbe semplicemente nel cambiare le classi che hai inserito nelle div, come con jQuery.

Per farlo, vi consiglio seguendo l'architettura 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 

Per quanto riguarda gli stili inline, non preoccupatevi troppo per il momento. È un work in progress e molte scoperte stanno accadendo in quello spazio (come elm-css) e probabilmente inizierai a vedere alcuni post e componenti del blog che appaiono ogni volta che la gente inizia a padroneggiarlo. (sfortunatamente, questo è ciò che accade quando si armeggia con il filo del rasoio ... anche se, se si vuole unirsi al divertimento della scoperta, la comunità di Elm è molto accogliente ed è piuttosto divertente perché sembra che tutti stiano imparando insieme: D)

Answer 3

Mi sono chiesto anche su questo, per quanto riguarda l'utilizzo di Bootstrap è possibile utilizzare le classi CSS ma che possono diventare disordinati.

Alla fine scriverai file CSS separati e userai LESS o SASS o Stylus o qualche altra lingua che compila nei CSS.

Così nel codice Elm, utilizzare le classi CSS:

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

Vorrei andare con le porte per avvolgere i componenti JS esterni.