Bracket Web Development Technology

Overview

Bracket is a live web development technology and a programing language that interacts between html, js, and css, and renders on both server and browser sides, where a developer writes only Bracket code to build a web application. In every web application there are views styled with controls. The philosophy of development in Bracket is that you choose first the view you want (text, image, icon, input, view…), then you style it, add some parameters, and finally add controls (events, functions, methods) to interact.
Why Bracket
What makes Bracket language mostly different and better than any other language is how much easy it is to learn and write. Its name Bracket is derived from the syntax of it. The round brackets “()” alone call a view and the parameters inside it, the opposite brackets “)(“ call the global store, the round brackets “()” added to a method name call methods and functions, the square brackets “[]” is used for parameters and conditions (ex: “[input.type=text]”), and used for objects like “string:[color=red;fontSize=1.3rem]”.
An example of using different kinds of brackets together “if():[!readonly]:[txt()=Hello World]”. “if():[conditions]:[params]” is a function executes if conditions are applied.
There are another reserved punctuations like “?” “:” “.” “;” “=”, however you could use any of them as a text string by putting the text between 2 quotes
(ex1: text=’First Name is: Mohamad’ | ex2: text=’What are your hobbies?’).
Start coding with Bracket
To start building an application using bracket, follow these steps:
1 .Signup on bracketjs.com
2 .Create a project
3 .Start creating pages and views

When a developer arrives the developer editor page in bracket, he is ready now to start coding. By default a page (named “main”) and a “main” view are created. The main page is the landing page of the developer web application with path “/”, and the “main” view is a view included in the “main” page.
Structure
The structure of bracket code is JSON. Every file (view, page, …) must have specific fields and values that will be converted to html, css, and js and will interact according to bracket logic.
View
A View must have a type (Image, Icon, Text, Input, or View), and could have children (another views inside this view), and controls. The value of type is structured as follows: “view_type?parameters?conditions”. This means that a view is conditional and has params (like styles, events, id, class, parameters related to the view type…) that will be assigned to the view or executed on a specific event. So a field value has the value itself, params, and conditions that are separated by question marks. Ex. of a text view:
{ type: “Text?style:[color=red;fontSize=15px;backgroundColor=yellow];text=Hello World!” }.
Here there are no conditions to be considered, the view type is Text, and the text has some styles and its content is “Hello World!”. Parameters (also conditions) are separated by semicolons as shown in the example above.
A view is an object with many parameters that has a parent view and may have children views. A child could be also a parent of other children views. Any view could be included in any and many pages.
Page
Every page has a unique path, unique id, title, controls, any params, and views (multiple views). Ex: The home page has a navbar, sidebar, body, footer… each one is considered as a view that could be created separately (in a separated file) or included all in a one file.