Elementary: A modern and efficient HTML rendering library - inspired by SwiftUI, built for the web

Community Showcase
,
21

Fact of the matter is that macros are computed at compile time, which offer significant performance improvement/efficiency over existing runtime-based html methods.

Test it yourself using my macro implementation: GitHub - RandomHashTags/swift-htmlkit: Write HTML using Swift Macros

with these testsin release mode:

func test_htmlkit() { measureElapsedTime(key: "htmlkit") { let _:String = #html([ #body([ #h1(["Swift HTML Benchmarks"]) ]) ]) } } func test_elementary() { measureElapsedTime(key: "elementary") { let _:String = html() { body() { h1() { "Swift HTML Benchmarks" } } }.render() } } func measureElapsedTime(key: String, _ block: () -> Void) { let duration:ContinuousClock.Duration = ContinuousClock().measure(block) print("measureElapsedTime;" + key + " took=\(duration)") }

this arbitrary test producesat least on my machine (iMac 2019, Swift 6, macOS 15):

measureElapsedTime;elementary took=0.000146341 seconds measureElapsedTime;htmlkit took=1.04e-07 seconds

146.341 microseconds vs 104 nanoseconds.

Comparing the two libraries, the macro implementation is 100x more efficient.
*I haven't tested it against Vapor's HTMLKit or Leaf, but they don't use macros, so they're probably slower too

3 Likes
22

This is really great and a promising approach.

Did you consider producing StaticString? Would that make further optimizations possible?

23

I haven't considered using StaticString, but I would assume it should offer a slight performance improvement. However it is worth noting that if you want to manipulate the compiled html during runtime you would need to convert it to a string manually. If I do go that approach I'll add some convenience logic to convert it easily.

A limitation right now is the implementation needs to do some string interpolation, which is not allowed for a StaticString, when assigning attributes with an enum value type or interpolated value. I am actively researching & testing workarounds.

24

Thanks so much for making this @sliemeobn, I also think that full stack Swift server apps with HTMX are a great way to get there. Whilst Swift Macros are powerful and seem like they could further increase performance (eventually though it could be negligible depending on the library usage), having a package with zero dependencies is priceless. Adding a small sponsorship for encouragement to keep going :innocent:

1 Like
25

@sliemeobn one question, would you have a suggestion on the best way to handle Elementary types inside raw html?
Pseudocode example:

HTMLRaw(""" ... existing html label(.for("name")) { "Enter your name:" } input(.type(.text), .name("name"), .autofocus) .roundedTextbox() ... existing html """)
26

I guess I would wrap it in an Elementary element (or a HTMLBuilder function), like so:

div { HTMLRaw("...snippet 1...") label(.for("name")) { "Enter your name:" } input(.type(.text), .name("name"), .autofocus) .roundedTextbox() HTMLRaw("...snippet 2...") }

you could also wrap the elementary bits in an element and call .render() I guess (but that'd be a bit less efficient), like so:

HTMLRaw(""" ... existing html \(MyElement().render()) ... existing html """)
1 Like
27

Great suggestions, thanks a lot :folded_hands: