10 langues qui se compilent en JavaScript –

Cet article inclut une liste de dix langages intéressants qui peuvent être compilés en JavaScript pour être exécutés dans le navigateur ou sur une plateforme comme Node.js.

Les applications modernes ont différentes exigences à partir de simples sites web. Mais le navigateur est une plate-forme avec un ensemble (pour la plupart) fixe de technologies disponibles, et JavaScript reste le langage de base pour les applications Web. Toute application qui doit être exécutée dans le navigateur doit être implémentée dans cette langue.

Nous savons tous que JavaScript n'est pas le meilleur langage pour chaque tâche, et lorsqu'il s'agit d'applications complexes, il risque d'être court. Pour éviter ce problème, plusieurs nouveaux langages et transpileurs de langages existants ont été créés, tous produisant du code qui peut fonctionner dans le navigateur sans aucune ligne de JavaScript à écrire, et sans que vous ayez à penser aux limitations de la langue

Dart

Dart est un langage classique orienté objet où tout est un objet et tout objet est une instance d'une classe (les objets peuvent aussi servir de fonctions). Il est spécialement conçu pour créer des applications pour les navigateurs, les serveurs , et les appareils mobiles. Il est maintenu par Google et est le langage qui alimente l'interface utilisateur AdWords de prochaine génération le produit le plus important de Google en matière de revenus, ce qui est en soi une preuve de son pouvoir à grande échelle.

traduit en JavaScript pour être utilisé dans un navigateur, ou être directement interprété par la VM Dart, ce qui vous permet également de créer des applications serveur. Les applications mobiles peuvent être réalisées à l'aide du kit de développement logiciel Flutter.

Les applications complexes nécessitent également un ensemble de bibliothèques et de fonctionnalités de langage spécialement conçues pour la tâche, et Dart inclut tout cela. Un exemple d'une bibliothèque populaire est AngularDart une version d'Angular pour Dart.

Il vous permet d'écrire du code sans danger pour la sécurité sans être trop intrusif. Vous pouvez écrire des types, mais vous n'êtes pas obligé de le faire *, car ils peuvent être déduits. Cela permet un prototypage rapide sans avoir à surcharger les détails, mais une fois que quelque chose fonctionne, vous pouvez ajouter des types pour le rendre plus robuste.

En ce qui concerne la programmation simultanée dans la VM, au lieu des threads de mémoire partagée threaded), Dart utilise ce qu'ils appellent Isolates avec leur propre tas de mémoire, où la communication est réalisée en utilisant des messages. Dans le navigateur, l'histoire est un peu différente: au lieu de créer de nouveaux isolats, vous créez de nouveaux Travailleurs .

 // Exemple extrait de dartlang.org

import 'dart: async';
importer 'dart: math' show Random;

main () async {
  print ('Calculer π en utilisant la méthode de Monte Carlo.');
  wait for (var estimation dans computePi ()) {
    print ('π ≅ $ estimation');
  }
}

/// Génère un flux d'estimations de plus en plus précises de π.
Flux  computePi ({int lot: 1000000}) async * {
  var total = 0;
  var count = 0;
  while (true) {
    var points = generateRandom (). take (batch);
    var intérieur = points.where ((p) => p.isInsideUnitCircle);
    total + = lot;
    count + = inside.length;
    var ratio = nombre / total;
    // La surface d'un cercle est A = π⋅r², donc π = A / r².
    // Donc, quand on donne des points aléatoires avec x ∈ <0,1>,
    // y ∈ <0,1>le ratio de ceux à l'intérieur d'un cercle d'unités
    // devrait approcher π / 4. Par conséquent, la valeur de π
    // devrait être:
    rapport de rendement * 4;
  }
}

Iterable  generateRandom ([int seed]) sync * {
  final aléatoire = nouveau Aléatoire (graine);
  while (true) {
    donne un nouveau point (random.nextDouble (), random.nextDouble ());
  }
}

