JavaScript로 컴파일되는 10가지 흥미로운 언어

이 기사에는 브라우저나 Node.js와 같은 플랫폼에서 실행하기 위해 JavaScript로 컴파일할 수 있는 10가지 흥미로운 언어가 나열되어 있습니다.

최신 애플리케이션은 단순한 웹사이트와 요구 사항이 다릅니다. 그러나 브라우저는 (대부분) 고정된 사용 가능한 기술을 갖춘 플랫폼이며 JavaScript는 웹 애플리케이션의 핵심 언어로 남아 있습니다. 브라우저에서 실행해야 하는 모든 애플리케이션은 이 언어로 구현되어야 합니다.

우리 모두는 JavaScript가 모든 작업에 가장 적합한 언어는 아니며 복잡한 애플리케이션의 경우 부족할 수 있다는 것을 알고 있습니다.

이 문제를 피하기 위해 새로운 언어와 기존 언어에 대한 여러 트랜스포저가 생성되었으며, 이 트랜스포저는 모두 JavaScript 한 줄도 작성하지 않고 언어 제한을 고려할 필요 없이 브라우저에서 작동하는 코드를 생성합니다.

Dart

DART는 모든 것이 객체이고 모든 객체가 클래스의 인스턴스인 고전적인 객체 지향 언어입니다(객체는 함수로 작동할 수도 있음). 브라우저, 서버 및 모바일 장치용 애플리케이션을 구축하기 위해 특별히 제작되었습니다.

Google에서 관리하며 차세대 AdWords 사용자 인터페이스를 위한 구동 언어입니다. 이는 Google의 가장 중요한 수익 제품이며, 이는 그 자체로 규모에 따른 영향력을 입증합니다.

언어를 JavaScript로 변환하여 브라우저에서 사용하거나 Dart VM에서 직접 해석하여 서버 애플리케이션도 구축할 수 있습니다. Flutter SDK를 사용하여 모바일 애플리케이션을 만들 수 있습니다.

복잡한 애플리케이션에는 해당 작업을 위해 특별히 설계된 성숙한 라이브러리 및 언어 기능 세트가 필요하며 Dart에는 이러한 기능이 모두 포함되어 있습니다. 인기 있는 라이브러리의 예로는 Dart의 Angular 버전인 AngularDart가 있습니다.

큰 어려움 없이 유형이 안전한 코드를 작성할 수 있습니다. 유형을 작성할 수 있지만 추론할 수 있으므로 * 그럴 필요는 없습니다. 이를 통해 세부 사항에 대해 너무 많이 생각하지 않고도 빠른 프로토타입을 만들 수 있지만 일단 작동하는 프로토타입이 있으면 유형을 추가하여 더욱 강력하게 만들 수 있습니다.

VM에서의 동시 프로그래밍과 관련하여 Dart는 공유 메모리 스레드(Dart는 단일 스레드)를 사용하는 대신 메시지를 사용하여 통신이 구현되는 격리된 메모리 힙을 사용합니다. 브라우저에서는 상황이 약간 다릅니다. 새 격리를 만드는 대신 새 작업자가 만들어집니다.

// Example extracted from dartlang.org

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

main() async {
  print('Compute π using the Monte Carlo method.');
  await for (var estimate in computePi()) {
    print('π ≅ $estimate');
  }
}

/// Generates a stream of increasingly accurate estimates of π.
Stream<double> computePi({int batch: 1000000}) async* {
  var total = 0;
  var count = 0;
  while (true) {
    var points = generateRandom().take(batch);
    var inside = points.where((p) => p.isInsideUnitCircle);
    total += batch;
    count += inside.length;
    var ratio = count / total;
    // Area of a circle is A = π⋅r², therefore π = A/r².
    // So, when given random points with x ∈ <0,1>,
    // y ∈ <0,1>, the ratio of those inside a unit circle
    // should approach π / 4. Therefore, the value of π
    // should be:
    yield ratio * 4;
  }
}

Iterable<Point> generateRandom([int seed]) sync* {
  final random = new Random(seed);
  while (true) {
    yield new Point(random.nextDouble(), random.nextDouble());
  }
}

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

더 자세한 내용을 보려면 Dart의 Getting Started with Dart 리소스를 추천합니다.

TypeScript

TypeScript는 JavaScript의 상위 집합입니다. 유효한 JavaScript 프로그램은 유효한 TypeScript이지만 정적 입력이 추가되어 있습니다. 컴파일러는 ES2015+에서 현재 구현으로의 변환기 역할도 하므로 항상 최신 기능을 얻을 수 있습니다.

다른 많은 언어와 달리 TypeScript는 JavaScript의 정신을 유지하고 코드를 더욱 강력하게 만들기 위해 몇 가지 기능을 추가합니다. 이는 정적 분석기 및 리팩토링 프로세스를 지원하는 기타 도구와 같은 특수 도구에 대한 지원 덕분에 JavaScript 작성을 더욱 즐겁게 만드는 유형 주석 및 기타 유형 관련 기능입니다.

또한 유형을 추가하면 애플리케이션의 다양한 구성 요소 간의 인터페이스가 향상됩니다.

유형 추론을 지원하므로 모든 유형을 처음부터 작성할 필요가 없습니다. 빠른 솔루션을 작성한 다음 모든 유형을 추가하면 코드에 대한 확신을 가질 수 있습니다.

TypeScript는 교차 유형, 통합 유형, 유형 별칭, 차별화된 통합 및 유형 가드와 같은 고급 유형도 지원합니다. TypeScript Documentation 사이트의 고급 유형 페이지에서 이 모든 내용을 볼 수 있습니다.

반응을 사용하는 경우 반응 유형을 추가하여 jsx를 지원할 수도 있습니다.

class Person {
  private name: string;
  private age: number;
  private salary: number;

  constructor(name: string, age: number, salary: number) {
    this.name = name;
    this.age = age;
    this.salary = salary;
  }

  toString(): string {
    return `${this.name} (${this.age}) (${this.salary})`;
  }
}

Elm

Elm은 JavaScript, HTML 및 CSS로 컴파일되는 순수 기능형 프로그래밍 언어입니다. Elm을 사용하면 전체 사이트를 구축할 수 있으므로 React와 같은 JavaScript 프레임워크에 대한 훌륭한 대안이 됩니다.

이를 사용하여 구축된 앱은 자동으로 가상 DOM 라이브러리를 사용하므로 매우 빠르게 실행됩니다. 가장 큰 장점은 내장된 아키텍처로, 이를 통해 데이터 흐름을 잊고 대신 데이터 선언 및 논리에 집중할 수 있습니다.

Elm에서 모든 함수는 순수 함수입니다. 즉, 주어진 입력에 대해 항상 동일한 출력을 반환한다는 의미입니다. 당신이 지정하지 않으면 그들은 아무것도 할 수 없습니다. 예를 들어 원격 API에 액세스하려면 외부 세계와 통신하는 명령 함수와 응답을 수신하는 구독을 만듭니다.

또 다른 순수함의 포인트는 값이 불변이라는 점입니다. 필요한 것이 있으면 수정하지 않고 새로운 값을 생성합니다.

Elm的采用可以是渐进的。可以使用端口与JavaScript和其他库通信。虽然Elm还没有达到版本1，但是它已经被用于复杂和大型应用程序，这使得它成为复杂应用程序的可行解决方案。

Elm最吸引人的特性之一是初学者友好的编译器，它不是生成难以阅读的消息，而是生成帮助您修复代码的代码。如果你正在学习这门语言，编译器本身会有很大的帮助。

module Main exposing (..)

import Html exposing (..)


-- MAIN


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }



-- INIT


type alias Model = String


init : ( Model, Cmd Msg )
init = ( "Hello World!", Cmd.none )


-- UPDATE


type Msg
    = DoNothing


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DoNothing ->
            ( model, Cmd.none )


-- VIEW


view : Model -> Html Msg
view model =
    div [] [text model]


-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

PureScript

purescript是一种纯功能的强类型编程语言，由phil freeman创建。它的目标是提供与可用javascript库的强兼容性，在精神上类似于haskell，但保持javascript的核心。

PureScript的一个优点是它的极简主义。它不包含任何在其他语言中被认为是必不可少的功能库。例如，您可以为任务使用特定的库，而不是在编译器本身中包含生成器和承诺。

您可以为您需要的特性选择您想要的实现，这允许在使用PureScript时获得高效和个性化的体验，同时使生成的代码尽可能小。

它的编译器的另一个独特的特性是，在保持与JavaScript兼容的同时，能够生成干净且可读的代码，包括库和工具。

与其他语言一样，PureScript也有自己的构建工具Pulp，它可以与Gulp进行比较，但是对于用这种语言编写的项目来说。

