Mint 🌿 The programming language for writing single page applications (SPA)
Tags: npm, javascript, news, webdev
Published: 2020-03-14 15:03:59

## 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?](#ch-1)
  - [Why not JavaScript?](#ch-1-1)
  - [Why not Elm?](#ch-1-2)
- [Why Mint?](#ch-2)
- [Mint tools & ecosystem](#ch-3)
  - [Editor extensions](#ch-3-1) 
  - [CLI](#ch-3-2)
  - [Decentralized package management](#ch-3-3)
  - [Routing](#ch-3-4)
  - [CSS Styling](#ch-3-5)
- [Final result](#ch-4)

<a name="ch-0"></a>
![Mint lang logo](https://dev-to-uploads.s3.amazonaws.com/i/53qvkg1tgffx0iqrq225.png)

<a name="ch-1"></a>
## What's Mint lang actually?

First of all, **Mint** written on [Crystal](https://crystal-lang.org): 

> [...] 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](https://www.mint-lang.com/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_):

```jsx
// 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.

<a name="ch-1-1"></a>
### 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.

<a name="ch-1-2"></a>
### 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.

<a name="ch-2"></a>
## 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](https://dev-to-uploads.s3.amazonaws.com/i/wp392n95kqubbptlvlvv.jpg)

<a name="ch-3"></a>
## Mint tools & ecosystem

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

<a name="ch-3-1"></a>
### Editor extensions

- [VS Code](https://github.com/faustinoaq/vscode-mint-lang) — adds syntax highlighting and autocomplete support
- [Emacs](https://github.com/creatorrr/emacs-mint-mode) — adds syntax highlighting and auto-formatting using mint format
- [IntelliJ IDEA](https://github.com/kingsleyh/intellij-mint) — adds syntax highlighting
- [Atom](https://github.com/kingsleyh/language-mint) — adds syntax highlighting
- [Vim](https://github.com/IrenejMarc/vim-mint) — very minimal (but working) syntax/ftdetect combo

<a name="ch-3-2"></a>
### CLI

Installing **Mint** CLI via command:

```bash
# 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:

```bash
$ 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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

<a name="ch-3-3"></a>
### Decentralized package management

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

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

<a name="ch-3-4"></a>
### 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:

```jsx
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)
    }
  }
}
```

<a name="ch-3-5"></a>
### 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:

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

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

<a name="ch-4"></a>
## Final result

After `mint build`, you have **production** ready [Preact](https://preactjs.com) 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

<a name=""></a>
## P.S.

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

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 projects that need your help (and stars) 👇

- 🔥 [gowebly][gowebly_url]: A next-generation CLI tool for easily build amazing web applications with Go on the backend, using htmx & hyperscript and the most popular atomic/utility-first CSS frameworks on the frontend.
- ✨ [create-go-app][cgapp_url]: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
- 🏃 [yatr][yatr_url]: Yet Another Task Runner allows you to organize and automate your routine operations that you normally do in Makefile (or else) for each project.
- 📚 [gosl][gosl_url]: The Go Snippet Library provides snippets collection for working with routine operations in your Go programs with a super user-friendly API and the most efficient performance.
- 🏄‍♂️ [csv2api][csv2api_url]: The parser reads the CSV file with the raw data, filters the records, identifies fields to be changed, and sends a request to update the data to the specified endpoint of your REST API.
- 🚴 [json2csv][json2csv_url]: The parser can read given folder with JSON files, filtering and qualifying input data with intent & stop words dictionaries and save results to CSV files by given chunk size.

<!-- Footer links -->

[gowebly_url]: https://github.com/gowebly
[cgapp_url]: https://github.com/create-go-app
[yatr_url]: https://github.com/koddr/yatr
[gosl_url]: https://github.com/koddr/gosl
[csv2api_url]: https://github.com/koddr/csv2api
[json2csv_url]: https://github.com/koddr/json2csv