AngularJS

The following steps suggest a method to integrate AngularJS into your existing applications:

Write at least one small AngularJS application from the ground up that uses a model, custom HTML directives, services, and controllers. In other words, in this application, ensure that you have a practical comprehension of the AngularJS separation of responsibilities.

Identify the model portion of your code. Specifically, try to separate out the code that augments the model data in the model into controller functions and code that accesses the back-end model data into services.

Identify the code that manipulates DOM elements in the view. Try to separate out the DOM manipulation code into well-defined custom directive components and provide an HTML directive for them. Also identify any of the directives for which AngularJS already provides built-in support.

Identify other task-based functions and separate them out into services.

Isolate the directives and controllers into modules to organize your code.

Use dependency injection to link up your services and modules appropriately.

Update the HTML templates to use the new directives.

Obviously, in some instances it just doesn’t make sense to use much if any of your existing code. However, by running through the preceding steps, you will get well into the design phase of implementing a project using AngularJS and can then make an informed decision.

Elm

Elm has three different ways to embed components and applications: fullscreen, embedded and worker. Fullscreen replaces the page with the Elm app, great for writing web-based games. Embedded mode functions in the same way as React: it renders into a particular DOM node. Worker lets you use the Elm component inside of a web worker, as a background process that works with the rest of your app.

To communicate with JavaScript code, you can pass things into Elm with flags for one-way communication (similar to passing properties into a React component), or you can use subscriptions to listen for events from the Elm component, such as mouse clicks or text input changes (similar to event callbacks in React). When we limit the comparison between Elm and React to React’s mode of integration, Elm is a bit more complicated in terms of having to set up flags and subscriptions but once you get used to it, it’s about as easy as React.

What could give Elm an edge over React is the compilation and bundling. You can compile multiple Elm components into one bundle and then include a script tag and an initialization script: you now have access to all of your Elm components in a nice convenient package. Because it is built into Elm, you don’t have to rely on Grunt, Gulp, Webpack, SystemJS or whatever flavor of module bundler and build system is popular today. 

ReactJS

React has only one way of being integrated into a code base: it can only replace DOM nodes. This is great because it keeps things simple, and when you’re working on integrating React into an existing code base, all you need to worry about is passing data from the rest of the web app into the React components.

All the other nice things about React, like using Redux, Nuclear.js, Immutable.js and ReactRouter, can be integrated later on. React is only one part of the framework and it can function as a replacement for the view rendering of any other framework. You don’t even have to use the JSX syntax! You can start using React in an existing web app by including the React and ReactDOM scripts and with a few lines of JavaScript you can define and insert a React component into the page.

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