Mint 🌿 Die Programmiersprache zum Schreiben von Single Page Applications (SPA)

Einführung

Hallo! 👋 Heute erzähle ich Ihnen eine Geschichte über Mint lang, eine sehr junge (aber interessante) Programmiersprache, die sich auf den Aufbau von SPA (Single Page Applications) konzentriert. Es verfügt über alle Tools, die Sie benötigen, um fehlerfreie, leicht lesbare und wartbare Anwendungen in Rekordzeit zu schreiben.

Beeindruckt? Ich auch! Lassen Sie uns gemeinsam damit umgehen… 😉

📝 Inhaltsverzeichnis

• Was ist Mint lang eigentlich?
  • Warum nicht JavaScript?
  • Warum nicht Ulme?
• Warum Minze?
• Mint-Tools & Ökosystem
  • Editor-Erweiterungen
  • CLI
  • Dezentrales Paketmanagement
  • Routing
  • CSS-Styling
• Endergebnis

Was ist Mint lang eigentlich?

Vor allem Minze auf Kristall geschrieben:

eine universelle, objektorientierte Programmiersprache mit Syntax, die von der Sprache inspiriert ist Ruby Es ist eine kompilierte Sprache mit statischer Typprüfung, aber die Angabe der Typen von Variablen oder Methodenargumenten ist im Allgemeinen nicht erforderlich.

– Wiki

Folgen Sie als nächstes dem offiziellen Mint-Leitfaden:

Mint ist eine Sprache, die speziell für das Schreiben von einseitigen Anwendungen entwickelt wurde. Es ist ein Compiler und ein Framework, die kombiniert werden, um eine großartige Entwicklererfahrung zu bieten und gleichzeitig sicheren, lesbaren und wartbaren Code zu schreiben.

Ja, es ist wahr! Schaut auf diesen Code (Entschuldigung für die Code-Hervorhebung):

// 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> }}

Sehr ähnlich einer streng typisierten Sprache, aber mit JSX-Stil, oder?

Es wurde aus der Frustration der JavaScript-Sprache und des Ökosystems (NPM) und der Elm-Sprache geboren und ist nicht so offen für Entwicklungspraktiken.

OK! 👌 Lassen Sie uns sofort entscheiden: Warum nicht JavaScript und was ist los mit Elm.

Warum nicht JavaScript?

JavaScript ist keine stark typisierte Sprache, die es schwierig macht, fehlerfreien Code zu schreiben und zu einer nicht so großartigen Entwicklererfahrung führt.

Außerdem verfügt es nicht über die Tools zum Erstellen von Webanwendungen, Sie benötigen Frameworks und Compiler und erstellen Tools, die die Komplexität erhöhen.

Warum nicht Ulme?

Elm hat große Entwickler-Erfahrung, aber es ist eine rein funktionale Sprache führt zu einigen Boilerplate-Code und macht es schwieriger zu lernen.

Es ist auch nicht möglich, die Sprache in irgendeiner sinnvollen Weise beizutragen oder zu beeinflussen.

Warum Mint lang? 🤔

Mint zielt darauf ab, die Entwicklererfahrung von Elm und die Ausdruckskraft von React zu kombinieren, um die perfekte Sprache für die Erstellung von Single-Page-Anwendungen zu erstellen.

Nach einem jahr der entwicklung, Mint hat die folgenden eigenschaften:

1. Ein gutes Typsystem
2. Nette Fehlermeldungen
3. Formatierer
4. Komponenten für die Komposition
5. Speicher für die Datenspeicherung
6. Eingebautes Styling
7. Eingebautes Routing
8. Tolles JavaScript interoperabilität
9. Unveränderliche Datenstrukturen

Mint tools & ecosystem

Ich würde nicht über diese Programmiersprache sprechen, wenn sie kein Ökosystem zum Starten und Entwickeln hätte. Also! 😎

Editor—Erweiterungen

• VS Code — fügt Syntaxhervorhebung und Autocomplete-Unterstützung hinzu
• Emacs — fügt Syntaxhervorhebung und automatische Formatierung mit Mint—Format hinzu
• IntelliJ IDEA — fügt Syntaxhervorhebung hinzu
• Atom – fügt Syntaxhervorhebung hinzu
• Vim – sehr minimale (aber funktionierende) Syntax /ftdetect /

CLI

Mint-CLI über Befehl installieren:

# 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

Und jetzt sehen Sie alle Befehle per Callback mit --help Flag:

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

Dezentrale Paketverwaltung

Diese Seite enthält die Pakete, die Sie in Ihren Projekten verwenden können:

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

Routing

Routen einer Anwendung werden auf der obersten Ebene mit dem routes-Block definiert. Beachten Sie die folgenden Dinge:

• Routen werden in der Reihenfolge abgeglichen, in der sie von oben nach unten definiert sind
• Routen können nur einen Routenblock pro Anwendung haben
• Routen werden verwendet, um den Status festzulegen, nicht um Dinge zu rendern

Beispielcode:

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-Komponenten können Stile mit einem Bezeichner definiert und dann mithilfe des Bezeichners als CSS-Klasse auf HTML angewendet werden.

Ein Stil kann eine beliebige Anzahl von CSS-Definitionen, Unterregeln, Medienabfragen, if – und case -Anweisungen enthalten.

Beispielcode:

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

Endergebnis

Nach mint buildhaben Sie production ready Preact SPA. Das war’s! 🎉

Foto von

Ben Kolde https://unsplash.com/photos/H29h6a8j8QM
Münzautoren https://www.mint-lang.com
Anthony Fomin https://unsplash.com/photos/Hr6dzqNLzhw

PS