Files
fx-urlpattern-impl/firefox-webapi-with-crates.md
T
2026-08-24 19:32:39 -04:00

8.3 KiB

marp, title, author, date, paginate, footer, html
marp title author date paginate footer html
true @marp-team/marp-cli v4.4.0 (w/ @marp-team/marp-core v4.3.0) Firefox Web APIs with crates over FFI Ed Guloien Sept 2026 true <span> <img src="images/qb-logo-mark.png" width="60"/> Sept 2026 </span> true
<style> /* font setup */ section { @font-face { font-family: 'Montserrat'; font-weight: 400; src: url('./fonts/Montserrat-Regular.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-weight: 700; src: url('./fonts/Montserrat-Bold.woff2') format('woff2'); } font-family: 'Montserrat', sans-sarif; } footer { width: 100%; text-align: left; } /* title setup */ h1 { color: #4ca783; border-bottom: 2px solid #fc8a09;} /* general title and text setup */ h2 { color: #4ca783; position: absolute; top: 50px; left: 60px; border-bottom: 2px solid #fc8a09; } section { font-family: 'Montserrat', sans-serif; color: #5d5d5c } /* references setup */ h4 { color: #4ca783; position: absolute; top: 100px; left: 60px; border-bottom: 2px solid #fc8a09; margin-top: 200px; } p { margin-top: 300px; font-family: 'Montserrat', sans-serif; } </style>

Firefox Web APIs with Crates (over FFI)

Ed Guloien


about://ed-guloien

<style scoped> .container { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; gap: 24px; height: 100%; margin-top: 60px;} .logos { grid-column: 1; grid-row: 2; display: flex; gap: 20px; align-items: center; } .bio { grid-column: 1; grid-row: 1; } .bio ul { list-style: none; padding: 0; margin: 0; line-height: 1.8; } .headshot { grid-column: 2; grid-row: 1 / 3; align-items: center; justify-content: left; } .headshot img { width: 600px; border-radius: 8px; } </style>
  • Software Developer @ Quantum Bridge:
  • Distributed Symmetric Key Exchange
  • Former Mozillian: Platform, Networking
  • Interests: Privacy, Security, Systems
  • ed.guloien@qubridge.io

Interop 2025

bg width:600px bg width:600px


URLPattern Web API

// JS
// build a pattern
const pattern = new URLPattern({ pathname: "/books/:id" });

// check for match
pattern.test("https://example.com/books/123"); 

// get match info by component
pattern.exec("https://example.com/books/123").pathname.groups

Denoland & Firefox

bg width:400px

bg width:600px


Web API Call Flow

bg center width:1000px


Urlpattern Crate API

bg center width:850px


Glue Crate

let pattern = quirks::parse::<SpiderMonkeyRegexp>(input);
let results = quirks::process_match(pattern, input);

// call it a day

Reality Sets In (Memory Concerns)

#[repr(transparent)]
pub struct UrlPatternGlue(pub *mut c_void);


if let Ok(pattern) = quirks::parse::<SpiderMonkeyRegexp>(input, ...) {
  unsafe {
    *res = UrlPatternGlue(Box::into_raw(Box::new(pattern)) as *mut _);
  }
}


glue::process_match(..., res: *mut MatchResults, other: MaybeString)


glue::doing_thing(..., res: &mut ThinVec<>);

Pattern Re-use; Marshaling

bg center width:1000px


99.8%

regex::Regex != EcmaScript Regex

Spidermonkey Challenges (many)

bg center width:825px


And if you do all that...

...


Phew!

width:900px

<style scoped> img { position: absolute; top: 150px; left: 15%; } </style>

References