ミント🌿 単一ページアプリケーションを書くプログラミング言語( SPA )

17649 ワード
webdev news npm javascript テキストリンク

導入
こんにちは!👋 今日は、Min Langについての話をします.それはあなたがレコードフリーでエラーフリー、簡単に読み取り可能なアプリケーションを書くために必要なすべてのツールを持っています.
感動?私も!一緒にこれに対処しましょう.😉

📝 目次

  • What's Mint lang actually?
  • Why not JavaScript?
  • Why not Elm?
  • Why Mint?

  • Mint tools & ecosystem

  • Editor extensions
  • CLI
  • Decentralized package management
  • Routing
  • CSS Styling
  • Final result



    • ミントラングは何ですか?
    まず第一に、ミントCrystal :

    [...] a general-purpose, object-oriented programming language [...] with syntax inspired by the language Ruby [...] it is a compiled language with static type-checking, but specifying the types of variables or method arguments is generally unneeded.

    — Wiki


    次に、公式Mint guide :

    Mint is a language specifically created for writing single-page applications. It is a compiler and a framework combined to provide great developer experience while allowing to write safe, readable and maintainable code.


    はい、それは本当です!このコードを見てください(コードの強調表示が遅くなっています):
    // src/App.mint

component 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スタイルが含まれています.

    [...] It was born out of the frustration of the JavaScript language and ecosystem (NPM) and the Elm language and it's not so open development practices.


    OK!👌 すぐに決定しましょう:なぜJavaScriptではなく、何がエルムと間違っている.

    JavaScriptはなぜですか?

    JavaScript is not a strongly typed language which makes it difficult to write error-free code and leads to not so great developer experience.

    Also, it does not have the tools to create web applications out of the box, you need frameworks and compilers and build tools that increase complexity.



    なぜエルム?

    Elm has great developer experience, but it being a purely functional language leads to some boilerplate code and makes it harder to learn.

    Also, it's not possible to contribute or influence the language in any meaningful way.



    なぜミントラング?🤔

    Mint aims to combine the developer experience of Elm and the expressiveness of React to create the perfect language for building single-page applications.


    開発の1年後には、以下の機能があります.
  • 良いタイプシステム
  • エラーメッセージ
  • フォーマッタ
  • 組成成分
  • データストレージ用のストア
  • 組み込みスタイリング
  • 組み込みルーティング
  • JavaScriptの相互運用性
  • 不変のデータ構造


    • ミントツール
    私はこのプログラミング言語については、それが起動し、開発のための生態系を持っていない場合は話すことはありません.そう!😎

    エディタ拡張

  • VS Code — 構文強調表示と自動補完サポートを追加する

  • Emacs — Mintフォーマットを使用して構文強調表示と自動書式設定を追加する

  • IntelliJ IDEA — 構文強調表示を追加する

  • Atom — 構文強調表示を追加する

  • Vim — 非常に最小限の(しかし、働く)構文/FTDetectorコンボ

    • 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 --help

Mint - Help
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Usage:
  mint [flags...] [arg...]

Mint

Flags:
  --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 ブロック.以下のことを考えておきましょう.
  • 経路は、それらが上から下に定義された順序でマッチングされる
  • ルートは、アプリケーションごとに1つのルートブロックを持つことができます
  • ルートは、状態を設定するために使用され、物事をレンダリングしない
    • コード例
    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に適用できます.

    A style can contain any number of CSS definitions, sub rules, media queries, if and case statements.


    コード例
    component Main {
  style button {
    background: red;
    color: white;
    border: 0;
  }

  fun render : Html {
    <button::button>
      "Click ME!"
    </button>
  }
}

    最終結果
    アフターmint build , 生産準備完了Preact スパ.それだ!🎉

    写真で
    ベン・クードhttps://unsplash.com/photos/H29h6a8j8QM
    ミント作家https://www.mint-lang.com
    [ 2 ]アンソニーフォーミンhttps://unsplash.com/photos/Hr6dzqNLzhw

    ピーエス
    あなたがこのブログの上でこれのようなより多くの記事を望むならば、下記のコメントを掲示して、私を購読してください.ありがとう😘
    そして、もちろん、あなたは私を支援することができますLiberaPay . 各寄付は、新しい記事を書いて、コミュニティのための非営利のオープンソースプロジェクトを開発するのに用いられます.
    [TIL]Django Include関数
    JavaScriptデータ構造の整理