I’m looking into getting more into a full stack web development. I do lots and lots of backend services but I really would like to cross the region to the frontend as well and I would like to avoid as much JS as possible. Htmx caught my attention but I still need some frontend code for more dynamic parts of my webapp. This can be pure JS or wasm. How does OCaml perform at this kind of situation? My ideal scenario would be something like OCaml + Htmx for most pages and at some pages some kind of compilation to JS or wasm for the dynamic parts.
I recommend checking out my library to write HTM especially as it ships with the htmx attributes out of the box: GitHub - yawaramin/dream-html: Generate HTML markup from your OCaml Dream backend server
If you want to compile to JS, there are a couple of options. The first and simplest one you should probably look at is ReScript. It’s an OCaml derivative that has been modified to look more like TypeScript while keeping the compile speed and type safety of OCaml. There are a couple of other options but I’ll let others give details about those.
Lastly, for slightly more client-side interaction than what htmx does, check out AlpineJS, which is a library which uses attributes similar to htmx but is frontend only. It can probably give you a lot more functionality with very little custom-written JS.
However if you don’t want to lose your time I’d personally advise to steer away from js_of_ocaml FFI and browser APIs and use
brr instead which is an order of magnitude more ergonomic and documented. But I’m biased.
Also if you want to get an idea on how that could look like you can have a look here (though I’m not happy with all the way the code looks like there :-). This is a fully working and actively used application that closely matches the description of what you are after. It’s a basic CRUD app not using
htmx but a derivative that tries to address some of its shortcomings, along with a little tiny bit of custom front end code. Though they will eventually be, not every library I’m using there is formally distributed yet, so you may have to use other components but it can give you an idea.
The Ocsigen project provides a full set of tools for full stack Web development, among which:
- Js_of_ocaml, a compiler from OCaml to JS
- Eliom, a 100% full stack Web framework (traditional Web programming + integrated client/server programming, generation of pages either on server or client, mobile apps for Android and iOS)
- Ocsigen Toolkit, a set of client-server widgets for Web and mobile applications
The project is mature and used by real world applications (especially Be Sport).
You can find the main documentation here
And, a little shameless plug, we are currently developing a minimalist solution (based on several proven building blocks from the OCaml community) for building web applications with OCaml, easily:
- GitHub - funkywork/nightmare: A set of components that fit, a priori, relatively well with the web framework (OCaml) Dream to try to build, at best, and quickly, dynamic web applications.
which covers the backend (currently, above Dream) and the frontend (above Js_of_ocaml and an overlay to OCaml-vdom and Tyxml) which allows you to quickly create APIs and clients (we are currently working on the abstraction of forms)
- GitHub - funkywork/yourbones: A companion library for writing applications on Tezos (in OCaml)
Even if it’s not entirely related to web development, blockchains can act as a 4th tier, and this library (WIP) works well with Nightmare to interact with Tezos (example).
Last year, we developed a forum in OCaml: GitHub - xvw/muhokama: A simple forum built on top of Dream, Caqti, Omd, Preface, Cmdliner and other useful OCaml libraries which proves that OCaml is perfectly suited to web development, and the proposals made by my predecessors show that in addition to being suited, OCaml is effective (I know of few frameworks as ambitious as Ocsigen for example, which at the time and still today is particularly revolutionary).
Have a look at Reason, ReasonReact and Melange: ReasonReact is back (and powered by Melange) · ReasonReact
Ahrefs is built with Melange: https://medium.com/ahrefs/ahrefs-is-now-built-with-melange-b14f5ec56df4