Stream: show and tell

Topic: Roc front-end in production


view this post on Zulip Niclas Ahden (Dec 08 2024 at 20:42):

In this week's Roc'n'Prod we've got a small front-end application! I forked Luke Boswell's awesome #show and tell > Roc JS DOM platform experiment and extended it with the features I needed for now. Thank you Luke!

The app is a small search experience for one of the real estate agencies in beautiful Stockholm, Sweden. If you're not afraid of Swedish you can try it out here: https://www.bosthlm.se/till-salu

It searches as you type (no debouncing yet, so enjoy a flurry of HTTP requests!) and has "infinite scroll". It hits an API written in Ruby, and the next goal is to replace that with Roc.

You may also enjoy the videos on the website as they've been blessed by Roc as well. Photographers upload raw material to a Roc service, which transcodes it using ffmpeg, sends it over to an editor and blahblahblah - main point: it's Roc!

Here's the search feature (the teal(?) box and the listings below it are rendered by Roc, not the rest of the page):

image.png

view this post on Zulip Richard Feldman (Dec 08 2024 at 21:02):

wow, this is DEFINITELY the first-ever production use of Roc for a user interface! :smiley:

view this post on Zulip Luke Boswell (Dec 08 2024 at 21:53):

This is so cool!!

I'm really interested to know how you found the events with update? Do you think it's workable for now until we have action-state working?

view this post on Zulip Luke Boswell (Dec 08 2024 at 21:53):

I've wondered if it's worth polishing the demo a bit with examples and documentation so people could use it for front end roc.

view this post on Zulip Luke Boswell (Dec 08 2024 at 21:58):

Also, the API for working with html was just a hack, did you have any thoughts about improving that? I've thought I should merge the events stuff into an attribute somehow so it's similar to doing html with elm.

view this post on Zulip Anthony Bullard (Dec 08 2024 at 22:08):

I would have it be just like Elm's HTML package

view this post on Zulip Luke Boswell (Dec 08 2024 at 22:10):

This is what it currently is...

Html state : [
    None,
    Text Str,
    Element
        {
            tag : Str,
            attrs : List { key: Str, value: Str },
            events : List { name : Str, handler : List U8 },
        }
        (List (Html state)),
]

translate : Html child, (parent -> child), (parent, child -> parent) -> Html parent
translate = \elem, parentToChild, childToParent ->
    when elem is
        None ->
            None

        Text str ->
            Text str

        Element { tag, attrs, events } children ->
            Element
                { tag, attrs, events }
                (List.map children \c -> translate c parentToChild childToParent)

view this post on Zulip Luke Boswell (Dec 08 2024 at 22:11):

div : List { key: Str, value: Str }, List (Html state) -> Html state
div = \attrs, children ->
    Element { tag: "div", attrs, events : [] } children

button : List { key: Str, value: Str }, List { name : Str, handler : List U8 }, List (Html state) -> Html state
button = \attrs, events, children ->
    Element { tag: "button", attrs, events } children

view this post on Zulip Luke Boswell (Dec 08 2024 at 22:14):

I put this in the bucket of things to look at later, I figured getting something working was the first step and we can come back to this.

But if people are finding this useful enough for a production app... I'm really interested to know if they think it's worth cleaning up a bit so that others can use it too.

view this post on Zulip Niclas Ahden (Dec 08 2024 at 22:15):

I changed the HTML and attributes to be Elm-style. I’ll check with the client if I can publish the platform code :ok:

view this post on Zulip Niclas Ahden (Dec 08 2024 at 22:21):

I kept the Events as-is though. API-wise I think it may be neat to use records somehow, as I’ve always found it a bit weird that Elm-like HTML ends up with a ton of empty lists.

view this post on Zulip Niclas Ahden (Dec 08 2024 at 22:24):

Luke Boswell said:

This is so cool!!

I'm really interested to know how you found the events with update? Do you think it's workable for now until we have action-state working?

I think it’s totally fine. I added oninput and a primitive “port” to trigger events from JS using IntersectionObserver for the infinite scroll. I think it feels natural, easy, and fun.

I called the platform Joy :joy: so I guess that explains how I feel about it

view this post on Zulip Anthony Bullard (Dec 09 2024 at 00:36):

Did you explore using a record instead with optional record fields?

view this post on Zulip Anthony Bullard (Dec 09 2024 at 01:10):

Something Like in this gist

view this post on Zulip Jon Erik Kemi Warghed (Dec 09 2024 at 20:16):

Snyggt!

view this post on Zulip Niclas Ahden (Dec 10 2024 at 16:03):

