The article covers the elm vs react developer feedback loop which is highly important when developing software and web applications. It is also one of the hardest things to get right for web development with the rise of tools like Webpack and Rollup.js and SystemJS.
CodeMentor has published the first part of my tutorial on creating an Instagram clone in Elm. It covers how to create nested components and the basic life cycle and architecture of Elm frontend web apps.
I am seeing more power and usability in the Elm programming language and it has been great to compare it with how AngularJs, Ember.js and React & co. work. The performance is really quite something, the virtual dom is very cool and it is neat to see how the DOM changes in the developer tools of Chrome and Firefox.
What I love is the syntax which has sensible import and export module declarations, cleaner and almost completely optional type annotations (excellent type inference), all data structures are immutable by default, and the compilation speed is quick.
The frontend web development world has changed a lot in the last 5 years and it is wonderful to see developers using ES6 and Flow or TypeScript and realizing the value of type checking and of great tools like webpack.
It is exciting to be a frontend web developer with all these good tools, frameworks and libraries.
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.
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).
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.
Also, 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. It comes with a REPL (command line interface). The Elm-Reactor included with it will reload any changes you have made to an Elm file. With all these elements, it is the perfect language for rapid frontend web development. You can learn Elm quickly, and learn to quickly build, test, and refactor Elm components in a way that can’t be replicated by tools like TypeScript or ES6 or React or Angular.
Compare React and Angular To Elm
So while React is great for creating web components, when we compare it to Elm, it can be hard to get started because it requires a bit more infrastructure around it (with Babel, Webpack, Flow, TypeScript, etc.) to really get started on developing a production-ready web application.
Updated: Instagram Clone Article Published
It’s one of the first pieces of code I’ve written in Elm. 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.
The instagram code is neat because you can see how quickly you can write up a grid layout. You can see how to work with modals/pop-ups and how to manage state within an app. You can check out the code for the instagram clone here. The instagram clone is licensed under the Apache license 2.0.
Event Creation Tool written in Elm
The event creation tool for an event ticket sales page is cool. It explores more state management in the context of an app. For example there’s a way to switch the type of event you’re creating in the app. 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. the event creator web app is licensed under the AGPL. You can check out the code for the event creation page for an event ticket sales website is here.
More Articles On Elm
I will be publishing another article on Elm (update: it has been published) 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. Furthermore, it will show you how to embed and fullscreen a component. This is vital if you want to use Elm today in an existing project and integrate components in a piecemeal fashion.