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

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

スピーカーノートはこちら -> ﾏﾀﾞﾅｲﾖ

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