React vs Elm: Creating a comment box component in Elm

I recently published an article on CodeMentor.io titled “Building a Facebook-like comment box: a React tutorial in Elm” where I use the Elm programming language to essentially duplicate the React.js tutorial.

The article has code examples and a step-by-step on installing Elm, running the Elm Reactor and then writing the code for the comment box.

elm vs react tutorial on codementor by Rudolf Olah

Click above to read the Elm Tutorial on building a comment box just like Facebook’s

Comparing Elm to React

It has a brief comparison between React and why you would want to use Elm:

While the performance of React is awesome, at a certain point, you will notice that having React just isn’t enough.

You’ll also want Redux, Flux, or some other data flow library installed.

You will want Webpack and Babel installed so that you can use the latest features of ES6 (also known as EMCAScript 2016).

Then you’ll probably want to add type-checking and static types at that point, so you will also need to install Flow, a JavaScript type-checker.

Elm will give all the goodies that React, Redux/Flux, and Flow give you but as a collective programming language rather than as individual libraries.

Essentially, Elm is a language with the framework built in for solid frontend web development. Instead of having to find individual tools, everything that you need to create fast components and single page applications come with Elm. It’s a batteries-included language and comes with a REPL (command line interface) and the Elm-Reactor which will reload any changes you have made to an Elm file. With all these elements, Elm is the perfect language for rapid frontend web development. So while React is great, it can be hard to get started because it requires a bit more infrastructure around it (with Babel, Webpack, Flow, etc.) to really get started on developing a production-ready web application.

More Articles On Elm

It’s one of the first pieces of code I’ve written in Elm and I have been working on two other projects; one is an Instagram-clone, which I did an “office hours” live coding session for on CodeMentor.io, and the other is a live coding of a clone of the event creation page from the Universe.com website. The instagram code is neat because you can see how quickly you can write up a grid layout and how you can work with modals/pop-ups and how to manage state within an Elm app. The event creation clone is cool because it explores more state management in the context of an Elm app; for example there’s a way to switch the type of event you’re creating in the app and when you switch, an explanation page appears in between to give you guidance on how to create the different type of event that you just switched to.

I will talk more about those in future articles but you can check out the code for the instagram clone here and you can check out the code for the event creation page here. The instagram clone is licensed under the Apache license 2.0, the universe.com event creator is licensed under the AGPL.

I will be publishing another article on Elm very soon that is a continuation of the Instagram-clone code. It will include an API server to show how to use HTTP and AJAX calls in an Elm program, and it will show you how to embed and fullscreen an Elm component. This is vital if you want to use Elm today in an existing project and integrate components in a piecemeal fashion.

2017 UPDATE

instagram clone in elmUPDATE: The 2-part article on creating an Instagram clone in Elm (instaelm) has been posted on Codementor:

 

Comments are Closed