Elm vs Marko Widgets

Lack of run-time exceptions makes it easy to produce large swathes of reliable front-end code without drowning in tests.

ML static typing is great because it's always there, you just choose how explicit you want to be and how much you want the compiler to do.

In no other language you can refactor so easy without any worries, since the compiler will guide you through. It is like TDD but than compiler-error driven.

As Elm was designed as a front-end langauge, it has out of the box support for things like DOM-element creation, letting programmers focus on their application logic, rather than implementation details specific to the web.

You can try to apply some functional programming ideas in other languages that have an imperative basis, but you haven't seen the real power unless you tried it in the environment of purely functional programming. Elm is a simple language with great learning resources and easy graphical output, which makes it easy to explore the power of functional programming. Plus programming in Elm is very readable.

All major editors have great support. With Atom for example, Elm plugins are available for linting, formatting, make/compiler support and Elmjutsu will simply overflow you with super useful functions, like navigate to referenced definition and show expression type.

The Elm Architecture means you don't need to spend valuable time and effort choosing the right frameworks, state management libraries, or build tooling. It's all built in.

Elm uses easy to use modules.

Use:

import List
import List as L
import List exposing (..)
import List exposing ( map, foldl )
import Maybe exposing ( Maybe )
import Maybe exposing ( Maybe(..) )
import Maybe exposing ( Maybe(Just) )

Creation:

module MyModule exposing (foo, bar)

Easy to learn, most functions have only one way, not 5 alternatives where you must study where to best use what.

Support for hot swapping and interactive programming is included.

The lack of side-effects and simple, consistent language semantics make it easy to quickly review incoming changes.

Pure functions, immutable data structures, amazing compiler, clean and homologous syntax used for HTML, logic, and optionally to replace CSS, elimination of entire classes of bugs so you don't even need most unit tests. These factors lead to better code, better programs, higher confidence, and ultimately, more satisfaction.

Luckily you do not have to learn Haskell to be able to do any Elm. It is meant to be a language that compiles to Javascript, so for Javascript programmers (Front end) not for CS students who want to learn as many different algorithms as possible.

Using Marko and Marko Widgets to render UI components on the server was shown to be 10x faster than React. A benchmark application was built using both Marko+Marko Widgets and React and the results of rendering a page of 100 search results on the server was measured and compared. Both the Marko Widgets code and the React code used a very similar UI components-based appraoch.

Marko Widgets supports stateful UI components. Marko Widgets will automatically rerender a UI component if its internal state changes. A UI component's state is stored in the this.state property that is a vanilla JavaScript object. All changes to the state should go through the this.setState(name, value) method (or this.replaceState(newState))

Marko Widgets utilizes the morphdom module for updating the DOM and that module was shown to be very competitive with React and virtual-dom.

Marko Widgets does not rely on a virtual DOM abstraction. Instead, the real DOM is always the source of truth. When updating the DOM, the newly rendered DOM is compared with the real DOM.

Marko Widgets updates the DOM using a DOM diffing/patching algorithm to minimize the number of changes to the DOM when rerendering a UI component due to state changes. The DOM diffing/patching is handled by the independent morphdom library.

The following code illustrates how the render(input) method exported by a UI component's JavaScript module can be used to render a UI component and insert the resulting HTML into the DOM:

require('./app-hello')
    .render({
        name: 'John'
    })
    .appendTo(document.body)

Updates to the DOM are deferred until all state changes have completed for the current tick. That is, changing a widget's state will not cause the UI component's DOM to immediately be updated.

Marko Widgets offers a simple mechanism for declaratively binding DOM event and custom event listeners to widget handler methods. For example:

<button type="button" w-onClick="handleClick">
    Click Me
</button>

And then in the JavaScript:

module.exports = require('marko-widgets').defineComponent({
    // ...
    handleClick: function(event, el) {
        this.doSomething();
    }
});

Marko is a fast and lightweight, general purpose HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. Marko is used for rendering UI components and Marko Widgets is used to bind client-side behavior to rendered UI components. Marko can be used independently of Marko Widgets and this makes it suitable in all situations where HTML rendering is needed.

When utilizing server-side rendering of a UI, Marko Widgets does not require that the UI be rerendered again in the browser just to bind behavior. Instead, extra information is passed down from the server to the client to allow Marko Widgets to efficiently bind widgets to UI components rendered on the server.

The runtime for Marko Widgets is extremely small. The runtime is very small and this makes Marko Widgets much simpler and easier to understand and debug. Marko Widgets offloads much of the work and complexity to compile time code so that the work required at runtime is minimal.

Marko Widgets supports the concept of "scoped" IDs. With scoped IDs, a nested DOM element or nested widget can be given an ID that is unique within the scope of the containing widget. At runtime the actual ID will be the scoped ID prefixed with the ID of the parent widget. A reference nested widget can be obtained using the this.getWidget(scopedId) method and a reference to a nested DOM element can be obtained using the this.getEl(scopedId) method.

For example:

<div class="my-app" w-bind>
    <button type="button" w-onClick="handleButtonClick">
        Click Me
    </button>

    <alert-overlay visible="false" w-id="alert">
        This is a test alert.
    </alert-overlay>

    <div w-id="clickMessage" style="display: none;">
        You clicked the button!
    </div>
</div>

And then in the JavaScript code:

module.exports = require('marko-widgets').defineComponent({

    // ...

    handleButtonClick: function(event, el) {
        var alertWidget = this.getWidget('alert');

        // Call the `show()` function implemented by the alert widget:
        alertWidget.show();

        var clickMessageEl = this.getEl('clickMessage');
        clickMessageEl.style.display = 'block';
    }
});

Marko Widgets supports efficient event delegation to avoid attaching DOM event listeners to each DOM node. Instead, Marko Widgets attaches event listeners on the document.body event for events that bubble. Events captured at the root are efficiently delegated out to widgets.

The following code illustrates how a UI component can be embedded in a Marko template:

<div>
    <app-hello name="Frank"/>
</div>