Elm: ¿Cómo construirías y diseñarías tu interfaz de usuario?
Durante los últimos días he aprendido sobre Elm, y ha sido una experiencia refrescante. Tanto que no quiero volver a la tierra de JS,: - (.
Mi problema es que todavía no veo una manera de producir una aplicación web con elm, y me encantaría un poco de orientación y asesoramiento:
Evancz / start-app es ideal para organizar la estructura de la aplicación.
evancz / effects junto con elmfire puede manejar la conversación con Firebase.
Pero ¿cómo podría construir y estilo de la interfaz de usuario?
Tomemos un ejemplo concreto: un widget select con estilo de Semantic-UI.
Se implementa como una lista de divs, junto con algunos JS para manejar el menú 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 ports para engancharse a los eventos JS del widget.
- Incluir solo CSS de Semantic y tratar de construir la funcionalidad en Olmo.
- Ambos construyen la funcionalidad y el estilo en Elm (adam-r-kowalski/Elm-Css).
- Olvídese de la semántica y rehaga el sitio en Bootstrap usando circuithub/elm-bootstrap-html.
¿Hay otras alternativas o widgets que podrían reutilizarse que me faltan?
El contenedor TheSeamau5/TabbedPages es ciertamente intimidante. ¿Otros widgets requerirían tanto trabajo?
De nuevo, me encantaría usar Elm para mi proyecto, pero lo hago no tengo el conocimiento ni el tiempo para escribir todos los widgets yo mismo.
Para el contexto, los widgets que estoy usando de Semantic son:
- Dos menús de hamburguesas, uno a cada lado de la pantalla.
- Una selección con estilo.
- Triángulos de divulgación, ocultando/mostrando más contenido.
- Una visualización de imágenes similar a un carrusel, con prev/next y puntos en la parte inferior.
Gracias de nuevo por el trabajo que está poniendo en Elm, y cualquier consejo que pueda dar me.
PD: También he publicado esta pregunta en la lista de correo de elm.
3 answers
Sé que esta pregunta fue respondida hace mucho tiempo, pero pensé en agregar mis $0.02 para Elm 0.17 y 0.18. Echa un vistazo a los componentes Material Design Lite, para 0.17, y bifurcado para 0.18.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-06 21:39:00
En primer lugar, como autor del contenedor TabbedPages, me gustaría disculparme por la complejidad. Ese componente es realmente un experimento para ver lo que es posible usando Elm y la Arquitectura Elm junto con los estilos en línea. En resumen, la idea del componente es permitir un tabs+swipeable pages componentes donde el contenido de las pestañas y las páginas son desconocidos y todo el asunto se estiliza utilizando 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 para crear Html (como un Jade super avanzado). Esto significa que usted puede escribir html y dar a cada div algunas clases y el estilo de esas clases en CSS (o cualquier pre-processesor que elija). Esto significa que, no, tus widgets no necesitarían tanto trabajo como TabbedPages.
El mejor curso de acción sería probablemente incluir el CSS y probablemente rehacer la parte JS en Elm. Esto te daría muchas de las garantías de Elm sin tener que pagar demasiado de un costo en el trabajo en el componente.
En cuanto a los componentes en la naturaleza, desafortunadamente no hay muchos por ahí actualmente como Elm es todavía joven. Esto probablemente cambiará en el futuro, pero actualmente no es el caso.
Finalmente, para los menús de hamburguesas, hay dos grandes paquetes en Elm que entregan svg icons
Entre los dos hay como un poco menos de 1000 iconos para elegir (creo que, realmente no he contado) y son solo funciones, por lo que son súper fáciles de usar. Producen Svg que es solo otro nombre para el tipo Html para que pueda trabajar con los dos indistintamente.
En resumen, actualmente, la mejor manera de hacerlo es crear su html y lógica en Elm y sus estilos en CSS (o Sass/Less/Stylus/etc...). Y la mayor parte de su lógica consistiría simplemente en cambiar las clases que pone en los divs, como con jQuery.
Para hacerlo, 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 muchos avances están sucediendo en ese espacio (como elm-css) y probablemente comenzarás a ver algunas publicaciones de blog y componentes que aparecen cada vez que la gente empieza a dominarlo. (desafortunadamente, esto es lo que sucede cuando juegas con la vanguardia... 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)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-27 03:15:58
También me pregunté sobre esto, con respecto al uso de Bootstrap, puede usar clases CSS, pero eso puede ser complicado.
Al final escribirás archivos CSS separados y usarás LESS o SASS o Stylus o algún otro lenguaje que compile a CSS.
Así que en tu código Elm, usa clases CSS:
div [ class "whatever" ] [ text "Hello world" ]
Iría con ports para envolver componentes JS externos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-17 14:56:52