- ReactZola2020-03-10T00:00:00+00:00https://www.fullstackstanley.com/tags/react/atom.xmlLessons learned and notes from my first ReasonML/ReasonReact app2020-03-10T00:00:00+00:002020-03-10T00:00:00+00:00https://www.fullstackstanley.com/articles/lessons-learned-and-notes-from-my-first-reasonml-reasonreact-app/<p>I recently released a side project, <a href="https://rsync.snipline.io">RSync Command Generator</a>. This is a simple GUI for generating <code>rsync</code> commands for the command line.</p>
<span id="continue-reading"></span>
<p><img src="https://res.cloudinary.com/snipline/image/upload/v1583931806/preview-v2_ntrdzu.png" alt="Preview of the Rsync Command Generator" /></p>
<p>I’ve been casually learning ReasonML for a while and thought this would be a great project to try it out on. My main goal for ReasonML is to create native apps with ReveryUI, however, I thought I’d give ReasonReact a try first as there’s more resources out there. So here’s my initial thoughts, impressions, and tips to new comers.</p>
<h2 id="not-knowing-react-is-a-disadvantage">Not knowing React is a disadvantage</h2>
<p>I’ve used React once about 4 years ago. </p>
<p>I mostly stick with VueJS, EmberJS, or StimulusJS. These 3 frameworks have covered most of my use-cases. I would love it if I could use any of these frameworks with ReasonML. Unfortunately, I’m not confident enough in my ReasonML knowledge to make my own bindings so ReasonReact or Bucklescript-TEA are my options.</p>
<p>The ReasonReact docs are fairly good to get started but they do require base knowledge of React. I had to go and learn about hooks and reducers from various React tutorials. I’m still not sure how to use <code>useEffect</code> but hey, I know it exists.</p>
<p>Even without this understanding of <code>useEffect</code>, this has not stopped me from creating an app in ReasonReact. There are plenty of resources out there that can be used to get going.</p>
<p>One of which is the react-hooks starter template for ReasonReact. This has some great examples which I referred to many times.</p>
<p>If you’re building an SPA, I’d recommend checking these for a reference but using <code>spin</code> (see below) for the actual project structure.</p>
<h2 id="what-i-like-about-reasonml">What I Like about ReasonML</h2>
<ul>
<li>Inferred types.</li>
<li>Changing state with actions.</li>
<li>Immutability.</li>
<li>Being able to fall back to JS when needed.</li>
<li>Fast compilation and decent compiler feedback.</li>
<li>The syntax (With some minor exceptions).</li>
</ul>
<pre data-lang="re" style="background-color:#2b303b;color:#c0c5ce;" class="language-re "><code class="language-re" data-lang="re"><span style="color:#65737e;">// A small glimpse into the structure
</span><span style="color:#b48ead;">type</span><span> state = {
</span><span> preferShortFlags: </span><span style="color:#b48ead;">bool</span><span>,
</span><span>};
</span><span>
</span><span style="color:#b48ead;">type</span><span> action =
</span><span> | </span><span style="color:#bf616a;">TogglePreferShortFlags</span><span>;
</span><span>
</span><span style="color:#b48ead;">let</span><span> initialState = {
</span><span> preferShortFlags: </span><span style="color:#d08770;">false
</span><span>};
</span><span>
</span><span style="color:#b48ead;">let</span><span> reducer = (state, action) => {
</span><span> </span><span style="color:#b48ead;">switch </span><span>(action) {
</span><span> | </span><span style="color:#bf616a;">TogglePreferShortFlags </span><span>=> {...state, preferShortFlags: !state.preferShortFlags}
</span><span> };
</span><span>};
</span><span>
</span><span>[</span><span style="color:#b48ead;">@react</span><span>.component]
</span><span style="color:#b48ead;">let</span><span> make = () => {
</span><span> </span><span style="color:#b48ead;">let </span><span>(state, dispatch) = </span><span style="color:#bf616a;">React</span><span>.</span><span style="color:#96b5b4;">useReducer</span><span>(reducer, initialState);
</span><span>
</span><span> <</span><span style="color:#bf616a;">Container</span><span>>
</span><span> <</span><span style="color:#bf616a;">Header</span><span>/>
</span><span> </span><span style="color:#65737e;">/* ... */
</span><span> </</span><span style="color:#bf616a;">Container</span><span>>;
</span><span>};
</span></code></pre>
<h2 id="what-i-dont-like">What I Dont' Like</h2>
<ul>
<li>Some parts of the language are annoying. Having to use <code>type_</code> instead of <code>type</code> often caught me out. Raw JS syntax is a bit strange as well.</li>
<li>Having to use <code>className</code> instead of <code>class</code> - a similar bane to <code>type_</code> although I think this is a JS issue rather than because of a Reason keyword.</li>
<li>The documentation is good but I need more of it!</li>
</ul>
<p>My initial reaction to some of the syntax was an subconscious "nope". Things like <code>+.</code> for adding floats. These quirks of the language have started to grow on me, though. I think learning more about OCaml, what ReasonML transpiles to, has helped me appreciate these things more.</p>
<h2 id="reaching-for-javascript-when-you-need-to">Reaching for Javascript When You Need To</h2>
<p>I only reached for native JS once and that was to copy to clipboard. There is at least one BuckleScript library for this but I could not get it working. The JS ended up looking like this (Not my finest code).</p>
<pre data-lang="re" style="background-color:#2b303b;color:#c0c5ce;" class="language-re "><code class="language-re" data-lang="re"><span> </span><span style="color:#b48ead;">let</span><span> copy = (dispatch, showEvent, hideEvent) => {
</span><span> </span><span style="color:#b48ead;">let</span><span> copyJs = [%bs.raw
</span><span> {|
</span><span> </span><span style="color:#96b5b4;">function</span><span>(text, showEvent, hideEvent) {
</span><span> </span><span style="color:#b48ead;">if </span><span>(window.clipboardData && window.clipboardData.setData) {
</span><span> </span><span style="color:#96b5b4;">dispatch</span><span>(showEvent);
</span><span> window.</span><span style="color:#96b5b4;">setTimeout</span><span>(</span><span style="color:#96b5b4;">function</span><span>() { </span><span style="color:#96b5b4;">dispatch</span><span>(hideEvent)}, </span><span style="color:#d08770;">1500</span><span>);
</span><span> </span><span style="color:#b48ead;">return</span><span> clipboardData.</span><span style="color:#96b5b4;">setData</span><span>(</span><span style="color:#a3be8c;">"Text"</span><span>, text);
</span><span>
</span><span> }
</span><span> </span><span style="color:#b48ead;">else if </span><span>(document.queryCommandSupported && document.</span><span style="color:#96b5b4;">queryCommandSupported</span><span>(</span><span style="color:#a3be8c;">"copy"</span><span>)) {
</span><span> var textarea = document.</span><span style="color:#96b5b4;">createElement</span><span>(</span><span style="color:#a3be8c;">"textarea"</span><span>);
</span><span> textarea.textContent = text;
</span><span> textarea.style.position = </span><span style="color:#a3be8c;">"fixed"</span><span>;
</span><span> document.body.</span><span style="color:#96b5b4;">appendChild</span><span>(textarea);
</span><span> textarea.</span><span style="color:#96b5b4;">select</span><span>();
</span><span> try {
</span><span> </span><span style="color:#96b5b4;">dispatch</span><span>(showEvent);
</span><span> window.</span><span style="color:#96b5b4;">setTimeout</span><span>(</span><span style="color:#96b5b4;">function</span><span>() {</span><span style="color:#96b5b4;">dispatch</span><span>(hideEvent)}, </span><span style="color:#d08770;">1500</span><span>);
</span><span> </span><span style="color:#b48ead;">return</span><span> document.</span><span style="color:#96b5b4;">execCommand</span><span>(</span><span style="color:#a3be8c;">"copy"</span><span>);
</span><span> } catch (ex) {
</span><span> console.</span><span style="color:#96b5b4;">warn</span><span>(</span><span style="color:#a3be8c;">"Copy to clipboard failed."</span><span>, ex);
</span><span> </span><span style="color:#b48ead;">return </span><span style="color:#d08770;">false</span><span>;
</span><span> } finally {
</span><span> document.body.</span><span style="color:#96b5b4;">removeChild</span><span>(textarea);
</span><span> }
</span><span> }
</span><span> }
</span><span> |}
</span><span> ];
</span><span> </span><span style="color:#96b5b4;">copyJs</span><span>(command, showEvent, hideEvent);
</span><span> };
</span></code></pre>
<p>It can then be called like this</p>
<pre data-lang="re" style="background-color:#2b303b;color:#c0c5ce;" class="language-re "><code class="language-re" data-lang="re"><span><button role=</span><span style="color:#a3be8c;">"button"</span><span> ariaLabel=</span><span style="color:#a3be8c;">"Copy to Clipboard"</span><span> onClick={_event => </span><span style="color:#b48ead;">copy</span><span>(dispatch, </span><span style="color:#bf616a;">DisplayNotice</span><span>, </span><span style="color:#bf616a;">HideNotice</span><span>)} className=</span><span style="color:#a3be8c;">"ml-4"</span><span>>
</span><span style="color:#65737e;">/* ... */
</span><span></button>
</span></code></pre>
<p>With this code I passed in actions so that I could toggle showing feedback to the user. It's a bit hacky, but hey, it works!</p>
<p><img src="https://f002.backblazeb2.com/file/snipline/Screenshot%202020-03-06%20at%2014.55.46.png" alt="Copying to clipboard" /></p>
<h2 id="deployment-with-zeit-now">Deployment with Zeit Now</h2>
<p>I deployed the project with <a href="https://zeit.co">Zeit Now</a>. One thing I noticed was that non-root URLs don’t work out of the box. It’s pretty simple to configure them to work with a <code>now.json</code> file.</p>
<pre data-lang="json" style="background-color:#2b303b;color:#c0c5ce;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> "</span><span style="color:#a3be8c;">routes</span><span>": [
</span><span> { "</span><span style="color:#a3be8c;">src</span><span>": "</span><span style="color:#a3be8c;">/</span><span>", "</span><span style="color:#a3be8c;">dest</span><span>": "</span><span style="color:#a3be8c;">/index.html</span><span>" },
</span><span> { "</span><span style="color:#a3be8c;">src</span><span>": "</span><span style="color:#a3be8c;">/common</span><span>", "</span><span style="color:#a3be8c;">dest</span><span>": "</span><span style="color:#a3be8c;">/index.html</span><span>" }
</span><span> ]
</span><span>}
</span></code></pre>
<p>For dynamic URLs <a href="https://zeit.co/docs/configuration#project/routes">check the documentation</a>.</p>
<h2 id="useful-links">Useful links</h2>
<p>The <a href="https://reasonml.github.io/reason-react/docs/en/simple">Reason React Documentation Examples</a> are great for understanding how to communicate between components and using state.</p>
<p><a href="https://www.rockyourcode.com/learning-reason-react-step-by-step-part-0/">Rock Your Code</a> (<a href="https://twitter.com/hisophiabrandt">@hisophiabrandt</a>) has a great series on ReasonReact which I very much enjoyed reading through. Includes some great external resources, too.</p>
<p><a href="https://github.com/tmattio/spin">spin</a> - Project scaffolding tool. I wish I knew about this from the start. It has an excellent starter template for ReasonReact which includes Router setup and an option for using TailwindCSS.</p>
<p><a href="https://github.com/reasonml-community/reason-react-hacker-news">Reason React Hacker News</a> - Great project for referencing how to do things.</p>
<p><a href="https://dev.realworldocaml.org/">Real World OCaml</a> - Great for giving context to how ReasonML works.</p>
<p><a href="https://pragprog.com/book/reasonml/web-development-with-reasonml">Web Development with ReasonML</a></p>
<h2 id="would-i-use-it-again">Would I use it again?</h2>
<p>Absolutely. Overall, I really like ReasonML, and I hope its popularity grows. </p>
<p>I think for now I will continue to use this for smaller projects while I get to grips with it. Hopefully I’ll get confident enough to release a native ReveryUI app in the near future.</p>