Merlin, a Hyperapp alternative #1119
Replies: 4 comments 7 replies
-
This looks great! I've checked out Raj before and found it cool too, nice job. My only gripe would be with Tint itself... I'm not a fan of template languages. Using artifacts like Thanks for sharing! Maybe I should give string template engines a second chance after all. 👍 |
Beta Was this translation helpful? Give feedback.
-
I will try to create a version of it using hyperscript. You lose a little in readability and ease of use for designers, but you gain a lot in power and simplicity. A single language is the best of all worlds. But hyperscript presupposes a mental conversion to html. I don't have an answer, I use hyperscript, and I use non-functional interfaces. In this work I tried to do something pleasant without trying to solve all the UI problems I face. |
Beta Was this translation helpful? Give feedback.
-
An alternative that I like and that greatly improves the clarity of the hyperscript is this: import app from "https://unpkg.com/hyperapp"
const AddTodo = (state) => ({
...state,
value: "",
todos: state.todos.concat(state.value),
})
const NewValue = (state, event) => ({
...state,
value: event.target.value,
})
app({
init: {
todos: [],
value: ""
},
view: ({
todos,
value
}, {main, h1, input, ul, li, button, text}) =>
main({}, [
h1({}, [
text("To do list")
]),
input({
type: "text",
oninput: NewValue,
value
}),
ul({}, todos.map((todo) =>
li({}, [
text(todo)
])
)),
button({
onclick: AddTodo
}, [
text("New!")
]),
]),
node: document.getElementById("app"),
}) If I were the creator of the hyperapp I would have done it this way. You add size due to html tags (which in a minimalist library counts) but you gain in simplicity without introducing global variables. If I'm going to follow your advice and remove Tint I would do it this way. With the following rules:
|
Beta Was this translation helpful? Give feedback.
-
Maybe this is the best approach, because it allows you to write templates outside the app. import {app, html} from "https://unpkg.com/hyperapp"
const AddTodo = (state) => ({
...state,
value: "",
todos: state.todos.concat(state.value),
})
const NewValue = (state, event) => ({
...state,
value: event.target.value,
})
app({
init: {
todos: [],
value: ""
},
view: ({
todos,
value
}) => html(({main, h1, input, ul, li, button, text}) =>
main({}, [
h1({}, [
text("To do list")
]),
input({
type: "text",
oninput: NewValue,
value
}),
ul({}, todos.map((todo) =>
li({}, [
text(todo)
])
)),
button({
onclick: AddTodo
}, [
text("New!")
]),
])
),
node: document.getElementById("app"),
}) |
Beta Was this translation helpful? Give feedback.
-
The Merlin JS framework
Raj + Superfine + Tint + SPA Router = ❤️
This is my framework following the teachings of hyperapp.
It uses:
I'm a big fan of functional interfaces and Jorge Bucaran's minimalist approach.
Furthermore, I really like template engines and separating design from logic.
I created a template engine that allows you to use HTML instead of hyperscript and wrote a wrapper for the hyperapp.
Beta Was this translation helpful? Give feedback.
All reactions