Melody is small, only 8kb (minified, not gzipped) at its core, making it fast for the browser to download and parse.
Melody is a fast and memory efficient library for creating highly dynamic user interfaces
# Create a Melody app
yarn create melody-app my-app
In a nutshell
Melody's compiler supports you by giving you understandable and accurate error messages whenever it cannot make sense of a template.
Live in production to millions of trivago users worldwide.
Melody was designed in a modular fashion from the ground up. You can change what goes in, like a different template language, and you are in control what comes out: If you need a different view layer, that's no problem.
Melody is among the fastest UI libraries out there. Because of its adaptive rendering and memory efficiency, garbage collection is kept at a minimum, giving the browser lots of time to draw smooth and responsive user interfaces.
Melody provides an API (or set of functions) to enhance your views, it leverages functional programming to help you to create better structure for your applications.
Melody is different
- Smaller
- Flexible
- Efficient
- Functional
Melody is smaller (8 kb) than most other popular frameworks and libraries: React (40kb), Vue (18kb), Angular 2 (120kb), Glimmer (38kb).
Melody in action
<form ref="{{ form }}" action="javascript:;">
<input value="{{ text }}" ref="{{ input }}" />
<button ref="{{ add }}" type="submit">Add</button>
<ul>
{% for todo in todos %}
<li>{{ todo }}</li>
{% endfor %}
</ul>
</form>
import {render, createComponent, RECEIVE_PROPS} from 'melody-component';
import {bindEvents} from 'melody-hoc';
import template from './TodoList.twig';
const stateReducer = (state = {todos: ['Read docs'], text: ''}, {type, payload}) => {
switch (type) {
case RECEIVE_PROPS: return {...state, ...payload};
case 'TEXT_CHANGE': return {...state, text: payload};
case 'ADD_TODO':
const {todos, text} = state;
return {...state, todos: todos.concat(text), text: ''};
}
return state;
};
const enhance = bindEvents({
form: {
submit(event, {dispatch, getState}) {
event.preventDefault();
if(getState().text == '') return;
dispatch({type: 'ADD_TODO'});
}
},
input: {
input(event, {dispatch}) {
dispatch({type: 'TEXT_CHANGE', payload: event.target.value});
}
}
});
export default enhance(createComponent(template, stateReducer));
Let’s get started
Check out the 5 mins tutorial on how to build your first Melody application.
# Create a Melody app
yarn create melody-app my-app
Dive deeper and read the documentation