Forem

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on

3 2

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay