ELM vs AngularJS vs ReactJS

Which is Easier To Get Started With?

Elm and React and Angular all give you the opportunity to try them out in the browser, so you can learn their syntax and how they work immediately. React’s version of “try it out” is simpler, while Elm’s version is a full-page code editor which has multiple examples demonstrating the syntax, how to work with buttons, how to do drag & drop, and some basic HTML5 Canvas examples. While React’s version does show the compiled JavaScript code, Elm gets a point in its favor because the examples are better and the editor allows free-form code to be written. There is also a new online editor for Elm called Ellie that makes it even easier to try out right in the web browser.

Both Elm and React are installed using NPM, the Node Package Manager. Elm is globally installed and provides its own package manager. The default install of Elm includes the core libraries, HTML libraries and the Virtual DOM rendering engine. The default install of React includes React and the React-DOM library.

The React tutorial suggests installing create-react-app, which is a way to get React up and running quickly. It does not include Webpack or any other build tool, but it does let you use JSX syntax, ES6 JavaScript, and the Flow type-checker. Type-checking is built right into the Elm compiler.

Elm and React are easy to install and both have made efforts to keep things as simple as possible. React gets a point here with its officially endorsed create-react-app boilerplate project (though there are boilerplate starter projects out there for Elm, too).

The Development Feedback Loop
While developing the app, the React’s starter kit nice to work with because it made the feedback loop fast. The JavaScript code was recompiled whenever a change was made and the browser reloaded the web page. Elm’s equivalent is elm-reactor which also watches Elm files, recompiles and reloads the web browser.

What give Elm an edge over React are the compiler error messages. While Elm has better type-checking, and React does not have any built-in type-checking (aside from rudimentary component properties type-checking), comparing the error messages is another part of the feedback loop.

For performance, this is a benchmark that tries to compare the performance of Elm, React, Ember, and Angular in a fair way:

https://github.com/evancz/react-angular-ember-elm-performance-comparison

Copyright © All Rights Reserved - C# Learners