关于类型系统——不像Elm，它是另一种类似于ml的语言——PureScript支持高级类型特性，比如高级类型和类型类，它们来自Haskell，允许创建复杂的抽象:

module Main where

import Prelude
import Data.Foldable (fold)
import TryPureScript

main =
    render $ fold
      [ h1 (text "Try PureScript!")
      , p (text "Try out the examples below, or create your own!")
      , h2 (text "Examples")
      , list (map fromExample examples)
      ]
  where
    fromExample { title, gist } =
      link ("?gist=" <> gist) (text title)

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

要使用purescript执行下一步，请查看github上的purescript入门指南。

CoffeeScript

CoffeeScript是一种语言，旨在公开JavaScript的优秀部分，同时提供更干净的语法和保持语义。尽管近年来该语言的受欢迎程度有所下降，但它正在改变方向，最近又获得了一个新的主要版本，支持ES2015+特性。

您在CoffeeScript中编写的代码将直接转换为可读的JavaScript代码，并保持与现有库的兼容性。 从版本2开始，编译器将生成与最新版本的ECMAScript兼容的代码。

例如，每次使用类时，您都会在JavaScript中获得一个类。 另外，如果您使用React，则有个好消息：JSX与CoffeeScript兼容。

编译器的一个非常独特的功能是能够处理以素养风格编写的代码，您无需在代码中强调重点和添加注释，而是首先编写注释，并且代码仅偶尔出现。 Donald Knuth引入了这种编程风格，使代码文件与技术文章非常相似。

与其他语言不同，CoffeeScript代码可以在浏览器中使用库直接解释。因此，如果你想创建一个快速测试，你可以用text/coffeescript脚本标签编写代码，并包含编译器，编译器会实时将代码翻译成JavaScript:

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

coffeescript站点有一个方便的coffeescript 2资源入门。

ClojureScript

ClojureScript是一个编译器，它将Clojure编程语言翻译成JavaScript。它是一种通用的函数式语言，具有动态类型和对不可变数据结构的支持。

它是这个列表中唯一属于Lisp编程语言家族的，并且自然地，它共享了许多特性。例如，可以将代码视为数据，并且可以使用宏系统，从而使元编程技术成为可能。与其他lisp不同，Clojure支持不可变的数据结构，这使得副作用的管理更加容易。

由于使用了括号，语法对新手来说可能有些吓人，但这样做有其深刻的原因，从长远来看，您肯定会喜欢它。语法中的这种极简主义及其语法抽象功能使Lisp成为解决需要高抽象级别的问题的强大工具。

虽然Clojure主要是一种函数式语言，但它不像PureScript或Elm那样纯粹。副作用仍然可能发生，但是其他功能特性仍然存在。

ClojureScript使用谷歌闭包进行代码优化，并且与现有的JavaScript库兼容:

; Extracted from 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 (apply pr-str args)))

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

(defn log-listener-count []
  (log "listener count: " (event/total-listener-count)))

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

(dom/append source
            (dom/element "Testing me ")
            (dom/element "out!"))

(def success-count (atom 0))

(log-listener-count)

(event/listen source
              :click
              (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 "Text node"))
(log-obj (dom/element :li))
(log-obj (dom/element :li {:class "foo"}))
(log-obj (dom/element :li {:class "bar"} "text node"))
(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"}]]))

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

要了解更多，请访问ClojureScript站点的ClojureScript资源入门。

Scala.js

Scala.js是将Scala编程语言转换为JavaScript的编译器。 Scala是一种语言，旨在将来自面向对象和函数式编程的思想融合为一种语言，以创建功能强大且易于采用的工具。

作为一种强类型语言，您可以从具有部分类型推断的灵活类型系统中获益。大多数值都可以推断，但是函数参数仍然需要显式的类型注释。

虽然支持许多常见的面向对象模式(例如，每个值都是一个对象，操作是方法调用)，但是也可以获得一些函数特性，比如支持一流函数和不可变数据结构。

Scala.js的一个特殊优势是，您可以从熟悉的面向对象的方法开始，然后根据需要以自己的速度迁移到功能更强的方法，而不需要做很多工作。另外，现有的JavaScript代码和库与Scala代码兼容。

初学Scala的开发人员会发现这种语言与JavaScript并没有太大的不同。比较以下等价代码:

// 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: Event) =>
  if (xhr.status == 200) {
    val r = JSON.parse(xhr.responseText)
    $("#tweets").html(parseTweets(r))
  }
}
xhr.send()

