7 ms·

Show HN: Stretch – A high-performance cross-platform layout engine in Rust

213 points by emilsjolander 7y ago

Klonoar 7y ago
I've been using Stretch lately for a project I'm planning to open source in a week or two (a cross platform GUI engine...). Pretty happy so far.
- emilsjolander 7y ago
  Author here. Super excited to see what you are building! We are more than happy to feature it on the Stretch landing page :) Shoot me an email and let's chat!
  - mamcx 7y ago
    This is great. As I put on https://www.reddit.com/r/rust/comments/9bapwt/thoughts_on_what_a_good_gui_system_would_need/e51o6mw/ https://www.reddit.com/r/rust/comments/9bapwt/thoughts_on_wh... this could enable the build of a different kind of cross-platform UI, where the logic (backend) is on rust and the UI render (front-end) in a native lang.
    - emilsjolander 7y ago
      Super exciting. Interested to see how we can help.
iBelieve 7y ago
This looks great! I've been using Yoga in my Rust UI framework via the yoga-rs bindings, and this looks like a nice pure-rust alternative to try using instead.
- emilsjolander 7y ago
  I'm the author of both Yoga and Stretch :) After leaving Facebook I created Stretch to fix some core issues which would be hard to address in Yoga, mainly some web compatibility issues. Would love to know more about what you are building and let me know if I can help in any way with the migration! Adding any missing APIs etc should be very easy. my email is in profile if you want to chat :)
  - mkl 7y ago
    I'm guessing one of those "Yoga"s in the second sentence should be "Stretch"?
    - emilsjolander 7y ago
      haha yes. Edited
- bschwindHN 7y ago
  As the author of the bindings, I'm happy for Stretch to exist :) All I wanted was a flexbox engine in Rust, and it's great to now have a pure Rust solution!
dmitriid 7y ago
> Stretch is tested against Chrome to ensure 100% web compatibility Erm, no. That’s testing Chrome compatibility (though it’s probably the only one easy enough to test). Chrome is often rushing ahead to implement features that are either not standardized yet, or will not be standardized, or break exisiting standards and compatibility.
- Twirrim 7y ago
  It's the "IE6 Only" of the modern web. I really hoped we (as an industry) would have learned enough from that pain, but I guess not. Institutional Knowledge seems to suffer from serious memory loss.
  - walterbell 7y ago
    Do we need a cross-company Institutional Knowledge time capsule wiki? Dear future occupant of role X ...
  - skybrian 7y ago
    Well, given that they're reimplementing the layout engine, maybe it's more like Wine? Does Stretch let you get Chrome-like layout in other browsers?
  - TylerE 7y ago
    It really isn't. Chrome is pretty good. IE6 was incredibly awful.
    - spinningslate 7y ago
      That's not the point gp is making. You're right of course: Chrome is competent, IE6 definitely wasn't. Chrome is, however, proprietary and driving further that way. IE6 showed that a single, dominant browser is not good for consumers or progress. Especially when it originates from one of the two leading surveillance tech firms. [As an aside, I was disappointed to see MS admit defeat with Edge and jump into bed with G. Still seems a bit suspicious tbh].
jarjoura 7y ago
Interesting! It seems this is a rewrite of Yoga, by the same author, seen by another comment in this thread. So why start again using flex box as a layout engine? For example, there isn't really a good, equally as rich, grid layout engine yet. Also curious what the intended goal with conformance is, as the README states this project has a secondary intent to be more in line with the CSS spec? Personally for me any layout system that can avoid Apple's constraint based system is already a win. I guess, what kind of layout would this enable that Yoga doesn't already?
- emilsjolander 7y ago
  Stretch doesn't really enable any new kind of layouts that yoga doesn't but it fixes some fundamental problems in Yoga where Yoga was not compatible with the web implementations. Long term goal of Stretch is to support multiple layout systems including Grid layout I just started with Flexbox because I know that so well :) Look forward to tackling grid layout soonish (contributions / help very welcome).
  - nicoburns 7y ago
    Super-excited to hear that Grid layout will be coming soonish. Yoga has been fantastic in making Flexbox available "everywhere", but Grid is wonderful for UI layout in a way that Flexbox isn't.
    - emilsjolander 7y ago
      Just to be clear, we are not working on it. However it is something I would like to start looking into sometime soon :) This is a huge area for contributions as I myself am not a grid expert (as apposed to having worked on flexbox engines past 3 years).
      - nicoburns 7y ago
        > Just to be clear, we are not working on it. However it is something I would like to start looking into sometime soon :) I hear you, but this is very different to "we're never going to implement this". I might look into contributing, but I've never implemented any layout engine, so I'm not sure how much help I would be!
