Your SlideShare is downloading. ×
0
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
EMSCRIPTEN: 將應用快速 PORT 到 JAVASCRIPT 上的神物
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,956

Published on

Code & Beer #10 …

Code & Beer #10

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

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,956
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
22
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 !

×