Melody is a library for building JavaScript web applications.
Switch branches/tags
Clone or download
taueres and pago Add implementation for filter 'trim' to be compatible with Twig (#64)
Add implementation for filter 'trim' to be compatible with Twig
Latest commit 3de5e8d Sep 18, 2018
Permalink
Failed to load latest commit information.
.circleci chore: release scripts for travis (#54) Sep 18, 2018
.github chore: Add PR template Aug 15, 2018
bench fix: compiler benchmark (#15) Jan 6, 2018
bin chore: release scripts for travis (#54) Sep 18, 2018
packages Add implementation for filter 'trim' to be compatible with Twig (#64) Sep 18, 2018
rfcs Initial Commit Oct 19, 2017
testsetup Initial Commit Oct 19, 2017
.babelrc chore: migrate to babel-preset-env (#50) (#51) Aug 17, 2018
.editorconfig Initial Commit Oct 19, 2017
.eslintrc.js Initial Commit Oct 19, 2017
.gitignore Initial Commit Oct 19, 2017
.prettierrc Chore - Setup travis (#1) Oct 25, 2017
.travis.yml chore: release scripts for travis (#54) Sep 18, 2018
CHANGELOG.md Add implementation for filter 'trim' to be compatible with Twig (#64) Sep 18, 2018
CODE_OF_CONDUCT.md Chore: Add Community guidelines for github repository (#22) Jan 12, 2018
CONTRIBUTING.md Chore: Add Community guidelines for github repository (#22) Jan 12, 2018
LICENSE Initial Commit Oct 19, 2017
README.md docs: dependency installation step (#19) Jan 7, 2018
jest.config.js chore: fixes circle ci tests with testURL (#49) Aug 15, 2018
jsconfig.json Initial Commit Oct 19, 2017
lerna.json v1.1.0 Aug 13, 2018
package.json chore: release scripts for travis (#54) Sep 18, 2018
rollup.config.js chore: migrate to babel-preset-env (#50) (#51) Aug 17, 2018
tsconfig.json Initial Commit Oct 19, 2017
yarn.lock chore: release scripts for travis (#54) Sep 18, 2018

README.md

Melody

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.