查看scala.js“scala.js入门”文档了解更多信息。

Reason

Reason是Facebook创建和维护的一种语言，它为OCaml编译器提供了一种新的语法，代码可以翻译成JavaScript和原生代码。

作为ml家族和函数语言本身的一部分，它自然提供了一个强大而灵活的类型系统，包括推理、代数数据类型和模式匹配。它还支持不可变的数据类型和参数多态性（在其他语言中也称为泛型），但与ocaml一样，也支持面向对象编程。

使用现有的JavaScript库可以使用bucklescript绑定。您还可以在理性代码中混合使用JavaScript。插入的JavaScript代码不会被严格检查，但是对于快速修复或原型来说，它工作得很好。

如果您是react开发人员，则可以使用绑定，并且该语言还支持jsx：

/* A type variant being pattern matched */

let possiblyNullValue1 = None;
let possiblyNullValue2 = Some "Hello@";

switch possiblyNullValue2 {
| None => print_endline "Nothing to see here."
| Some message => print_endline message
};

/* Parametrized types */

type universityStudent = {gpa: float};
type response 'studentType = {status: int, student: 'studentType};
let result: response universityStudent = fetchDataFromServer ();

/* A simple typed object */

type payload = Js.t {.
  name: string,
  age: int
};
let obj1: payload = {"name": "John", "age": 30};

查看Reason站点的《Reason Guide入门》了解更多信息。

Haxe

Haxe是一种多范式编程语言，它的编译器可以用其他语言生成二进制文件和源代码。

虽然Haxe提供了一个支持类型推断的严格类型系统，但是如果目标语言支持它，它也可以作为动态语言工作。同样，它还支持各种编程风格，如面向对象、泛型和函数式。

当您编写Haxe代码时，您可以针对几个平台和语言进行编译，而不需要进行大量更改。还可以使用特定于目标的代码块。

您可以使用相同的代码在haxe中编写后端和前端，并使用haxe remoting实现同步和异步连接的通信。

正如所料，Haxe代码兼容现有库，但它也提供了一个成熟的标准库:

// Example extracted from http://code.haxe.org

extern class Database {
  function new();
  function getProperty<T>(property:Property<T>):T;
  function setProperty<T>(property:Property<T>, value:T):Void;
}

abstract Property<T>(String) {
  public inline function new(name) {
    this = name;
  }
}

class Main {
  static inline var PLAYER_NAME = new Property<String>("playerName");
  static inline var PLAYER_LEVEL = new Property<Int>("playerLevel");

  static function main() {
    var db = new Database();

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

    db.setProperty(PLAYER_LEVEL, 1);
  }
}

查看haxe站点的haxe页面入门了解更多信息。

Nim

Nim是一种静态类型的多范式编程语言，具有极简主义和对空格敏感的语法，可以编译成JavaScript以及C、c++。

该语言本身非常小，但是它的元编程功能使得您可以自己实现其他语言内置的特性。它的构建块是宏、模板和泛型，使用它们可以实现从简单功能到不同范例的各种功能。本着Lisp的精神，这使得Nim成为一种非常通用的语言，可以根据您的需要进行调整。

Nim的语法抽象特性允许您根据问题调整语言，从而使真正的dsl成为可能。如果你有特殊的任务要解决，你可以得到更高的表达能力:

# Reverse a string
proc reverse(s: string): string =
  result = ""
  for i in countdown(high(s), 0):
    result.add s[i]

var str1 = "Reverse This!"
echo "Reversed: ", reverse(str1)

# Using templates
template genType(name, fieldname: expr, fieldtype: typedesc) =
  type
    name = object
      fieldname: fieldtype

genType(Test, foo, int)

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

nim站点有一些有用的入门文档，以获取更多信息。

结论

如果JavaScript不是您最喜欢的语言，您仍然可以创建web应用程序，而不必忍受该技术的缺点。用于创建这些应用程序的选项可以满足各种各样的需求，从纯函数语言(如PureScript)到面向对象语言(如Dart)。

如果您想要比一对一语言翻译更多的东西，您可以选择Elm，它为您提供了虚拟DOM和内置体系结构等工具。

相关免费学习推荐：js视频教程

위 내용은 JavaScript로 컴파일되는 10가지 흥미로운 언어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!