Mint – Le langage de programmation pour l’écriture d’applications d’une seule page (SPA)

Introduction

Bonjour! Today Aujourd’hui, je vais vous raconter l’histoire de Mint lang, très jeune (mais intéressant) langage de programmation axé sur la construction de SPA (applications à une page). Il dispose de tous les outils dont vous avez besoin pour écrire des applications sans erreur, facilement lisibles et maintenables en un temps record.

Impressionné? Moi aussi! Réglons ça ensemble… 😉

Table Table des matières

• Qu’est-ce que Mint lang en fait ?
  • Pourquoi pas JavaScript ?
  • Pourquoi pas l’orme?
• Pourquoi la Menthe?
• Outils Mint & écosystème
  • Extensions d’éditeur
  • CLI
  • Gestion décentralisée des paquets
  • Routage
  • Style CSS
• Résultat final

Qu’est-ce que Mint lang en fait?

Tout d’abord, Menthe écrite sur Cristal:

un langage de programmation orienté objet à usage général avec une syntaxe inspirée du langage Ruby c’est un langage compilé avec une vérification de type statique, mais la spécification des types de variables ou d’arguments de méthode est généralement inutile.

— Wiki

Ensuite, suivez le guide officiel de la monnaie:

Mint est un langage spécialement créé pour l’écriture d’applications d’une seule page. C’est un compilateur et un framework combinés pour fournir une grande expérience de développeur tout en permettant d’écrire du code sûr, lisible et maintenable.

Oui, c’est vrai! Regarde ce code (désolé pour la mise en évidence du code):

// src/App.mintcomponent 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> }}

Très similaire à un langage strictement typé, mais avec le style JSX inclus, non?

Il est né de la frustration du langage et de l’écosystème JavaScript (NPM) et du langage Elm et ses pratiques de développement ne sont pas si ouvertes.

OK! decide Décidons tout de suite: pourquoi pas JavaScript et ce qui ne va pas avec Elm.

Pourquoi pas JavaScript ?

JavaScript n’est pas un langage fortement typé, ce qui rend difficile l’écriture de code sans erreur et conduit à une expérience de développeur moins géniale.

De plus, il n’a pas les outils nécessaires pour créer des applications Web prêtes à l’emploi, vous avez besoin de frameworks et de compilateurs et de créer des outils qui augmentent la complexité.

Pourquoi pas l’orme?

Elm a une grande expérience de développeur, mais c’est un langage purement fonctionnel qui conduit à un code standard et le rend plus difficile à apprendre.

De plus, il n’est pas possible de contribuer ou d’influencer le langage de manière significative.

Pourquoi Mint lang? 🤔

Mint vise à combiner l’expérience des développeurs d’Elm et l’expressivité de React pour créer le langage idéal pour créer des applications d’une seule page.

Après un an de développement, Mint présente les caractéristiques suivantes:

1. Un bon système de type
2. Beaux messages d’erreur
3. Formateur
4. Composants pour la composition
5. Magasins pour le stockage de données
6. Style intégré
7. Routage intégré
8. Excellent JavaScript interopérabilité
9. Structures de données immuables

Mint tools & ecosystem

Je ne parlerais pas de ce langage de programmation s’il n’avait pas d’écosystème pour démarrer et développer. Alors ! extensions

Extensions de l’éditeur

• VS Code — ajoute la coloration syntaxique et la prise en charge de la saisie semi—automatique
• Emacs – ajoute la coloration syntaxique et la mise en forme automatique au format mint
• IntelliJ IDEA — ajoute la coloration syntaxique
• Atom — ajoute la coloration syntaxique
• Vim — syntaxe très minimale (mais fonctionnelle) / combo ftdetect

CLI

Installation de la CLI Mint via la commande:

# 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

Et maintenant, voir toutes les commandes en appelant Mint avec l’indicateur --help:

$ mint --helpMint - Help━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━Usage: mint MintFlags: --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━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Gestion décentralisée des paquets

Cette page contient les paquets que vous pouvez utiliser dans vos projets:

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

Routage

Les routes d’une application sont définies au niveau supérieur avec le bloc routes. Gardez à l’esprit les choses suivantes:

• Les routes sont appariées dans l’ordre dans lequel elles sont définies de haut en bas
• Les routes ne peuvent avoir qu’un seul bloc de routes par application
• Les routes sont utilisées pour définir l’état, pas pour rendre les choses

Exemple de 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) } }}

Style CSS

Dans les composants Mint, les styles peuvent être définis avec un identifiant, puis appliqués au HTML en utilisant l’identifiant comme classe CSS.

Un style peut contenir n’importe quel nombre de définitions CSS, de sous-règles, de requêtes multimédias, d’instructions if et case.

Exemple de code:

component Main { style button { background: red; color: white; border: 0; } fun render : Html { <button::button> "Click ME!" </button> }}

Résultat final

Après mint build, vous avez Preact SPA prêt pour la production. C’est tout! Photo

Photo de

Ben Kolde https://unsplash.com/photos/H29h6a8j8QM
Auteurs à la menthe https://www.mint-lang.com
Anthony Fomin https://unsplash.com/photos/Hr6dzqNLzhw

P.S.