Mint 🌿 język programowania do pisania aplikacji jednostronicowych (SPA)

wprowadzenie

Witam! 👋 Dzisiaj opowiem wam o Mint lang, bardzo młodym (ale ciekawym) języku programowania skupionym na budowaniu SPA (aplikacji jednostronicowych). Posiada wszystkie narzędzia potrzebne do pisania bezbłędnych, łatwo czytelnych i łatwych do utrzymania aplikacji w rekordowym czasie.

pod wrażeniem? Ja też! Zajmijmy się tym razem… 😉

Table spis treści

• czym właściwie jest Mint lang?
  • dlaczego nie JavaScript?
  • dlaczego nie Elm?
• Dlaczego Mięta?
• Mint tools & ekosystem
  • rozszerzenia edytora
  • CLI
  • zdecentralizowane zarządzanie pakietami
  • Routing
  • Stylizacja CSS
• wynik końcowy

czym właściwie jest Mint Lang?

przede wszystkim mięta pisana na krysztale:

uniwersalny, obiektowy język programowania ze składnią zainspirowaną językiem Ruby jest to skompilowany język ze statycznym sprawdzaniem typów, ale określanie typów zmiennych lub argumentów metody jest na ogół niepotrzebne.

— Wiki

następnie postępuj zgodnie z oficjalnym przewodnikiem Mint:

Mint to język stworzony specjalnie do pisania aplikacji jednostronicowych. Jest to kompilator i framework połączony w celu zapewnienia doskonałego doświadczenia programistów, jednocześnie umożliwiając pisanie bezpiecznego, czytelnego i łatwego do utrzymania kodu.

tak, to prawda! Wygląda na ten kod (przepraszam za podświetlenie kodu):

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

bardzo podobny do ściśle typowego języka, ale z dołączonym stylem JSX, prawda?

zrodził się z frustracji języka JavaScript i ekosystemu (npm) i języka Elm i nie jest to tak otwarte praktyki programistyczne.

OK! 👌 Zdecydujmy od razu: dlaczego nie JavaScript i co jest nie tak z Elm.

dlaczego nie JavaScript?

JavaScript nie jest językiem mocno wpisanym, co utrudnia pisanie kodu wolnego od błędów i prowadzi do niezbyt dobrego doświadczenia programistów.

ponadto nie ma narzędzi do tworzenia aplikacji internetowych po wyjęciu z pudełka, potrzebujesz frameworków i kompilatorów oraz narzędzi zwiększających złożoność.

dlaczego nie Elm?

Elm ma świetne doświadczenie programistyczne, ale jest to język czysto funkcjonalny, który prowadzi do pewnego kodu boilerplate i utrudnia naukę.

ponadto nie jest możliwe, aby przyczynić się lub wpłynąć na język w jakikolwiek znaczący sposób.

dlaczego Mint lang? 🤔

celem Mint jest połączenie doświadczenia programistów Elm i ekspresji Reacta, aby stworzyć idealny język do tworzenia aplikacji jednostronicowych.

po roku rozwoju Mennica ma następujące funkcje:

1. dobry system typu
2. ładne komunikaty o błędach
3. formatowanie
4. komponenty do składu
5. sklepy do przechowywania danych
6. Wbudowana stylizacja
7. Wbudowana routing
8. świetny interoperacyjność JavaScript
9. niezmienne struktury danych

Mint tools & ecosystem

Nie mówiłbym o tym języku programowania, gdyby nie miał ekosystemu do uruchamiania i rozwijania. Więc! VS

rozszerzenia edytora

• VS Code — dodaje podświetlanie składni i obsługę autouzupełniania
• Emacs — dodaje podświetlanie składni i automatyczne formatowanie przy użyciu formatu mint
• IntelliJ IDEA-dodaje podświetlanie składni
• Atom — dodaje podświetlanie składni
• Vim — bardzo minimalne (ale działa) składnia/ftdetect combo

CLI

instalacja Mint CLI za pomocą polecenia:

# 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

a teraz Zobacz wszystkie polecenia wywołując Mint z flagą --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━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

zdecentralizowane zarządzanie pakietami

ta strona zawiera pakiety, których możesz użyć w swoich projektach:

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

Routing

trasy aplikacji są definiowane na najwyższym poziomie za pomocą bloku routes. Należy pamiętać o następujących rzeczach:

• trasy są dopasowywane w kolejności, w jakiej są definiowane od góry do dołu
• trasy mogą mieć tylko jeden blok tras na aplikację
• trasy są używane do ustawiania stanu, a nie do renderowania rzeczy

przykładowy kod:

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

Stylizacja CSS

w komponentach Mint style mogą być definiowane za pomocą identyfikatora, a następnie stosowane do HTML przy użyciu identyfikatora jako klasy CSS.

styl może zawierać dowolną liczbę definicji CSS, reguł podrzędnych, zapytań o media, instrukcji if i case.

przykładowy kod:

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

wynik końcowy

po mint build masz gotowe do produkcji Preact SPA. To jest to!

zdjęcie autorstwa

Ben Kolde https://unsplash.com/photos/H29h6a8j8QM
autorzy Mennicyhttps://www.mint-lang.com
Anthony Fominhttps://unsplash.com/photos/Hr6dzqNLzhw

P. S.