Skip to content

Templating library for html in fullstack Rust, server-side or client-side in wasm

License

Notifications You must be signed in to change notification settings

bestia-dev/dev_bestia_html_templating

Repository files navigation

dev_bestia_html_templating

Templating library for html in fullstack Rust, server-side or client-side in wasm
version: 0.1.41 date: 2021-11-29 author: bestia.dev repository: GitHub

work_in_progress

Lines in Rust code Lines in Doc comments Lines in Comments Lines in examples Lines in tests

crates.io Documentation crev reviews Lib.rs License Rust dev_bestia_html_templating

Hashtags: #rustlang #html #template
My projects on Github are more like a tutorial than a finished product: bestia-dev tutorials.

Try it

Motivation

Internet browsers are available practically on all platforms. They are based today on the W3C standards html5 and css3. All modern browsers support also wasm/webassembly (instead or beside javascript). Rust is a fantastic language to be compiled into wasm. This combination can be used as a cross-platform GUI.
A program user interface is made of data and presentation. Sadly html has this all mixed in one "file". To separate data from presentation we use a templating library.
First a graphical designer creates a html5 + css3 presentation with some sample texts. When he is satisfied, then the programmer puts some comments and attributes inside the html file. These markers are processed by the templating library and the data is injected into the html. So we start with a clear separation of data and presentation and end with a normal html file.

Create a "standard" html page

The html page has to be MicroXml compatible, basically XHtml. Copy for example web_server_folder/review_list.html to a new html file. Open this file with a browser to preview it. I use the VSCode extension vscode-open-wsl and right-click on the file and Open with default application. In WSL2 I use my project wsl_open_browser. Now edit the html file to your liking and reload the browser with F5 to see the changes. Use some sample text to make it look as close to what you want. These texts will be later programmatically replaced, but they are invaluable while designing a nice layout.

Add markers

Inside the html you want to replace the sample texts with the data from the server. Before the text add the (invisible) marker for example <!--wt_crate_name-->. You can replace also an attribute if you insert an attribute before it like this data-wt_variable_name="next_attribute_name".
Now run the automation task cargo auto build that will copy/embed this file into files_mod.rs.

Open-source and free as a beer

My open-source projects are free as a beer (MIT license).
I just love programming.
But I need also to drink. If you find my projects and tutorials helpful, please buy me a beer by donating to my PayPal.
You know the price of a beer in your local bar ;-)
So I can drink a free beer for your health :-)
Na zdravje! Alla salute! Prost! Nazdravlje! 🍻

//bestia.dev
//github.com/bestia-dev
//bestiadev.substack.com
//youtube.com/@bestia-dev-tutorials

About

Templating library for html in fullstack Rust, server-side or client-side in wasm

Topics

Resources

License

Stars

Watchers

Forks

Languages