Mint 🌿 a linguagem de programação para a escrita de aplicações de uma única página (SPA)

introdução 👋 Hoje, vou contar-lhe a história sobre Mint lang, linguagem de programação muito jovem (mas interessante) focada na construção de SPA (aplicações de página única). Ele tem todas as ferramentas que você precisa para escrever aplicativos livres de erros, facilmente legíveis e de manutenção em tempo recorde. Impressionado? Eu também! Vamos lidar com isto juntos… Índice

• o que é, na verdade, um lang Mint?Por que não JavaScript?Porque não o Elm?

o Que é de Menta lang, na verdade?

em primeiro lugar, menta escrita em cristal:

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 unneeed.Segue o Guia Oficial da Casa da moeda.:

Mint é uma linguagem criada especificamente para escrever aplicações de uma única página. É um compilador e um framework combinado para fornecer grande experiência de desenvolvedor, permitindo escrever código seguro, legível e sustentável.Sim, é verdade! Procura por este código (desculpe o realce de código):

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

entrar no modo de ecrã completo sair do modo de ecrã completo

muito semelhante a uma linguagem estritamente tipificada, mas com incluído JSX-style, certo?

nasceu da frustração da linguagem JavaScript e do ecossistema (MPN) e da linguagem Elm e não é tão aberto práticas de desenvolvimento.OK! 👌 Vamos decidir imediatamente: Por que não JavaScript e o que há de errado com Elm.Por que não JavaScript?

JavaScript não é uma linguagem fortemente tipada, o que torna difícil escrever código livre de erros e leva a não ser tão grande experiência de desenvolvimento.

também, ele não tem as ferramentas para criar aplicações web a partir da caixa, você precisa de frameworks e Compiladores e construir ferramentas que aumentam a complexidade.Porque não o Elm?

Elm tem grande experiência de desenvolvimento, mas sendo uma linguagem puramente funcional leva a algum código boilerplate e torna mais difícil de aprender. Além disso, não é possível contribuir ou influenciar a linguagem de forma significativa.Porquê Mint lang? 🤔

Mint tem como objetivo combinar a experiência do desenvolvedor da Elm e a expressividade da Reat para criar a linguagem perfeita para a construção de aplicações de uma única página.Após um ano de desenvolvimento, a Casa Da Moeda apresenta as seguintes características ::

1. Um bom sistema de tipo
2. Bom mensagens de erro
3. Formatador
4. Componentes para composição
5. Lojas para armazenamento de dados
6. Construído em estilo
7. roteamento interna
8. Grande JavaScript interoperabilidade
9. Imutável estruturas de dados

Mint ferramentas & ecossistema

eu não iria falar sobre esta linguagem de programação, se ele não tem um ecossistema para o início e o desenvolvimento. Então! 😎

Editor de extensões

• VS Código — adiciona destaque de sintaxe, e o preenchimento automático de suporte
• Emacs — adiciona destaque de sintaxe e auto-formatação usando o mint formato
• IntelliJ IDEA — adiciona destaque de sintaxe
• Átomo — adiciona destaque de sintaxe
• Vim — mínimo (mas sim trabalho) sintaxe/ftdetect combinação

CLI

Instalar o Mint CLI através de comando:

# 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

Introduza o modo de tela cheia Sair do modo de tela cheia

E agora, ver todos os comandos de chamada de Hortelã com --help bandeira:

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

Introduza o modo de tela cheia Sair do modo de tela cheia

Descentralizado de gestão de pacotes

Esta página contém os pacotes que você pode usar em seus projetos:

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

Encaminhamento

Rotas de uma aplicação são definidos no nível superior, com a routes bloquear. Tenha em mente as seguintes coisas:

• Rotas são combinados na ordem em que eles são definidos de cima para baixo
• Rotas só pode ter um de rotas de bloco por aplicação
• Rotas são utilizados para definir o estado, não tornar as coisas

Exemplo de código:

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

Introduza o modo de tela cheia Sair do modo de tela cheia

de Estilo CSS

No Mint componentes, os estilos podem ser definidas com um identificador e, em seguida, aplicado para HTML usando o identificador como uma classe CSS.

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

Exemplo de código:

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

Introduza o modo de tela cheia Sair do modo de tela cheia

resultado Final

Depois mint build, você tem pronto para produção Preact SPA. É isso! 🎉

Foto

Ben Kolde https://unsplash.com/photos/H29h6a8j8QM
Mint autores https://www.mint-lang.com
Anthony Fomin https://unsplash.com/photos/Hr6dzqNLzhw

P. S.