Friday Picks 041

Read more →

TIL: Objects in Nim

Objects in Nim use the type constructor:

Type Definition type MusicTrack = object index: int title: string ## (Mutable) Value var summer = MusicTrack(index: 1, title: "Summer in the City") That reminds me of Records in Reason:

/* Type definition */ type musicTrack = {index: int, title: string} /* Value */ let summerInTheCity = {index: 1, title: "Summer in the City"} In Nim, “An object is a value type, which means that when an object is assigned to a new variable all its components are copied as well.

Read more →

TIL: Typescript Still Coerces Types

Here’s a simple TypeScript function: function f() { const a = 2 const b = 'a string' return a + b } What I expected: TypeScript can infer types. It will recognize that a is of type number and b is of type string. I expected a type error, because I try to add a string to a number. You can also be more explicit and tell TypeScript the types. Like so:
Read more →

Friday Picks 030

Read more →

Write Type Safe Applications With Reason

Read more →

Friday Picks 029

Read more →

First Thoughts About ReasonML vs TypeScript

Today I finished my first TypeScript experiment with React. Here are some thoughts after using ReasonReact first, and now TypeScript second. Setup Is Not Better Than ReasonReact I used Create React App to bootstrap the app. npx create-react-app <project-name> –typescript But then I had to setup ESLint and Prettier with TypeScript. ReasonML & BuckleScript: npm install -g bs-platform bsb -init <project-name> -theme react-hooks After that you’re done. It’s JavaScript
Read more →

Preparing For My First Tech Talk: TypeScript Experiments

A few days ago I started preparing for my first tech talk. One of the common questions about ReasonML and ReasonReact is: Why not TypeScript? If you’re looking for a statically typed alternative for JavaScript, TypeScript seems like the obvious choice. I did a TypeScript workshop with FrontEnd Masters (online) a while ago, but I have to admit that I didn’t use TypeScript in practice. The last few days I started creating a simple TypeScript React app.
Read more →

Check For Equality in Reason vs JavaScript

Reason and JavaScript are not the same languages, although the syntax looks similar. That’s intentional, but sometimes hides fundamental differences of those languages. Comparing values is a common task in programming. Let’s look at the equality operators. Checking For Equality in JavaScript Here’s what MDN has to say: Equality (==) The equality operator converts the operands if they are not of the same type, then applies strict comparison. If both operands are objects, then JavaScript compares internal references which are equal when operands refer to the same object in memory.
Read more →

Preparing For My First Tech Talk

I’m not sure how it happened. But a while ago, I agreed to hold a tech talk. 😱 Today, I was able to prepare for the talk. I woefully underestimated the amount of work! I now have a new appreciation for all the speakers. Tools I decided to use Remark.js to create slides from a Markdown file. With the CLI tool backslide you can easily automate the process. I found it painless to create decent-looking slides with minimal effort.
Read more →

Learning Update End of October 2019

Read more →

How To Create a Music Player in Reason With The useContext Hook Part 4

We’ve come quite far with our music player in ReasonReact. We created a React Context with state, a hook to manage the Context, and we started with our UI. In this post, we will create a component for the music player control buttons, and we will finally implement the functionality to play the track via the DOM API. You can find the complete code on GitHub. Create Player Controls Create src/PlayerControls.
Read more →

How To Create a Music Player in Reason With The useContext Hook Part 3

Our goal is to create a music player with ReasonReact like this one: ☞ Demo. James King wrote the JavaScript version of the tutorial at upmostly. My blog post series is a port of the tutorial to ReasonML and ReasonReact. I encourage you to check out the original JavaScript tutorial if you’re unsure about how useContext works. ReasonReact compiles (via BuckleScript) to React. We can leverage our existing React knowledge. We have all the power of React, but with the type-safety of OCaml, a mature language.
Read more →

How To Create a Music Player in Reason With The useContext Hook Part 2

