DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on

Electron Adventures: Episode 67: Malina

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
Enter fullscreen mode Exit fullscreen mode

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()
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

src/main.js

Just as it was created except making style consistent with the series:

import App from "./App.xht"
App(document.body)
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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()} />
Enter fullscreen mode Exit fullscreen mode

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

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.

Discussion (0)