///
Ztack provides a collection of examples to showcase its various features, from basic routing to full-stack applications leveraging server-side rendering, Zig-to-JavaScript transpilation, and WebAssemb
53 views
~53 views from guests
Guest views are estimated from total page views. These include anonymous visitors and users who weren't logged in when they viewed the page.
Ztack provides a collection of examples to showcase its various features, from basic routing to full-stack applications leveraging server-side rendering, Zig-to-JavaScript transpilation, and WebAssembly. These examples are found in the src/examples/ directory of the repository and serve as practical starting points for understanding the framework's capabilities.
For instructions on how to build and run these examples, please refer to the Getting Started with Ztack guide.
Here's a list of the examples provided with Ztack:
src/examples/router_server.zigThis example demonstrates the core HTTP routing capabilities of Ztack, setting up a minimal server that dispatches requests to different handlers based on their method and path. It's an excellent starting point for understanding how to define and manage routes using the router.zig module, as detailed in the Ztack Routing Guide.
src/examples/improved_counter.zigThis is a full-featured showcase that integrates multiple Ztack components: server-side rendering, efficient HTML building, client-side event delegation, and simulated Zig-to-JavaScript transpilation. It presents a live counter whose interface is served by Ztack, and whose increment/decrement logic is handled client-side using JavaScript (which, in a full Ztack setup, would be transpiled from Zig code).
src/examples/improved_counter.zig Source Codeimproved_counter.zigServer Initialization and Routing:
main function initializes a std.heap.GeneralPurposeAllocator and a router.Router.try app.register(.GET, "/", &handleIndex);. This means any GET request to the root path / will be handled by the handleIndex function.std.net.Server is set up to listen on port 8080. The while (true) loop continuously accepts incoming client connections and passes them to handleConnection.handleConnection function parses the incoming HTTP request line using router.parseRequestLine and then uses app.dispatch(method, path_str, request_body) to find and execute the correct handler (handleIndex in this case). It then sends the handler's response back to the client. This demonstrates how Ztack routes requests to your Zig code.HTML Building:
handleIndex, an html.HtmlDocument is initialized.head_elements array defines <meta>, <title>, and <script> tags for the HTML document's <head> section.body_elements array constructs the main content of the page using Ztack's HTML Building with Ztack helpers:
html.div() creates container <div> elements with specified classes.html.h1(), html.p(), html.h2() create headings and paragraphs.html.span("current-count-display ...", &[_]html.Element{ html.text(initial_count_value) }) creates a <span> element to display the current count, initialized from the server. This element has a class current-count-display which is used by the client-side JavaScript to locate and update its content.doc.build() then combines these elements into a complete, efficient HTML string, which is wrapped into an HTTP response by router.htmlResponse().Event Delegation and Zig-to-JavaScript Transpilation:
Increment and Decrement) are created using html.button_data("class", "click:functionName", children). This utilizes Ztack's event delegation mechanism. Instead of inline onclick attributes, a data-on attribute is used (e.g., data-on="click:incrementCounter").html.script(html.EVENT_DELEGATION_SCRIPT, false) line includes Ztack's built-in JavaScript helper that handles event delegation on the client-side, efficiently dispatching events to the functions specified in data-on attributes.html.script(client_side_script, false) block is included. This client_side_script contains JavaScript functions (incrementCounter, decrementCounter, updateDisplay) that handle the actual client-side counter logic (updating the display without a page reload). In a real Ztack application, the Zig code for these client-side functions would be written in Zig and then automatically converted to JavaScript by the Ztack Zig-to-JavaScript Transpilation module. This example manually includes the JavaScript to demonstrate the functionality.src/examples/simple_server.zigThis example represents a minimal Ztack server setup, similar to the "Quick Start" provided in the README. It illustrates the basic structure for initializing the router, defining a simple handler function that serves HTML content, and the placeholder for the HTTP server listening loop. While the README description mentions "Original JS counter," the code primarily focuses on setting up a basic Ztack HTTP server.
src/examples/wasm_simple_server.zigThis example integrates WebAssembly (WASM) into a Ztack application. It demonstrates how to compile performance-critical Zig code to WASM and execute it in the browser, showcasing Ztack's ability to facilitate WASM integration alongside traditional server-side rendering and Zig-to-JS transpilation.
src/examples/demo_transpiler.zigThis standalone example specifically highlights the functionality of Ztack's Zig-to-JavaScript transpiler. It likely contains Zig code snippets that are processed by the transpiler.zig module, demonstrating how specific Zig constructs (functions, variables, control flow) are converted into their JavaScript equivalents. It's an excellent resource for understanding the Zig-to-JavaScript Transpilation process and its supported subset.
By exploring these examples, developers can gain a comprehensive understanding of how to build robust, full-stack web applications with Ztack.