loading...
Cover image for Mint 🌿 The programming language for writing single page applications (SPA)

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

koddr profile image Vic ShΓ³stak ・4 min read

Good to know (2 Part Series)

1) The V programming language 2) 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


Mint lang logo

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

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:

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 β€” write a comment below & follow me. Thx! 😘

Good to know (2 Part Series)

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

Posted on by:

koddr profile

Vic ShΓ³stak

@koddr

Hey! πŸ‘‹ I'm founder and full stack web developer (Go, JavaScript, Docker & automation) at True web artisans. Golang lover, UX evangelist, DX philosopher & UI Dreamer with over 12+ years of experience.

Discussion

markdown guide
 

It's kind of crazy to think we've come so far as to need entire languages specifically intended for building SPAs, but I think this seems to be quite useful and I was impressed by some of its features.

 

The author does not like Elm so much that he even put "Why not Elm" in the official guide for the Mint language. No thanks. That's too much.

BTW what Mint makes different from TypeScript + React and friends?

 

BTW what Mint makes different from TypeScript + React and friends?

Hmm.. I'm not author of Mint lang and don't know that πŸ€·β€β™‚οΈ

But I think, it's different way to write code (and build SPA/Frontend). Because in my opinion, Mint is something like template engine (Pug, for example) with some logic, who's compiling to browser's standard format (html, js, css).

So, it's wrong to compare TypeScript and Mint lang directly like this.

 

Very good news, I was waiting for a language for the web different than JavaScript.

Not so mature yet, but impressive list of features for a recently born language.
Definitely going to give it a try.

 

Wow! How to call him? Interesting πŸ˜‰

 

I'm honestly surprised about the fact that there is a language specifically used to design SPAs!
But to be honest I don't think it is going to be used as much as JavaScript is used.

 

Syntax and Readability are very easy to understand. I will surely make some time to give it a try.

 

looks like a gamer changer
thx for sharing such a great thing

 
 

Looks very simple and interesting, but I'm not sure if I like the syntax πŸ€”

 

Wait for state management built in feature :D

 

What about browser support?

 

It compiles to Preact SPA template.

 

Very nice!
Communication with server: mint-lang.com/blog/handling-http-r...
What about Web Sockets?