openbasic 7y ago
How does this compare to Yoga? https://yogalayout.com/ https://yogalayout.com/
- emilsjolander 7y ago
  Hey there! Author of both Yoga and Stretch. I built stretch after leaving facebook because of some fundamental flaws in Yoga which made it not 100% compatible with web browsers. Also I wanted something written in a modern language that was easier to debug, maintain, and innovate on.
roca 7y ago
It would be a very good idea to run the tests against Firefox as well as Chrome to avoid replicating Chrome bugs that the Chrome team might later fix.
_bxg1 7y ago
I wonder what it would look like to put this in wasm and draw it to a full screen canvas, circumventing the dom entirely. I wonder if there would be any benefits.
- codedokode 7y ago
  Of course there are: user cannot block ads, cannot copy text, cannot change scale, robots cannot index the page, it will take more time to load and will work slower.
- bschwindHN 7y ago
  I wouldn't recommend it, you'd destroy accessibility and countless other built-in browser features.
emmanueloga_ 7y ago
Layout is a subject that feels a little bit like a mystic art. There are really no books or accessible material about it, that I know off. No, the TeX book doesn't count. Looking at the source of Chrome or Firefox doesn't count. Stretch source doesn't count. W3C CSS specs definitely do not count :-p. I know that there are some papers floating (pun not intended) but I wish somebody wrote a serious book about layout algorithms! Even splitting the words of a paragraph into an optimal shape is something that is surprisingly more complicated and rich topic than one would imagine [1]. Do you know of any resources/docs/papers/implementation-notes that you would recommend? 1: https://xxyxyz.org/line-breaking/ https://xxyxyz.org/line-breaking/
- emilsjolander 7y ago
  Hey! I'm actually in the process of writing up a high level overview of Flexbox and how it works. Won't cover all aspects but would make it easier to understand hopefully. Can't promise when I'll post it but hopefully soon at medium.com/visly.
  - emmanueloga_ 7y ago
    cool! I look forward your write up :-)
asdkhadsj 7y ago
I'm not a UI guy, and I'm definitely not seasoned or have even had the chance to personally test this assertion.... but.. I thought a lot of people disliked Flexbox and preferred CSSGrid? I watched a talk a while back that made it seem like CSSGrid was better in many ways. Primarily being far more inline with peoples natural mental patterns (ie, what they expect). That talk basically had me thinking that the next frontend I write I'm not touching flex box and instead writing it in CSS Grids. So am I mistaken? Why would people base a framework around Flexbox? Thoughts?
whytaka 7y ago
As a web guy wanting to break out into mobile development, I’m very intrigued by what it says but I have no idea how to make use of this. Can someone give me a light overview?

213 points by emilsjolander 7y ago

I've been using Stretch lately for a project I'm planning to open source in a week or two (a cross platform GUI engine...). Pretty happy so far.

emilsjolander 7y ago
Author here. Super excited to see what you are building! We are more than happy to feature it on the Stretch landing page :) Shoot me an email and let's chat!
- mamcx 7y ago
  This is great. As I put on https://www.reddit.com/r/rust/comments/9bapwt/thoughts_on_what_a_good_gui_system_would_need/e51o6mw/ https://www.reddit.com/r/rust/comments/9bapwt/thoughts_on_wh... this could enable the build of a different kind of cross-platform UI, where the logic (backend) is on rust and the UI render (front-end) in a native lang.
  - emilsjolander 7y ago
    Super exciting. Interested to see how we can help.

iBelieve 7y ago

This looks great! I've been using Yoga in my Rust UI framework via the yoga-rs bindings, and this looks like a nice pure-rust alternative to try using instead.

emilsjolander 7y ago
I'm the author of both Yoga and Stretch :) After leaving Facebook I created Stretch to fix some core issues which would be hard to address in Yoga, mainly some web compatibility issues. Would love to know more about what you are building and let me know if I can help in any way with the migration! Adding any missing APIs etc should be very easy. my email is in profile if you want to chat :)
- mkl 7y ago
  I'm guessing one of those "Yoga"s in the second sentence should be "Stretch"?
  - emilsjolander 7y ago
    haha yes. Edited
bschwindHN 7y ago
As the author of the bindings, I'm happy for Stretch to exist :) All I wanted was a flexbox engine in Rust, and it's great to now have a pure Rust solution!

dmitriid 7y ago

> Stretch is tested against Chrome to ensure 100% web compatibility Erm, no. That’s testing Chrome compatibility (though it’s probably the only one easy enough to test). Chrome is often rushing ahead to implement features that are either not standardized yet, or will not be standardized, or break exisiting standards and compatibility.

Twirrim 7y ago
It's the "IE6 Only" of the modern web. I really hoped we (as an industry) would have learned enough from that pain, but I guess not. Institutional Knowledge seems to suffer from serious memory loss.
- walterbell 7y ago
  Do we need a cross-company Institutional Knowledge time capsule wiki? Dear future occupant of role X ...
