Web assembly 맛보기

4 488 vues

Publié le

web assembly 간략하게 살펴보기
아주 간단한 c api코드를 web assembly로 변경하고, browser에서 구동 테스트 해보는 web asssembly에 대한 간단한 review 자료

Publié dans : Technologie

Web assembly 맛보기

  1. 1. WebAssembly 맛보기 (WebAssembly preview and getting started) 서경석 (gyeongseok seo) gseok.seo@gmail.com
  2. 2. Contents 1. WebAssembly 소개 2. 배경지식 3. 중간요약 4. 실제 구현해보기 5. 정리 및 Q&A 6. 참고 자료
  3. 3. WebAssembly란? ● New Standard developed by Mozilla, Microsoft, Google and Apple ● Compact, portable ‘Binary Format’ for Web ● Fast to load, runs safely ● Near-native performance ● Works on any device
  4. 4. WebAssembly란? binary encoding of the AST -> run on browser
  5. 5. WebAssembly 무엇이 좋은가? http://webassembly.org/demo/AngryBots/
  6. 6. WebAssembly 무엇이 좋은가? ● 속도가 빠르다 (높은 성능) - 대용량 연산 작업이 필요한 경우에 대한 해법 ● 보안을 향상 할 수 있다 ● ActiveX, Portable Native Client (PNaCl)의 대체 가능 ● 다양한 언어로 browser용 client(app)을 개발 가능 ● 예를 들어보면? ○ P2P application, Image / Video / Music editing ○ Live video, CAD application ○ Game
  7. 7. WebAssembly 히스토리 & 등장배경 ● 히스토리 ● WebAssembly was first announced on 17 June 2015 ● 15 March 2016 was demonstrated executing Unity's Angry Bots in Firefox, Chromium, Google Chrome, and Microsoft Edge. ● w3c에 그룹(https://www.w3.org/community/webassembly/)을 만들고, 메이저 4개 회사에서 진행중 ● 현재 개발 진행중 ● 등장배경 ● web browser에서 native수준의 program구동에 대한 요구 사항 증대 ● ActiveX, Native Clinet(NaCl), Portable Native Cilent(PNaCl)와 같은 native연동 필요성 증대 및 파편화 해결책이 필요해짐 ● 구글 웹 툴킷(GWT) > 엠스크립튼과 맨드릴 코드패턴 > asm.js > WebAssembly
  8. 8. asm.js에 대해서 잠깐 살펴보기 ● Intermediate language ● Subset of Javascript ● Compiling C/C++ to asm.js(Javascript) ● Very fast. Best result 1.5x native ● Natively runs in firefox, edge, chrome www.slideshare.net/ValeriiaMaliarenko/web-assembly-overview-by-mikhail-sorokovsky
  9. 9. asm.js 코드
  10. 10. outputCompileSource asm.js 코딩 방법 사람이 코딩하는 거 아님! A.C GCC A.O A.C Emscripten A.asm.js
  11. 11. outputCompileSource WebAssembly로 돌아와서 C/C++ Java … ? WebAssembly binary code (WASM) 잠깐! 이미 C > asm.js는 있다!!!
  12. 12. outputCompileSource WebAssembly로 돌아와서 asm.js binaryen WASM outputCompileSource C emscripten WASM
  13. 13. WebAssembly의 WASM, WAST WASM: Binary encoding WAST: Text Format
  14. 14. WebAssembly의 WASM, WAST WAST WASM Binaryen Binaryen을 이용하여 wast <-> wasm 변환 가능
  15. 15. 중간요약 C/C++ source asm.js wast wasm emscripten binaryen 진행중인듯...
  16. 16. WebAssembly 실제 구현해보기 Pre Required, Tool 설치하기 (ubuntu) 1. emscripten 2. binaryen
  17. 17. WebAssembly 실제 구현해보기 전체 과정 요약 C (API) code ASM.js WAST WASM HTML / JS Run on Browser WASM
  18. 18. WebAssembly 실제 구현해보기 C코드 작성 (calc_method.c)
  19. 19. WebAssembly 실제 구현해보기 asm.js로 컴파일 (calc_method.asm.js) emcc calc_method.c -O2 -profiling -s ONLY_MY_CODE=1 -g2 --separate-asm -o calc_method.js ONLY_MY_CODE, --separate-asm 을 사용해야 simple한 asm.js코드를 얻을 수 있음
  20. 20. WebAssembly 실제 구현해보기 wast로 컴파일(calc_method.wast) asm2wasm calc_method.asm.js -o calc_method.wast
  21. 21. WebAssembly 실제 구현해보기 wasm로 컴파일(calc_method.wasm) wasm-as calc_method.wast -o calc_method.wasm
  22. 22. WebAssembly 실제 구현해보기 wasm을 loading하는 js코드 작성(run.js)
  23. 23. WebAssembly 실제 구현해보기 test용 index.html코드 작성
  24. 24. WebAssembly 실제 구현해보기 browser에서 테스트
  25. 25. WebAssembly 실제 구현해보기 browser에서 테스트
  26. 26. 당신의 첫 WebAssembly 코딩 성공을 축하합니다~
  27. 27. WebAssembly 정리 ● WebAssembly는 현재 개발중인 프로젝트 이다. ○ 아직 정식 release (v1.0)이 되지 않았고, 기본(default)옵션으로 use할 수 있는 feature는 아니다. ● WebAssembly는 차세대 web tech중 꼭 알아야 하는 feature가 될 것이다. ○ 활용도가 매우 넓다. ○ 가능성이 매우 높은 기술이다. ○ 실제 major browser bender가 참여하고 있다. ● WebAssembly가 어렵게 공부해야하는 기술은 아니다. ○ 최종적으로, 정식 버전이 나오면, 우리는 compile, build만 잘해서 사용하면된다. ○ 물론 기본적인 개념과 빌드방법등은 조금 공부해야 하지만… ● 그래서… ○ 개발자라면, 실제 구현을 한번정도 따라해보기 ○ 이후 관심을 놓지 말고, 가끔(2주정도?)마다 버전상황, relase상황 등을 확인해보기
  28. 28. Q & A
  29. 29. 참고자료 & 트러블 슈팅
  30. 30. WebAssembly가 Browser에서 구동되는 기본 개념 reference: https://auth0.com/blog/7-things-you-should-know-about-web-assembly/
  31. 31. Abstract Syntax Tree (AST) while b ≠ 0 if a > b a := a − b else b := b − a return a
  32. 32. asm.js 구동 루틴 http://ejohn.org/blog/asmjs-javascript-compile-target/
  33. 33. asm.js 성능 https://www.sitepoint.com/understanding-asm-js/
  34. 34. Linear bytecode
  35. 35. emscripten 설치 (ubuntu) 1. install required module #Update the package lists sudo apt-get update # Install *gcc* (and related dependencies) sudo apt-get install build-essential # Install cmake sudo apt-get install cmake # Install Python sudo apt-get install python2.7 # Install node.js sudo apt-get install nodejs # Install Java (optional, only needed for Closure Compiler minification) sudo apt-get install default-jre 2. install emcc # download emscripten file Portable Emscripten SDK for Linux and OS X (emsdk-portable.tar.gz) # unzip gunzip emsdk-portable.tar.gz tar -xvf emsdk-portable.tar # Fetch the latest registry of available tools. ./emsdk update # Download and install the latest SDK tools. ./emsdk install latest # Make the "latest" SDK "active" ./emsdk activate latest # Set the current Emscripten path on Linux/Mac OS X source ./emsdk_env.sh
  36. 36. binaryen 설치 (ubuntu) 1. pre-required cmake, make 2. clone source code clone https://github.com/WebAssembly/binaryen.git 3. build cmake . && make 4. using tools code that builds the following tools in bin/: tools wasm-shell A shell that can load and interpret WebAssembly code. It can also run the spec test suite. wasm-as Assembles WebAssembly in text format (currently S-Expression format) into binary format (going through Binaryen IR). wasm-dis Un-assembles WebAssembly in binary format into text format (going through Binaryen IR). wasm-opt Loads WebAssembly and runs Binaryen IR passes on it. asm2wasm An asm.js-to-WebAssembly compiler, using Emscripten's asm optimizer infrastructure. This is used by Emscripten in Binaryen mode when it uses Emscripten's fastcomp asm.js backend. s2wasm A compiler from the .s format emitted by the new WebAssembly backend being developed in LLVM. This is used by Emscripten in Binaryen mode when it integrates with the new LLVM backend. wasm.js wasm.js contains Binaryen components compiled to JavaScript, including the interpreter, asm2wasm, the S-Expression parser, etc., which allow you to use Binaryen with Emscripten and execute code compiled to WASM even if the browser doesn't have native support yet. This can be useful as a (slow) polyfill. binaryen.js A stand alone library that exposes Binaryen methods for parsing s-expressions and instantiating WASM modules in JavaScript.
  37. 37. WebAssembly 트러블슈팅 ● C코드 작성시 주의점 C 코드 작성시 API형태의 코드 작성을 하는경우 #include <emscripten.h> 헤더 추가와 EMSCRIPTEN_KEEPALIVE 키워드 추가 가 필요하다. 없는경우, 빌드시 미사용 api의 경우 asm.js파일에 추가되지 않는다. 즉 add 함수를 정의하고, 사용하는 곳이 없으면, asm.js파일로 빌드시 add라는 함수가 asm.js에 추가되지 않는다.
  38. 38. WebAssembly 트러블슈팅 ● EMCC 빌드 주의점 emcc에 별다른 옵션을 주지 않고 빌드(기본빌드)하면, simple한 형태의 asm.js코드가 아닌. 즉각적으로 사 용할 수 있는 5000 ~ 10000라인의 asm.js코드가 생성된다. 해당 기본 빌드의 경우 node등에서 AMD(require)로 모듈을 바로 로딩해서 사용 가능하지만, api을 별도로 만들어서, 사용하려는 경우 불필요한 코드가 너무 많이 들어오게 된다. 따라서, simple한 형태의 api을 얻고 싶은 경우. ONLY_MY_CODE, --separate-asm 옵션을 사용한, emcc 빌드를 하여야 한다.
  39. 39. WebAssembly 트러블슈팅 ● WAST 빌드시 (asm2wasm) ENV문제 (module (import "env" "memory" (memory $0 256 256)) (import "env" "table" (table 0 0 anyfunc)) (import "env" "memoryBase" (global $memoryBase i32)) (import "env" "tableBase" (global $tableBase i32)) (export "multiple" (func $_my_multiple)) (export "divide" (func $_my_divide)) (export "minus" (func $_my_minus)) (export "add" (func $_my_add)) (func $_my_multiple (param $d1 f64) (param $d2 f64) (result f64) (return (f64.mul (get_local $d1) (get_local $d2) ) ) ) (func $_my_divide (param $d1 f64) (param $d2 f64) (result f64) (return (f64.div (get_local $d1) (get_local $d2) ) ) ) .... env 모듈을 Import하는 코드가 작성되는데, emcc에서 simple 하게 만든 asm.js코드에는 env관련 모듈이 없어 에러가 발생 할 수 있다. 따라서, env부분을 제거하거나, env부분을 별도로 추가해 주 어야 한다.
  40. 40. WebAssembly 트러블슈팅 ● browser에서 구동시 wasm옵션을 먼저 설정해야함 WebAssembly isn't released yet, so it isn't enabled by default. But you can test it in development builds: In Firefox, use Nightly and set javascript.options.wasm in about:config. In Chrome, use Canary and enable chrome://flags/#enable-webassembly.
  41. 41. WebAssembly 트러블슈팅 ● browser에서 구동시 에러 발생 문제 현재 계속 개발중인 feature이기 때문에 compile한 wasm버전과, browser가 지원하는 wasm버 전이 다르면 구동이 되지 않고 위 그림과 같은 에러가 발생한다. 해결책 1. wasm이 지원되는 browser로 가장 최신 버전을 항상 유지한다. a. In Firefox, use Nightly, In Chrome, use Canary 2. wasm컴파일러 역시 항상 최신 버전을 유지한다. a. https://github.com/WebAssembly/binaryen 최신 소스로 빌드 b. http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#sdk-downloads emscripten도 항상 최신으로 유지 i. emsdk update ii. emsdk install latest iii. emsdk activate latest
  42. 42. WebAssembly binary code ● 처음 8 바이트는 파일 전문을 나타낸다.(예약) ● 이중 앞의 4바이트는 'magic number’이다. 해당값이 00 61 73 6d가 아니면, browser에서 wasm모듈화 function 사용시 곧바로 에러가 발생한다. ○ 00 61 73 6d ● 뒤의 4바이트는 버전 정보이다. 해당값과 browser에서 지원하는 wasm 버전값이 다르면, browser에서 에러를 발생시 킨다. ○ 0b 00 00 00 ref: http://blog.mikaellundin.name/2016/06/19/creating-a-webassembly-binary-and-running-it-in-a-browser.html
  43. 43. WebAssembly binary code ref: http://blog.mikaellundin.name/2016/06/19/creating-a-webassembly-binary-and-running-it-in-a-browser.html Type section All sections are optional, so when they appear they need to be correctly labeled. We start with the type section. 그 외, function, memory, export, code, name section에 대한 자세한 설명은 참고 사이트에서 확인하면된 다.
  44. 44. Reference Sites 공식 사이트 web assembly 공식 사이트: http://webassembly.org/ emscripten 사이트: http://kripken.github.io/emscripten-site/index.html binaryen 사이트: https://github.com/WebAssembly/binaryen web assembly git: https://github.com/WebAssembly 개념설명 사이트 http://blog.mikaellundin.name/2016/06/19/creating-a-webassembly-binary-and-running-it-in-a-browser.html https://auth0.com/blog/7-things-you-should-know-about-web-assembly/ http://www.scriptol.com/programming/wasm.php http://usersnap.com/blog/what-is-webassembly-for-web-developer/ http://www.2ality.com/2015/06/web-assembly.html https://medium.com/javascript-scene/why-we-need-webassembly-an-interview-with-brendan-eich-7fb2a60b0723#.pccdilipe
  45. 45. Reference Sites asm.js http://www.slideshare.net/mixed/asmjs http://ujinbot.blogspot.kr/2013/07/asmjs.html https://blog.mozilla.org/luke/2014/01/14/asm-js-aot-compilation-and-startup-performance/#jit https://blog.outsider.ne.kr/927 http://stackoverflow.com/questions/31502563/what-is-the-difference-between-asm-js-and-web-assembly web ppt http://www.slideshare.net/danlbudden/an-introduction-to-webassembly http://www.slideshare.net/bmihaylov/is-webassembly-the-killer-of-javascript http://www.slideshare.net/ValeriiaMaliarenko/web-assembly-overview-by-mikhail-sorokovsky https://kripken.github.io/talks/wasm.html#/
  46. 46. Reference Sites Etc https://brendaneich.com/2015/06/from-asm-js-to-webassembly/ https://github.com/nhnent/fe.javascript/wiki/July-4-July-8,-2016 http://cultureofdevelopment.com/blog/build-your-first-thing-with-web-assembly/ http://klutzy.nanabi.org/blog/2014/01/18/win32.js/ http://hotopensource.tistory.com/52 http://evanw.github.io/thinscript/ https://github.com/evanw/thinscript
  47. 47. 감사합니다

×