Web assembly 맛보기

WebAssembly 맛보기
(WebAssembly preview and getting started)
서경석 (gyeongseok seo)
gseok.seo@gmail.com

Contents
1. WebAssembly 소개
2. 배경지식
3. 중간요약
4. 실제 구현해보기
5. 정리 및 Q&A
6. 참고 자료

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

WebAssembly란?
binary encoding of the AST -> run on browser

WebAssembly 무엇이 좋은가?
http://webassembly.org/demo/AngryBots/

WebAssembly 무엇이 좋은가?
● 속도가 빠르다 (높은 성능)
- 대용량 연산 작업이 필요한 경우에 대한 해법
● 보안을 향상 할 수 있다
● ActiveX, Portable Native Client (PNaCl)의 대체 가능
● 다양한 언어로 browser용 client(app)을 개발 가능
● 예를 들어보면?
○ P2P application, Image / Video / Music editing
○ Live video, CAD application
○ Game

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

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

outputCompileSource
asm.js 코딩 방법
사람이 코딩하는 거 아님!
A.C GCC A.O
A.C Emscripten A.asm.js

outputCompileSource
WebAssembly로 돌아와서
C/C++
Java
…
?
WebAssembly
binary code
(WASM)
잠깐! 이미 C > asm.js는 있다!!!

outputCompileSource
WebAssembly로 돌아와서
asm.js binaryen WASM
outputCompileSource
C emscripten WASM

WebAssembly의 WASM, WAST
WASM: Binary encoding WAST: Text Format

WebAssembly의 WASM, WAST
WAST WASM
Binaryen
Binaryen을 이용하여 wast <-> wasm 변환 가능

중간요약
C/C++ source asm.js wast wasm
emscripten
binaryen
진행중인듯...

WebAssembly 실제 구현해보기
Pre Required, Tool 설치하기 (ubuntu)
1. emscripten
2. binaryen

전체 과정 요약
C (API) code ASM.js WAST WASM
HTML / JS
Run on
Browser
WASM

C코드 작성 (calc_method.c)

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코드를 얻을 수 있음

wast로 컴파일(calc_method.wast)
asm2wasm calc_method.asm.js -o calc_method.wast

wasm로 컴파일(calc_method.wasm)
wasm-as calc_method.wast -o calc_method.wasm

wasm을 loading하는 js코드 작성(run.js)

test용 index.html코드 작성

browser에서 테스트

당신의 첫 WebAssembly 코딩 성공을 축하합니다~

WebAssembly 정리
● WebAssembly는 현재 개발중인 프로젝트 이다.
○ 아직 정식 release (v1.0)이 되지 않았고, 기본(default)옵션으로 use할 수 있는 feature는 아니다.
● WebAssembly는 차세대 web tech중 꼭 알아야 하는 feature가 될 것이다.
○ 활용도가 매우 넓다.
○ 가능성이 매우 높은 기술이다.
○ 실제 major browser bender가 참여하고 있다.
● WebAssembly가 어렵게 공부해야하는 기술은 아니다.
○ 최종적으로, 정식 버전이 나오면, 우리는 compile, build만 잘해서 사용하면된다.
○ 물론 기본적인 개념과 빌드방법등은 조금 공부해야 하지만…
● 그래서…
○ 개발자라면, 실제 구현을 한번정도 따라해보기
○ 이후 관심을 놓지 말고, 가끔(2주정도?)마다 버전상황, relase상황 등을 확인해보기

참고자료 & 트러블 슈팅

WebAssembly가 Browser에서 구동되는 기본 개념
reference: https://auth0.com/blog/7-things-you-should-know-about-web-assembly/

Abstract Syntax Tree (AST)
while b ≠ 0
if a > b
a := a − b
else
b := b − a
return a

asm.js 구동 루틴
http://ejohn.org/blog/asmjs-javascript-compile-target/

asm.js 성능
https://www.sitepoint.com/understanding-asm-js/

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

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.

WebAssembly 트러블슈팅
● C코드 작성시 주의점
C 코드 작성시 API형태의 코드 작성을 하는경우
#include <emscripten.h> 헤더 추가와
EMSCRIPTEN_KEEPALIVE 키워드 추가 가 필요하다.
없는경우, 빌드시 미사용 api의 경우 asm.js파일에 추가되지 않는다.
즉 add 함수를 정의하고, 사용하는 곳이 없으면, asm.js파일로 빌드시 add라는 함수가 asm.js에 추가되지
않는다.

● EMCC 빌드 주의점
emcc에 별다른 옵션을 주지 않고 빌드(기본빌드)하면, simple한 형태의 asm.js코드가 아닌. 즉각적으로 사
용할 수 있는 5000 ~ 10000라인의 asm.js코드가 생성된다.
해당 기본 빌드의 경우 node등에서 AMD(require)로 모듈을 바로 로딩해서 사용 가능하지만, api을 별도로
만들어서, 사용하려는 경우 불필요한 코드가 너무 많이 들어오게 된다.
따라서, simple한 형태의 api을 얻고 싶은 경우. ONLY_MY_CODE, --separate-asm 옵션을 사용한, emcc
빌드를 하여야 한다.

● 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부분을 별도로 추가해 주
어야 한다.

● 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.

● 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

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

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에 대한 자세한 설명은 참고 사이트에서 확인하면된
다.

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

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#/

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

Web assembly 맛보기

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Web assembly 맛보기

Semelhante a Web assembly 맛보기 (20)

Web assembly 맛보기

Notas do Editor