Building React apps with ReasonML, a strongly-typed functional language

Image for post
Image for post

Recently I’ve been experimenting with ReasonML (also known as BuckleScript or ReScript), a functional strongly-typed language that is based on OCaml. The appealing thing about ReasonML is that it is a strongly-typed language that is easy to learn like JavaScript but doesn’t have a lot of the quirkiness that JavaScript does. Code written in ReasonML is easily converted into JavaScript, and so ReasonReact is a framework that lets you build React apps in ReasonML.

Building a Sample App

ReasonML code in ReasonReact is converted to JavaScript using tools that come as a part of the BuckleScript/ReScript platform, which you can easily install using npm:

An essay about the importance of continual learning

Image for post
Image for post
Image courtesy of Max Pixel

I’ve been writing React code now for almost two years as my full-time job, and one thing that I’ve learned in those two years is that there are better ways of doing things coming out almost every couple weeks. The worst thing you could possibly do as a React developer (or as any type of developer, really) is to just keep doing things the same way year after year.

When I started writing apps, I used class-based components and they were enormous. Every aspect of the page was encoded in logic in a single big component (each button was a component, but any code for the buttons was included inside the main component somewhere). …

Image for post
Image for post
Image courtesy of Max Pixel

It’s my birthday, and I’ll spend it learning a new framework if I want to. Really, that’s actually what I did. Why? Because I never want to stop learning, and today it really paid off. I had heard about NextJS in passing, but I hadn’t had time to really look at it in depth. So when I had a Saturday to kill on my birthday, it was the perfect chance.

So what is NextJS? You can think of it as a framework to help bootstrap React applications to get you up and running quickly. More than that, though, it has made doing some advanced techniques in React, namely static and server-side rendering, really easy to do. If you aren’t aware of what these things are, that’s really ok. Most simple React applications don’t necessarily need them, but as you scale up to thousands or millions of users, you are going to want to optimize what you have to send to them (see https://nextjs.org/docs/basic-features/pages

Image for post
Image for post
Image courtesy of Max Pixel

I have been writing React applications now for just over a year, and in that time, my approach to writing those apps has changed quite a bit. At first, I was just using the basics — write a component for a button, write a component for some text, write a component for a modal. At the heart of it, this is all that React was really intended for anyway.

Then I started learning about state and the way to make UIs adapt as the user interacted with it. We wrote large class based components that implemented whole pages with a bunch of state that was stored when the user would fill out information. This was great, but it started getting us into some trouble. …

Image for post
Image for post

Thanks to the social distancing that people here in the US had been doing (in spite of the lack of effort from the federal government), the cases in the US had hit a peak in May, but then started going down. It looked like we were headed in the right direction, but doctors and scientists were advising that we weren’t ready to start re-opening quite yet.

Trump and the GOP didn’t agree. They saw economic disaster. The virus was affecting people in other ways as they were laid off from work and having to live off a much smaller unemployment wage. There was some talk about how the older generations would likely go (some called it sacrificing for the common good) and it was more important to save the economy than protect these older folks. …

Image for post
Image for post
Image Courtesy of Max Pixel

This year hasn’t come close to anything I would have expected in my wildest dreams. It started out fairly normal, back in January. My birthday, my wife’s birthday, and the kids birthdays are all during the winter, so along with Christmas, it tends to be a really festive season with lots of gift giving.

Then March came, and with that came Spring Training. Being a Red Sox fan, I wasn’t terribly optimistic about our chances this year, especially with the Yankees picking up Cole during the offseason, but I still love our team, even though we definitely have lost some of that youthful swagger that helped us win it all just two years ago. …

Using the React Game Engine to Quickly Build Interactive Games

Image for post
Image for post
Image Courtesy of Max Pixel

Recently, I discovered the React Game Engine. It is based upon a game engine that was written for React Native, but is a little simpler. This was really exciting for me, as I've been wanting to build games for a long time, but I've often found the bar of entry for writing games to be rather high. When I read how easy this engine was to use, I immediately decided to build a game that I had built previously in college, namely Anti-Chess.

Anti-Chess

So what is Anti-Chess? Well, it is just like regular chess (all the pieces have the same general moves) but instead of attempting to checkmate the opponent’s king, the goal is instead have your own king checkmated. There is one major twist in the rules that makes this possible — if you can take a piece, you must. With this rule, you can put your pieces in strategic positions in order to draw your opponent’s attackers across the board and hopefully end up in a place where your king cannot escape (because you still have to move your king out of check if possible). …

Image for post
Image for post
Image Courtesy of Max Pixel

I Always Strive for Perfection

Writing software to meet the requirements of my business partners is my job. A lot of people do what I do, to varying degrees of success. Some people write software with the objective of getting the task done and moving on to the next task. In other words, treat it like any job where the goal is to finish all the work in the backlog.

Every day, homes are built around the world, and most of them are not examples of perfection — they are built as inexpensively as possible while maintaining a reasonable level of quality. Achieving perfection in building houses would make building them take considerably longer and since it is largely a job of manual labor, it would cost significantly more. People don’t need perfection when it comes to homes — they mostly need them to be functional and safe. …

Image for post
Image for post
Image Courtesy of Max Pixel

People like Spaghetti, not Spaghetti Code

If you are like me, you don’t like code that starts getting messy and makes a simple component into a maintenance nightmare. Recently our team has been going through an evolution in how we build our components, and it has resulted in our application becoming much easier to maintain and more adaptable to changing requirements. React Component files are now largely about reading state and building a view, and firing off actions. That’s pretty much it.

So where did all the business logic go? Well, we started using Redux Thunk to streamline our components. You can read a lot about what it does there, but the purpose of this article is to tell you why you want to do things this way. A lot of you already use Redux, but if you were like us a few months ago, you were largely using it just to update state and read that state later. The first great thing about Redux Thunk is that it really lets you use Redux more for what it was intended to be — a way for components to fire off actions that result in the state being updated. …

Image for post
Image for post
Image Courtesy of Max Pixel

Like many of you out there, I’ve been quarantined to my house for the past month. I’m fortunate to work in an industry where doing my job is sometimes easier to do from home, so it hasn’t really affected me there. This makes me one of the really fortunate ones, as there is now an estimated 15 to 20 million people in the US who are now unemployed (and this is based on just people filing for unemployment — the number could be significantly higher).

I live in a good neighborhood, and although we generally stay on our property, we can still go outside and talk with the neighbors next door. Some neighbors are still gathering like they used to while others have definitely been keeping distant. Other than the fact that we leave the house a lot less, it would be hard to see that we are even in a pandemic. …

About

The OpenShift Ninja

I'm a technology enthusiast, always searching for better ways of doing things. Lately that has been all things React. I also write a lot on Medium. :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store