You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Developers write adhoc JSX code instead of planning and writing components. This approach results in lack of reusable code leading to a bulkier frontend.
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:
We enforce component-driven frontend code by providing a standard way of writing these components.
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:
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")functionhandle_window_load(at: Page):
# this function will get called everytime this window loads on the client sidepass
The general format for the hook is:
@atri_hook(to="some_css_selector | window | document | body", event="some event")functionhandle_xx(at: Page, req: Request, res: Response):
# this function will get called everytime this window loads on the client sidepass
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?
React + Python used by full-stack developers to build their web app
Visual builder + Python used by backend developers to build their web app
Visual builder used by marketers to add & update content
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
About Atri
Design Principles
1. Write minimal frontend code
Problem:
Our solution:
Benefits:
2. The frontend and backend should communicate over a stateless connection.
Problem:
Solution:
The general format for the hook is:
3. Everything should be version controlled
marketing
to make changes to the content using the visual builder. A preview website for the marketing team will be hosted atmarketing.dev.domain.com
. Once the content is finalized, themarketing
branch can be merged with themain
branch to push the changes intodomain.com
.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?
React + Python
used by full-stack developers to build their web appVisual builder + Python
used by backend developers to build their web appVisual builder
used by marketers to add & update contentReact + Visual builder + Python
for software developers andVisual builder
for marketers/designers to collaborateReact + Python
get_static_props
andget_server_side_props
to passprops
from backend to frontend just like their counterparts in NextJS.Visual builder + Python
React + Visual builder + Python
Beta Was this translation helpful? Give feedback.
All reactions