Welcome to Ceramic Hacker

Hi, I'm Alexander (Sasha) Skvortsov. I'm a computer science and math major at Penn State. I'll be using this blog to share some of my projects and thoughts, mainly focused around software engineering and pottery.
Return to blog overview
BlogOCaml WebDev

[1/x] Full-Stack WebDev in OCaml Intro

Tl;dr: I built a simple full-stack web app entirely in OCaml, mainly using Bonsai, Dream, and GraphQL for a class project. This article series will go through how I designed it, and is intended as a resource for others considering OCaml for their next web project.

Last semester, I took Penn State's CMPSC 431W, where our final project was to build a database-driven web application. Since I'm fairly familiar with web programming through my work on Flarum and past internships/side projects, I decided to use this opportunity to explore the OCaml web development ecosystem.

OCaml is somewhat unconventional for web development. Neither it, its web frameworks, or the related Reason/Rescript languages show up on the latest StackOverflow Developer Survey. While there's a decent number of companies that use it for web development internally, it's not nearly as widespread as JavaScript, PHP, Python, Ruby, C#, or the other top web languages. So why did I decide to do this project in OCaml?

  • Fundamentally, a web server backend is a function that takes the current session, path, and some GET/POST arguments, and returns some response to the browser, usually in the form of HTML or JSON. Along the way, it might perform some side effects such as querying a database or pinging an external API. Philosophically, this feels like a great fit for a functional programming language, and OCaml is the functional programming language I'm most comfortable with, although I'm far from an expert.
  • The recently-released Dream framework seemed to be based on this vision of web backends, so I was curious to try it out.
  • OCaml has a very powerful and flexible type system, and prioritizes functional programming while supporting imperative/OOP code where that would be cleaner. Altogether, it's a great programming language.
  • I wanted to try a frontend web language that wasn't JavaScript or TypeScript, and OCaml has pretty good frontend support through JS of OCaml, among other tools.
  • Last summer, I used functional React with the Recoil state management library for my internship. I really liked the core idea of having an incremental computation graph orthogonal to the component tree. The OCaml Bonsai UI framework, which I first learned about through the Signals and Threads podcast, seemed to have a similar design philosophy.

Project Overview

The required features of this project were determined by our course professor. Essentially, we had to build a prototype of an e-commerce site for students and local vendors at a university. The required features were:

  • Login / logout functionality for a pre-determined set of users.
  • A page where logged-in users can view account information, and reset their password. Note that different types of users (sellers vs buyers) see different categories of information.
  • A page where users can browse listed products via a hierarchical category view.
  • A page where sellers can create/edit their product listings

There were additional optional features we could implement, but I didn't get to those since most of my time went to figuring out the frameworks/libraries I was using.

A live demo of the project is available at cmpsc431.ceramichacker.com (only works on Chrome for now). It's not super pretty, has nonsensical testing data, and is missing a lot of features, but I think it showcases how Bonsai can be used for a modern website. For login, use one of the email/password combinations in this file. I recommend using one of the emails from this file or this file, as those users can also demo create/update functionalities. I'm not actively monitoring the demo, so please be respectful.

Article Series Overview

Source code for my project is available on GitHub. The README includes an overview of the tech stack, a detailed explanation of how the repository is organized, as well as some discussion on interesting parts of the project and reflections on the experience.

The purpose of this article series is to provide a guided tour of main parts of my project, hopefully imparting an understanding of what web development in OCaml looks like. I'm assuming you're familiar with OCaml syntax and some (very) basic web concepts; if not, the Real World OCaml book and this medium article are good places to start. I'm currently planning to include the following articles:

  1. Project Intro (this article)
  2. Intro to using Dream (backend framework) and Caqti (SQL library)
  3. Setting up a GraphQL server with Dream
  4. Basic Bonsai setup (frontend framework)
  5. An introductory explainer of Bonsai and its underlying concepts. In particular: SPAs, Monads, Algebraic Effects, Incremental Computation.
  6. Building a simple GraphQL client in Bonsai
  7. Basic routing in Bonsai

The blog posts will include abridged/simplified versions of the project's code, and will go over the "main parts". Hope this is helpful, please feel free to reach out with any questions, comments, or suggestions!

Next article

Comments (0)

Tl;dr: I built a simple full-stack web app entirely in OCaml, mainly using Bonsai, Dream, and GraphQL for a class project. This article series will go through how I designed it, and is intended as a resource for others considering OCaml for their next web project.

Last semester, I took Penn State's CMPSC 431W, where our final project was to build a database-driven web application. Since I'm fairly familiar with web programming through my work on Flarum and past internships/side projects, I decided to use this opportunity to explore the OCaml web development ecosystem.

OCaml is somewhat unconventional for web development. Neither it, its web frameworks, or the related Reason/Rescript languages show up on the latest StackOverflow Developer Survey. While there's a decent number of companies that use it for web development internally, it's not nearly as widespread as JavaScript, PHP, Python, Ruby, C#, or the other top web languages. So why did I decide to do this project in OCaml?

  • Fundamentally, a web server backend is a function that takes the current session, path, and some GET/POST arguments, and returns some response to the browser, usually in the form of HTML or JSON. Along the way, it might perform some side effects such as querying a database or pinging an external API. Philosophically, this feels like a great fit for a functional programming language, and OCaml is the functional programming language I'm most comfortable with, although I'm far from an expert.
  • The recently-released Dream framework seemed to be based on this vision of web backends, so I was curious to try it out.
  • OCaml has a very powerful and flexible type system, and prioritizes functional programming while supporting imperative/OOP code where that would be cleaner. Altogether, it's a great programming language.
  • I wanted to try a frontend web language that wasn't JavaScript or TypeScript, and OCaml has pretty good frontend support through JS of OCaml, among other tools.
  • Last summer, I used functional React with the Recoil state management library for my internship. I really liked the core idea of having an incremental computation graph orthogonal to the component tree. The OCaml Bonsai UI framework, which I first learned about through the Signals and Threads podcast, seemed to have a similar design philosophy.

Project Overview

The required features of this project were determined by our course professor. Essentially, we had to build a prototype of an e-commerce site for students and local vendors at a university. The required features were:

  • Login / logout functionality for a pre-determined set of users.
  • A page where logged-in users can view account information, and reset their password. Note that different types of users (sellers vs buyers) see different categories of information.
  • A page where users can browse listed products via a hierarchical category view.
  • A page where sellers can create/edit their product listings

There were additional optional features we could implement, but I didn't get to those since most of my time went to figuring out the frameworks/libraries I was using.

A live demo of the project is available at cmpsc431.ceramichacker.com (only works on Chrome for now). It's not super pretty, has nonsensical testing data, and is missing a lot of features, but I think it showcases how Bonsai can be used for a modern website. For login, use one of the email/password combinations in this file. I recommend using one of the emails from this file or this file, as those users can also demo create/update functionalities. I'm not actively monitoring the demo, so please be respectful.

Article Series Overview

Source code for my project is available on GitHub. The README includes an overview of the tech stack, a detailed explanation of how the repository is organized, as well as some discussion on interesting parts of the project and reflections on the experience.

The purpose of this article series is to provide a guided tour of main parts of my project, hopefully imparting an understanding of what web development in OCaml looks like. I'm assuming you're familiar with OCaml syntax and some (very) basic web concepts; if not, the Real World OCaml book and this medium article are good places to start. I'm currently planning to include the following articles:

  1. Project Intro (this article)
  2. Intro to using Dream (backend framework) and Caqti (SQL library)
  3. Setting up a GraphQL server with Dream
  4. Basic Bonsai setup (frontend framework)
  5. An introductory explainer of Bonsai and its underlying concepts. In particular: SPAs, Monads, Algebraic Effects, Incremental Computation.
  6. Building a simple GraphQL client in Bonsai
  7. Basic routing in Bonsai

The blog posts will include abridged/simplified versions of the project's code, and will go over the "main parts". Hope this is helpful, please feel free to reach out with any questions, comments, or suggestions!

20 days later
Write a Reply...