Deploy faster

Braket framework

The 'Braket' design pattern in frontend engineering is a method to structure and test software applications, making them more efficient and reliable. It divides the software architecture into three key components: Bra, Glue, and Ket.

Bra Components:
These are primarily concerned with managing how the application handles incoming and outgoing network traffic. The focus here is on ensuring that the application can scale well and perform robustly under different loads. These components are crucial in making sure the application remains responsive and reliable when many users are accessing it simultaneously.
Glue Components:
These elements deal with the core functionality of the application, especially the way data is handled and transformed within the application. This is where most of the business logic resides, including data validation, processing, and computation. Ensuring that these components work correctly is vital to the integrity and accuracy of the application´s operations.
Ket Components:
These are focused on the user interface and the overall user experience. They ensure that the application is user-friendly, intuitive, and efficient from the end-user´s perspective.
Testing:
Testing these components involves checking that all user inputs lead to the expected outputs and that the application behaves consistently across different devices and browsers.
Component´s behavior:
Each of these components plays a specific role in ensuring that the application is robust, efficient, and provides a good user experience. By breaking down the application into these distinct parts, developers can more easily manage and test their software, leading to better performance and fewer bugs.
Braket example code
simple and clean
<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>
4DA's team
cto@4da.se