Design principles of Atri framework

[darshitac11]

About Atri

Atri is NextJS for Python - a full-stack web framework that supports frontend development using React or using our visual builder. The backend development is supported in Python.

Design Principles

1. Write minimal frontend code

Problem:

1. Developers write adhoc JSX code instead of planning and writing components. This approach results in lack of reusable code leading to a bulkier frontend.
2. Moreover, since no well-defined signature exists for writing these components, it's hard to make rest of code (state management, navigation, API call) reusable too.

Our solution:

1. We enforce component-driven frontend code by providing a standard way of writing these components.
2. Moreover, when the components are standardized, rest of the code (state management, navigation, API call) can be standardized as well and made reusable now.

Benefits:

1. Reusable code results in light-weight frontend making it more performant

2. The frontend and backend should communicate over a stateless connection.

Problem:

• Many non-JavaScript frameworks save the state of the application in the backend for each user/client. This creates unnecessary server cost and adds complexity in deployment.

Solution:

• In Atri, the frontend does not send the entire application state to the backend. Instead, it only sends a slice of the state and the backend sends only the "delta", i.e. change to be made in the state to the frontend.
• In case you need a real-time connection, you can easily upgrade HTTP to websockets.
• Besides, it's easy to hook backend to a client side event. E.g. whenever the load event on window is triggered on browser, you can invoke a Python function like below.

@atri_hook(to="window", event="load")
function handle_window_load(at: Page):
  # this function will get called everytime this window loads on the client side
  pass

The general format for the hook is:

@atri_hook(to="some_css_selector | window | document | body", event="some event")
function handle_xx(at: Page, req: Request, res: Response):
  # this function will get called everytime this window loads on the client side
  pass

3. Everything should be version controlled

• For each team, there will be a branch with different privileges. For example, the marketing team will have a branch called marketing to make changes to the content using the visual builder. A preview website for the marketing team will be hosted at marketing.dev.domain.com. Once the content is finalized, the marketing branch can be merged with the main branch to push the changes into domain.com.
• Everytime the main branch is updated (for ex. merged with marketing branch from the example above), the CI/CD kicks in for the main url - domain.com

More details on Atri

How to use Atri?

1. React + Python used by full-stack developers to build their web app
2. Visual builder + Python used by backend developers to build their web app
3. Visual builder used by marketers to add & update content
4. React + Visual builder + Python for software developers and Visual builder for marketers/designers to collaborate

React + Python

• Atri follows a framework defined infrastructure like NextJS.
• Atri will have functions like get_static_props and get_server_side_props to pass props from backend to frontend just like their counterparts in NextJS.

Visual builder + Python

• Visual builder serves two purposes:
  • Act as an alternative to template engines.
  • Act as a visual CMS for marketers, designers and backend engineers.

React + Visual builder + Python

• The combined power of above two.