Repository navigation
How we use atomic design in NucleoidJS
It is the most basic building block of design, it displays the props it has, it should not know what it is displaying, it should be designed for general use as much as possible. It is not right to design specifically for specific features. It not only reduces the codebase and code count but also creates consistency for the ui.
- Must be independent.
- Reusablity must be high.
- It should not make a specific feature.
- It should get the data it will use from props.
- It can contain smaller components.
Widgets pull the necessary data and decide which component will receive which data. It would not be wrong to call them the data virtuosos of the application, since they usually have specific tasks, it is difficult for them to be resuable. since components are designed for general use, they have no meaning without receiving data from widgets, but after receiving data, they become more significant
- API calls should be made at this level.
- Manages components.
- Since it does more specific tasks, reusability can be ignored.
- States are kept here.
- Communication between two widgets can be achieved with Synapses, Reducer or Context.
It is the skeleton of our page; which widget will stand where, whether it will be scrollable or not, the page layout is very important to be reusable at this stage. If it is created well, no matter how big the proge grows, there will be no problem in responsive desgin.
- Creates the general layout of the page.
- Everything related to Responsive Design is handled at this level
- This is where reusabilty should be the highest.
Our page uses a layout and is responsible for rendering various widgets within it. Is the container where all these things are together
- It is a container that holds Components, Widgets and Layouts.
- We set the title of the page here.