Electron Adventures: Episode 67: Malina
Tags: javascript, electron, svelte
Published: 2021-09-28 17:49:35

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](https://malinajs.github.io/docs/).

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.

```shell
$ 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.

```javascript
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.

```html
<!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:

```javascript
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.

```html
<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:

```html
  <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:

![Episode 67 Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyh1i51ka8e5t61fo0xz.png)

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](https://github.com/taw/electron-adventures/tree/master/episode-67-malina).