Skip to content

trivago/melody

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d73e759 · Aug 4, 2021
May 13, 2020
Nov 6, 2019
Jan 6, 2018
Nov 6, 2019
Sep 8, 2020
Oct 19, 2017
Oct 19, 2017
Aug 17, 2018
Apr 25, 2019
Apr 25, 2019
Mar 6, 2019
Oct 25, 2017
May 29, 2020
Jan 12, 2018
Jan 9, 2020
Oct 19, 2017
Mar 1, 2020
May 29, 2020
Aug 15, 2018
Oct 19, 2017
May 29, 2020
Dec 9, 2019
Aug 17, 2018
Oct 19, 2017
Aug 4, 2021

Repository files navigation

Melody Logo

Melody is a UI library for building JavaScript applications.

It helps you to write solid, high performance applications following best practices, while maintaining a clear separation of concerns. The view layer is cleanly delegated to templates which are compiled to highly efficient JavaScript instructions that adaptively render to the DOM.

This approach allows you to keep unchanged DOM nodes, reduces the memory usage of your application and improves the rendering performance of both, your application and the browser rendering it.

Its performance is comparable to other fast UI libraries like Inferno and has been battle tested by millions of trivago users!

The Component API provided by Melody follows many of the principles of Redux, which is the preferred data layer for Melody applications.

Melody currently uses Twig templates as view layer and provides a higher level API that emits efficient DOM patching instructions. At the core Melody provides an API (or set of functions) enhancing those views in order to be more efficient and to help you to create better structure for your applications. This approach inherently creates a clear separation of concerns and leverages functional programming. In the next sections we will see how Melody gradually enhances those views and we will examine building blocks of Melody apps.

Getting Started

The easiest way to get started with Melody is to use Create Melody App. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

yarn create melody-app my-app
cd my-app
yarn
yarn start

Example

Simple example of rendering a melody component:

hello.twig

<div id="app">
    <h1>Hello {{ name }}</h1>
</div>

index.js

import { createComponent, render } from 'melody-component';
import template from './hello.twig';

const documentRoot = document.getElementById('root');

const component = createComponent(template);

render(documentRoot, component, { name: 'Melody' });

It receives a name property with the string "Melody", then renders a header saying "Hello Melody" on the page.