1、将TypeScript编译编译到WasmGC的全新实实践徐君Intel软件研发工程师PART ONEWebAssembly简介PART THREE将TypeScript编译到WasmGC的技术方案PART TWOWebAssembly的典型应用及痛点PART FOUR应用展望什么是WebAssemblyWebAssembly工作原理WAMR发展历史01WebAssembly简介PortabilityCapabilitiesPerformanceSandboxing WebAssembly简介WebAssembly(wasm)是一个可移植、体积小、加载快并且兼容Web的全新格式安全沙箱隔离机制，

2、宿主资源访问可控制高效通过JIT/AOT技术加持，可接近原生应用的执行性能多语言支持C/C+,AssemblyScript,Python,Go,Rust,WebAssembly工作原理Embedded frame in JS(Web app,PWA)Standalone app(CDN,Serverless,Node.js)Shared library functions(Fast,portable,sandboxed libraries)Web StandaloneHost EnvironmentHardwareC/C+RustGo Compiler(Emscripten,Rustc,llv

3、m)Developer Toolchain Offline Compilation.wasmTransmission to DeviceHost glue code(JS/HTML.)x86ARMWASMMIPS.AOT compileJIT compileWasmtimeWAMRFeature APIs(Wasi,WebGPU.)OSWAMR发展历史2019年5月Intel开源WAMR（WebAssembly Micro Runtime）项目2019年11月以创始项目身份发起并加入Bytecode Alliance(BA)2021年10月转换为社区开放治理模式设计目标广泛的适用性：从嵌入式设

4、备到云端小尺寸，高性能的轻量级 WASM 运行时适配多种CPU架构(32bit and 64bit)和操作系统Intel SGX/TDX 一等公民支持浏览器中的应用独立运行时引擎应用WebAssembly在前端中的主要痛点总结02WebAssembly的典型应用及痛点浏览器应用案例浏览器应用案例浏览器应用案例浏览器应用特点浏览器上的应用主要来源:存量C/C+代码移植到浏览器Rust开发的新应用游戏、机器学习(TensorFlow)等性能要求较高的应用主要痛点:学习曲线陡峭，需要掌握系统级编程语言，手动管理内存应用生态匮乏，可复用程度低独立运行时引擎应用典型应用场景:物联网小程序函数计算可信计算

5、区块链大前端应用对WebAssembly的核心需求:模块化，方便动态安装、卸载执行效率高，模块尺寸小开发效率高，学习成本低大前端独立运行时引擎应用案例Disney ADKDisney application development kit自研底层框架，摆脱对浏览器的依赖通过WebAssembly Runtime提供应用开发能力高性能受管控的资源访问，安全性强使用Rust作为应用开发语言缺点:编程语言学习曲线陡峭，对开发人员要求高与host之间数据交互困难，需要大量用到序列化/反序列化独立运行时引擎应用案例Amazon prime videoPrime video software archit

6、ecture由纯JavaScript引擎转向WebAssembly+JavaScript双引擎将底层框架用Rust开发并迁移到WebAssembly获取更高的性能应用开发仍然采用JavaScript，已有应用无需重写节省约30M JavaScript heap空间，并提升启动速度两个runtime之间通过消息交互案例来源:https:/www.amazon.science/blog/how-prime-video-updates-its-app-for-more-than-8-000-device-types 将应用编程语言引入WebAssemblyQuickJS on WebAssembly

7、CPython on WebAssembly优点:引入了应用开发语言，解决了编程体验问题缺点:VM层层嵌套，性能较差生成的模块尺寸庞大与host之间数据交互更加困难WebAssembly在前端中的主要痛点总结开发者学习新的语言成本太高目前主要的开发语言开发效率不高现阶段支持应用编程语言的方式执行效率不高学习效率执行效率开发效率RustC/C+JS背景TypeScript主要类型在WasmGC中的表示方案优势03将TypeScript编译到WasmGC的技术方案当前是TypeScript静态化编译的有利时机编程语言层面：TypeScript同时兼顾了动态和静态类型C/C+/Java 静态类型系统

8、，执行效率优先Python/JavaScript 动态类型系统，开发效率优先TypeScript 兼顾静态和动态类型特性，但目前静态类型信息仅用作类型检查开发者层面：TypeScript已被业界广泛接受与JavaScript语法类似对大型项目的架构设计及重构更加友好WebAssembly层面：WasmGC提案问世用wasm直接表达高层的类型信息成为可能充分利用wasm runtime的GC能力什么是WasmGC?GC提案之前:只有i32,i64,f32,f64四种基本类型无自动内存管理，需要手动管理资源GC提案引入:新的引用类型structarrayfuncrefI31refanyrefext

9、ernref对象可以交给runtime托管，无需自行管理内存subtyping纯静态类型系统基本类型TypeScript 类型Wasm 类型可能的优化numberf64booleani32作为class field或array元素时使用i8类型stringref(struct(ref array(i8)(i32)stringref 提案静态let n=123;let b=false;let s=hello;classclass对应生成WasmGC struct基于虚函数表的继承静态class A x:number foo()class B extends A y:number foo()bar

10、()static z:numberlet obj1=new A();let obj2=new B();function/closureFunction对应wasm中的functionClosure是一个WasmGC struct,同时保存了function和闭包环境静态function outer()let x:number;let y:number;x=10;y=10;function inner(y:number)return x+y;return inner;let f1=outer();let f2=outer();f1(5);anyTypeScript中any的语义:等价于一个Jav

11、aScript的object静态编译时无法获取任何类型信息Ts2wasm中的any:引入一个libdyntype来处理动态类型对象对any的访问均转换为调用libdyntype API动态class C let a:any=x:123,y:b:1 a.z=new C();(local.set$a.y (call dyntype_new_object)(call dyntype_set_property (local.get$a.y)(i32.const 1024);b (call dyntype_new_number (f64.const 1)(table.set (struct.new$C)

12、(i32.const 0)(call dyntype_set_property (local.get$a)(i32.const 1026);z(call dyntype_new_extref(i32.const 0);tbl idx (i32.const 0);flag OBJ)interfaceTypeScript中的语义:仅约定了至少需要存在的字段，并不约束类型的形状、在内存中的布局基于字段名称和类型的类型检查，而非基于内存layoutTs2wasm中的interface:Interface有专有的instance通过itable(interface description table)提

13、供了运行时查找字段实际偏移位置的能力需要扩充WasmGC字节码实现基于运行时计算的index访问struct字段（目前仅在WAMR上支持）静态运行时反射interface示例:静态运行时反射interface I x:numberclass A y:string x:numberclass B x:numberlet i1:I=new A()let i2:I=new B()i1.xi2.x(local.set$i1 (struct.new$ifc (i32.const 2048)(struct.new$A)(i32.const 1);shape id for I and A is 1(if (

14、i32.eq ($i1.shapeid)(i32.const 1);shape seen by compiler (then (struct.get (ref.cast ($i1.obj)(else (struct.get_indirect ($i1.obj)(call find_index ($i1.itable)(i32.const 1024);x)混合类型当一个静态类型的变量被包装为动态object时，其拥有静态和动态两部分，成为一个混合类型静态运行时反射动态class A x:numberlet a=new A();let obj:any=a;a.x=12;/x是一个静态字段，纯静态访

15、问a.t=Hello;/编译错误obj.x=20;/x是一个静态字段，通过itable查找得到indexobj.t=Hello/z是一个动态属性type castTypeScript中的语义:没有任何类型安全保证错误的cast将导致运行时异常Ts2wasm中的type cast:静态类型尽可能地进行静态检查动态类型插入代码进行运行时检查静态动态cast模式类型检查时机any to any无any to static运行时static to any无primitive to primitive编译错误class to class编译时(继承关系检查)+运行时(wasm类型subtyping检查)

16、Interface to interface无Class to interface无Interface to class运行时(class type id检查)function编译错误类型系统全貌完全静态化静态化+运行时反射numberbooleanstringclassinterfaceanyprimitivestaticnominalstaticstructuraldynamiclibdyntype APIWAMR GC APITypeScript编译到WasmGC方案的优势尽可能地静态化编译，减小运行时负担源码中的类型信息被充分利用，实现静态化编译class字段访问基于field ind

17、ex，而非名字，效率更高模块尺寸小无需编译整个runtime到WebAssemblyWebAssembly模块中无需自带内存管理逻辑开发门槛低严格的TypeScript子集，保持TypeScript原有语义前端开发者无需学习新的语言就能开发高性能的WebAssembly模块暂时无法静态化编译的部分可以通过any类型fallback到JavaScript目前进展未来应用畅想04应用展望目前进展Language featureWAMRBrowserprimitivesclassfunction/closureany(libdyntype impl.by QuickJS)(libdyntype impl.by JavaScript)interface(get_indirect emulated by native API)xstring methodsarray methodsxconsole.logxFallback to JS(selected methods)x(will support soon)ExceptionxxDebuggingx(source map)Promisexx类型基础库运行时能力*非完整列表未来应用展望独立运行时引擎应用作为IoT、小程序等场景的应用编程语言浏览器应用开发高性能的模块offload计算密集逻辑到wasm总结谢谢 谢谢 观观 看thanks