@theteachr showed us the minimal TUI he wrote for the game and explained the game loop.
Highlights
Seq modulesCheckout Upcoming Meetups
Twitter: https://x.com/ReasonBangalore
We discussed the last pieces essential for a web framework - routers. Last session, we had written a router that worked only in the client. We ported for server side rendering.
Highlights
Checkout Upcoming Meetups
Twitter: https://x.com/ReasonBangalore
We discussed the gameplay, possible UI for the game, and went over the stack to implement the game.
Highlights
OCaml.opamCheckout Upcoming Meetups
Twitter: https://x.com/ReasonBangalore
AC Sreedhar Reddy led the session on HTML5 canvas tutorial in Reason. You can find the code (and specifically the commit) here. Follow the readme in the repo to setup the project.
Other topics that were discussed included,
Checkout Upcoming Meetups
Twitter: https://x.com/ReasonBangalore
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.
We will be continuing the Canvas tutorial, led by AC Sreedhar. More details here
Twitter: https://x.com/ReasonBangalore
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 sideWe used Melange compiler to compile Reason to JS, which is fed to webpack.
We use CssJs.render_style_tag() to generated server side rendered CSS to inject into the style tag.
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
We learn how to use a Router for this very same server Learn more about it here
Twitter: https://x.com/ReasonBangalore
We planned to continue the HTML5 canvas tutorial from Mozilla Developer Network, but discussed some fundamentals on abstractions first.
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)
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.
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
Twitter: https://x.com/ReasonBangalore
We discussed encoding the rules of the popular card game Monopoly Deal in OCaml's type system with @theteachr.
Highlights
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.
We will be continue last week's Canvas tutorial, lead by AC Sreedhar in a meetup. More details here
Twitter: https://twitter.com/ReasonBangalore
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.
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
Twitter: https://twitter.com/ReasonBangalore
I lead this discussion. Here are the highlights.
I created the following drawing with Figma to help visualise.
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
A webpack loader attempting this can be found here
This loader is used here on this website as a docusaurus plugin
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.
Twitter: https://twitter.com/ReasonBangalore