In the last post, we set up our project: a music player with useContext in ReasonReact. You can find the demo on GitHub pages and the full code on GitHub. The tutorial is a port from the React tutorial How to Use the useContext Hook in React by James King. Type-Driven Development ReasonReact is a statically typed language. We should now think about our data model and create types. That will help to flesh out our app’s state.
Read more →

How To Create a Music Player in Reason With The useContext Hook Part 1

What Are We Building? This tutorial will show you how to build a music player with ReasonReact and the useContext hook. You will learn how to bootstrap a ReasonReact project, how to build a simple application, and how to use hooks with ReasonReact. ☞ View Demo Why ReasonML and ReasonReact? ReasonReact provides a type-safe way to build React applications. It leverages the mature OCaml language that comes with a superb type system.
Read more →

Learning ReasonReact Step by Step Part: 10

Here are some reflections on my path to creating a first ReasonReact application. ReasonReact is still React ReasonReact’s API stays as close as possible to React. As you know, ReasonML is a syntax and build chain for OCaml, but it compiles to JavaScript (and React.js). You can use your previous knowledge of building React applications. However, ReasonReact ships with the underlying assumptions of React and React hooks: one-way data binding, handling derived state or synchronizing state, the complexities of life-cycle management, useEffect, etc.
Read more →

Fast Node Management With fnm

fnm offers a speedy alternative to the Node.js manager NVM. Built with native ReasonML, it’s significantly faster than NVM. fnm Setup Here’s how I set it up on an Arch-based Linux system that uses the Fish shell as an interactive shell. Use the installation script from fnm: $ curl -fsSL https://github.com/Schniz/fnm/raw/master/.ci/install.sh | bash The command downloads fnm, installs it and adds a loader to bash. The installation script above adds the following lines to .
Read more →

Learning ReasonReact Step by Step Part: 9

In the last post, we finally finished the custom useForm hook. You can see the code on GitHub. Use The Custom Hook Let’s switch to our main form component: scr/Form.re. We need to connect the component to our custom hook. /* src/Form.re */ [@react.component] let make = (~formType) => { let logger = () => Js.log("Form submitted"); let (state, formRules, handleChange, handleSubmit) = UseForm.useForm(~formType, ~callback=logger); // JSX here }; So far, so good.
Read more →

Learning ReasonReact Step by Step Part: 8

We set up our form validation rules, tackled state management and most of the logic. Now, we have to hook up our validation logic with the form. Each time a user types into the form, we want to update our validation rules immediately. We can then display the form validation status and give feedback to the user. The user should only be allowed to submit the form if all rules are valid.
Read more →

Learning ReasonReact Step by Step Part: 7

What We’ve Done So Far We’ve laid the groundwork for adding form validation to our app. We defined our types; we have a simple form and a functioning useForm custom hook in a separate module. Create Form Rules And State Management Let’s define our validation rules1. /* inside UseForm.re */ let registerFormRules: FormTypes.formRules = [| // (A) { id: 0, field: "username", message: "Username must have at least 5 characters.", valid: false, }, { id: 1, field: "email", message: "Email must have at least 5 characters.
Read more →

Learning ReasonReact Step by Step Part: 6

What We’ve Done So Far So far, we’ve created a simple ReasonReact form with a custom useForm hook and client-side routing. The custom hook uses a useReducer to handle state and transitions. The state is a Reason Record, a type-safe immutable “object.” We first define a type for this record, then we create the initial state: type state = { username: string, email: string, password: string, }; let initialState = {username: "", email: "", password: ""}; The code for our custom hook looks very similar to JavaScript, but it uses some nice ReasonML features like pattern-matching.
Read more →

Beginner Error with (Reason)React And Updating State

A few weeks ago, I started learning ReasonML and ReasonReact. After doing a basic tutorial, I decided to tackle a form with validation. Building a simple form is not too hard, but it offers some interesting challenges. Some examples include getting user input and storing it locally, adding validation logic, and displaying the validation messages. Thus Reason Form was born. It takes inspiration from James King’s Using Custom React Hooks to Simplify Forms and a (deprecated) course about TDD with React, Flask, and Docker.
Read more →

State Management is Hard

State management in React.js and ReasonReact proves to be challenging. I have two pieces of state with useReducer, which I can’t get synchronized. Another problem is to conditionally setup useReducer depending on a prop. It probably results from a limitation of ReasonReact because Reason is stricter than JavaScript. It keeps being exciting to learn new things. Addendum: Kent C. Dodds wrote an excellent blog post about this topic today: Don’t Sync State.
Read more →

ReasonReact is Still React

The problem with ReasonReact is - it’s still React. (No kidding.) Today I tried fixing a bug in my ReasonReact form app. After some debugging, I realized that I have a problem with derived state which I receive from a custom hook. I now have to find out how to best synchronize my state. The good thing about ReasonReact is - it’s still React. Easily search for solutions, and utilize your previous React knowledge.
Read more →

Never Give Up

A few days ago I was on the verge of giving up ReasonML. Learning ReasonReact is quite challenging. But I’m glad that I stuck with it. I quite enjoy the type system after some initial hiccups. The ReasonML Discord channel was a big help. There are some neat patterns you can do with ReasonML (think: pattern-matching, option type, immutability, etc.) The community is very friendly, and there’s always someone who’s willing to lend a helping hand.
Read more →

Learn ReasonML

Read more →

ReasonML Development With Vim

Vim is my favorite editor, and I prefer it over VS Code. (Neo)Vim offers a light-weight, fast experience where I can quickly navigate via keyboard shortcuts and use the terminal to its fullest. Reason offers superb editor support for Vim. From the vim-reason-plus README: To have the complete Vim/Neovim Reason experience, there are two plugins to install: [vim-reason-plus], and the language-server. [vim-reason-plus] provides syntax highlight, snippets for Reason and allows related features to recognize the Reason syntax.
Read more →

ReasonReact Pause

In the last few days, I’ve been working hard on learning ReasonReact by creating a small project. I’ve learned a lot, but it has been quite frustrating, too. At the moment, I’m trying to set up form validation logic. ReasonReact is giving me the stink eye. I recently bought the book Learn Type-Driven Development by Yawar Amin. He is a helpful member of the community and seems to know his stuff.
Read more →

Learning ReasonReact Step by Step Part: 5

Our reusable Form component works, but we don’t have any routing. How can we navigate to our two forms (register and login)? Enter ReasonReact Router It’s a breeze to set up the inbuilt ReasonReact Router. My forays into the world of React Router have been far more painful. /* src/App.re */ [@react.component] let make = () => { let url = ReasonReactRouter.useUrl(); switch (url.path) { | ["login"] => <Form formType="login"/> | ["register"] => <Form formType="register"/> | [] => <Main /> | _ => <NotFoundPage /> } } Yes, that’s all (for development).
Read more →

Learning ReasonReact Step by Step Part: 4

So far, we’ve created a simple form component with a useReducer hook. This form works with an email and a password - it could be a login form. But what if we would like to use the same logic to create a register form, too? Make The Form Component Re-Usable With a Custom Hook We know the shape of our data: we have three form fields: email, password, and username. We will only show the username field on the register page.
Read more →

Learning ReasonReact Step by Step Part: 3

In my last post I tried to create a custom hook function for React forms. That didn’t work as I expected. Some kind folks helped me out and gave me some suggestions. Let’s pivot and try something different. Instead of creating a custom hook, I’ll take a step back and add the logic to the Form component. Maybe I can decouple it later. Using a Js.Dict to store data (email and password) proved to be difficult and seems to be an anti-pattern.
Read more →

Learning ReasonReact Step by Step Part: 2

By now we have the HTML/JSX skeleton for our input form: a simple login form styled with Bulma. (The code is available on Github.) Stumbling Blocks With ReasonReact The idea for this blog post series was to create a ReasonReact form with hooks to learn how ReasonML and ReasonReact work. I took inspiration from James King’s tutorial on Using Custom React Hooks to Simplify Forms. When I read it at the beginning of the year, it helped me to understand how the new React Hooks API works.
Read more →

Learning ReasonReact Step by Step: First Thoughts

The last few days, I’ve spent a lot of time learning ReasonReact. It has been a frustratingexperience so far. Even simple tasks like creating forms prove to be quite hard for me. I’m quite familiar with React. Of course, I’m no expert by far. But I can use the new Hooks API, useReducer, useContext, etc. With ReasonReact, even easy tasks get more complicated. You have to learn how to use the type system with the ReasonReact API.
Read more →

Learning ReasonReact Step by Step Part: 1

Let’s continue from yesterday’s post and build the skeleton for our application: a simple form with ReasonReact and hooks. Go to the src folder. The main App.re file should just render a Form component: [@react.component] let make = () => <Form />; The syntax looks unfamiliar. What is [@react.component]? It is a decorator attribute and tells ReasonReact that you’re writing a React component. Duh! The latest ReasonReact version uses React hooks under the hood.
Read more →

Learning ReasonReact Step by Step Part: 0

My goal is to learn more in public, so that it also may help others. I’ve given ReasonReact a first try. I’ve read a bit of the documentation, took a peek into Exploring ReasonML, and found some useful blog posts. Let’s try to build a form in Reason React! This is a simple project, but forms are one of the most common things you’ll need in a web application. Installation & Setup Installation via npm or yarn is painless:
Read more →

Reason Option Type

I’m interested in Reason and ReasonReact because it is a typed functional language for the frontend. Today I learned about the Option type. During my experiments with ReasonReact I’m stumbling over some hurdles. I have no experience with typed languages and it shows. Sparse documentation and React’s inherent complexity don’t help. I’m spoiled by bigger communities and more well-known languages, where it’s easy to find material. Still, it’s interesting to learn new concepts and to try to solve problems.
Read more →

Working on ReasonReact, Svelte and React

I’m currently working on three different toy apps/learning projects: a Meetup clone in Svelte.js, an online store in React (with Redux, GraphlQL, etc.), and a simple todo with ReasonReact. It’s interesting to see how different framework tackle state management, UI rendering and the complexity of front-end development. So far, I’ve found Svelte the easiest to grasp. React has the best documentation and the best ecosystem. ReasonReact is functional (OCaml with React bindings under the hood) and typed.
Read more →

Why Try ReasonReact?

In the last few days, I’ve taken a look at Reason. I’m interested in ReasonReact as an alternative to using JavaScript on the front-end. I enjoy the style and patterns of functional programming languages. While I can write vanilla JavaScript in a functional style, it’s very brittle. If you want to have immutable data structures, and better library support for a functional style, you have to shove in a ton of libraries like Immutable.
Read more →

Reason REPL Error libncurses.so.5

Installation rtop is the name of the Reason REPL. Get it by installing Reason and BuckleScript globally: $ npm install -g bs-platform reason-cli@latest-linux (or reason-cli@latest-macos) If you get the error Permission denied, you can solve it by adding –unsafe-perm: $ npm install -g bs-platform reason-cli@latest-linux –unsafe-perm (More about this issue on Github.) Usage You can now run rtop in your terminal: $ rtop If you have an up-to-date system, you might get the following error:
Read more →

Taking a Look at ReasonML And ReasonReact

Last weekend I took a peek at Reason, a JavaScript-like-syntax for OCaml. Ocaml is a multi-paradigm language from 1996 which also supports a functional programming approach. It is also typed and compiled. Reason is an alternative syntax and toolchain for OCaml with better JavaScript interop and convenience features (via BuckleScript, the compiler). Reason also has pattern-matching. When I first learned Elixir, I was blown away by the power of pattern-matching. I’m happy to see that Reason offers it, too.
Read more →