Story telling in how it feels to taste ReasonML syntax to build the user interface of a website
ReasonML, what food?
ReasonML (do not read as Reasons for Making in Love), if I quote from the words of Mas Riza on his blog published here ↗️ is a syntax that is above the other language called OCaml ↗️. ReasonML can be a language compiled-to-js with BuckleScript ↗️ help so that ReasonML can ultimately be directly compared to TypeScript nowadays.
A classic reason for learning ReasonML
Each person must have a reason why they want to learn this, or the reason why to use this and that. Mas Riza has also explained some general reasons that you can take as a motivation for learning ReasonML this year or next year (if there are still exist 🤣).
For me personally, some classic reasons why you should study ReasonML this year include:
This could be a powerful reason for those of you who are easily saturated with a technology, learning things that are not yet on the market can give different satisfaction to the process. Even if the technology ultimately has a good development going forward, then you can be grateful for taking steps to learn earlier.
Facebook Centric Development
It is well known that in the developer environment there are often different “religion” of thought between one developer and another developer, where usually the taking of the religion” influences the selection of supporting technologies around them which will be adapted to the religion” they hold.
Facebook is one of the center of attentions that lately shows a very good sign in supporting the developer environment. Lot of tools, frameworks, technology and even documentation related to various Facebook output technologies that are opened as open codes. Following the religion” of Facebook is certainly not a wrong thing, where at least we can hide behind the big names and consistency of Facebook in maintaining various open code projects.
ReasonML is also known to be maintained by a Facebook team that can provide more guarantees for future development and adoption.
ReasonML which took the basic language from OCaml benefited from its Type System which was quite mature and battle tested, plus the ability to guess a data type from any data without the need to define type directly (read: Type Inference) making ReasonML excess in type system is more complete.
OCaml is indeed a language that basically uses a functional paradigm so that ReasonML inherits this trait. For friends who want to learn a language with a functional paradigm but not too strict, then ReasonML is one of the best choices for friends to start.
Who has used ReasonML?
Not many ReasonML users in the world, but several large companies have started adopting it in their production. In Indonesia itself, it seems that Ruangguru ↗️ seems to dare to openly use ReasonML in production.
How I learn ReasonML
I am not a person who likes syntaxing learning because to be honest this is actually the most boring and easily forgotten for me personally. If you read the official documentation ↗️, you will find various complete explanations and examples of various basic syntaxes such as explanations of various data types, tuples, records, variants and so easily. Unfortunately reading this section will not have much effect on me, a minute later I have forgotten.
If you like to learn syntax first, you can go to ReasonML Playground ↗️ so you can try syntax without the need for installation first.
I prefer to see the real world examples of applications that have been made using ReasonML, and thankfully the main page has even been given a link, one of which leads to the HackerNews project ↗ created using ReasonML and React.
I decided to see and learn how ReasonML could be combined with React to build a website interface through the HackerNews project above.
Creating your own project is based on a project that has become easier for me to go through various steps to setup a project which is usually quite time consuming at the beginning. I made a simple project https://github.com/mazipan/ghibli-reasonreact ↗️ which I would like to do more or less I will make two pages namely the listing page and the detail page , the data will be retrieved from public APIs provided by third parties.
What I have learned so far
Specifies the data type
Because it’s type safe, so we have to know how to make the correct data type to be effective. Although at ReasonML we hardly need to mention the type of data needed for each function created, but ReasonML will always check the validity of the data types used in each build.
Of course my first project was very fast, far from being true. Including determining the data type, like there is one part that I specify using a List even though it should be more effective when using a Map. I also have to make definitions of data types from various responses that I take from third parties to be easy when read elsewhere.
The unseen “return”
For you who are familiar with React should be used to working with immutable data, but not me who usually uses Vue as the main framework everyday. Vue who puts forward Reactivity becomes difficult for immutable data implementation. In ReasonML this is natively supported by the language, although actually we can still change the value of the variable using the
ref of that variable.
“Hooks” support by default
Reason with ReasonReact by default supports and recommends using Hooks on its components, forcing us indirectly to learn and use more of these features.
Syntx differences in the Life Cycle
If in React we use
componentDidMount in ReasonReact we can use
didMount. Yes, just the difference in syntax. But it can be quite confusing at the first time. Here are some life cycles supported at ReasonReact:
Read more here ↗️
Managing the directory structure in the ReasonML project
Initially I followed the example on HackerNews which implemented Flat Structure where all files were in the same directory, but it did become “dirty” and messed up as more files were inside.
I have yet to find the right reference for learning about the correct conventions and are commonly applied in ReasonML, such as using cases whether using camelCase or kebab-cases. While based on the code that was pushed by Muhammad Ridho Assuryadi ↗️ himself still uses these two different things in several places.
Later I will update this post if I have found the right reference for this.