In this series we've tried out a bunch of different frameworks, from the omnipresent jQuery and React to ones you've at least heard of like Svelte, Vue, and D3, to completely obscure Marko.
Well, time for another one you've never heard of - Malina.
The easiest way to explain Malina is that Malina is to Svelte what Preact is to React. It's a simpler version with some different performance choices. If you know Svelte, Malina shouldn't be too difficult.
Setup
As usual, we'll start by setting up a fresh Malina project, then add Electron to it.
$ npx create-malina episode-67-malina
$ cd episode-67-malina
$ npm i --save-dev electron
index.js
We can use the same one as before, just changing the port number.
let { app, BrowserWindow } = require("electron")
function createWindow() {
let win = new BrowserWindow({
webPreferences: {
preload: `${__dirname}/preload.js`,
},
})
win.maximize()
win.loadURL("http://localhost:7000/")
}
app.on("ready", createWindow)
app.on("window-all-closed", () => {
app.quit()
})
And let's create empty preload.js. And remove package-lock.json from default .gitignore as we definitely want them in the repo, especially for a young and non-prod framework like Malina.
public/index.html
I customized a few things - removed the hardcoded title so the app can manage it, added UTF-8 declaration, and changed it to standard 2 space indentation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/malinajs.svg">
<link rel="stylesheet" href="/bundle.css">
<script defer src="/bundle.js"></script>
</head>
<body></body>
</html>
src/main.js
Just as it was created except making style consistent with the series:
import App from "./App.xht"
App(document.body)
src/App.xht
.xht is Malina's equivalent of .svelte / .vue and such.
I did a few tiny changes - using 2 spaces indetation instead of 4, styling consistent with the rest of the series, and making it use dark mode.
<script>
let name = "world"
$: degrees = (name.length-5) * 5
</script>
<img src="./malinajs.svg" alt="Malina.js Logo" style:transform={`rotate(${degrees}deg)`}/>
<h1>Hello {name}!</h1>
<div>
<input type="text" :value={name} *{$element.focus()} />
</div>
<div>Edit and save file <code>src/App.xht</code> to reload</div>
<style type="scss">
:global(body) {
background-color: #444;
color: #fff;
}
img {
display: block;
width: 200px;
margin: 60px auto;
transition: .2s;
}
h1, div {
text-align: center;
min-width: 300px;
margin: 40px auto;
}
input {
font-size: 24px;
}
</style>
As you can see most of it looks like Svelte, but this line has a lot of extra syntax:
<input type="text" :value={name} *{$element.focus()} />
Malina :value={name} is shortcut for Svelte's bind:value={name}. *{} is Malina's equivalent of Svelte's use:{}. In both cases longer Svelte syntax works as well.
Results
Here's the results:
Now that we got Hello World working in Malina, let's try to port our hex editor!
As usual, all the code for the episode is here.
Top comments (0)