1. Great performance using the virtual DOM
2. Functional language
3. Safety through a Powerful type system
4. State management using the built-in Elm architecture
5. A powerful and helpful compiler

import Html exposing (Html, button, div, text) import Html.Events exposing (onClick) main = Html.beginnerProgram  { model = model  , view = view  , update = update  } -- MODEL type alias Model = Int model : Model model = 0 -- UPDATE type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 -- VIEW view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ] 

• Model: what is the state of your app
• Update: how to update the state
• View: how to display the state

//@flow import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, bindActionCreators } from 'redux' import { Provider, connect } from 'react-redux' type Increment = { type: "INCREMENT" } type Decrement = { type: "DECREMENT" } type CounterActions = | Increment | Decrement type Action = CounterActions // whenever we add a reducer, we add its actions here //make sure dispatch can only dispatch our predefined actions //and returns the action dispatched type domainIdentity<T> = <A: T>(a: A) => A type Dispatch = domainIdentity<Action> type CounterState = number //reducer const counter = (state: CounterState = 0, action: CounterActions) =>{ switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: (action: empty); //to make sure we handle all the actions //it will trigger a flow error when we forget a case !! return state } } //action creators const increment = (): Increment => ({ type: "INCREMENT" }) const decrement = (): Decrement => ({ type: "DECREMENT" }) // our global state, also needs to be modified whenever we add a reducer type State = CounterState // passing state to our component as props const mapStateToProps = (state: State) => ({state}) const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({ increment, decrement, }, dispatch) //helper flow types .. should be in a config file type _ExtractReturn<B, F: (...args: any[]) => B> = B; /*export*/ type ExtractReturn<F> = _ExtractReturn<*, F>; //redux state and action creators types type ReduxProps = ExtractReturn<typeof mapStateToProps>; type ReduxActions = ExtractReturn<typeof mapDispatchToProps>; //View //we don't have any props except redux ones type Props = {} & ReduxProps & ReduxActions const App = ({ decrement, increment, state }: Props) =>( <div> <button onClick={decrement}>-</button>  <div>{state}</div>  <button onClick={increment}>+</button>  </div> ) //connect our component with the redux store const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App) let store = createStore(counter) ReactDOM.render( (<Provider store={store}> <ConnectedApp /> </Provider>), document.getElementById('root') ); 

• Elm’s type system is much more powerful and descriptive than Flow (and typescript)
• The Elm architecture is integrated in the language level, so you can achieve more with less code in Elm compared to how much boilerplate you need to write in Redux.
• Redux was inspired from Elm architecture