Introduction

Briz.js is the core of the WithCable ecosystem, acting as an HTML default behavior interceptor. It acts as a bridge between the client and server in sending data. Briz leverages the power of hypermedia, sending partial HTML instead of JSON. This provides ease and speed of development and browsing for users.

Quick Start

Below we will make a “GET” request to the server, then the server will reply with partial HTML and Briz will automatically swap elements that have the same data-swap attribute as the server’s response.

Client

<!-- data-ajax used for intercept request -->
<form data-ajax action="/hello" method="GET">
  <button type="submit">Greet</button>
</form>

<!-- data-swap used for contract swapping id -->
<div data-swap="result">
  <p>...waiting for response</p>
</div>

Server-Response

<!-- response from the server -->
<div data-swap="result">
  <p>This response from server.</p>
</div>

When the user presses the submit button, then make a request with the “GET” method to the server, then the server will return a response with data-swap=“result”

Installation

To use Briz, you don’t need any complicated packages or build steps, simply call it using the <script type="module"> tag. Briz will automatically be available in your project.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- place here -->
    <script type="module" src="https://cdn.jsdelivr.net/gh/Rahmad2830/Briz@v1.0.0/dist/Briz.min.js"></script>
    <title>Home</title>
  </head>
  <body>
    <!-- code goes here -->
  </body>
</html>

Or you can download the Briz.min.js code and include it in your page.

Next: Navigation & AJAX