Pénzverde a programozási nyelv az egyoldalas alkalmazások írásához (SPA)

Bevezetés

Hello! Ma elmondom neked a Mint lang-ról szóló történetet, egy nagyon fiatal (de érdekes) programozási nyelvről, amely a SPA (egyoldalas alkalmazások) építésére összpontosít. Ez minden eszközt meg kell írni hibamentes, könnyen olvasható és karbantartható alkalmazások rekordidő alatt.

lenyűgözött? Én is! Oldjuk meg együtt… 608

tartalomjegyzék

• mi is valójában a Mint lang?
  • miért nem JavaScript?
  • miért nem Szilfa?
• Miért Menta?
• Mint eszközök & ökoszisztéma
  • Szerkesztőbővítmények
  • CLI
  • decentralizált csomagkezelés
  • útválasztás
  • CSS stílus
• végeredmény

mi a Mint lang valójában?

először is, menta írt kristály:

általános célú, objektumorientált programozási nyelv szintaxissal, amelyet a nyelv ihletett Ruby ez egy lefordított nyelv statikus típusellenőrzéssel, de a változók vagy metódus argumentumok típusainak meghatározása általában szükségtelen.

– Wiki

következő, kövesse a hivatalos pénzverde útmutatót:

A pénzverde egy kifejezetten egyoldalas alkalmazások írására létrehozott nyelv. Ez egy fordító és egy keretrendszer, amely nagyszerű fejlesztői élményt nyújt, miközben lehetővé teszi a biztonságos, olvasható és karbantartható kód írását.

Igen, ez igaz! Úgy néz ki, hogy ez a kód (elnézést a kód kiemelése):

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

nagyon hasonlít egy szigorúan tipizált nyelvhez, de a mellékelt JSX stílussal, igaz?

a JavaScript nyelv és ökoszisztéma (NPM) és az Elm nyelv frusztrációjából született, és ez nem olyan nyílt fejlesztési gyakorlat.

rendben! Tegyük fel rögtön: miért nem JavaScript és mi a baj az Elm-mel.

miért nem JavaScript?

a JavaScript nem erősen gépelt nyelv, ami megnehezíti a hibamentes kód írását, és nem túl nagy fejlesztői élményhez vezet.

továbbá nem rendelkezik olyan eszközökkel, amelyek webes alkalmazásokat hoznának létre a dobozból, keretrendszerekre és fordítókra van szükség, és olyan eszközöket kell építeni, amelyek növelik a komplexitást.

miért nem Szilfa?

az Elm nagy fejlesztői tapasztalattal rendelkezik, de mivel tisztán funkcionális nyelv, némi boilerplate kódhoz vezet, és megnehezíti a tanulást.

Továbbá, ez nem lehetséges, hogy hozzájáruljon, vagy befolyásolja a nyelv bármilyen értelmes módon.

Miért Mint lang? 🤔

A Mint célja az Elm fejlesztői tapasztalatainak és a React kifejezőképességének ötvözése, hogy tökéletes nyelvet hozzon létre az egyoldalas alkalmazások készítéséhez.

egy év fejlesztés után a Mint a következő tulajdonságokkal rendelkezik:

1. egy jó típusú rendszer
2. szép hibaüzenetek
3. formázó
4. összetevők összetételéhez
5. adattároló üzletek
6. beépített stílus
7. beépített útválasztás
8. nagy JavaScript interoperabilitás
9. megváltoztathatatlan adatstruktúrák

Mint tools & ecosystem

nem beszélnék erről a programozási nyelvről, ha nem lenne ökoszisztéma a kezdéshez és a fejlesztéshez. Szóval! 608 >

szerkesztő kiterjesztés

• VS kód — szintaxiskiemelés és automatikus kiegészítés támogatása
• Emacs — szintaxiskiemelés és automatikus formázás hozzáadása a mint formátum használatával
• IntelliJ IDEA-szintaxiskiemelés hozzáadása
• Atom — szintaxiskiemelés hozzáadása
• Vim — nagyon minimális (de működik syntax/ftdetect combo

CLI

A mint CLI telepítése parancs segítségével:

# 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

és most, lásd az összes parancsot call Mint --help zászló:

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

decentralizált csomagkezelés

ez az oldal a projektjeiben használható csomagokat tartalmazza:

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

Routing

egy alkalmazás útvonalai a legfelső szinten vannak meghatározva a routes blokkkal. Ne feledje a következő dolgokat:

• útvonalak illeszkedik a sorrendben vannak meghatározva fentről lefelé
• útvonalak csak egy útvonalak blokk egy alkalmazás
• útvonalak használják, hogy állítsa be az állam, nem teszi a dolgokat

példa kód:

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

A Mint komponensekben a stílusok azonosítóval definiálhatók, majd az azonosítót CSS osztályként használva alkalmazhatók a HTML-re.

egy stílus tetszőleges számú CSS definíciót, alszabályt, média lekérdezést, if és case utasítást tartalmazhat.

példa kód:

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

végeredmény

miután mint build, akkor a termelés kész Preact SPA. Ez az! 608 >

fotó:

Ben Kolde https://unsplash.com/photos/H29h6a8j8QM
menta szerzők https://www.mint-lang.com
Anthony Fomin https://unsplash.com/photos/Hr6dzqNLzhw

P. S.