Mint The El lenguaje de programación para escribir aplicaciones de una sola página (SPA)

Introducción

¡Hola! Today Hoy, les contaré la historia de Mint lang, un lenguaje de programación muy joven (pero interesante) centrado en la construcción de SPA (aplicaciones de una sola página). Tiene todas las herramientas que necesita para escribir aplicaciones sin errores, fácilmente legibles y mantenibles en tiempo récord.

Impresionado? ¡Yo también! Lidiemos con esto juntos…

Table Índice

  • ¿Qué es Mint lang en realidad?
    • ¿Por qué no JavaScript?
    • ¿Por qué no Olmo?
  • ¿Por qué Menta?
  • Herramientas Mint & ecosistema
    • Extensiones de editor
    • CLI
    • Gestión descentralizada de paquetes
    • Enrutamiento
    • Estilo CSS
  • Resultado final

Logo de Mint lang

¿Qué es Mint lang en realidad?

En primer lugar, Menta escrita en cristal:

un lenguaje de programación orientado a objetos de propósito general con sintaxis inspirada en el lenguaje Ruby es un lenguaje compilado con comprobación de tipos estática, pero especificar los tipos de variables o argumentos de método generalmente no es necesario.

– Wiki

A continuación, sigue la guía oficial de Mint:

Mint es un lenguaje creado específicamente para escribir aplicaciones de una sola página. Es un compilador y un marco de trabajo combinados para proporcionar una gran experiencia de desarrollador al tiempo que permite escribir código seguro, legible y mantenible.

¡Sí, es verdad! Mira este código (lo siento por el resaltado del 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 en el modo de pantalla completa Salir del modo de pantalla completa

Muy similar a un lenguaje estrictamente tipificado, pero con estilo JSX incluido, ¿verdad?

Nació de la frustración del lenguaje y ecosistema JavaScript (NPM) y el lenguaje Elm y no es una práctica de desarrollo tan abierta.

¡OK! decide Decidamos de inmediato: por qué no JavaScript y qué tiene de malo Elm.

¿Por qué no JavaScript?

JavaScript no es un lenguaje fuertemente escrito, lo que dificulta la escritura de código sin errores y conduce a una experiencia de desarrollador no tan excelente.

Además, no tiene las herramientas para crear aplicaciones web listas para usar, necesita marcos y compiladores y crear herramientas que aumenten la complejidad.

¿Por qué no Olmo?

Elm tiene una gran experiencia de desarrollador, pero al ser un lenguaje puramente funcional, genera código repetitivo y hace que sea más difícil de aprender.

Además, no es posible contribuir o influir en el idioma de manera significativa.

¿Por qué Mint lang? 🤔

Mint tiene como objetivo combinar la experiencia de desarrollador de Elm y la expresividad de React para crear el lenguaje perfecto para crear aplicaciones de una sola página.

Después de un año de desarrollo, Mint tiene las siguientes características:

  1. Un buen sistema de tipos
  2. Buenos mensajes de error
  3. Formateador
  4. Componentes para composición
  5. Almacenes para almacenamiento de datos
  6. Estilo incorporado
  7. Enrutamiento incorporado
  8. Gran JavaScript interoperabilidad
  9. Estructuras de datos inmutables

Ecosistema de herramientas Mint

Mint tools & ecosistema

No hablaría de este lenguaje de programación si no tuviera un ecosistema para comenzar y desarrollar. Así! extensions

Extensiones de editor

  • VS Code — añade resaltado de sintaxis y compatibilidad con autocompletar
  • Emacs — añade resaltado de sintaxis y formateo automático utilizando el formato mint
  • IntelliJ IDEA-añade resaltado de sintaxis
  • Atom — añade resaltado de sintaxis
  • Vim — muy mínimo (pero funcional) combo de sintaxis/ftdetect

CLI

Instalación de Mint CLI a través del 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
Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Y ahora, vea todos los comandos por call Mint con la bandera --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━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Gestión descentralizada de paquetes

Esta página contiene los paquetes que puede utilizar en sus proyectos:

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

Enrutamiento

Las rutas de una aplicación se definen en el nivel superior con el bloque routes. Tenga en cuenta las siguientes cosas:

  • Las rutas coinciden en el orden en que se definen de arriba a abajo
  • Las rutas solo pueden tener un bloque de rutas por aplicación
  • Las rutas se utilizan para establecer el estado, no para representar cosas

Código de ejemplo:

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) } }}
Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Estilos CSS

En los componentes Mint, los estilos se pueden definir con un identificador y luego aplicar al HTML utilizando el identificador como clase CSS.

Un estilo puede contener cualquier número de definiciones CSS, reglas secundarias, consultas de medios, instrucciones if y case.

Código de ejemplo:

component Main { style button { background: red; color: white; border: 0; } fun render : Html { <button::button> "Click ME!" </button> }}
Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Resultado final

Después de mint build, tiene Preact SPA listo para producción. ¡Eso es! Photo

Foto de

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

P. S.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

More: