Code & Beer #10 https://code-beer.hackpad.com/WtAf9qA1qOx

1. EMSCRIPTEN
將應用快速 PORT 到 JAVASCRIPT 上的神物
Wei-Ning Huang (AZ)

2. ABOUT THE SPEAKER
Wei-Ning Huang (a.k.a AZ Huang)
Personal Website: http://azhuang.me
TL; DR;

3. Emscripten 是一個 LLVM to Javascript 編譯器
將 LLVM bitcode 轉成 Javascript！

4. WHAT IS LLVM?
LLVM 是一個編譯器框架(Framework)
所以任何可以產生 LLVM bitcode 的語言，都可以被編譯成
Javascript

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. BENCHMARK
source
幾乎只有原生(native)的兩倍慢！

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. 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. 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. REDUCING JS SIZE
使用 Google 的 Closure compiler
emcc --closure <on>
Closure compiler 可能會造成 編出來的 code 爛掉，所以請小
心使用。
例：
sql.js 使用emscripten compile完 (已minified)，大小約5MB
使用 Closure compiler 後大約 2MB!

11. OPTIMIZATION
Optimization flags
-O1 -O2 -O3
啟用 asm.js
-s ASM_JS=1

12. LIVE DEMO
在網頁中載入 hello.js 並呼叫 say_hello
原本輸出到 stdout 的內容被導入 <pre> 裡
源始碼可以在 GitHub 找到

13. CASE STUDY
快速開發雲蝦米
桌面版的嘸蝦米輸入法使用 SQLite 做為資料庫，所以我有幾
種選擇：
使用純 Javascript 自己刻輸入法
寫一個 javascript="" 版的="" libsqlite
使用 Emscripten 將 libsqlite 編譯成 Javascript!
Github: kripken / sql.js
最後實做的 Javascript 只有不到 200 行！

14. CASE STUDY
雷神之鎚 網頁版: QuakeJS
純 HTML5
由 Emscripten compile 而成

15. CASE STUDY
還有各種神奇的專案:
Mozilla B2G 的一些組件
jspinyin
Qt
Vim.js
jschewing
OpenPGP.js
Broadway H.264 decoder
Python, Ruby and Lua interpreter

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 !