ミント🌿のプログラミング言語のための書面のページの応用(スパ)
Articles
0 Comments

ミント🌿のプログラミング言語のための書面のページの応用(スパ)

導入

こんにちは! ▲今日、私はあなたにミントラング、非常に若い（しかし興味深い）プログラミング言語は、SPA（単一ページのアプリケーション）の構築に焦点を当てた話をします。 それはあなたが記録的な時間で、エラーフリー、読みやすく、保守可能なアプリケーションを書くために必要なすべてのツールを持っています。

私も！ 一緒にこれに対処しましょう。.. 😉

contents目次

  • 実際にMint langとは何ですか？
    • なぜエルムではないのですか？
  • なぜミント？
  • Mint tools&ecosystem
    • Editor extensions
    • CLI
    • 分散パッケージ管理
    • Routing
    • CSSスタイリング
  • 最終結果

ミントラングのロゴ

実際にミントラングとは何ですか？

まず、クリスタルに書かれたミント:

言語Rubyに触発された構文を持つ汎用オブジェクト指向プログラミング言語静的な型チェックを持つコンパイルされた言語ですが、変数やメソッド引数の型を指定することは一般的に不要です。

—Wiki

次に、公式ミントガイドに従ってください:

Mintは、単一ページアプリケーションを記述するために特別に作成された言語です。 これは、安全で読みやすく、保守可能なコードを書くことを可能にしながら、優れた開発者の経験を提供するために組み合わされたコンパイ

はい、それは本当です！ このコードを見ます（コードの強調表示に申し訳ありません):

// 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> }}
全画面モードに入る全画面モードを終了する

厳密に典型化された言語に非常に似ていますが、JSXスタイルが含まれていますよね？

これは、JavaScript言語とエコシステム（NPM）とElm言語の欲求不満から生まれたものであり、それほどオープンな開発プラクティスではありません。

OK！ なぜJavaScriptではなく、Elmの何が間違っているのかをすぐに決めましょう。

JavaScriptは厳密に型指定された言語ではなく、エラーのないコードを書くことを困難にし、開発者の経験をそれほど大きくしません。

また、webアプリケーションをすぐに作成するツールはなく、フレームワークやコンパイラが必要であり、複雑さを増すツールを構築する必要があります。

なぜエルムではないのですか？

Elmは素晴らしい開発者の経験を持っていますが、純粋に関数型言語であるため、定型コードがいくつかあり、学習が難しくなります。

また、意味のある方法で言語に貢献したり影響を与えたりすることはできません。

なぜミントラング？ 🤔

Mintは、Elmの開発者の経験とReactの表現力を組み合わせて、単一ページのアプリケーションを構築するための完璧な言語を作成することを目指しています。

一年の開発の後、Mintには次のような機能があります:

  1. 良いタイプのシステム
  2. 素敵なエラーメッセージ
  3. フォーマッタ
  4. コンポジション用のコンポーネント
  5. データストレージ用のストア
  6. 組み込みのスタイリング
  7. 組み込みのルーティング
  8. 素晴らしいJavaScript相互運用性
  9. 不変データ構造

Mint tools ecosystem

Mint tools&ecosystem

このプログラミング言語に開始と開発のためのエコシステムがなければ、私はこのプログラミング言語について話しません。 だから！ 😎

エディタ拡張

  • VS Code—構文の強調表示とオートコンプリートのサポートを追加
  • Emacs—ミント形式を使用した構文の強調表示と自動書式設定を追加
  • IntelliJ IDEA-構文の強調表示を追加
  • Atom—構文の強調表示を追加
  • Vim—非常に最小限の（しかし動作する）構文/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリート/オートコンプリートftdetect combo

cli

コマンドによるmint cliのインストール:

# 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
全画面モードに入る全画面モードを終了する

そして今、--helpフラグを使用してMintを呼び出してすべてのコマンドを参照してくださ:

$ 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━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
全画面モードに入る全画面モードを終了する

分散型パッケージ管理

このページには、プロジェクトで使用できるパッケージが含まれています:

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

アプリケーションのルーティング

ルートは、routesブロックでトップレベルで定義されます。 次のことに注意してください:

  • ルートは、上から下に定義されている順序で一致します
  • ルートは、アプリケーションごとに一つのルートブロックを持つことができます
  • ルートは、物事をレンダーするのではなく、状態を設定するために使用されます

サンプルコード:

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スタイル設定

Mintコンポーネントでは、スタイルを識別子で定義し、その識別子をCSSクラスとして使用してHTMLに適用できます。

スタイルには、任意の数のCSS定義、サブルール、メディアクエリ、ifおよびcaseステートメントを含めることができます。

コード例:

component Main { style button { background: red; color: white; border: 0; } fun render : Html { <button::button> "Click ME!" </button> }}
全画面モードに入る全画面モードを終了する

最終結果

mint buildの後に、生産準備ができているPreact SPAがあります。 これで終わりです！

写真：

ベン-コルデhttps://unsplash.com/photos/H29h6a8j8QM
ミントの著者https://www.mint-lang.com
アンソニー-フォミンhttps://unsplash.com/photos/Hr6dzqNLzhw

P.S.

コメントを残す

メールアドレスが公開されることはありません。

More: