west - Elm: ¿Cómo construirías y estilizarías tu interfaz de usuario?
elm wood (3)
En primer lugar, como autor del contenedor de TabbedPages, me gustaría disculparme por la complejidad. Ese componente está realmente pensado como un experimento para ver qué es posible utilizando Elm y Elm Architecture junto con los estilos en línea. En resumen, la idea del componente es permitir el uso de componentes de tabs + swipeable pages donde el contenido de las pestañas y las páginas son desconocidos y todo está diseñado con estilos en línea. Esta es probablemente la ruta más difícil para hacer un componente, aunque tiene sus ventajas.
En cuanto a la implementación de widgets, piense en Elm como un medio de creación de HTML (como un Jade súper avanzado). Esto significa que solo puede escribir html y dar a cada div algunas clases y diseñar esas clases en CSS (o cualquier preprocesador que elija). Esto significa que, no, sus widgets no necesitarían tanto trabajo como TabbedPages.
El mejor curso de acción probablemente sería incluir el CSS y probablemente rehacer la parte JS en Elm. Esto le daría muchas garantías de Elm sin tener que pagar demasiado por trabajar en el componente.
En cuanto a los componentes en la naturaleza, desafortunadamente no hay muchos en la actualidad, ya que Elm todavía es joven. Esto probablemente cambiará en el futuro, pero actualmente este no es el caso.
Finalmente, para los menús de hamburguesas, hay dos paquetes geniales en Elm que ofrecen iconos svg
Entre los dos hay como un poco menos de 1000 íconos para elegir (creo que realmente no he contado) y son solo funciones, por lo que son muy fáciles de usar. Producen Svg que es solo otro nombre para el tipo Html por lo que puedes trabajar con los dos de manera intercambiable.
En resumen, actualmente, la mejor manera de hacerlo es crear su html y su lógica en Elm y sus estilos en CSS (o Sass / Less / Stylus / etc ...). Y la mayor parte de tu lógica consistiría simplemente en cambiar las clases que colocas en los divs, como con jQuery.
Para ello, recomiendo seguir la arquitectura 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
En cuanto a los estilos en línea, no te preocupes demasiado por el momento. Es un trabajo en progreso y se están produciendo muchos avances en ese espacio (como elm-css) y es probable que empiece a ver algunas publicaciones de blog y componentes que aparecen cada vez que la gente comienza a dominarlo. (desafortunadamente, esto es lo que sucede cuando juegas con lo último ... aunque, si quieres unirte a la diversión de descubrir, la comunidad de Elm es muy acogedora y es bastante divertida porque parece que todos están aprendiendo juntos: D)
Durante los últimos días he aprendido sobre Elm, y ha sido una experiencia refrescante. Tanto que no quiero volver a la tierra JS, :-(.
Mi problema es que todavía no veo la manera de producir una aplicación web con elm, y me encantaría recibir orientación y consejos:
evancz/start-app es ideal para organizar la estructura de la aplicación.
evancz/effects junto con elmfire puede manejar hablar con Firebase .
Pero, ¿cómo construiría y estilizaría la interfaz de usuario?
Tomemos un ejemplo concreto: un widget de selección con estilo de Semantic-UI .
Se implementa como una lista de divs, junto con algunos JS para manejar la lista desplegable y la selección múltiple.
Las alternativas que he encontrado hasta ahora son:
- Incluya CSS y JS de Semantic (requiere JQuery) y use los ports para conectarse a los eventos JS del widget.
- Incluye solo el CSS de Semantic y trata de construir la funcionalidad en Elm.
- Ambos construyen la funcionalidad y el estilo en Elm (adam-r-kowalski/Elm-Css) .
- Olvídate de Semántica y rehacer el sitio en Bootstrap usando circuithub / elm-bootstrap-html.
¿Hay otras alternativas o widgets que podrían reutilizarse y que me estoy perdiendo?
El TheSeamau5/TabbedPages es ciertamente intimidante. ¿Los otros widgets requerirían tanto trabajo?
Una vez más, me encantaría usar Elm para mi proyecto, pero no tengo el conocimiento ni el tiempo para escribir yo mismo todos los widgets.
Para el contexto, los widgets que estoy usando de Semantic son:
- Dos menús de hamburguesas, uno a cada lado de la pantalla.
- Un estilo de selección.
- Divulgación de triángulos, ocultando / mostrando más contenido.
- Una pantalla de imágenes tipo carrusel, con prev / next y puntos en la parte inferior.
Gracias de nuevo por el trabajo que estás realizando en Elm, y cualquier consejo que puedas darme.
PD: También he publicado esta pregunta en la lista de correo de elm.
Sé que esta pregunta fue respondida hace mucho tiempo, pero pensé que agregaría mis $ 0.02 para Elm 0.17 y 0.18. Echa un vistazo a los componentes de Material Design Lite, para 0.17 , y bifurcados para 0.18 .
El sitio de demostración en vivo es resbaladizo y exhaustivo.
También me pregunté acerca de esto, con respecto al uso de Bootstrap puedes usar clases de CSS pero eso puede causar problemas.
Al final, escribirá archivos CSS separados y usará LESS o SASS o Stylus o algún otro lenguaje que compile en CSS.
Así que en tu código Elm, usa clases de CSS:
div [ class "whatever" ] [ text "Hello world" ]
Iría con puertos para envolver componentes externos de JS.