[WP] 04.05.2023 | smart-dumb

fig 1.1 smart-dumb scheme

In this post I want to take a look at organization of components in web applications. During designing new parts of web application we may follow simple concept  of smart and dumb components. The aliases for above are fat and skinny components or presentational and container components.

Smart componetns contain the core logic of the application including querying database, fetching external resources or utilizing third-party libraries. It does not care about redux. This information is often contained within state and passed to the other parts of application via props drilling or by the means of context. There are few smart components within application. They mostly come as a single instances across the app.

On the other hand – dumb components recieve and display data recieved from smart component. They may contain some logic including state but it has only applied in the context of dumb component eg. It is strictly conected with display features of the user interface and its called contextual logic. This simple logic and displaying features may be injected in several places in application and contextual logic can be passed by props.

There are following examples of tasks carried out by fat components: fetching data from api, using redux store, contain callbacks often trigered from dumb components.

There are several reasons that justivy dividing components to smart and dumb. Firstly it helps to isolate responsibilities of each component. Core logic is separated from display logic and collected in one place. It it is a way to stick to SRP -single responsibility principle. Moreover simple presentational componetns are far more simple to test. No mock required. Pure dumb components may be shallow rendered and tested for rendered items. Good design of dumb components allow to reuse the code in several places with only props changed. Finally skinny components are great from designers point of view. They can be easily bundled within styleguide or stroybook and presented to the team/client.

Ready for action

gmarcin

Komentarze

Prześlij komentarz

Popularne posty z tego bloga

[WP] 23.06.2023 | subjects

Obraz
  fig 1.1 BehaviorSubject abstraction marble diagram       It is high time to write another part of angular basics revision. Last time i mentioned Subject object. It is also worth to describe other ‚special’ cases of Subject. The first is behavior subject. It is part of powerful tool for reactive programming called rxjs . When writing angular version of exchange app or mars-rover-photos app I was using behavior subject in following way. Start with declaring behavioral subject private field within your service. The following example ilustrates this step: private myDataSubject: BehaviorSubject<any> = new BehaviorSubject<any>( null );     it will declare new private field with myDataSubject name and BehaviorSubject type. The value within <> braces is called type parameter and is a part of TypeScript generic types. In this case it would describe the type of values emited by this subject. on the right side of the assignment statement we can see basic javas
Czytaj więcej

15.07.2024 | simplicity

Another subject from the set of 97 things that every programer should know is simplicity. The most important thing designing software is to provide client with the functionality tailored to their real needs. Managers dont care about tools applied to obtain requested outcome as long as it gets the job done quickly and satisfy the requieements. On the other hand developers mostly need challenge and constant growth. As a consequence nowadays applications tend to be over-engineered and stuffed with additional libraries, frameworks with tons of configuration. Today ive also watched a youtube video of primagean. It was a comment on article titled "Radical simplicity". It is a reason why id written previous paragraph. The article was about technical overhead that is tend to be introduced within the aplications recently. The one good thought was that nowadays applications are able to do more stuff. The main thought was to use the bare minimum and be careful about introducing new d
Czytaj więcej

[WP] 05.06.2023 | angular-intro

Obraz
fig 1.1 angular application structure overview      Recently I have been re-writing one of my side projects using another js framework. Originaly written in react, after several days and long hours of scrolling and prompting it was re-shaped to Angular version . In this blog post I want to summarize the stuff I have learned about javascript frontend framework developed by Google . There are only class components. No function component nor hooks available in angular. Moreover it requires developer to use typescript straightaway without support for vanillla js which make it less available for beginners. Angular has no dedicated syntax such as jsx/tsx which enables to combine template, controller and styles within single file. It divides the responsibilities to separate view-template.html file and component.ts file which contains logic. It is a good moment to mention that re-renders of the ui uses diferent technique under the hood. Angular utilizes incremental DOM mechanism a
Czytaj więcej