Skip to content

Commit

Permalink
WIP: 0.3.0 release (#357)
Browse files Browse the repository at this point in the history
* Update README description for 0.3.0

* Bump version number to 0.3.0

* Merge alpha1 and alpha2 release notes

* Convert style helpers to a table

* Add newlines to style helper table

* Add more track sizing functions

* Fully verbose style helper works with section

* Orient style helpers table by type rather than helper

* Add highlights

* Fix link

* Allow inline HTML in markdown

* Fix link

* Remove style changes from highlights

* Remove multiple blank lines to make linter happy

* Format old benchmarks

* Add new benchmark run

* Add percentage change to benchmark results

* Correct benchmarks in 0.2 release notes from later run

* Update benchmarks in README

* Fix markdownlint

* Add learning resources to README

* Reword README intro

* Add newline to intro

* Move learning resources below usage

* Remove complex/generated benchmark results
  • Loading branch information
nicoburns authored Feb 12, 2023
1 parent 8eee4f4 commit 868b3a4
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 116 deletions.
1 change: 1 addition & 0 deletions .github/linters/.markdown-lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,4 @@
# blank_lines: false # Error on blank lines
line_length: false # Ignore excessively long lines
no-duplicate-heading: false # This is useful in RELEASES.md
no-inline-html: false # Needed to create complex tables
2 changes: 1 addition & 1 deletion Cargo.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[package]
name = "taffy"
version = "0.3.0-alpha1"
version = "0.3.0"
authors = [
"Alice Cecile <[email protected]>",
"Johnathan Kelley <[email protected]>",
Expand Down
53 changes: 32 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
# taffy
# Taffy

[![GitHub CI](https://github.com/DioxusLabs/taffy/actions/workflows/ci.yml/badge.svg)](https://github.com/DioxusLabs/taffy/actions/workflows/ci.yml)
[![crates.io](https://img.shields.io/crates/v/taffy.svg)](https://crates.io/crates/taffy)
[![docs.rs](https://img.shields.io/docsrs/taffy)](https://docs.rs/taffy)

`taffy` is a flexible, high-performance, cross-platform UI layout library written in [Rust](https://www.rust-lang.org).
Taffy is a flexible, high-performance, cross-platform UI layout library written in [Rust](https://www.rust-lang.org).

Currently Taffy implements only CSS based layout algorithms:

- The stable `0.2.x` releases of Taffy implements the [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) layout algorithm.
- Support for [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) is in preview. If you wish to try this out then you should use the `0.3.x` alpha releases ~and enable the `experimental_grid` cargo feature~ (from `0.3.0-alpha2` the CSS Grid feature is enabled by default). For information, see the [release notes](https://github.com/DioxusLabs/taffy/blob/main/RELEASES.md) and the [tracking issue](https://github.com/DioxusLabs/taffy/issues/204). Experimentation with the CSS Grid implementation is encouraged, and feedback and bug reports are welcomed.

Support for other paradigms [is planned](https://github.com/DioxusLabs/taffy/issues/28).
It currently implements the **Flexbox** and **CSS Grid** layout algorithms. Support for other paradigms is planned. For more information on this and other future development plans see the [roadmap issue](https://github.com/DioxusLabs/taffy/issues/345).

This crate is a collaborative, cross-team project, and is designed to be used as a dependency for other UI and GUI libraries.
Right now, it powers:
Expand Down Expand Up @@ -71,30 +66,46 @@ assert_eq!(taffy.layout(body_node).unwrap().size.height, 500.0); // This value w

```

## Learning Resources

Taffy implements the Flexbox and CSS Grid specifications faithfully, so documentation designed for the web should translate cleanly to Taffy's implementation. For reference documentation on individual style properties we recommend the MDN documentation (for example [this page](https://developer.mozilla.org/en-US/docs/Web/CSS/width) on the `width` property). Such pages can usually be found by searching for "MDN property-name" using a search engine.

If you are interested in guide-level documentation on CSS layout, then we recommend the following resources:

### Flexbox

- [Flexbox Froggy](https://flexboxfroggy.com/). This is an interactive tutorial/game that allows you to learn the essential parts of Flebox in a fun engaging way.
- [A Complete Guide To Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by CSS Tricks. This is detailed guide with illustrations and comphrehensive written explanation of the different Flexbox properties and how they work.

### CSS Grid

- [CSS Grid Garden](https://cssgridgarden.com/). This is an interactive tutorial/game that allows you to learn the essential parts of CSS Grid in a fun engaging way.
- [A Complete Guide To CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) by CSS Tricks. This is detailed guide with illustrations and comphrehensive written explanation of the different CSS Grid properties and how they work.

## Benchmarks (vs. [Yoga](https://github.com/facebook/yoga))

- Run on a 2021 MacBook Pro with M1 Pro processor using [criterion](https://github.com/bheisler/criterion.rs)
- The benchmarks measure layout computation only. They do not measure tree creation.
- Yoga benchmarks were run via the [yoga](https://github.com/bschwind/yoga-rs) crate (Rust bindings)
- Most popular websites seem to have between 3,000 and 10,000 nodes (although they also require text layout, which neither yoga nor taffy implement).

Note that the table below contains multiple different units (milliseconds vs. microseconds
Note that the table below contains multiple different units (milliseconds vs. microseconds)

| Benchmark | Node Count | Depth | Yoga ([ba27f9d]) | Taffy ([9059647]) |
| Benchmark | Node Count | Depth | Yoga ([ba27f9d]) | Taffy ([71027a8]) |
| --- | --- | --- | --- | --- |
| yoga 'huge nested' | 1,000 | 3 | 411.42 µs | 275.47 µs |
| yoga 'huge nested' | 10,000 | 4 | 3.9882 ms | 3.9409 ms |
| yoga 'huge nested' | 100,000 | 5 | 46.117 ms | 32.458 ms |
| big trees (wide) | 1,000 | 1 | 750.75 µs | 571.35 µs |
| big trees (wide) | 10,000 | 1 | 7.1639 ms | 7.4838 ms |
| big trees (wide) | 100,000 | 1 | 132.17 ms | 245.16 ms |
| big trees (deep) | 4,000 | 12 | 2.3140 ms | 2.0300 ms |
| big trees (deep) | 10,000 | 14 | 6.0009 ms | 5.1872 ms |
| big trees (deep) | 100,000 | 17 | 76.954 ms | 74.946 ms |
| super deep | 1,000 | 1,000 | 563.15 µs | 548.97 µs |
| 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 |

[ba27f9d]: https://github.com/facebook/yoga/commit/ba27f9d1ecfa7518019845b84b035d3d4a2a6658
[9059647]: https://github.com/DioxusLabs/taffy/commit/ba27f9d1ecfa7518019845b84b035d3d4a2a6658
[71027a8]: https://github.com/DioxusLabs/taffy/commit/71027a8de03b343e120852b84bb7dca9fb4651c5

## Contributions

Expand Down
Loading

0 comments on commit 868b3a4

Please sign in to comment.