classe Point {
  double x final, y;
  point const (this.x, this.y);
  bool get isInsideUnitCircle => x * x + y * y <= 1;
}

Pour plus de lecture, je recommande Dart Ressource de Dart .

TypeScript

TypeScript est un surensemble de JavaScript. Un programme JavaScript valide est également valide, mais avec un typage statique ajouté. Le compilateur peut également fonctionner comme un transpileur d'ES2015 + aux implémentations actuelles, donc vous obtenez toujours les dernières fonctionnalités.

Contrairement à beaucoup d'autres langages, TypeScript garde l'esprit de JavaScript intact, ajoutant seulement des fonctionnalités pour améliorer la validité du code. Ce sont des annotations de type et d'autres fonctionnalités liées au type qui rendent l'écriture de JavaScript plus agréable, grâce à l'activation d'outils spécialisés tels que des analyseurs statiques et d'autres outils pour faciliter le processus de refactoring. De plus, l'ajout de types améliore les interfaces entre les différents composants de vos applications.

L'inférence de type est supportée, donc vous n'avez pas besoin d'écrire tous les types depuis le début. Vous pouvez écrire des solutions rapides, puis ajouter tous les types pour avoir confiance en votre code.

TypeScript prend également en charge les types avancés, comme les types d'intersection, les types d'union, les alias de type, les unions discriminées et les gardes de type. Vous pouvez les consulter dans la page Advanced Types du document TypeScript Documentation .