- skybrian 7y ago
  Well, given that they're reimplementing the layout engine, maybe it's more like Wine? Does Stretch let you get Chrome-like layout in other browsers?
- TylerE 7y ago
  It really isn't. Chrome is pretty good. IE6 was incredibly awful.
  - spinningslate 7y ago
    That's not the point gp is making. You're right of course: Chrome is competent, IE6 definitely wasn't. Chrome is, however, proprietary and driving further that way. IE6 showed that a single, dominant browser is not good for consumers or progress. Especially when it originates from one of the two leading surveillance tech firms. [As an aside, I was disappointed to see MS admit defeat with Edge and jump into bed with G. Still seems a bit suspicious tbh].

jarjoura 7y ago

Interesting! It seems this is a rewrite of Yoga, by the same author, seen by another comment in this thread. So why start again using flex box as a layout engine? For example, there isn't really a good, equally as rich, grid layout engine yet. Also curious what the intended goal with conformance is, as the README states this project has a secondary intent to be more in line with the CSS spec? Personally for me any layout system that can avoid Apple's constraint based system is already a win. I guess, what kind of layout would this enable that Yoga doesn't already?

emilsjolander 7y ago
Stretch doesn't really enable any new kind of layouts that yoga doesn't but it fixes some fundamental problems in Yoga where Yoga was not compatible with the web implementations. Long term goal of Stretch is to support multiple layout systems including Grid layout I just started with Flexbox because I know that so well :) Look forward to tackling grid layout soonish (contributions / help very welcome).
- nicoburns 7y ago
  Super-excited to hear that Grid layout will be coming soonish. Yoga has been fantastic in making Flexbox available "everywhere", but Grid is wonderful for UI layout in a way that Flexbox isn't.
  - emilsjolander 7y ago
    Just to be clear, we are not working on it. However it is something I would like to start looking into sometime soon :) This is a huge area for contributions as I myself am not a grid expert (as apposed to having worked on flexbox engines past 3 years).
    - nicoburns 7y ago
      > Just to be clear, we are not working on it. However it is something I would like to start looking into sometime soon :) I hear you, but this is very different to "we're never going to implement this". I might look into contributing, but I've never implemented any layout engine, so I'm not sure how much help I would be!

openbasic 7y ago

How does this compare to Yoga? https://yogalayout.com/ https://yogalayout.com/

emilsjolander 7y ago
Hey there! Author of both Yoga and Stretch. I built stretch after leaving facebook because of some fundamental flaws in Yoga which made it not 100% compatible with web browsers. Also I wanted something written in a modern language that was easier to debug, maintain, and innovate on.

roca 7y ago

It would be a very good idea to run the tests against Firefox as well as Chrome to avoid replicating Chrome bugs that the Chrome team might later fix.

_bxg1 7y ago

I wonder what it would look like to put this in wasm and draw it to a full screen canvas, circumventing the dom entirely. I wonder if there would be any benefits.

codedokode 7y ago
Of course there are: user cannot block ads, cannot copy text, cannot change scale, robots cannot index the page, it will take more time to load and will work slower.
bschwindHN 7y ago
I wouldn't recommend it, you'd destroy accessibility and countless other built-in browser features.

emmanueloga_ 7y ago

Layout is a subject that feels a little bit like a mystic art. There are really no books or accessible material about it, that I know off. No, the TeX book doesn't count. Looking at the source of Chrome or Firefox doesn't count. Stretch source doesn't count. W3C CSS specs definitely do not count :-p. I know that there are some papers floating (pun not intended) but I wish somebody wrote a serious book about layout algorithms! Even splitting the words of a paragraph into an optimal shape is something that is surprisingly more complicated and rich topic than one would imagine [1]. Do you know of any resources/docs/papers/implementation-notes that you would recommend? 1: https://xxyxyz.org/line-breaking/ https://xxyxyz.org/line-breaking/

emilsjolander 7y ago
Hey! I'm actually in the process of writing up a high level overview of Flexbox and how it works. Won't cover all aspects but would make it easier to understand hopefully. Can't promise when I'll post it but hopefully soon at medium.com/visly.
- emmanueloga_ 7y ago
  cool! I look forward your write up :-)

asdkhadsj 7y ago

I'm not a UI guy, and I'm definitely not seasoned or have even had the chance to personally test this assertion.... but.. I thought a lot of people disliked Flexbox and preferred CSSGrid? I watched a talk a while back that made it seem like CSSGrid was better in many ways. Primarily being far more inline with peoples natural mental patterns (ie, what they expect). That talk basically had me thinking that the next frontend I write I'm not touching flex box and instead writing it in CSS Grids. So am I mistaken? Why would people base a framework around Flexbox? Thoughts?

whytaka 7y ago

As a web guy wanting to break out into mobile development, I’m very intrigued by what it says but I have no idea how to make use of this. Can someone give me a light overview?