#4 - BLoC Architecture - Presentation, Business Logic & Data Layer + Model, Repository, DataProvider

hey what is going on everyone i'm wicked and today i will introduce you to the block architecture so remember a couple of tutorials back when i was talking about blocks and qubits i mentioned that we'll come back later into checking out what's up with this data layer we took out the equation back then well buckle up because the time has come here is the content view for what we'll try to learn today and their specific timestamps so yeah first of all what is an architecture what is it all about why do we need an architecture in the first place can't we just skip it well no we can't skip it at all because as simple and as natural as it may be if you think a little bit in depth we as human species can't live without a predefined and stable architecture which is mainly our skeleton imagine having all kinds of different classes methods functions variables all over the place this is definitely going to result in a total failure now assimilate this to us humans how would our life be if we only had our organs everyone had to choose where to place their heart their lungs their kidneys as probably none of these people would have survived in this situation without an organized structure and stable skeleton neither would have any of the apps built without a proper architecture it's as simple as that so think of the architecture as being the skeleton the blueprint the structure which keeps all your code organized stable and easy to test and maintain now block architecture is simply an architecture which has block as its center of gravity so not only is block a design pattern and a state management library but it is also an architectural pattern let's come back to a familiar image you saw a couple of tutorials back what we know for now is that for every interaction an user makes with the app through each ui there should be an event dispatched to the specialized block or qubit which will process it and will eventually emit a state that is going to rebuild the ui in a way so that the user gets a feedback of what's going on with the app the big unknown variable in all this equation is how block processes the event and perhaps retrieves the necessary data to show to the user let me put it this way for you almost every app nowadays retrieves its data from the internet so in order to link our block based flutter app with the outer data layer we need to add the data layer into our equation so that for example whenever the block receives a fetching event from the ui it will request some data from the internet retrieve it as a response parse it and then return the data with a new state to the user we can split this into three separate main layers which not surprisingly will depend one on another so the ui is mostly seen as a presentation layer the block slash qubit as the business logic layer and the last but not the least the app's data as simply the data layer we're going to start with the data layer which is farthest from the user interface and work our way up to the presentation layer okay so as we discussed previously the data layer has the responsibility of retrieving and also manipulating data from one or more sources whether we're talking about network requests databases or other asynchronous sources to do this the data layer has been split up inside three important sub-layers models data providers and repositories i have set them up into this specific order because you will see that they will also be dependent on one another okay so you finish some flutter tutorials and you feel confident of what you have accomplished you want to build your own first step now you think of an idea but then you realize that you don't know where to actually start programming the app what is actually the first thing you should code from my experience i believe that the best way to start your application of course after you visually and technically designed it is by coding your models but what exactly is a model a model is as its name is implying a blueprint to the data your application will work with let's pretend your application is a brand new weather app so the data it will be fetching from the internet is going to be mainly weather data right well this data needs to be stored somehow inside your application how can you do that inside flutter simply by creating a class for the specific data so in this case we'll have a weather class right in this class we'll need to set up specific attributes like temperature forecast weather icons wind speed city name and so on and so forth but how do you know which attributes your class should have well you need to be sure that these attributes will be a little bit linked and not completely pay attention a little bit linked to the data that will be received from the data source so if the data source for app will be a weather api like aq weather for example chances are that the weather data response from them will be a json string telling you what the json is is not a part of this tutorial nor is the definition of an api but in short a json is a collection of paired data like this one here and an api stands for application programming interface the api lets your product or app communicate with other products and apps without having to know how they were implemented in the first place so for example with a subscription we can access the accuweather api weather data without having to dive in into their code implementation we can just take the data we're interested in and that's all therefore a model is nothing more than a class which contains the data the application itself will be dependent on note that it is highly recommended that your app models should be pretty independent of the source as i said they should not be completely linked what do i mean by this the models from inside the app must be kind of generic and universal to multiple data sources so why shouldn't they be identical to the data provided by the weather api well think of what is going to happen if you have two different weather apis in your app as a source to your weather data their apis will set completely different jsons to your app perhaps one of them has the temperature inside a temp name field and the other one in a temperature name field then you will need to parse them separately to your universal models remember that inside many apps there might be multiple data sources but it's recommended to have only one specific data model in which they will be parsed this means that your models should be independent enough to get weather data from many different weather apis so now after you hopefully understood what a model is it is time to move over to the next sub layer the data provider the data provider's responsibility is to provide raw data to its successor the repository sublayer but let's concentrate on the data provider for a moment a data provider is actually an api for your own application this means that it is going to be a class which will contain different methods and these methods will serve as a direct communication way with the data sources this is where all the magic happens this is where flutter asks for the required data straight from the internet all your network requests like http.gethttp.post put delete will go inside take in mind that the return type of these functions won't be of the type of model you created earlier but rather of the type of row data you received from the data source which for example may be a type of json string the component in which we'll have our modal class is instantiated as objects is the repository the repository is mainly a wrapper around one or more data providers it is safe to say that it's the part of the data layer block communicates with similar to the other data layer subparts repositories are also classes classes which contain dependencies of their respective data providers so for example the weather repository will have a dependency on the weather provider with the help of which we'll call the get raw weather method and retrieve the wetter row data the repository is where the modal object will be instantiated with the raw data from the data provider or row data which will be parsed to modal data with from json methods the repository is also a perfect place for fine-tuning the data before giving it as a response to the block here you can filter it sort it and do all kinds of last moment changes before it will be sent to the business logic layer the business logic layer is where most of the blocks and qubits will be created inside your flutter app its main responsibility is to respond to the user input from the presentation layer with new emitted states this layer is meant to be the mediator between the beautiful bright and colorful side of the ui and the dark dangerous and unstable side of the data layer why is one of them beautiful and shiny and the water one dark and unstable you might ask well you are supposedly designing and programming your app to the best standards so that the ui and the back end looks and most importantly works flawlessly this is the bright side but what about the internet what about the apis you're getting data from do you have any guarantee that they will be as amazing and well programmed as your app is well if the apis are not designed and programmed by yourself definitely no errors may arise bugs crashes server issues and so on and so forth being the mediator between the bright and the dark side the business logic layer is the last layer that can intercept and catch any errors from within the data layer and protect the application from crashing in the last moment now since this layer is closely related to the data layer especially the repository sublayer it can depend on one or more repositories to retrieve the data needed to build up the application state now see how every part of the puzzle starts to get into the right place now truly amazing another important fact you need to know and understand is that blocks can communicate one with each other qubits can do this too this is really important so let's say we have our previous weather block and we also have an internet block which emits states based on whether there is a stable internet connection or not supposedly your internet connection dies when you want to know the weather from your location inside the weather block you can depend on the internet block and subscribe to its stream of emitted states then react on every internet state emitted by the internet block so in this case the internet block would have emitted a no internet state down the stream the weather block will listen to the stream and will eventually receive the no internet state the weather block can also emit a state in response to this internet state letting the user know that there is no internet connection don't forget that the subscription to the block needs to be closed manually by overriding the close method we don't want any stream leaks inside our app we have arrived at our final layer of the block architecture the presentation layer this layer sums up everything related to the user interface the widgets the user inputs the lifecycle events animations and so on and so forth and also its responsibility in our case is to figure out how to render itself based on one or more block states most application flows will start with perhaps an app start event which triggers the application to fetch some data from the data layer for example when the first screen of the app will be created inside this constructor there will be a weather block which adds the app started event so that some location based weather will be displayed on the screen right away here's a quick tip on how you can structure project and folders in order to obey this architecture so the rule is that for every layer and even sub-layer i introduced today you need to have a separate folder inside the lib folder so in a series complete application you may have three folders data business logic and presentation inside the data layer you might have multiple subfolders like modules data providers and repositories inside of the business logic folder you might have blocks and qubits of folders and finally inside the presentation layer you might have multiple sub folders like widgets pages animations and so on and so forth you can name these folders whatever you want as long as you stick to the architecture okay let's proceed to the entire block architecture workflow for a basic weather application we currently have only one screen and a single text input inside let's say for example that the user wants to know the current weather for chicago he types in chicago and then hits the get weather button currently everything is happening inside the presentation layer now when the user pressed the get weather button a get weather event was dispatched to the weather block whether black knows that first of all it should emit a loading state to the user to let him know that it is working on his request by displaying a loading animation on the screen then inside the weather block there is a dependency on the weather provider which can be accessed and with the help of which the get weather for a location will be called asynchronously we call it asynchronously because we don't know when the data is going to come back so we'll have to wait for it now inside the weather repository there is a dependency for the weather api data provider with the help of which we'll call the get raw weather for location of chicago here is where the connection with the outer dark parts of the internet occurs inside of this get raw weather for location function there will be an http.get request towards another api like aq weather which will receive the request and then send back a json string full of requested data back to our weather api inside the data provider layer if everything is okay the raw weather data which is actually a json string will be sent back to the weather repository where it will be parsed into a weather model then finally the weather model will get passed back into the block the block is really happy that everything went smooth and emits a new state called weather loaded in which it will send the weather model object as an attribute towards the presentation layer the presentation layer with the help of block builder will exit the loading state since a new state has been received and rebuild the ui with the new weather data marking the end of this entire workflow i hope you understood at least the idea of this tutorial later on when we're going to build the real apps inside flutter with block we'll use this as our architecture and you'll understand even more how everything works inside of it in the next tutorial we'll dive into the block testing until then though if you like this tutorial don't forget to hit the like button and subscribe to my channel because more awesome videos like this are about to come and i guess you don't want to miss any of them take care stay safe wicked is out bye bye

Channel: Flutterly

Views: 22,528

Keywords: bloc, Flutter, Architecture, Android, Tutorial, Bloc library, Bloc turorial, Flutter tutorial

Id: kLDfhamoqe0

Length: 15min 50sec (950 seconds)

Published: Sat Sep 19 2020

Reddit Comments

[u/xzhorikx]

The animations are outstanding! Can’t even imagine how long does it take to put all of the visuals together, awesome job!

[u/z50170937]

High-quality contents! I instantly subscribed!