Explore "BLoC" about flashcards HOT 1 CLOSED

Because our source is a video and we do not wanna go through it over and over again, I did some screenshots as shown below.

Basically, to get this to work, we "only" have to separate UIs and business logic. If some platform dependent API is needed, it should be passed as a parameter and the API should be derivation of API's interface.

On the UI side, all inputs and outputs are provided through the business logic. Because Flutter app needs to be reloaded on each change in order to redraw, it's a good idea to use StreamBulder, in Angular, there is | async pipe.

The business logic therefore uses inputs (Sink), works with (platform dependent) APIs and generates some outputs (Stream).

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

To ensure everything will work good, the developers must strictly follow "aggressively pedantic rules":

1. Inputs and outputs are simple Streams/Sinks only
2. Dependencies must be injectable and platform agnostic
3. No platform branching allowed
4. Implementation can be whatever you want if you follow the previous rules

And of course, not everything has to have its own BLoC, only "complex enough" component should have one:

1. Each "complex enough" component has a corresponding BLoC
2. Components should send inputs "as is"
3. Components should show outputs as close as possible to "as is"
4. All branching should be based on simple BLoC boolean outputs

TL;DR:

1. Move bussiness logic to BLoCs
2. Keep UI components simple
3. Design rules aren't negotiable

I think this is a quite good way and it worth a try. As an output of this project, we may do some review of this BLoC.

from flashcards.