Frontend Architecture Pattern

Braket Framework

Braket is an innovative frontend architecture pattern that separates concerns into three distinct components: Bra (data layer), Glue (logic layer), and Ket (presentation layer).

Bra Component
Handles data management, state persistence, and API communications with optimized caching strategies.
Glue Component
Contains business logic, data transformations, and application workflows with middleware support.
Ket Component
Manages presentation layer, user interactions, and component rendering with reactive updates.
Testing Framework
Comprehensive testing utilities for unit, integration, and end-to-end testing of Braket applications.
Behavior Patterns
Predefined behavior patterns for common application scenarios and user interaction flows.
braket.code.title
braket.code.subtitle
<html>
   <body>
    <h1 id = "quote"> </h1>
    <button id = "pet"> Pet 's quote</button>
    <button id = "food"> Food 's quote</button>
   </body>


   <script>
   /** 
    * This is an simple example of a Braket architecture
    * When the user clicks on "pet" a pet related quote is requested to the network.
    * When the user clicks on "food" a food related quote is requested to the network.
    * 
    * The response is printed back in an h1 element
    **/


   //Bra component
   let bra = new class {
      constructor() {}


      onQuote(data) {
         ket.print(data)
      }


      sendRequest(subject) {
         fetch('/quote/' + subject)
            .then(data => response.text())
            .then(data => this.onQuote(data))
      }
   }


//Ket component
let ket = new class {
      constructor() {


         document.getElementById('pet').onclick = () => {
            bra.sendRequest('pet')
         }


         document.getElementById('food').onclick = () => {
            bra.sendRequest('food')
         }
      }


      print(data) {
         document.getElementById('quote').innerText = data
      }
   }
   </script>
   </html>
4 Digital Asset•Network Infrastructure Solutions