Dear community,
I had a coworker ask me today if I had some examples of some well-known/often-used/big-tech/popular/insert-your-fancy-here web apps in the wild that he could look at to get an idea what it feels like to look at something built with Elm. I find it not so easy to answer, so I’m turning to you for help. What are some great examples of Elm used in production that people can look at on the web?
thanks for your help 
Michi
The interactive examples on https://brilliant.org/ are done in Elm.
https://app.vendr.com is built with almost entirely Elm (I just removed another JS dependency as I was writing this). You can access it by signing up for free here https://www.vendr.com/ if you want to check it out.
Last I checked we were still over 600k loc of Elm for the main app, and growing despite being very proactive at deleting dead code.
I don’t know where in their apps, but https://www.rakuten.com/ uses Elm. @lucamug might be able to elaborate.
There’s a list of companies using Elm in production. Some of them have GitHub repositories listed for having a quick look around.
We are using elm since 5 years for LiaScript an interactive Markdown for education … People tend to think that the raw text-file is somewhere compiled on a server, but it is actually interpreted directly within the browser …
I don’t know where in their apps, but https://www.rakuten.com/ uses Elm. @lucamug might be able to elaborate.
Yes, the registration and authentication section: 登錄 - Rakuten
I just stumbled on Elm 2022, a year in review which contains a wealth of information. There is also a list of companies at the end that use Elm, so maybe that’s a thread to pull on.
Simple website built entirely in Elm https://val.safetrack-public.bayer.com/.
Here are some e-commerce sites we built with Elm.
We also write e-commerce software, here are a couple of example sites:
The larger part of our code base is actually the admin panel the store owners use to administer their business, but obviously only each store owner can access their own admin site.
Thank you all for chipping in, that’s a huge well of inspiration!
@michi-zuri Built with Elm has a large collection of open source and commercial applications.
P.S. @albertdahlin @allanderek Please feel free to submit any relevant applications to Built with Elm.
I can’t imagine what would require that much code. Do you have a rough idea of how that breaks down?
600k loc for me is kinda medium sized compared to other projects in my career. The largest single app I’ve worked on was 1.5M loc, and it had sister repos of multiple millions of lines each.
As for Vendr, a fairly large portion of our main Elm app is generated by elm-gql. Though I much prefer that to needing to hand write all of the queries and decoders. The majority though is hand written.
We also generate code related to images and icons, e.g. Figma.Icon.chevron is generated from our Figma designs and Image.Foo.hero would correspond to assets/images/foo/hero.png. These help a ton with removing unused assets as well as never using an asset incorrectly (including typos). There’s also some codegen around feature flags and other tiny things.
As for the hand written code, a large portion of that is the individual pages of the app. E.g. if you signed up today and went to the buyer guide for a supplier (e.g. Slack) that code is (rough guess) 6k loc. Add that up across 20ish pages and you’re up to 120k loc. I think we have closer to 40 pages (rough guess), which range from 50 loc to 8k loc, so the 120k is a very rough guess.
We then have a fair amount of view code for taking a generated enum (generated from GQL) and displaying it nicely for the user (CreditCard → Credit card).
We have a lot of code around tables, forms, tracking, auth, and then finally the glue to tie it all together. Oh and we have a lot of UI code too that ties to CSS.
You could compare our app to a fairly old/rough version of Elm Land + elm-ui + GitHub - ryan-haskell/css-in-elm: Write normal CSS, then generate an Elm module with all your class names. (without the automated part). It definitely predates Elm Land, but shares some of the structure. Not certain if it predates elm-ui, but it shares a lot of the same patterns around columns, rows, and very rarely using Html directly in favor of our own internal Ui. It definitely predates ryan-haskell/css-in-elm too but shares the idea of have an Elm value that corresponds to a CSS class, e.g. I’d write UI.fontColor.primary instead of Html.Attributes.class "font-color-primary".
Hope that gives a good overview.
At Talenteca we moved from TypeScript to Elm since more than 5 years ago for our internal apps and some of our public apps, you may give it a check at:
https://www.talenteca.com/precios
Each one is an SPA web app developed with Elm and elm-ui
So far we have 114k lines of Elm code and counting.
What do you use for the routing between pages ?
Our page setup is like Elm Land but older and less refined.
We are using elm-app-url for routing, it’s just brilliant !! … here a talk about it at Elm Ratio → 077: elm-app-url with Simon Lydell
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.