EMSCRIPTEN

將應用快速 PORT 到 JAVASCRIPT 上的神物
Wei-Ning Huang (AZ)
ABOUT THE SPEAKER
Wei-Ning Huang (a.k.a AZ Huang)
Personal Website: http://azhuang.me
TL; DR;
Emscripten 是一個 LLVM to Javascript 編譯器
將 LLVM bitcode 轉成 Javascript!
WHAT IS LLVM?
LLVM 是一個編譯器框架(Framework)

所以任何可以產生 LLVM bitcode 的語言,都可以被編譯成
Javascript
PERFORMANCE?
Javascript typed-array
Int8Array
Int16Array
Emscripten 使用 Typed-Array 來當連續的記憶體使用
HEAP8, HEAP32
asm.js
由Mozill...
BENCHMARK

source
幾乎只有原生(native)的兩倍慢!
EXAMPLE
hello.c
#include <stdio.h>
#include "console.h"
void say_hello() {
console_log("Hello, World!n");
}

console.h
#if...
EXAMPLE
post.js
把 say_hello 這個 function export 到 global
say_hello = Module.cwrap('say_hello')

console.js
我們想要將 console 輸出...
INVOKE EMCC
$ emcc hello.c -s EXPORTED_FUNCTIONS="['_say_hello']" --post-js post.js --js
-library console.js -o hello.js

...
REDUCING JS SIZE
使用 Google 的 Closure compiler
emcc --closure <on>

Closure compiler 可能會造成 編出來的 code 爛掉,所以請小
心使用。
例:
sql.js...
OPTIMIZATION
Optimization flags
-O1 -O2 -O3

啟用 asm.js
-s ASM_JS=1
LIVE DEMO
在網頁中載入 hello.js 並呼叫 say_hello
原本輸出到 stdout 的內容被導入 <pre> 裡
源始碼可以在 GitHub 找到
CASE STUDY
快速開發雲蝦米
桌面版的嘸蝦米輸入法使用 SQLite 做為資料庫,所以我有幾
種選擇:
使用純 Javascript 自己刻輸入法
寫一個 javascript="" 版的="" libsqlite
使用 Emscrip...
CASE STUDY
雷神之鎚 網頁版: QuakeJS
純 HTML5
由 Emscripten compile 而成
CASE STUDY
還有各種神奇的專案:
Mozilla B2G 的一些組件
jspinyin
Qt
Vim.js
jschewing
OpenPGP.js
Broadway H.264 decoder
Python, Ruby and Lu...
CONCLUSION
編譯技術真的 很重要 !
High-Level Language VM 就算沒有 Byte Code,也可以變成
Runtime - Source-to-Source compilation
ClojureScript: ...
Upcoming SlideShare
Loading in...5
×

EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物

7,309
-1

Published on

Code & Beer #10

https://code-beer.hackpad.com/WtAf9qA1qOx

EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物

  1. 1. EMSCRIPTEN 將應用快速 PORT 到 JAVASCRIPT 上的神物 Wei-Ning Huang (AZ)
  2. 2. ABOUT THE SPEAKER Wei-Ning Huang (a.k.a AZ Huang) Personal Website: http://azhuang.me TL; DR;
  3. 3. Emscripten 是一個 LLVM to Javascript 編譯器 將 LLVM bitcode 轉成 Javascript!
  4. 4. WHAT IS LLVM? LLVM 是一個編譯器框架(Framework) 所以任何可以產生 LLVM bitcode 的語言,都可以被編譯成 Javascript
  5. 5. PERFORMANCE? Javascript typed-array Int8Array Int16Array Emscripten 使用 Typed-Array 來當連續的記憶體使用 HEAP8, HEAP32 asm.js 由Mozilla 提出的規範,定義了一個可以很容易被優化的 Javascript 的子集 asm.js 定義的操作都非常低階,像是 Assembly 一樣 Operation are typed! 詳細的 spec 可以參考: http://asmjs.org/spec/latest/
  6. 6. BENCHMARK source 幾乎只有原生(native)的兩倍慢!
  7. 7. EXAMPLE hello.c #include <stdio.h> #include "console.h" void say_hello() { console_log("Hello, World!n"); } console.h #ifndef __CONSOLE_H__ #define __CONSOLE_H__ void console_log(const char* str); #endif /* __CONSOLE_H__ */
  8. 8. EXAMPLE post.js 把 say_hello 這個 function export 到 global say_hello = Module.cwrap('say_hello') console.js 我們想要將 console 輸出到網頁,而不是 console裡,所以 我們寫一個 Javascript 版本的 console_log 來取代原本的 C function var ConsoleLib = { console_log: function(str) { var el = document.getElementById("console"); el.innerHTML += Pointer_stringify(str); } }; mergeInto(LibraryManager.library, ConsoleLib);
  9. 9. INVOKE EMCC $ emcc hello.c -s EXPORTED_FUNCTIONS="['_say_hello']" --post-js post.js --js -library console.js -o hello.js --post-js: --js-library: 要使用的 Javascript library,取代原本的C library Emscripten 源始碼的 src 底下已經實做了多個常見的函式 庫,如: Xlib SDL egl, gl, glut, glew 改成使用 WebGL
  10. 10. REDUCING JS SIZE 使用 Google 的 Closure compiler emcc --closure <on> Closure compiler 可能會造成 編出來的 code 爛掉,所以請小 心使用。 例: sql.js 使用emscripten compile完 (已minified),大小約5MB 使用 Closure compiler 後大約 2MB!
  11. 11. OPTIMIZATION Optimization flags -O1 -O2 -O3 啟用 asm.js -s ASM_JS=1
  12. 12. LIVE DEMO 在網頁中載入 hello.js 並呼叫 say_hello 原本輸出到 stdout 的內容被導入 <pre> 裡 源始碼可以在 GitHub 找到
  13. 13. CASE STUDY 快速開發雲蝦米 桌面版的嘸蝦米輸入法使用 SQLite 做為資料庫,所以我有幾 種選擇: 使用純 Javascript 自己刻輸入法 寫一個 javascript="" 版的="" libsqlite 使用 Emscripten 將 libsqlite 編譯成 Javascript! Github: kripken / sql.js 最後實做的 Javascript 只有不到 200 行!
  14. 14. CASE STUDY 雷神之鎚 網頁版: QuakeJS 純 HTML5 由 Emscripten compile 而成
  15. 15. CASE STUDY 還有各種神奇的專案: Mozilla B2G 的一些組件 jspinyin Qt Vim.js jschewing OpenPGP.js Broadway H.264 decoder Python, Ruby and Lua interpreter
  16. 16. CONCLUSION 編譯技術真的 很重要 ! High-Level Language VM 就算沒有 Byte Code,也可以變成 Runtime - Source-to-Source compilation ClojureScript: Clojure Processing.js: Processing Dart 有了 Emscripten,寫系統的人也可以寫 Web 了 CODE IN C , RUN EVERYWHERE !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×