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):
wow, this is DEFINITELY the first-ever production use of Roc for a user interface! :smiley:
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've wondered if it's worth polishing the demo a bit with examples and documentation so people could use it for front end roc.
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.
I would have it be just like Elm's HTML package
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)
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
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.
I changed the HTML and attributes to be Elm-style. I’ll check with the client if I can publish the platform code :ok:
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.
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
Did you explore using a record instead with optional record fields?
Something Like in this gist
Snyggt!
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
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!
@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.
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.
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!
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.
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.
This could be https://github.com/roc-lang/basic-cli/issues/82
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?
If you don't hit Undefined Symbol in relocation
you should be fine for the rest with the surgical linker
With the PI basic-cli we should be able to put this args issue behind us, soon :fingers_crossed: :grinning:
I’d love to pair this with a Go style “search index” for roc packages/platforms. Implemented in Roc of course
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
Hannes has built one of these
https://hasnep.github.io/roc-packages/
How do you get on there?
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.
This seems to use a centralized registry (like the Excite of search engines). I want the Google analog
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”
Yeah, I am seeing platforms, packages and apps in the json data, but it doesn't appear to be comprehensive.
@Ian McLerran let me know if you would be interested in collaborating
@Anthony Bullard Absolutely! I am definitely interested.
Sweeeeeet
@Hannes would probably be happy to update his registry. :wave:
I think being able to do roc_start search SQLite
and get a list of platforms that have documented SQLite support would be nice
Or roc_start docs moduleName
and it opens your browser to the correct version of the package docs
Yeah, Hannes just needs to update the data and found a way to replace his Python script with something more sophisticated
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.
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'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.
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 niceYes, 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
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.
Anyway, I'm off on a tangent :grinning:
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
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
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.
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?
No I'm not.
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.
See https://github.com/roc-lang/roc/issues/3139#issuecomment-2132530844
@Robin Camarasa is working on it.
Hah, Im feeling dumb, but what is the issue regarding cross platform packages you wanted to solve then?
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.
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
As in Modules that can be shared between roc platforms.
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
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:
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