Elm: Comment pourriez-vous construire et styliser votre interface utilisateur?
Au cours des derniers jours, j'ai découvert Elm, et ce fut une expérience rafraîchissante. Tellement que je ne veux pas retourner en terre JS, : .
Mon problème est que je ne vois toujours pas de moyen de produire une application web avec Elm, et j'aimerais quelques conseils et conseils:
--- (evancz/start-app est idéal pour organiser la structure de l'application.
evancz/effects avec elmfire peut gérer la conversation avec Firebase .
Mais comment pourrais-je construire et styliser l'interface utilisateur?
Prenons un exemple concret: un widget de sélection de style de Semantic-UI .
Il est implémenté comme une liste de divs, avec quelques JS pour gérer la liste déroulante et la multi-sélection.
Les alternatives que j'ai trouvées jusqu'à présent sont:
- Incluez le CSS et le JS de Semantic (il nécessite JQuery) et utilisez ports pour vous connecter aux événements JS du widget.
- N'incluez que le CSS de Semantic et essayez de construire la fonctionnalité dans Elm.
- Les deux construisent la fonctionnalité et le style dans Elm (adam-r-kowalski/Elm-Css) .
- Oubliez la sémantique et refaites le site en Bootstrap en utilisant circuithub/Elm-bootstrap-html.
Existe-t-il d'autres alternatives ou widgets réutilisables qui me manquent?
Le conteneur TheSeamau5/TabbedPages est certainement intimidant. D'autres widgets nécessiteraient-ils autant de travail?
Encore une fois, j'aimerais utiliser Elm pour mon projet, mais je n'ai pas les connaissances ni le temps d'écrire moi-même tous les widgets.
Pour le contexte, les widgets que j'utilise de Semantic sont:
- Deux menus hamburger, un de chaque côté de l'écran.
- Une sélection stylée.
- Triangles de divulgation, masquant/affichant plus de contenu.
- Affichage d'images de type carrousel, avec prev/next et des points en bas.
Merci encore pour le travail que vous mettez dans Elm, et tout conseil que vous pouvez me donner.
PS: J'ai également posté cette question dans la liste de diffusion d'Elm.
Je sais que cette question a reçu une réponse depuis longtemps, mais j'ai pensé ajouter mes 0,02 $ pour l'orme 0,17 et 0,18. Découvrez les composants Material Design Lite, pour 0,17 , et fourchus pour 0,18 .
Le site de démonstration en direct est simple et exhaustif.
Tout d'abord, en tant qu'auteur du conteneur TabbedPages, je voudrais m'excuser pour la complexité. Ce composant est vraiment conçu comme une expérience pour voir ce qui est possible en utilisant Elm et l'architecture Elm avec des styles en ligne. En bref, l'idée du composant est de permettre un onglet + des composants de pages glissables où le contenu des onglets et des pages est inconnu et le tout est stylisé en utilisant des styles en ligne. C'est probablement la voie la plus difficile pour fabriquer un composant, bien qu'elle présente ses avantages.
En ce qui concerne l'implémentation de widgets, pensez à Elm comme un moyen de créer du HTML (comme un Jade super avancé). Cela signifie que vous pouvez simplement écrire du HTML et donner à chaque div des classes et styliser ces classes en CSS (ou tout autre pré-processus ou choix). Cela signifie que non, vos widgets n'auraient pas besoin d'autant de travail que TabbedPages.
La meilleure solution serait probablement d'inclure le CSS et probablement de refaire la partie JS dans Elm. Cela vous donnerait beaucoup de garanties d'Elm sans avoir à payer trop cher en travaillant sur le composant.
En ce qui concerne les composants dans la nature, malheureusement, il n'y en a pas beaucoup actuellement, car Elm est encore jeune. Cela va probablement changer à l'avenir, mais actuellement ce n'est pas le cas.
Enfin, pour les menus hamburger, il existe deux excellents packages dans Elm qui fournissent des icônes svg
Entre les deux, il y a un peu moins de 1000 icônes à choisir (je pense, je n'ai pas vraiment compté) et ce ne sont que des fonctions, donc elles sont super faciles à utiliser. Ils produisent Svg qui est juste un autre nom pour le type Html afin que vous puissiez simplement travailler avec les deux de manière interchangeable.
En bref, actuellement, la meilleure façon de procéder est de créer votre html et votre logique dans Elm et vos styles en CSS (ou Sass/Less/Stylus/etc ...). Et l'essentiel de votre logique consisterait simplement à changer les classes que vous mettez dans les divs, comme avec jQuery.
Pour ce faire, je recommande de suivre l'architecture 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
Quant aux styles en ligne, ne vous inquiétez pas trop pour le moment. C'est un travail en cours et de nombreuses percées se produisent dans cet espace (comme Elm-css) et vous commencerez probablement à voir des articles de blog et des composants apparaître chaque fois que les gens commenceront à le maîtriser. (malheureusement, c'est ce qui se passe lorsque vous bricolez avec le tranchant ... bien que, si vous voulez vous amuser à découvrir, la communauté Elm est très accueillante et très amusante car il semble que tout le monde apprenne ensemble: D)
Je me suis également posé des questions à ce sujet, en ce qui concerne l'utilisation de Bootstrap, vous pouvez utiliser des classes CSS mais cela peut devenir compliqué.
À la fin, vous écrirez des fichiers CSS séparés et utiliserez LESS ou SASS ou Stylus ou un autre langage qui se compile en CSS.
Donc dans votre code Elm, utilisez des classes CSS:
div [ class "whatever" ] [ text "Hello world" ]
J'irais avec des ports pour envelopper les composants JS externes.