What is Melody?

Melody is a UI framework which enables you to develop user interfaces in a clean and efficient way. It takes care of updating the screen and provides a couple of ways to define components.

It was designed to be very modular so that we can include new trends whenever they make sense while keeping a very stable core.

Let's look at some of the most important parts that make up Melody.

melody-compiler

The compiler is one of the most central and most powerful parts of Melody. It reads Twig templates and transforms them into something else. Most of the time into instructions for melody-idom but there are also plugins to produce JSX for usage with React.

melody-idom

By default the Melody compiler will produce idom instructions. These instructions are then executed at runtime to align the real DOM with what it should look like. This approach is very memory efficient and very fast.

melody-streams

The recommended component API for Melody. It enables reactive programming by leveraging the expressiveness and power of Rx.js while producing easy to read and modify components with a lot of potential for building powerful abstractions and sharing code between components.

melody-hooks

Deprecated. We recommend to use melody-streams instead.

Offers a modern component API for using hooks with Melody. A concept that was originally proposed by React and which works perfectly for Melody, too.

While certainly interesting and a good option for former React users, we would recommend to use the melody-streams API instead.

melody-component

Deprecated. We recommend to use melody-streams instead.

This is the core of the component API we've been using since 2015. It offers an easy way to define components, leverages mixins for horizontal code reuse and manages state using a Redux-compatible store. Side effects can be dealt with using redux-thunk, redux-saga or - our preferred approach - by using redux-observable.

This API is showing its age and no longer offers a competitive development experience. We strongly recommend to consider using melody-streams for new components instead.

melody-hoc

Deprecated. This package is not needed when using melody-streams.

Offers higher order components for use with melody-component. Essentially a more declarative and cleaner approach to horizontal reuse, build upon the mixin concept from melody-component.

This API is showing its age and no longer offers a competitive development experience. We strongly recommend to consider using melody-streams for new components instead.

melody-redux

Deprecated. This package is not needed when using melody-streams

Higher Order Components for providing and connecting a redux store to a melody-component.

This API is showing its age and no longer offers a competitive development experience. We strongly recommend to consider using melody-streams for new components instead.