search

roc-lang / roc

A fast, friendly, functional language.
https://roc-lang.org
Universal Permissive License v1.0
4.19k stars 299 forks source link

UI mockup in Elm (elm-ui)? #959

Open Anton-4 opened 3 years ago

Anton-4 commented 3 years ago

I've been talking with @popara and we're considering to do further prototyping in Elm. Due to the complexity of the editor it's a lot of work to create mockups in figma, especially if we want to add some interactivity. I think we planned to do the UI framework in roc following The Elm Architecture @rtfeldman, so there would be little duplication of work. It's also difficult to judge if a certain layout would work well in practice without proper interactivity.

I've also been thinking elm-ui is a great battle-tested design toolkit we could clone in roc. If we planned to use an elm-ui like toolkit for the editor it would be beneficial to use it in the mockups as well.

All text editing functionality would likely be omitted as this would duplicate rust code.

CC @rvcas

popara commented 3 years ago

TBH I haven't got into elm-ui hypetrain, but I can guess that it wouldn't be hard to emulate positioning of windows and some small pieces of interactivity which would give a better sense what idea makes sense.

I already have basic types laid out and tonight I will see to focus on making basic view of the model, and hard code Real World Example to see how it would look like, and make a PR with it.

Anton-4 commented 3 years ago

Window positioning alone is not a problem but keeping all components in it sensibly aligned gets difficult quickly. I think using layouts is a key advantage over figma.

:+1: on PR

popara commented 3 years ago

Also Elm-in-Elm is power full tool for quickly modeling real life Roc code :)

https://github.com/Bogdanp/elm-ast

We just need to fine tune mapping function.

Anton-4 commented 3 years ago

Good find :+1: