We continued the development of our Dream powered Server Side rendered React components (without node.js) with routes. This meet-up, it was client side only. In a future meetup, we plan to make the router work with both server and client.

There was interesting discussion on SIMD/Vector programming and Mirage OS distribution that doesn't use libc.

Next Meetup​

We will be continuing the Canvas tutorial, led by AC Sreedhar. More details here

Stay in touch with us
​

Twitter: https://x.com/ReasonBangalore

Discord: https://discord.com/invite/Ytr36fRC4C

We continued the development of our Dream powered Server Side rendered React components (without node.js) with styled-ppx

styled-ppx working only on Client side​

Commit

We used Melange compiler to compile Reason to JS, which is fed to webpack.

Making sure it works on server side.​

Commit

We use CssJs.render_style_tag() to generated server side rendered CSS to inject into the style tag.

Dynamic CSS props​

Commit

This was uncharted territory. Thankfully, @davesnx had given a heads-up! The CSS rendering, render_style_tag must be called only after React components are rendered.

Join us on Discord if you'd like to learn more about this.

We contributed some documentation too! You can find the pull request here

Next Meetup​

We learn how to use a Router for this very same server Learn more about it here

Stay in touch with us
​

Twitter: https://x.com/ReasonBangalore

Discord: https://discord.com/invite/Ytr36fRC4C

We planned to continue the HTML5 canvas tutorial from Mozilla Developer Network, but discussed some fundamentals on abstractions first.

Abstractions that can break the OCaml typechecker​

Patatruder shared the following cool snippet

let f1 x f = f x x
let f2 x = f1 (f1 x)
let f3 x = f2 (f2 x)
let f4 x = f3 (f3 x)
let f5 x = f4 (f4 x)
let f6 x = f5 (f5 x)

Abstractions that turn functions into lego blocks​

As we started with the tutorial, we ran into the option type. Some of us were immediately reminded of monads. We decided to digress and revisit the topic. Here' what came out of it. (Thank you, Patatruder for the snippet).

let ( let* ) = Result.bind
let ( and* ) r1 r2 =
  match r1, r2 with
  | Ok r1, Ok r2 -> Ok (r1, r2)
  | Error e, _ | _, Error e -> Error e

let split s =
  match String.split_on_char ' ' s with
  | [first; second] -> Ok (first, second)
  | _ -> Error ["split"]

let single_convertion = function
  | "one" -> Ok 1
  | "two" -> Ok 2
  | "three" -> Ok 3
  | "four" -> Ok 4
  | "five" -> Ok 5
  | "six" -> Ok 6
  | "seven" -> Ok 7
  | "eight" -> Ok 8
  | "nine" -> Ok 9
  | "zero" -> Ok 0
  | _ -> Error ["single_convertion"]

let catch cause result = Result.map_error (List.cons cause) result

let int_convertion (first, second) =
  let result =
    let* f = single_convertion first
    and* s = single_convertion second in
    Ok (f, s) in
  catch "int_convertion" result

let division (a, b) =
  if b = 0 || a mod b <> 0 then Error ["division"]
  else Ok (a / b)

let add (x, y) = x + y

let pipeline s =
  let result =
    let* split = split s in
    let* converted = int_convertion split in
    let* divided = division converted in
    let result = add (divided, 6) in
    Ok result in
  catch "pipeline" result

let result = pipeline "ninea eightt no"

Join us on Discord if you'd like to learn more about these examples.

We discussed package managers and dev tooling post the session.

Next Meetup​

We learn how to style our server rendered React components (with a server implementation that doesn't need Node.js). Learn more about it here

Stay in touch with us
​

Twitter: https://x.com/ReasonBangalore

Discord: https://discord.com/invite/Ytr36fRC4C

We discussed encoding the rules of the popular card game Monopoly Deal in OCaml's type system with @theteachr.

Highlights

• Briefly discussed the gameplay.
• Incrementally built modules around relevant data structures.
• Explored whether constructors could clash.
  • Initially, the general understanding was that it wouldn't work. Either the compilation would fail, or one of them would not be usable. But found out that it will just need some extra [type] hinting on some occasions to get the correct type.
• Focussed on the principal of making invalid states impossible to represent.
• Created an incomplete game state just to start getting some feedback.

You can find the code on Github

Once again, the discussion after lasted an hour. Srijan Paul shared how dithering in images can improve GIF color depths.

Next Meetup​

We will be continue last week's Canvas tutorial, lead by AC Sreedhar in a meetup. More details here

Stay in touch with us
​

Twitter: https://twitter.com/ReasonBangalore

Discord: https://discord.com/invite/RamP7SCKcU

The most interactive meetup in while! 30 minutes past the set meetup time, and discussions still did not end. We had to take it over to a Discord voice channel.

We had a very interesting mix of hobbyist OCamlers, static analysis engineers and newcomers discussing what OCaml is and how it compares to Java, Scala and others. As an organiser, I usually set aside 15-20 minutes, before and after the planned discussions, for free-form discussions. This one happened to be the most lively one. We shared important links on this Discord thread

We, then, proceeded to live-code the HTML5 Canvas game tutorial on Mozilla Developer Network but with Reason. The code can be found here.

Next Meetup​

We couldn't cover the entire tutorial. So, it will be continued by AC Sreedhar in a future meetup. More details here

Next weekend, we'll be discussing Nikhil Bijapur's Monopoly Deal, a card game. We plan to learn how this game was built with OCaml and live-code with him. Details can be found here

Stay in touch with us
​

Twitter: https://twitter.com/ReasonBangalore

Discord: https://discord.com/invite/RamP7SCKcU

I lead this discussion. Here are the highlights.

High-level overview of the compilers internal pipelines.​

I created the following drawing with Figma to help visualise.

Compiler commands to produce JS artifacts (without a build system).​

We need a sandbox with melange, reason and ocaml compiler.

{
  "dependencies": {
    "ocaml": "5.x",
    "@opam/reason": "*",
    "@opam/melange": "*",
    "@opam/ocaml-lsp-server": "*",
    "@opam/ocamlformat": "*",
    "@opam/ocamlformat-rpc": "*",
    "@opam/dot-merlin-reader": "*"
  }
}

Simple hello.ml with just one print_endline can be compiled with

esy melc ./hello.ml

If Belt is added to the hello.ml, path to melange libaries need to be included with -I flag

esy melc -I /Users/username/.esy/3__________________________________________________________________/i/opam__s__melange-opam__c__4.0.0-51-9d2a6c24/lib/melange/belt/melange ./hello.ml

To compile Reason files, -pp refmt --print binar is needed

esy melc -pp 'refmt --print binary' -impl hello.re -o hello.js

If a package were to be imported, then ocamlfind would be used to figure the include path

How all this knowledge could be used to implement a webpack loader.​

A webpack loader attempting this can be found here

This loader is used here on this website as a docusaurus plugin

Next Meetup​

Next, we use the webpack loader and continue working on the bare bones game demo running here. No prior knowledge needed other than basic HTML5 Canvas. Not even this meetup's discussion.

Stay in touch with us
​

Twitter: https://twitter.com/ReasonBangalore

Discord: https://discord.com/invite/RamP7SCKcU

I led the session today. We managed to,

1. We'll be replace the hello world html printing router in from the last session on Dream, with a server side rendered Hello World react component.
2. Replace the hello world component with a simple click counter
3. Setup frontend stack: the react component in the previous step will be compiled to JS with Melange and bundled with Webpack.
4. See React component hydration at work from a natively compiled website that rendered the react component

We were joined by organisers of two other communities, Anupam from Functional Programming, India and svs from The Engineering Org

Next meetup: May 26th, 2pm.​

We learn how Melange compiler works with a build system to generate JS artifacts. We see how webpack-reason-loader was built and try to integrate it with this website here You can find the code repository on Github org. You can reach out me on X at @ManasJayanth if you have any trouble. I recommend you set it up and install the dependencies to save time during the call :)

Please reach out to us on Discord if you're lost setting up the tools.

Stay in touch with us
​

Twitter: https://twitter.com/ReasonBangalore

Discord: https://discord.com/invite/RamP7SCKcU

Shakthi Kannan introduced us to how the ocaml.org website is built.

You need to first install Opam (OCaml Package Manager) on your system, and a demo video is available.

The OCaml.org website sources are at OCaml.org. After cloning the repository, you need to run:

$ make switch
$ make start

A dashboard of good-first-issues to contribute to the OCaml.org web project are available.

We had a casual round of discussion about embedded systems as some of the attendees write embedded software for a living. Of course, mirage.io came up!

Next meetup: May 19th, 2pm.​

We continue where we left off last weekend. You can find the code repository on Github org. You can reach out me on X at @ManasJayanth if you have any trouble. I recommend you set it up and install the dependencies to save time during the call :)

Setting up OCaml and Reason tools isn't easy for everyone. Please reach out to us on Discord if you're lost setting up the tools.

Stay in touch with us
​

Twitter: https://twitter.com/ReasonBangalore

Discord: https://discord.com/invite/RamP7SCKcU

We wrote a Dream web server with a hello world route - ie. you curl and get the string “hello, world” from the “/“ endpoint. We started from scratch, empty directory even, and worked our way up. We intend to continue this series, so if you like to catch we what we have so far, here’s what we did so far.

We,

1. Created a package.json to install a local compiler and build system ( Dune ).
2. Initialised a project with dune init proj reason_ocaml_dev.
3. Ran the hello world setup by Dune for us with the dune exec command.
4. Installed ocaml-lsp-server, ocamlformat and reason syntax extension
5. Referred to https://github.com/ManasJayanth/fullstack-reason-react-demo and wrote the first Dream route (I had never written one before). Made mistakes, saw type errors in action, fixed and for the hello world Dream web server to work.

We have two talk proposals for next meetup, either,

1. @shaktimaan introduce us to some more Dream fundamentals and help us understand @ocaml_orgs website.
2. Kaushik Hatti will show us getting started with Ocsigen so we can compare notes/experience.

So, we’re meeting up (online) again this Sunday. At 2pm IST. 


Code​

You can find the code we wrote so far on our Github org. You can reach out me on X at @ManasJayanth if you have any trouble.

Stay in touch with us
​

Twitter: https://twitter.com/ReasonBangalore

Discord: https://discord.com/invite/RamP7SCKcU

As planned, we're meeting again virtually this Sunday, May 5th. It's a super casual online meet where we live code a web server in OCaml and help each other learn OCaml.