I got approval to publish the platform code and they want me to turn it into "the thing we use for everything" and then promote it and them in my speaking, trainings etc. They'll also let me work on it a bit on their time as long as I double-match the hours with my own time. I'm happy with that! I asked Luke for permission to use his repo as a base and he graciously accepted too, so, here we are: https://github.com/niclas-ahden/joy

view this post on Zulip Ian McLerran (Dec 12 2024 at 17:41):

This is awesome, @Niclas Ahden! Just added joy and a corresponding app stub to roc-start, so as soon as the platform has a GH release, it will be available in roc-start!

view this post on Zulip Luke Boswell (Dec 12 2024 at 21:33):

@Ian McLerran the joy platform uses a native toolchain to build, and uses roc in an embedded way.

We first build roc into an object file roc build --no-link and then the native toolchain to build the host i.e. cargo build.

I'd love for it to be just roc build in the future, where roc can produce the final app.wasm module, but we've got some build pipeline things we need to sort out before that can happen. I think it's possible to pre-build the host and then have roc link it, but I haven't been able to do that yet.

view this post on Zulip Luke Boswell (Dec 12 2024 at 21:34):

Also, wasm-pack does a lot of additional housekeeping and generates all the js bindings, to produce a bundle of files that can then be served using a static web/file server.

view this post on Zulip Ian McLerran (Dec 12 2024 at 21:57):

Ahh, thanks for letting me know. Obviously I didn't dig in too deeply! :sweat_smile: I'm going to have to play with this soon.. looks really interesting!

view this post on Zulip Ian McLerran (Dec 17 2024 at 18:21):

New roc-start feature: upgrade your dependencies!
Starting with roc-start v0.5.0, you can upgrade the dependencies of an existing app or package. You can either specify the exact dependencies to upgrade, or omit the specifics, and the platform and packages will all be upgraded to the latest releases of each.

To upgrade, use:

roc-start upgrade <filename> <to-upgrade>

# ie:
roc-start upgrade myapp.roc basic-cli weaver
# or:
roc-start upgrade main.roc

Just make sure you have run roc-start update recently to make sure your local repo has the latest releases.

view this post on Zulip Ian McLerran (Dec 17 2024 at 18:39):

Side note: I received an bug report that roc-start will only show the help screen on linux, regardless of the options or commands passed to it. Has anyone else experienced this? I don't run in to this on aarch64 Mac. Going to try to get a Linux environment spun up here so I can investigate, but just curious if anyone else has run into this.

view this post on Zulip Anton (Dec 17 2024 at 18:43):

This could be https://github.com/roc-lang/basic-cli/issues/82

view this post on Zulip Ian McLerran (Dec 17 2024 at 18:46):

Ah, yep, looks like that's right. @Henrik Larsson did mention using the legacy linker.

Whats the status of the surgical linker on linux? Can I recommend that as a solution?

view this post on Zulip Anton (Dec 17 2024 at 18:50):

If you don't hit Undefined Symbol in relocation you should be fine for the rest with the surgical linker

view this post on Zulip Luke Boswell (Dec 17 2024 at 18:58):

With the PI basic-cli we should be able to put this args issue behind us, soon :fingers_crossed: :grinning:

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:05):

I’d love to pair this with a Go style “search index” for roc packages/platforms. Implemented in Roc of course

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:07):

That index could also host all of the docs as well. But NOT a registry. Just searches public GitHub and GitLab for roc projects and indexes them, and builds and hosts their docs and offers search over all of it

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:07):

Hannes has built one of these

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:08):

https://hasnep.github.io/roc-packages/

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:09):

How do you get on there?

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:11):

Wow, that is awesome. This would be the perfect companion to roc-start... Looks like it would need a few modifications to support the data that roc-start needs though.

IE, no differentiation between platforms and packages.

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:11):

This seems to use a centralized registry (like the Excite of search engines). I want the Google analog

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:12):

We just search at some sort of rate using public APIs. And maybe have some way to ping the server to say “hey look here too”

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:13):

Yeah, I am seeing platforms, packages and apps in the json data, but it doesn't appear to be comprehensive.

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:13):

@Ian McLerran let me know if you would be interested in collaborating

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:14):

@Anthony Bullard Absolutely! I am definitely interested.

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:14):

Sweeeeeet

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:14):

@Hannes would probably be happy to update his registry. :wave:

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:15):

I think being able to do roc_start search SQLite and get a list of platforms that have documented SQLite support would be nice

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:16):

Or roc_start docs moduleName and it opens your browser to the correct version of the package docs

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:16):

Yeah, Hannes just needs to update the data and found a way to replace his Python script with something more sophisticated

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:18):

One of the next major things I would like to explore for the ecosystem, is how these cross-platform packages will work in practice.

We have the design for Path. The idea being that all the platforms can support the primitives for that and we have an ecosystem of packages that can build on top of that.

So I imagine these pckages will help a lot in this direction.

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:18):

Anthony Bullard said:

I think being able to do roc_start search SQLite and get a list of platforms that have documented SQLite support would be nice

Yes, that would be a great addition. The first thing I need to do to support that is a feature that is desperately needed anyway -- differentiation of packages which have the same name but different authors. I will get to work on that in preparation for integration with an index.

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:20):

I've refactored basic-cli and webserver and ssg so they're 90% of the way there now. I just figured it's probably too much to try the next step in this lot of changes.

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:21):

Ian McLerran said:

Anthony Bullard said:

I think being able to do roc_start search SQLite and get a list of platforms that have documented SQLite support would be nice

Yes, that would be a great addition. The first thing I need to do to support that is a feature that is desperately needed anyway -- differentiation of packages which have the same name but different authors. I will get to work on that in preparation for integration with an index.

I’d recommend using urls, and maybe username/repo shorthand for GitHub

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:21):

I might try and make something using a cross-platform thing and see if that works. Something like Locale which I dont think anyone is really using yet.

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:22):

Anyway, I'm off on a tangent :grinning:

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:22):

Luke Boswell said:

I might try and make something using a cross-platform thing and see if that works. Something like Locale which I dont think anyone is really using yet.

We need at least the concept of platform interfaces or some way for platform composition

view this post on Zulip Anthony Bullard (Dec 17 2024 at 19:23):

If I need a new feature, I should never be in the spot where I need to rewrite my app to use a new platform

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:26):

Anthony Bullard said:

I’d recommend using urls, and maybe username/repo shorthand for GitHub

Yes, I was also thinking username/repo. The tradeoff I'm looking at is how can I keep it as ergonomic as possible for cli use (so you don't have to memorize or type long qualifiers) while also avoiding conflicts and eventually also supporting sources besides github.

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:38):

Luke Boswell said:

One of the next major things I would like to explore for the ecosystem, is how these cross-platform packages will work in practice.

Luke are you referring to solving the issue of being able to include the url of a cross-platform package in a roc apps deps, and have roc not only download the tarball, but also be able to acquire non-roc dependencies, such as runtimes for other languages?

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:39):

No I'm not.

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:41):

For including the url for platforms, I proposed the roc init plugin. Not sure where we got to with that. Someone was working on it.

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:43):

See https://github.com/roc-lang/roc/issues/3139#issuecomment-2132530844

@Robin Camarasa is working on it.

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:43):

Hah, Im feeling dumb, but what is the issue regarding cross platform packages you wanted to solve then?

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:45):

Well not so much a known issue, just the vision that Richard outlined in the online meetup for roc-lang/path ... actually implementing that. No one has ever done it, and so I epect to find a number of issues along the way. Package imports, or module params may have bugs we dont know about that block it. So I guess the only way to know if it works with current roc is just to try it.

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:47):

https://roc.zulipchat.com/#narrow/channel/303057-gatherings/topic/Roc.20Online.20Meetup.20Aug.202024/near/464907794

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:48):

Wasn’t present for the meetup, but can I surmise this is more like platform dependencies, such that different platforms can use the same Path, etc? When you said cross platform, my mind was still on Hannes blended use of python and roc. Now I’m with ya lol

view this post on Zulip Ian McLerran (Dec 17 2024 at 19:48):

As in Modules that can be shared between roc platforms.

view this post on Zulip Luke Boswell (Dec 17 2024 at 19:53):

Yep, thats it. So to see if platform X supports Sqlite, we may be able to use that information somehow. Like maybe they platforms will need to import the package also so they can use the same Opaque wrapper types to be compatible

view this post on Zulip Robin Camarasa (Dec 18 2024 at 11:03):

Luke Boswell said:

See https://github.com/roc-lang/roc/issues/3139#issuecomment-2132530844

Robin Camarasa is working on it.

Concerning the roc init over the last 3 weeks I got distracted by advent of code and I don't expect much progress before mid January. If this is an urgent matter that slows down the roc project, I would totally understand that someone take over :smile:

view this post on Zulip Luke Boswell (Dec 18 2024 at 11:17):

Definitely not urgent - please enjoy AoC and the holidays :grinning_face_with_smiling_eyes:. Just linking to keep everyone updated.


Last updated: Jul 06 2025 at 12:14 UTC