---
marp: true @marp-team/marp-cli v4.4.0 (w/ @marp-team/marp-core v4.3.0)
title: Firefox Web APIs with crates over FFI
author: Ed Guloien
date: Sept 2026
paginate: true
footer: <span> <img src="images/qb-logo-mark.png" width="60"/> Sept 2026 </span>
html: "true"
---
<!-- all slideshow styling in one place -->
<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 

<!-- disable page numbering on title page -->
<!-- _paginate: false -->

---

## 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>
<div class="container">
	<div class="logos">
		<img src="images/qb-logo-text.png" width="250px">
		<img src="images/fx-browser-logo.jpg" width="250px">
	</div>
	 <div class="bio">
	 		<ul>
			<li> Software Developer @ Quantum Bridge: </li>
			<li> Distributed Symmetric Key Exchange </li>
			<li> Former Mozillian: Platform, Networking</li>
			<li> Interests: Privacy, Security, Systems</li>
			<li> ed.guloien@qubridge.io </li>
		</ul>
	</div>
	<div class="headshot">
		<img src="images/headshot.jpeg" width="250px">
	</div>
</div>

---
## Interop 2025

![bg width:600px](images/interop-2025-2.png)
![bg width:600px](images/interop-2025-3.png)

---
## URLPattern Web API 

```rust
// 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](images/denoland-urlpattern.png)

![bg width:600px](images/urlpattern-fission.drawio.png)

-------
## Web API Call Flow

![bg center width:1000px](images/urlpattern-call-flow.drawio.png)

-----
## Urlpattern Crate API

![bg center width:850px](images/urlpattern-details-simple.drawio.png)

----
## 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](images/urlpattern-pattern-reuse.drawio.png)

------
## 99.8%

```
regex::Regex != EcmaScript Regex
```

----
## Spidermonkey Challenges (many)

![bg center width:825px](images/urlpattern-spidermonkey-challenges.drawio.png)


-----
## Phew!


![width:900px](images/urlpattern-interop-2025-results.png)

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

#### References
- http://qubridge.io
- https://wpt.fyi/interop-2025
- https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API
- https://searchfox.org/firefox-main
- https://github.com/denoland/rust-urlpattern
- See also: https://manuelbucher.com/blog/rust-gecko/