Design choice to build HTML render framework

Hi All!

I would like to build an HTML library to my project. My goal is to build a library which provide a GNU GTK like API to build GUI, and render it to HTML.


Currently we are using Maud, which is extremely fast and effective, but using Macro to build HTML has a disadvantage: we have two separate system, a rust and a HTML+CSS. It's hard to test the CSS tags we use, and the HTML tags + properties we use.

Having a framework where I can build a button using

let button = Button::new_with_label("Click me!");

And then build CSS-tags on this framework, like Bootstrap 4, or Bulma, would give us the power to use those options right in our code, using compile time check and be sure we have valid HTML, CSS and using the CSS frameworks correctly.

I have already tried to build it up, but I have no experience about it. My MVP used simple struct to define a Tag, and then I created a linked list about Tags, and at rendering I used the linked list to render the content into a String buffer.

My current results:

Extremely slow. Sadly my MVP is extremely slow. I created a benchmark building a simple HTML with 1000 demo div blocks, containing demo e-commerce product title, price and SKU, so really a small amount of data, and my MVP rendered it ~150.000.000 nanosec, but using Maud, it rendered the same HTML in ~350.000 nanosec. So my MVP is extremely slow.

I realized that in my concept, each request should first build up the HTML tag linked list, then render it. Event the build up process takes 3/4 time of the whole process, and 1/4 is the String buffer writing.


Do you have any advice, in which way I should continue the learning process? What can I count on, which algorithms are available, and even how to use Rust compiler, or how to write code to be optimized by the Rust compiler to achieve my goal?

I even would be very happy to have a solution that 2-3 times slower then Maud, but I have the compile time HTML + CSS check available.

Thank you in advance for each tips.

Can you link to your code? Then we can take a look :slight_smile: