Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

oxc は次世代のJSツールチェイン開発基盤になり得るか

oxc は次世代のJSツールチェイン開発基盤になり得るか

v-tokyo #21 にて登壇した資料です。

スピーカーノートはこちら -> マダナイヨ

Rintaro Itokawa

July 26, 2024
Tweet

More Decks by Rintaro Itokawa

Other Decks in Technology

Transcript

  1. Can oxc be the next generation JS toolchain development platform?

    りんたろー / re-taro Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 1 / 23
  2. Self introduction りんたろー / re-taro Student / Web Engineer TypeScript

    / Rust re-taro.dev Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 2 / 23
  3. JS toolchain so far Webpack Babel ESLint Prettier What do

    these tools have in common? Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 3 / 23
  4. All implemented in JavaScript(TypeScript) Can oxc be the next generation

    JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 4 / 23
  5. Recent JS toolchain Vite esbuild swc Rolldown Biome Oxc What

    do these tools have in common? Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 5 / 23
  6. All implemented in Rust or Go Can oxc be the

    next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 6 / 23
  7. Why Rust? Lifetime annotation Zero-cost abstraction Existence of napi_rs Can

    oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 7 / 23
  8. What is Oxc? Can oxc be the next generation JS

    toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 8 / 23
  9. What is Oxc? High performance Constructing essential compiler tools for

    JS Parser Transpiler Resolver ...and more!! Supporting next-generation toolchains like Rolldown Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 9 / 23
  10. Why Oxc? Performance Extensibility Reliability Can oxc be the next

    generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 10 / 23
  11. Why Oxc? Performance Can oxc be the next generation JS

    toolchain development platform? Extensibility Reliability 2024-07-26 | Vue.js v-tokyo Meetup #21 11 / 23
  12. Performance Parser Benchmark oxc swc biome 0 100 200 300

    400 single-thread time (ms) ref: https://github.com/oxc-project/bench-javascript-parser-written-in-rust Lean architecture, Oxc achieves high-performance processing. Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 12 / 23
  13. Performance Why is Oxc so fast? 1. Fast memory allocation

    and deallocation of AST using arena allocator Using bumpalo Marking AST nodes with lifetime annotations to depend on the arena pub enum Statement<'a> { Expression(ExpressionNode<'a>), } 2. Policy to consider all performance issues (runtime and compile speed) as bugs. Many of the Oxc team's decisions are based on this policy. https://oxc.rs/docs/contribute/rules.html#development-policy Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 13 / 23
  14. Performance Why is Oxc so fast? 3. Think about data

    oriented design Memory IO is generally more likely to be a bottleneck than CPU IO. Rust enables robust data-oriented programming in its type system. Oxc forces the test to restrict the size of the enum as follows. #[cfg(all(target_arch = "x86_64", target_pointer_width = "64"))] #[test] fn no_bloat_enum_sizes() { use std::mem::size_of; use crate::ast::*; assert_eq!(size_of::<Statement>(), 16); assert_eq!(size_of::<Expression>(), 16); assert_eq!(size_of::<Declaration>(), 16); } Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 14 / 23
  15. Why Oxc? Extensibility Can oxc be the next generation JS

    toolchain development platform? Performance Reliability 2024-07-26 | Vue.js v-tokyo Meetup #21 15 / 23
  16. Extensibility Oxc is designed to be used as a component

    of other projects from the beginning. Here are some projects that use Oxc. Rolldown https://github.com/rolldown/rolldown Biome https://github.com/biomejs/biome tauri https://github.com/tauri-apps/tauri kuma-ui https://github.com/kuma-ui/kuma-ui Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 16 / 23
  17. Why Oxc? Reliability Can oxc be the next generation JS

    toolchain development platform? Performance Extensibility 2024-07-26 | Vue.js v-tokyo Meetup #21 17 / 23
  18. Reliability Oxc focuses on the infrastructure around the code to

    ensure correctness and reliability. Test262, Babel, TypeScript test suite pass rate Performance benchmark Package size Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 18 / 23
  19. Reliability Of note is the pass rate of the oxc_parser

    test suite Parser test262 Babel TypeScript oxc_parser 100% 90% 99% swc_ecma_parser 54% No data No data biome 97% 92% 76% Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 19 / 23
  20. Future of Oxc Oxc is a "third-generation" JS toolchain. Incorporating

    the best choices Edge bundling Seamless interoperability with JS No waste swc and biome have architectural constraints and do not consider compiler use cases Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 20 / 23
  21. Future of Oxc Our focus is not on performance for

    performance's sake, but on performance to "buy" the ability to take that JS toolchain to the next level. Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 21 / 23
  22. Acknowledgements Boshen from Oxc All contributors to Oxc, swc, Biome

    Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 22 / 23
  23. References biomejs/biome (GitHub) https://github.com/biomejs/biome swc-project/swc (GitHub) https://github.com/swc-project/swc test262.fyi https://test262.fyi/#|chakra,swc oxc-project/bench-javascript-parser-written-in-rust

    (GitHub) https://github.com/oxc-project/bench-javascript-parser-written-in-rust oxc-project/oxc (GitHub) https://github.com/oxc-project/oxc Introduction to Data Oriented Design https://www.frostbite.com/2010/11/introduction-to-data-oriented-design/ Can oxc be the next generation JS toolchain development platform? 2024-07-26 | Vue.js v-tokyo Meetup #21 23 / 23