Taffy is een high-performance layoutbibliotheek geschreven in Rust, specifiek ontworpen om als dependency te dienen voor andere UI- en GUI-bibliotheken. De bibliotheek implementeert momenteel de layout-algoritmen voor CSS Block, Flexbox en CSS Grid, met plannen voor verdere uitbreidingen in de toekomst.
Enkele belangrijke aspecten van Taffy zijn:
- Adoptie: Het wordt reeds gebruikt door projecten zoals de Bevy game-engine, de Servo webbrowser, en de teksteditors Zed en Lapce.
- Compatibiliteit: Naast Rust zijn er bindingen voor Python, en zijn bindingen voor C en WASM in ontwikkeling.
- Leercurve: Omdat Taffy getrouw de CSS-specificaties volgt, kunnen ontwikkelaars gebruikmaken van bestaande webdocumentatie zoals MDN en interactieve tools zoals Flexbox Froggy.
- Prestaties: In benchmarks tegen Yoga vertoont Taffy concurrerende resultaten, waarbij de snelheid varieert op basis van de complexiteit en diepte van de layout-boom.
Taffy: Een high-performance UI-layoutbibliotheek aangedreven door Rust
Momenteel implementeert de bibliotheek de layout-algoritmen voor CSS Block, Flexbox en CSS Grid. Ondersteuning voor andere paradigma's is gepland; voor meer informatie over dit en andere toekomstige ontwikkelingsplannen kan worden verwezen naar de roadmap-issue.
Deze crate is een collaboratief project tussen verschillende teams en is ontworpen om te worden gebruikt als afhankelijkheid (dependency) voor andere UI- en GUI-bibliotheken.
Projecten die Taffy gebruiken
Op dit moment wordt Taffy ingezet door onder andere:
- Servo: een alternatieve webbrowser.
- Blitz: een radicaal modulaire webengine.
- Bevy: een ergonomische, ECS-first Rust game-engine.
- Takumi: rendert React-componenten naar afbeeldingen.
- iocraft: voor het maken van prachtige interfaces voor de terminal.
- Slint: een declaratieve GUI-toolkit voor het bouwen van native gebruikersinterfaces.
- Lapce: de teksteditor, via het Floem UI-framework.
- Zed: de teksteditor, via het GPUI UI-framework.
Gebruik
use taffy::prelude::*;
// Maak eerst een instantie van TaffyTree
let mut tree : TaffyTree<()> = TaffyTree::new();
// Maak een boom van nodes met behulp van `TaffyTree.new_leaf` en `TaffyTree.new_with_children`.
// Deze functies geven beide een node-id terug waarmee naar die node verwezen kan worden.
// De Style-struct wordt gebruikt om stylinginformatie op te geven.
let header_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: length(100.0) },
..Default::default()
},
).unwrap();
let body_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: auto() },
flex_grow: 1.0,
..Default::default()
},
).unwrap();
let root_node = tree
.new_with_children(
Style {
flex_direction: FlexDirection::Column,
size: Size { width: length(800.0), height: length(600.0) },
..Default::default()
},
&[header_node, body_node],
)
.unwrap();
// Roep compute_layout aan op de wortel van de boom om het layout-algoritme uit te voeren
tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap();
// Inspecteer de berekende layout met `TaffyTree.layout`
assert_eq!(tree.layout(root_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(root_node).unwrap().size.height, 600.0);
assert_eq!(tree.layout(header_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(header_node).unwrap().size.height, 100.0);
assert_eq!(tree.layout(body_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(body_node).unwrap().size.height, 500.0); // Deze waarde was niet expliciet ingesteld, maar berekend door Taffy
Bindingen naar andere talen
- Python via stretchable
- WIP C-bindingen
- WIP WASM-bindingen
Leermiddelen
Taffy implementeert de Flexbox- en CSS Grid-specificaties getrouw, waardoor documentatie die voor het web is ontworpen direct vertaalbaar is naar de implementatie van Taffy. Voor referentiedocumentatie over individuele style-eigenschappen raden we de MDN-documentatie aan (bijvoorbeeld de pagina over de width-eigenschap). Dergelijke pagina's zijn meestal te vinden door te zoeken op "MDN [eigenschapsnaam]".
Voor gidsen over CSS-layout raden we de volgende bronnen aan:
Flexbox
- Flexbox Froggy: een interactieve tutorial/game waarmee je op een leuke manier de essentiële onderdelen van Flexbox leert.
- A Complete Guide To Flexbox (CSS Tricks): een gedetailleerde gids met illustraties en uitgebreide schriftelijke uitleg over de verschillende Flexbox-eigenschappen en hun werking.
CSS Grid
- CSS Grid Garden: een interactieve tutorial/game waarmee je op een leuke manier de essentiële onderdelen van CSS Grid leert.
- A Complete Guide To CSS Grid (CSS Tricks): een gedetailleerde gids met illustraties en uitgebreide schriftelijke uitleg over de verschillende CSS Grid-eigenschappen en hun werking.
Benchmarks (vs. Yoga)
De benchmarks zijn uitgevoerd op een 2021 MacBook Pro met M1 Pro-processor met behulp van criterion.
Belangrijke opmerkingen:
- De benchmarks meten uitsluitend de berekening van de layout. Het aanmaken van de boom wordt niet meegemeten.
- De benchmarks voor Yoga zijn uitgevoerd via de
yoga crate (Rust-bindingen).
- De meeste populaire websites lijken tussen de 3.000 en 10.000 nodes te hebben (hoewel zij ook tekstlayout vereisen, iets wat noch Yoga, noch Taffy implementeren).
- Let op dat de onderstaande tabel verschillende eenheden bevat (milliseconden vs. microseconden).
| Benchmark | Aantal Nodes | Diepte | Yoga (ba27f9d) | Taffy (71027a8) |
|---|
| yoga 'huge nested' | 1.000 | 3 | 364.60 µs | 329.04 µs |
| yoga 'huge nested' | 10.000 | 4 | 4.1988 ms | 4.3486 ms |
| yoga 'huge nested' | 100.000 | 5 | 45.804 ms | 38.559 ms |
| big trees (wide) | 1.000 | 1 | 737.77 µs | 505.99 µs |
| big trees (wide) | 10.000 | 1 | 7.1007 ms | 8.3395 ms |
| big trees (wide) | 100.000 | 1 | 135.78 ms | 247.42 ms |
| big trees (deep) | 4.000 | 12 | 2.2333 ms | 1.7400 ms |
| big trees (deep) | 10.000 | 14 | 5.9477 ms | 4.4445 ms |
| big trees (deep) | 100.000 | 17 | 76.755 ms | 63.778 ms |
| super deep | 1.000 | 1.000 | 555.32 µs | 472.85 µs |
Bijdragen
Bijdragen zijn welkom:
- Als je Taffy wilt gebruiken, verbeteren of verder uitbouwen, neem dan gerust contact op, open een issue of dien een PR in.
- Heb je vragen over hoe je Taffy moet gebruiken? Open dan een discussie, zodat we je vragen kunnen beantwoorden op een manier die ook voor anderen vindbaar is.
Taffy: Een high-performance UI-layoutbibliotheek aangedreven door Rust
Momenteel implementeert de bibliotheek de layout-algoritmen voor CSS Block, Flexbox en CSS Grid. Ondersteuning voor andere paradigma's is gepland; voor meer informatie over dit en andere toekomstige ontwikkelingsplannen kan worden verwezen naar de roadmap-issue.
Deze crate is een collaboratief project tussen verschillende teams en is ontworpen om te worden gebruikt als afhankelijkheid (dependency) voor andere UI- en GUI-bibliotheken.
Projecten die Taffy gebruiken
Op dit moment wordt Taffy ingezet door onder andere:
- Servo: een alternatieve webbrowser.
- Blitz: een radicaal modulaire webengine.
- Bevy: een ergonomische, ECS-first Rust game-engine.
- Takumi: rendert React-componenten naar afbeeldingen.
- iocraft: voor het maken van prachtige interfaces voor de terminal.
- Slint: een declaratieve GUI-toolkit voor het bouwen van native gebruikersinterfaces.
- Lapce: de teksteditor, via het Floem UI-framework.
- Zed: de teksteditor, via het GPUI UI-framework.
Gebruik
use taffy::prelude::*;
// Maak eerst een instantie van TaffyTree
let mut tree : TaffyTree<()> = TaffyTree::new();
// Maak een boom van nodes met behulp van `TaffyTree.new_leaf` en `TaffyTree.new_with_children`.
// Deze functies geven beide een node-id terug waarmee naar die node verwezen kan worden.
// De Style-struct wordt gebruikt om stylinginformatie op te geven.
let header_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: length(100.0) },
..Default::default()
},
).unwrap();
let body_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: auto() },
flex_grow: 1.0,
..Default::default()
},
).unwrap();
let root_node = tree
.new_with_children(
Style {
flex_direction: FlexDirection::Column,
size: Size { width: length(800.0), height: length(600.0) },
..Default::default()
},
&[header_node, body_node],
)
.unwrap();
// Roep compute_layout aan op de wortel van de boom om het layout-algoritme uit te voeren
tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap();
// Inspecteer de berekende layout met `TaffyTree.layout`
assert_eq!(tree.layout(root_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(root_node).unwrap().size.height, 600.0);
assert_eq!(tree.layout(header_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(header_node).unwrap().size.height, 100.0);
assert_eq!(tree.layout(body_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(body_node).unwrap().size.height, 500.0); // Deze waarde was niet expliciet ingesteld, maar berekend door Taffy
Bindingen naar andere talen
- Python via stretchable
- WIP C-bindingen
- WIP WASM-bindingen
Leermiddelen
Taffy implementeert de Flexbox- en CSS Grid-specificaties getrouw, waardoor documentatie die voor het web is ontworpen direct vertaalbaar is naar de implementatie van Taffy. Voor referentiedocumentatie over individuele style-eigenschappen raden we de MDN-documentatie aan (bijvoorbeeld de pagina over de width-eigenschap). Dergelijke pagina's zijn meestal te vinden door te zoeken op "MDN [eigenschapsnaam]".
Voor gidsen over CSS-layout raden we de volgende bronnen aan:
Flexbox
- Flexbox Froggy: een interactieve tutorial/game waarmee je op een leuke manier de essentiële onderdelen van Flexbox leert.
- A Complete Guide To Flexbox (CSS Tricks): een gedetailleerde gids met illustraties en uitgebreide schriftelijke uitleg over de verschillende Flexbox-eigenschappen en hun werking.
CSS Grid
- CSS Grid Garden: een interactieve tutorial/game waarmee je op een leuke manier de essentiële onderdelen van CSS Grid leert.
- A Complete Guide To CSS Grid (CSS Tricks): een gedetailleerde gids met illustraties en uitgebreide schriftelijke uitleg over de verschillende CSS Grid-eigenschappen en hun werking.
Benchmarks (vs. Yoga)
De benchmarks zijn uitgevoerd op een 2021 MacBook Pro met M1 Pro-processor met behulp van criterion.
Belangrijke opmerkingen:
- De benchmarks meten uitsluitend de berekening van de layout. Het aanmaken van de boom wordt niet meegemeten.
- De benchmarks voor Yoga zijn uitgevoerd via de
yoga crate (Rust-bindingen).
- De meeste populaire websites lijken tussen de 3.000 en 10.000 nodes te hebben (hoewel zij ook tekstlayout vereisen, iets wat noch Yoga, noch Taffy implementeren).
- Let op dat de onderstaande tabel verschillende eenheden bevat (milliseconden vs. microseconden).
| Benchmark | Aantal Nodes | Diepte | Yoga (ba27f9d) | Taffy (71027a8) |
|---|
| yoga 'huge nested' | 1.000 | 3 | 364.60 µs | 329.04 µs |
| yoga 'huge nested' | 10.000 | 4 | 4.1988 ms | 4.3486 ms |
| yoga 'huge nested' | 100.000 | 5 | 45.804 ms | 38.559 ms |
| big trees (wide) | 1.000 | 1 | 737.77 µs | 505.99 µs |
| big trees (wide) | 10.000 | 1 | 7.1007 ms | 8.3395 ms |
| big trees (wide) | 100.000 | 1 | 135.78 ms | 247.42 ms |
| big trees (deep) | 4.000 | 12 | 2.2333 ms | 1.7400 ms |
| big trees (deep) | 10.000 | 14 | 5.9477 ms | 4.4445 ms |
| big trees (deep) | 100.000 | 17 | 76.755 ms | 63.778 ms |
| super deep | 1.000 | 1.000 | 555.32 µs | 472.85 µs |
Bijdragen
Bijdragen zijn welkom:
- Als je Taffy wilt gebruiken, verbeteren of verder uitbouwen, neem dan gerust contact op, open een issue of dien een PR in.
- Heb je vragen over hoe je Taffy moet gebruiken? Open dan een discussie, zodat we je vragen kunnen beantwoorden op een manier die ook voor anderen vindbaar is.
Groetjes,