JSX est également supporté par l'ajout des typages React si vous utilisez la classe React:

 La personne {
  nom privé: string;
  âge privé: nombre;
  salaire privé: nombre;

  constructeur (nom: chaîne, âge: nombre, salaire: nombre) {
    this.name = nom;
    this.age = âge;
    this.salaire = salaire;
  }

  toString (): chaîne {
    retourne $ {this.name} ($ {this.age}) ($ {this.salary}) `;
  }
}

Pour plus d'informations sur le typeScript, consultez l'article de SitePoint sur le démarrage de TypeScript

Elm

Elm est un langage de programmation purement fonctionnel pouvant être compilé en JavaScript, HTML et CSS. Vous pouvez construire un site complet avec juste Elm, ce qui en fait une excellente alternative aux frameworks JavaScript comme React. Les applications que vous construisez avec lui utilisent automatiquement une bibliothèque DOM virtuelle, ce qui le rend très rapide. Un grand avantage est l'architecture intégrée qui vous fait oublier le flux de données et se concentre sur la déclaration de données et la logique.

Dans Elm, toutes les fonctions sont pures, ce qui signifie qu'elles retourneront toujours la même sortie pour une donnée donnée. contribution. Ils ne peuvent rien faire d'autre que si vous le spécifiez. Par exemple, pour accéder à une API distante, vous devez créer des commandes pour communiquer avec le monde externe et des abonnements pour écouter les réponses. Un autre point de pureté est que les valeurs sont immuables: quand vous avez besoin de quelque chose, vous créez de nouvelles valeurs, au lieu de les modifier.

L'adoption d'Elm peut être progressive. Il est possible de communiquer avec JavaScript et d'autres bibliothèques en utilisant ports . Bien qu'Elm n'ait pas encore atteint la version 1, il est utilisé pour des applications complexes et volumineuses, ce qui en fait une solution réalisable pour des applications complexes.

L'une des fonctionnalités les plus attrayantes d'Elm est le compilateur débutant. produire des messages difficiles à lire, génère du code qui vous aide à corriger votre code. Si vous apprenez la langue, le compilateur lui-même peut être d'une grande aide.

 module Exposant principal (..)

import Html exposant (..)


-- PRINCIPALE


main: Program Never Model Msg
principal =
    Html.program
        {init = init
        , mise à jour = mise à jour
        , vue = vue
        , abonnements = abonnements
        }



- INIT


tapez alias Model = String


init: (Modèle, Cmd Msg)
init = ("Bonjour tout le monde!", Cmd.none)


-- METTRE À JOUR


type Msg
    = DoNothing


mise à jour: Msg -> Model -> (Model, Cmd Msg)
mettre à jour le modèle msg =
    msg cas de
        DoNothing ->
            (modèle, Cmd.none)


-- VUE


Voir: Modèle -> Msg Html
voir le modèle =
    div [] [text model]


 - ABONNEMENTS


abonnements: Modèle -> Sub Msg
modèle d'abonnements =
    Sub.none

SitePoint a un article pratique qui commence avec l'Elm si vous voulez en savoir plus

PureScript

PureScript est un langage de programmation purement fonctionnel et fortement typé, créé par Phil Freeman. Il vise à fournir une forte compatibilité avec les bibliothèques JavaScript disponibles, similaire à Haskell dans l'esprit, mais en gardant JavaScript au cœur.

Un point fort de PureScript est son minimalisme. Il n'inclut aucune bibliothèque pour les fonctionnalités qui seraient considérées comme essentielles dans d'autres langues. Par exemple, au lieu d'inclure des générateurs et des promesses dans le compilateur lui-même, vous pouvez utiliser des bibliothèques spécifiques pour la tâche. Vous pouvez choisir l'implémentation souhaitée pour la fonctionnalité dont vous avez besoin, ce qui permet une expérience hautement efficace et personnalisée lors de l'utilisation de PureScript, tout en conservant le code généré le plus petit possible.

Une autre caractéristique de son compilateur et code lisible tout en conservant la compatibilité avec JavaScript, à la fois concernant les bibliothèques et les outils.

Comme d'autres langages, PureScript possède son propre outil de construction appelé Pulp qui peut être comparé à Gulp.

En ce qui concerne le système de type – contrairement à Elm, qui est l'autre langage de type ML – PureScript prend en charge les fonctionnalités de type avancées comme les types plus élevés et les classes de type Haskell, permettant la création d'abstractions sophistiquées:

 module Main où

importer Prelude
import Data.Foldable (plier)
importer TryPureScript

principal =
    rendre $ fold
      [ h1 (text "Try PureScript!")
      , p (text "Try out the examples below, or create your own!")
      , h2 (text "Examples")
      , list (map fromExample examples)
      ]
  où
    à partir de l'exemple {title, gist} =
      link ("? gist =" <> gist) (titre du texte)

    exemples =
      [ { title: "Algebraic Data Types"
        , gist: "37c3c97f47a43f20c548"
        }
      , { title: "Loops"
        , gist: "cfdabdcd085d4ac3dc46"
        }
      , { title: "Operators"
        , gist: "3044550f29a7c5d3d0d0"
        }
      ]

Pour passer à l'étape suivante avec PureScript, consultez le guide Premiers pas avec PureScript sur GitHub

CoffeeScript

CoffeeScript est un langage qui vise à exposer les bonnes parties de JavaScript tout en fournissant une syntaxe plus propre et en gardant la sémantique en place. Bien que la popularité de la langue ait diminué ces dernières années, elle change de direction et a récemment reçu une nouvelle version majeure supportant les fonctionnalités ES2015 +.

Le code que vous écrivez dans CoffeeScript est directement traduit en code JavaScript lisible bibliothèques. À partir de la version 2, le compilateur produit du code compatible avec les dernières versions d'ECMAScript. Par exemple, chaque fois que vous utilisez une classe vous obtenez une classe en JavaScript. En outre, si vous utilisez React, il y a une bonne nouvelle: JSX est compatible avec CoffeeScript.

Une caractéristique très distinctive du compilateur est la possibilité de traiter du code écrit dans le style alphabétisé où Dans le code et ayant des commentaires en tant que supplément, vous écrivez des commentaires en premier lieu, et le code apparaît de temps en temps. Ce style de programmation a été introduit par Donald Knuth, rendant un fichier de code très similaire à un article technique.

Contrairement aux autres langages, le code CoffeeScript peut être interprété directement dans le navigateur en utilisant une bibliothèque. Donc, si vous voulez créer un test rapide, vous pouvez écrire votre code dans les tags de script text / coffeescript et inclure le compilateur, qui traduira le code en JavaScript à la volée:

 # Affectation:
nombre = 42
opposé = vrai

# Conditions:
nombre = -42 si opposé

# Les fonctions:
carré = (x) -> x * x

# Tableaux:
liste = [1, 2, 3, 4, 5]

# Objets:
math =
  root: Math.sqrt
  carré: carré
  cube: (x) -> x * carré x

# Splats:
race = (vainqueur, coureurs ...) ->
  gagnant du tirage, coureurs

# Existence:
alerte "Je le savais!" si elvis?

# Compréhensions de tableau:
cubes = (math.cube num pour num dans la liste)

Le site CoffeeScript a une pratique qui commence avec la ressource CoffeeScript 2

ClojureScript

ClojureScript est un compilateur qui traduit le langage de programmation Clojure en JavaScript. C'est un langage fonctionnel polyvalent avec typage dynamique et support pour les structures de données immuables.

C'est le seul de cette liste qui appartient à la famille des langages de programmation Lisp et, naturellement, il partage beaucoup de fonctionnalités. Par exemple, le code peut être traité comme des données, et un système de macros est disponible, ce qui rend les techniques de métaprogrammation possibles. Contrairement aux autres Lisps, Clojure supporte les structures de données immuables, facilitant ainsi la gestion des effets secondaires.

La syntaxe peut sembler intimidante pour les nouveaux arrivants en raison de l'utilisation de parenthèses, mais elle a de profondes raisons d'être ainsi, et vous J'apprécierai certainement à long terme. Ce minimalisme dans la syntaxe et ses capacités d'abstraction syntaxique font de Lisp un outil puissant pour résoudre les problèmes qui requièrent de hauts niveaux d'abstraction.

Bien que Clojure soit principalement un langage fonctionnel, il n'est pas pur comme PureScript ou Elm. Des effets secondaires peuvent encore se produire, mais d'autres fonctionnalités sont toujours présentes.

ClojureScript utilise Google Closure pour l'optimisation du code et est également compatible avec les bibliothèques JavaScript existantes:

; Extrait de https://github.com/clojure/clojurescript/blob/master/samples/dom/src/dom/test.cljs

(ns dom.test
  (: require [clojure.browser.event :as event]
            [clojure.browser.dom   :as dom]))

(defn log [& args])
  (.log js / console (applique les arguments pr-str)))

(defn log-obj [obj])
  (.log js / console obj))

(defn log-listener-count []
  (log "nombre d'écouteurs:" (event / total-listener-count)))

(source def (dom / get-element "source"))
(destination def (dom / get-element "destination"))

(dom / append source
            (dom / element "Test moi")
            (dom / element "out!"))

(def succès-count (atome 0))

(log-listener-count)

(événement / source d'écoute
              :Cliquez sur
              (fn [e]
                (let [i (swap! success-count inc)
                      e (dom/element :li
                                     {:id "testing"
                                      :class "test me out please"}
                                     "It worked!")]
                  (log-obj e)
                  (log i)
                  (dom / append destination
                              e))))

(log-obj (dom / element "Noeud de texte"))
(log-obj (dom / élément: li))
(log-obj (dom / element: li {: class "foo"}))
(log-obj (dom / element: li {: class "bar"} "noeud de texte"))
(log-obj (dom / element [:ul [:li :li :li]]))
(log-obj (dom / element: ul [:li :li :li]))
(log-obj (dom / element: li {} [:ul{}[:li :li :li]]))
(log-obj (dom / element [:li {:class "baz"} [:li {:class "quux"}]]))

(source log-obj)
(log-listener-count)

Pour en savoir plus, rendez-vous sur la ressource ClojureScript du site ClojureScript

Scala.js

Scala.js est un compilateur qui traduit le langage de programmation Scala en JavaScript. Scala est un langage qui vise à fusionner les idées de la programmation orientée objet et fonctionnelle dans un langage unique pour créer un outil puissant et facile à adopter.

En tant que langage fortement typé, vous bénéficiez des avantages d'un système de type flexible avec inférence de type partielle. La plupart des valeurs peuvent être déduites, mais les paramètres de fonction nécessitent toujours des annotations explicites.

Bien que de nombreux modèles orientés objet soient supportés (par exemple, chaque valeur est un objet et les opérations sont des appels de méthodes), pour les fonctions de première classe et les structures de données immuables.

L'un des avantages particuliers de Scala.js est que vous pouvez commencer avec une approche familière orientée objet et passer à une approche plus fonctionnelle selon vos besoins et à votre propre rythme. , sans avoir à faire beaucoup de travail. De plus, le code et les bibliothèques JavaScript existants sont compatibles avec votre code Scala.

Les développeurs débutants de Scala trouveront que la langue n'est pas très différente de JavaScript. Comparez le code équivalent suivant:

 // JavaScript
var xhr = new XMLHttpRequest ();

xhr.open ("GET",
  "https://api.twitter.com/1.1/search/" +
  "tweets.json? q =% 23scalajs"
)
xhr.onload = (e) => {
  if (xhr.status === 200) {
    var r = JSON.parse (xhr.responseText);
    $ ("# tweets") .html (parseTweets (r));
  }
}
xhr.send ();

 // Scala.js
val xhr = new XMLHttpRequest ()

xhr.open ("GET",
  "https://api.twitter.com/1.1/search/" +
  "tweets.json? q =% 23scalajs"
)
xhr.onload = {(e: Evénement) =>
  if (xhr.status == 200) {
    val r = JSON.parse (xhr.responseText)
    $ ("# tweets") .html (parseTweets (r))
  }
}
xhr.send ()

Consultez la Scala.js pour commencer avec les docs Scala.js pour en savoir plus

Reason

Reason est un langage créé et maintenu par Facebook, qui offre une nouvelle syntaxe pour OCaml compilateur, et le code peut être traduit en JavaScript et en code natif.

Faisant partie de la famille ML et d'un langage fonctionnel, il offre naturellement un système de type puissant mais flexible avec inférence, types de données algébriques et appariement. Il supporte également les types de données immuables et le polymorphisme paramétrique (également connu sous le nom de génériques dans d'autres langages) mais, comme dans OCaml, le support de la programmation orientée objet est également disponible.

Les bibliothèques JavaScript sont possibles avec les liaisons bucklescript . Vous pouvez également mélanger JavaScript avec votre code Reason. Le code JavaScript inséré ne sera pas strictement vérifié, mais il fonctionne très bien pour les correctifs rapides ou les prototypes.

Si vous êtes un développeur React, les liaisons sont disponibles et le langage prend également en charge JSX :

 / * Une variante de type en cours de correspondance * /

laisse éventuellement NullValue1 = None;
Laissez éventuellementNullValue2 = "Hello @";

switch possibleNullValue2 {
| None => print_endline "Rien à voir ici."
| Un message => message print_endline
}

/ * Types paramétrés * /

type universityStudent = {gpa: float};
type réponse 'studentType = {status: int, étudiant:' studentType};
laisse result: réponse universityStudent = fetchDataFromServer ();

/ * Un objet simple saisi * /

type payload = Js.t {.
  nom: chaîne,
  âge: int
}
Soit obj1: payload = {"name": "John", "age": 30};

Haxe

Haxe est un langage de programmation multi-paradigme, et son compilateur peut produire à la fois des binaires et du code source dans d'autres environnements.

Bien que Haxe fournisse un système de type strict avec un support pour l'inférence de type, il peut aussi fonctionner comme un langage dynamique si le langage cible le supporte. De la même manière, il prend en charge une variété de styles de programmation comme orienté objet, générique et fonctionnel.

Lorsque vous écrivez du code Haxe, vous pouvez cibler plusieurs plates-formes et langages sans avoir à apporter de modifications importantes. Des blocs de code spécifiques à la cible sont également disponibles

Vous pouvez écrire à la fois des extrémités et des frontaux dans Haxe avec le même code et établir la communication en utilisant Haxe Remoting pour les connexions synchrones et asynchrones. Comme prévu, le code Haxe est compatible avec les bibliothèques existantes, mais il fournit également une bibliothèque standard mature:

 // Exemple extrait de http://code.haxe.org

extern class Database {
  fonction new ();
  function getProperty  (propriété: Propriété ): T;
  function setProperty  (propriété: Propriété valeur: T): Void;
}

Propriété abstraite  (String) {
  fonction inline publique nouveau (nom) {
    this = nom;
  }
}

class Main {
  static inline var PLAYER_NAME = new Propriété  ("playerName");
  static inline var PLAYER_LEVEL = new Propriété  ("playerLevel");

  fonction statique main () {
    var db = new Base de données ();

    var playerName = db.getProperty (PLAYER_NAME);
    trace (playerName.toUpperCase ());

    db.setProperty (PLAYER_LEVEL, 1);
  }
}

Nim est un langage de programmation multi-paradigme statiquement typé, avec une syntaxe minimaliste et sensible à l'espace qui peut compiler.

Nim

Nim est un langage de programmation multi-paradigme typé statiquement. en JavaScript ainsi que C, C ++.

Le langage lui-même est très petit, mais ses capacités de métaprogrammation rendent attractif l'implémentation de fonctionnalités que vous pourriez trouver intégrées à d'autres langages. Les blocs de construction pour cela sont des macros, des modèles et des génériques, et avec eux, vous pouvez mettre en œuvre des choses à partir de fonctionnalités simples à différents paradigmes. Cela fait de Nim un langage extrêmement polyvalent qui peut être adapté à vos besoins, dans l'esprit de Lisp.

Les fonctions d'abstraction syntaxique de Nim vous permettent d'adapter le langage à vos problèmes, rendant ainsi possibles de vraies DSL. . Si vous avez des tâches spécialisées à résoudre, vous pouvez obtenir un plus haut niveau d'expressivité:

 # Inverser une chaîne
proc reverse (s: chaîne): chaîne =
  résultat = ""
  pour i dans le compte à rebours (haut (s), 0):
    résultat.add s [i]

var str1 = "Inverser ceci!"
echo "Inversé:", reverse (str1)

# Utilisation de modèles
template genType (nom, nom de champ: expr, type de champ: typedesc) =
  type
    nom = objet
      fieldname: fieldtype

genType (Test, foo, int)

var x = Test (toto: 4566)
echo (x.foo) # 4566

Le site Nim contient des documents utiles pour commencer pour plus d'informations

Conclusion

Si JavaScript n'est pas votre langue préférée, vous pouvez toujours créer des applications Web sans en subir les inconvénients de la technologie. Les options disponibles pour créer ces applications peuvent remplir un large éventail de goûts, des langages purement fonctionnels comme PureScript aux objets orientés objet comme Dart. Et si vous voulez quelque chose de plus qu'une traduction en un à un, vous avez des options comme Elm qui vous fournissent des outils comme un DOM virtuel et une architecture intégrée.

Avez-vous essayé l'une des langues de cet article? , ou en avez-vous un à recommander? Faites-nous savoir dans les commentaires!

Freelance designer et développeur web basé au Mexique. Chef développeur de CSS Concise, un framework minimaliste et extensible pour créer rapidement des sites Web avec un bon design.