Chrome Ext with ReScript React videos

Ive started a series of videos walking through making a Chrome Ext with ReScript and React.

I did Elm fulltime for 6 years and so i have been enjoying just getting sh*t done and not worrying about boilerplate. Still only just dipping my toes into ReScript, but im back in the React world and hope to continue using both.


why did you switch from Elm?

Got laid off lol

Fewer elm jobs. More react jobs.

I hope you find a cool job with FP or to start a successful business where you can pick the programming language.

I checked Elm homepage recently and looks a bit stale. Is Elm still active?
What do you like from Elm that is missing in Rescript?

Ya Elm is very much active. Lots of movement in the community, less so from core, but there is some activity. Evan, the creator, is a private guy.

I like Elm’s compiler a lot better tbh. The error messages are way more helpful, they actually tell you whats wrong. and offer suggestions. As a ReScript noob, im left scratching my head a bit.

for instance, its not ‘text’ that is the issue, it’s the fact i used let props instead of type props. I feel like Elm would be a little more helpful for something like this.
I keep running into that one where i swap let and type. thers a big difference between declaring a type and creating a record. ReScript assumes i want to import something, not declare a type.

other random things are capitalizations. type model = Foo | Bar in ReScript vs type Model = Foo | Bar in Elm. Makes scanning for constructors easier. When everythings lowercase it all looks the same.

And to me, Elm’s type signatures are way easier to read than ReScript’s
let make(props:props) : React.element => <div>...</div> would be something like

make : Props msg -> Html msg 
make : props = Html.div [] []

I like the separation. inline type sigs are noisy.
Elm still feels a little more concise.


sounds fun

The bindings are similar to Rescript? What do you think about @module and such methods to write bindings?

ReScript’s FFI, foreign function interface, is kinda what intrigued me the most. Avoiding Elm’s ports and writing ReScript bindings i can use within ReScript based React components is a game changer for me. As a noob they’re hard to grok at first. I had to experiment a lot with the compiled output from writing bindings to see what theyre doing. it’ll compile, but still wont be ‘right.’ Docs could use more examples i think.
Very different philosophies. Neither are right or wrong. Just different. Still learning how best to organize my modules and things.

Case in point, working with chrome.runtime for a chrome extension, i can bind directly to it, as seen in the videos. And use those bindings directly from a React component.
However with Elm i’d have to either wire up a port to go to and from Elm, and write decoders, or try and juggle properties on a custom element to trigger events and more plumbing


just uploaded this one. Still a ways to go, but i feel confident in a direction.


anotha one!
starting to get the hang of this


TIL MutationObserver! Great videos, I really like the narration and tempo. I’d love to see more! :slight_smile:


really appreciate the encouragement. Didnt get to it today, but i should have time tomorrow. Hoping things will start to move faster now that i have a bit of a workflow. MutationObservers are the backbone of this app. almost every feature/widget will use one or more! thanks for watching!


These are great and it’s wonderful to see more and more ReScript content coming out!


Thank you so much for watching! Im about to do the VO work for the latest video. Might get uploaded today (might not!)

when i first saw ReScript, i was like ‘why aren’t more people using this? how is this not more popular?’


hot off the presses! adding a new Thumbnail widget this time


I wanted reusable snippets of text to put in video descriptions. Upgraded to rescript 11 and added materialui bindings. Snippets are stored in indexeddb


Hey, I am in this video! :sunglasses:
Awesome work! Let me know if you find any problems with the MUI bindings.


now i can add and edit snippets. figuring out ports and storage was :face_with_spiral_eyes:

1 Like