Successfully reported this slideshow.
Your SlideShare is downloading. ×

A glance at the Rust SWC

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 19 Ad

A glance at the Rust SWC

Download to read offline

Introducing the new high-performance Javascript and Typescript compiler which is written in Rust and the demonstrations at Tiki Co., Ltd. (tiki.vn)
Internal sharing session at Tiki Co., Ltd. on September 8 2022 by Thien Ly
_________________

On September 8, I held a presentation about a Javascript and Typescript compiler for my team at TIKI. It is the SWC - the new high-performance compiler written in Rust with customizable plugin API. This could make some massive enhancements to the DX(development experience) for your team in Node and Browser Products.
Read more about the SWC document here: https://swc.rs

#javascript #share #development #dx #typescript #compiler #slide #rust

Introducing the new high-performance Javascript and Typescript compiler which is written in Rust and the demonstrations at Tiki Co., Ltd. (tiki.vn)
Internal sharing session at Tiki Co., Ltd. on September 8 2022 by Thien Ly
_________________

On September 8, I held a presentation about a Javascript and Typescript compiler for my team at TIKI. It is the SWC - the new high-performance compiler written in Rust with customizable plugin API. This could make some massive enhancements to the DX(development experience) for your team in Node and Browser Products.
Read more about the SWC document here: https://swc.rs

#javascript #share #development #dx #typescript #compiler #slide #rust

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

A glance at the Rust SWC

  1. 1. A glance at the SWC Speedy web compiler - written in Rust
  2. 2. About - An extensible Rust-based platform for the next generation of fast developer tools - Main features: transform (to ecma targets, add new syntaxes,... ), bundling(swcpack - still in development), ast parser, - Used by tools like Next.js, Parcel, and Deno, the list goes on - Used by companies like Vercel, ByteDance, Tencent, Shopify, etc. *** SWC is 20x faster than Babel on a single thread and 70x faster on four cores. (according to swc.rc)
  3. 3. Why SWC (pros) Extensibility: allow extend features with plugin, in js(have bottleneck issue) or in rust Performance: see page 2. (picture below: benchmarks for transform to es5) WebAssembly: support for WASM => super fast even in browser environment Community: ecosystem are bing and still expanding.
  4. 4. Why not SWC (cons) Rust is new to learn: Challenging learning curve —> Bottleneck with other tools: It can make the build process faster, but it may not, if we have still Webpack, legacy babel loaders, or swc js plugin in the pipe, to do some work. Source: humb1t
  5. 5. Why not SWC (cons) Rust is new to learn: Challenging learning curve —> Bottleneck with other tools: It can make the build process faster, but it may not, if we have still Webpack (or with some legacy babel loaders) in the pipe, to do some work. Source: humb1t
  6. 6. How SWC runs in Node/ Browser On Nodejs: using Foreign Function Interface (via Node C++ AddOn, https://nodejs.org/api/addons.html) On Browser: Rust core => Wasm => run directly in browser(see @swc/wasm )
  7. 7. plugin: javascript plugin - Like babel plugin, but interfaces are not - Have bottleneck issue: because the core which is written in rust has a high performance but js plugin, which traveling on AST, is not - Showcase: @formatjs/swc-plugin
  8. 8. Native Rust plugins Extend from babel: see https://swc.rs/docs/migrating-from-babel Provide from swc_project: see github.com/swc-project/plugins Custom plugins: => To have a glance: let’s make one simple plugin
  9. 9. Example and practice Setup env: # install rust via rustup curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh # install rust cli cargo install swc_cli # VSCODE setup rust language server code --install-extension rust-lang.rust-analyzer
  10. 10. Example and practice clone source plugin source code # for quicker setup, clone this repository: github.com/cute-me-on-repos/test-ts-miniapp.git git checkout -b main/<.>
  11. 11. Example and practice Init source plugin source code (target wasm32-wasi): # init plugin with the name “tini-swc-plugin”: swc plugin new --target-type wasm32-wasi tini-swc-plugin; rustup target add wasm32-wasi # add target cd tini-swc-plugin
  12. 12. Example and practice Explaining simple example from document: https://swc.rs/docs/plugin/ecmascript/getting-started Then write our own one —> next page
  13. 13. Example and practice # Practice problem: Problem: We want to limit some of the web Apis that users want to access in tini app; Write a swc rust plugin to travel the AST of 1 js file and replace all statements (include [`this`, `self`, `global`]) that refer to the global scope, except `this` of Component/Page/App, with `(void 0)`(undefined). Requirement: quick docs researching skill =))
  14. 14. Example and practice # input: ```js this;global; // thoses should be remove global.unAllowWebApiCall(); (function unknow(){ this.unAllowWebApiCall(); })(); Page({ onLoad(){this.setData({value:”hi”})} }) ```
  15. 15. Example and practice # output: ```js (void 0);(void 0); (void 0).unAllowWebApiCall(); (function unknow(){ (void 0).unAllowWebApiCall(); })(); Page({ onLoad(){this.setData({value:”hi”})} }) ```
  16. 16. Speed up Jest In jest-transform pipe.
  17. 17. Addition: Rust to Wasm - Light weight: rust have no GC -> not need to re-create GC in wasm like others - Fast, safe, simple -> compare to cpp
  18. 18. ? should ArrayBuffer to transferring data between web contexts
  19. 19. (Q&&A)||SIGTERM Gracias ♡ ~

×