6分でwebassemblyを理解する

10323 ワード
webdev web javascript webassembly テキストリンク
2019年12月5日にWebベースとしてHTML、CSS、JavaScriptをWebassemblyに結合します.これは多くのことに有用であり、パフォーマンスに関しては、ブラウザでは決して見られないことです.あなたが5分を持っているならば、私は起こっている小さい革命を説明する必要があります.

昔々


1995年に、JavaScriptは、within 10 daysによってつくられました.そして、その時点で、JavaScriptは高速に設計されていませんでした.それは基本的なフォームの検証のために、それは狂ったように遅いです.時間が経つにつれて良くなった.
2008年に、Googleはどこからともなく出てきて、テーブルにその新しいブラウザーをつけました:Google Chrome.内部のクロムはv 8と呼ばれるJavaScriptエンジンでした.そして、V 8の革命はJavaScriptのジャストインタイム(JIT)コンパイルでした.解釈されたコードからJIT編集へのこの変化は、JavaScriptのパフォーマンスを早めに加速しました、そして、一般にブラウザー.この速度は、NodeJSや電子のような技術の誕生とJavaScriptの人気の爆発を許容するつもりでした.

2015年に、Webassemblyは統一の下で走っているsmall demo of a gameで初めて発表されます.ゲームは直接ブラウザで実行されます!
2019年に、W 3 Cはwebassemblyに新しいウェブ標準を作りました.ちょうどV 8エンジンがその日にあったように、Webassemblyは新しいパフォーマンス革命であるように成形されています.したがって、webassemblyはすでにここにあります、そして、それはフライングスタートにオフです.

webassemblyとは


webassemblyは、WASMに省略され、JavaScript以外のコードを使用してブラウザで実行する方法です.このコードはC、C++、錆と他の多くのことができます.それはあなたのCPUの近くのネイティブの速度であなたのブラウザーでコンパイルされて、実行されます.このコードは、JavaScriptからモジュールとして直接使用できるバイナリファイルの形式です.
WebBassemblyはJavaScriptを置き換えるためにありません.反対に、これら2つの技術は一緒に働きます.Javascript APIを使用することで、あなたのページにwebassemblyモジュールを読み込むことができます.これは、Javascriptの柔軟性によってコンパイルされたコードのパフォーマンスをwebassemblyを通して利用できることを意味します.

webassemblyという名前は少し誤解を招くものです.WebBassemblyは確かにWeb用に動作しますが、それに限定されません!Webbassemblyを作ったチームは、それがどこでも使われることができるように、それを一般的にするために多くのトラブルに行きました.我々はexamples of thisを見始めている.
また、すべての時間が来る誤解です.webassemblyはプログラミング言語ではありません.Webassemblyは他の言語のコンパイルターゲットとして機能する中間形式、bytecodeです.さて、それは明確ではない、いくつかの図面を作りましょう.

どうやって動くの？



あなたはそれを見ましたか.もう一つの芸術作品.あなたが私がPhotoshopを使うと言うならば、あなたは私を信じますか?とにかく!
  • ステップ1:それはあなたとあなたの開発者のスキルです.C、C++(他の言語を使用することができます)のソースコードを生成します.このコードは、ブラウザでJavaScriptの問題を解決するか、あまりにも集中的に処理することになっています.
  • ステップ2:あなたは、翻訳をするためにEmscriptenを使います.Emscriptenは、あなたのソースコードをwebassemblyにコンパイルするLLVMで構築されたツールチェーンです.あなたはそれをインストールすることができますし、in a few quick stepsを望むものをコンパイル、我々は後でそれを見ていきます.このステップの最後に、WASMファイルがあります.
  • ステップ3 : WebページにWASMファイルを使用します.未来から来たら、このファイルをどんなES 6モジュールのようにもロードできます.たった今、使用法は少し複雑ですが、何も空想です.
    • さあ、手を汚しましょう.

    コードを見せてください


    まず最初に、コンパイルするC +コードの小さな部分が必要です.一部の人々が例として全体のDiablo 1 game in the browserを提供する場合は、私はそれを簡単に2つの数字を追加する関数を維持します.我々はC +の速度を証明するつもりはない、それは例です.
    int add(int firstNumber, int secondNumber) {
  return firstNumber + secondNumber;
}
    その後、お好みのLinuxディストリビューションに移動します.スクリプトをダウンロードしてインストールします.
    # installing dependencies (yes, you can use newer version of python)
sudo apt-get install python2.7 git

# gettin emscripten via a git clone.
git clone https://github.com/emscripten-core/emsdk.git

# downloading, installing and activating the sdk
cd emsdk
./emsdk install latest
./emsdk activate latestl
source ./emsdk\_env.sh

# make sure the installation worked
emcc --version

# compiling the c++ file to a webassembly template
emcc helloWebassembly.cpp -s WASM=1 -o helloWebassembly.html

# we serve the HTML and look at the result
emrun helloWebassembly.html
    それは、ハッカーをするハッカーマンの方法でした.より簡単な方法があります.
    あなたはthis siteに行くことができますし、C +コードを左に置く.次に、ワット部分でエクスポートされた関数の名前を取得します.私が得られる前に、Add機能コードを使用することは、機能名として「Chord Z 3 Adii」を使います、我々はそれの直後にそれを使います.あなただけのダウンロードをクリックして戻ってあなたのwasmファイルを取得します.簡単!
    今、我々はwebassemblyブラウザで直接すべての迷惑なノイズなしで動作することができます.
    <html>
  <head>
    <title>WASM test</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>

  <body>
    <script>
      const getRandomNumber = () => Math.floor(Math.random() \* 10000);

      WebAssembly.instantiateStreaming(
        fetch("https://012q1.sse.codesandbox.io/wasm/add.wasm")
      )
        .then(obj => obj.instance.exports.\_Z3addii)
        .then(add => {
          document.getElementById("addTarget").textContent = add(
            getRandomNumber(),
            getRandomNumber()
          );
        });
    </script>

    <h1>Résultat du C++</h1>
    <p id="addTarget"></p>
  </body>
</html>
    これです.このHTML Webページを使用すると、C++をコンパイルすることができます.すべてのHTMLと明白なものをスキップして、直接的に行11にInstantiatestReaming機能を行ってください.Mozilla documentationが言うように、この関数は簡単なフェッチでwebassemblyモジュールをコンパイルしてインスタンス化することができます.
    それから、以前に取得した関数名を使ってadd関数を使って、DOMの部分を置き換えるために使います.とVoila!ブラウザ内のJavaScript経由でC++.どのようにクレイジーですか?見て、私も、作業デモでcodesandboxした.私は右ここでは、それを再生埋め込み!
    あなたは、それがちょうどこれをするために複雑であると私に話すつもりです、そして、あなたは正しいです.インスタンス化のJavaScriptビットを将来の簡単なインポートに置き換える作業をしています.ので、患者、それは来ている.

    エピローグ


    もう5分間話しているので、ここで止まります.webassemblyについてもっと知りたいならば、あなたの目の前で時間があります.話の残りの部分については、私は、他の言語へのWebのこのオープニングがもたらすものを楽しみにしています.多くの可能性があります、そして、私はウェブがさらに速くなるのを待つことができません!
    [TIL]Exports & Imports
    Windows SDK 7.1インストール