Mint 🌿 The programming language for writing single page applications (SPA)

Introduction

Hello! 👋 Today, I will tell you story about Mint lang, very young (but interesting) programming language focused on building SPA (single page applications). It has all tools you need to write error free, easily readable and maintainable applications in record time.

Impressed? Me too! Let's deal with this together... 😉

📝 Table of contents

• What's Mint lang actually?
  • Why not JavaScript?
  • Why not Elm?
• Why Mint?
• Mint tools & ecosystem
  • Editor extensions
  • CLI
  • Decentralized package management
  • Routing
  • CSS Styling
• Final result

What's Mint lang actually?

First of all, Mint written on Crystal:

[...] a general-purpose, object-oriented programming language [...] with syntax inspired by the language Ruby [...] it is a compiled language with static type-checking, but specifying the types of variables or method arguments is generally unneeded.

— Wiki

Next, follow official Mint guide:

Mint is a language specifically created for writing single-page applications. It is a compiler and a framework combined to provide great developer experience while allowing to write safe, readable and maintainable code.

Yes, it's true! Looks to this code (sorry for the code highlighting):

// src/App.mint

component Counter {
  state counter : Number = 0

  fun increment : Promise(Never, Void) {
    next { counter = counter + 1 }
  }

  fun decrement : Promise(Never, Void) {
    next { counter = counter - 1 }
  }

  fun render : Html {
    <div>
      <button onClick={decrement}>
        "Decrement"
      </button>

      <span>
        <{ Number.toString(counter) }>
      </span>

      <button onClick={increment}>
        "Increment"
      </button>
    </div>
  }
}

Very similar to a strictly typified language, but with included JSX-style, right?

[...] It was born out of the frustration of the JavaScript language and ecosystem (NPM) and the Elm language and it's not so open development practices.

OK! 👌 Let's decide right away: why not JavaScript and what's wrong with Elm.

Why not JavaScript?

JavaScript is not a strongly typed language which makes it difficult to write error-free code and leads to not so great developer experience.

Also, it does not have the tools to create web applications out of the box, you need frameworks and compilers and build tools that increase complexity.

Why not Elm?

Elm has great developer experience, but it being a purely functional language leads to some boilerplate code and makes it harder to learn.

Also, it's not possible to contribute or influence the language in any meaningful way.

Why Mint lang? 🤔

Mint aims to combine the developer experience of Elm and the expressiveness of React to create the perfect language for building single-page applications.

After one year of development, Mint has the following features:

1. A good type system
2. Nice error messages
3. Formatter
4. Components for composition
5. Stores for data storage
6. Built-in styling
7. Built-in routing
8. Great JavaScript interoperability
9. Immutable data structures

Mint tools & ecosystem

I would not talk about this programming language if it did not have an ecosystem for starting and developing. So! 😎

Editor extensions

• VS Code — adds syntax highlighting and autocomplete support
• Emacs — adds syntax highlighting and auto-formatting using mint format
• IntelliJ IDEA — adds syntax highlighting
• Atom — adds syntax highlighting
• Vim — very minimal (but working) syntax/ftdetect combo

CLI

Installing Mint CLI via command:

# For macOS:
$ brew tap homebrew-community/alpha
$ brew install mint-lang

# For Linux:
$ wget --no-verbose -O mint https://mint-lang.s3-eu-west-1.amazonaws.com/mint-latest-linux
$ chmod +x ./mint
$ sudo mv ./mint /usr/local/bin/mint

And now, see all commands by call Mint with --help flag:

$ mint --help

Mint - Help
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Usage:
  mint [flags...] [arg...]

Mint

Flags:
  --env, -e (default: "")  # Loads the given .env file
  --help                   # Displays help for the current command.

Subcommands:
  build                    # Builds the project for production
  docs                     # Starts the documentation server
  format                   # Formats source files
  init                     # Initializes a new project
  install                  # Installs dependencies
  loc                      # Counts Lines of Code
  start                    # Starts the development server
  test                     # Runs the tests
  version                  # Shows version
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Decentralized package management

This page contains the packages that you can use in your projects:

• https://www.mint-lang.com/packages

Routing

Routes of an application are defined at the top level with the routes block. Keep in mind the following things:

• Routes are matched in the order they are defined from top to bottom
• Routes can only have one routes block per application
• Routes are used to set the state, not to render things

Example code:

routes {
  / {
    Application.setPage("index")
  }

  /users/:id (id: Number) {
    sequence {
      Application.setPage("show")
      Application.loadUser(id)
    }
  }

  /blog {
    Application.setPage("blog")
  }

  /blog/:slug (slug: String) {
    sequence {
      Application.setPage("post")
      Application.loadPost(slug)
    }
  }
}

CSS Styling

In Mint components, styles can be defined with an identifier, then applied to HTML using the identifier as a CSS class.

A style can contain any number of CSS definitions, sub rules, media queries, if and case statements.

Example code:

component Main {
  style button {
    background: red;
    color: white;
    border: 0;
  }

  fun render : Html {
    <button::button>
      "Click ME!"
    </button>
  }
}

Final result

After mint build, you have production ready Preact SPA. That's it! 🎉

Photo by

[Title] Ben Kolde https://unsplash.com/photos/H29h6a8j8QM
[1] Mint authors https://www.mint-lang.com
[2] Anthony Fomin https://unsplash.com/photos/Hr6dzqNLzhw

P.S.

If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻

❗️ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.

And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!

My main projects that need your help (and stars) 👇

• 🔥 gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
• ✨ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.

Other my small projects: yatr, gosl, json2csv, csv2api.