27

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

 5 years ago
source link: https://www.tuicool.com/articles/hit/zu63Qfz
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

A high performance & cross-platform layout engine

master.svg?style=popoutstretch.svg?style=popoutstretch-layout.svg?style=popoutStretchKit.svg?style=popout

Written in Rust

We chose to write stretch in the Rust programming language as it ensures memory safety, efficient multi-threading, and has fantastic cross-platform support.

Optimised for mobile

While stretch can be used on any platform we chose to optimize it for mobile. This means a small binary size and minimal memory usage.

Tested against Chrome

Stretch is tested against Chrome to ensure 100% web compatibility. You can trust stretch to layout your native apps exactly like your web apps.

Documentation View on GitHub

Cross platform

main.rs 
use stretch::{style::*, node::Node, geometry::Size};

let node = Node::new(Style {
    size: Size { 
        width: Dimension::Points(100.0), 
        height: Dimension::Points(100.0),
    },
    ..Default::default()
}, vec![]);

let layout = node.compute_layout(Size::undefined());
index.js 
import { Node } from 'stretch-layout';

const node = new Node({
    width: 100, 
    height: 100, 
});

const layout = node.computeLayout({
    width: undefined,
    height: undefined,
});
Main.swift 
let node = Node(
    style: Style(
        size: Size(
            width: .points(100.0), 
            height: .points(100.0)
        )
    ), 
    children: []
)
    
let layout = node.computeLayout(
    thatFits: Size(width: nil, height: nil)
)
Main.kt 
val node = Node(
    Style(
        size = Size(
            Dimension.Points(100f), 
            Dimension.Points(100f)
        )
    ), 
    listOf()
)

val layout = node.computeLayout(
    Size(null, null)
)

Featured projects

Visly is a design tool built from the ground up for front-end engineers. Design components visually which can later be imported directly into code. Supports iOS, Android, and Web. Learn more!

Using Stretch?

If you're using stretch please get in touch ! We would love to learn more about the use cases and challenges you are facing in your products. We are happy to feature your product right here.

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK