Introducing rx_bloc ecosystem - Part 1
Intro
State management is and will continue to be one of the hottest topics in the Flutter community. Even though Flutter comes with built-in Stateful Widgets, this is not enough for building an app that follows the SOLID principles. If you want the app you are building to be robust, scalable, and maintainable, you need to somehow separate the data layer from the business layer and then the business layer from the UI layer, right?
Based on your engineering experience and the needs of your project, you have the freedom to choose among a variety of state management solutions such as rx_bloc, redux, bloc, mobx, and many more. As decision-makers and mobile architects, we need to be aware of all pros and cons of the solutions so we can pick the right tool for the job.
With all that being said, let’s see what motivated us to build the rx_bloc ecosystem and what it includes so you can decide whether this is the right tool for your project.
Motivation
If you are working on a complex project you might be challenged to build a highly interactive UI or a heavy business logic in a combination with the consumption of various data sources such as REST APIs, Web Socket, Secured Storage, Shared Preferences, etc. To achieve this, you might need a tool that facilitates your work during product development.
Fortunately, in Flutter there is rxdart, which brings the Dart Streams and StreamControllers to an entirely new level by adding functionality from the reactive extensions specification on top of them. In fact, today we can see reactive programming everywhere. In Front-end web development there is rx.js, which is the core of Angular. In Back-end Development we see libraries such as Project Reactor, in the native iOS development there is RxSwift, and RxJava/RxKotlin we see in Android development.
So, since rxdart boosts async programming, we thought about why not combine it with the well-known BloC pattern and develop a set of packages that will help developers build robust, scalable, and maintainable solutions faster and more easily.
The result
Thus, we developed the following set of tools:
- rx_bloc that helps to implement the BLoC (Business Logic Component) Design Pattern using the power of the reactive streams.
- flutter_rx_bloc that exposes your reactive BloCs to the UI Layer.
- rx_bloc_test that facilitates implementing the unit tests for your BloCs
- rx_bloc_generator that boosts development efficiency by making your BloCs zero-boilerplate.
- rx_bloc_list that facilitates implementing infinity scroll and pull-to-refresh features with minimal setup
- Android Studio Plugin for effectively creating reactive BloCs.
Sample
The most efficient way of getting familiar with something new as quickly as possible is to see how it works in action, right? So check out the video below to see what the Counter app we want to build looks like.
In the following articles we will see how you can build a more advanced version of the world-famous Counter sample which will be more challenging and interesting as it will be communicating with an API and it will be handling the following states:
- Handling error state
As soon as users reach the min/max possible count they will be presented with an informative snack bar. - Handling loading state
While the API request is being executed, the action buttons will be disabled and a loading indicator will appear so that the user will know that something is happening. - Handling success state
The count will be updated only if the API returns a “success” response. This means that the widget responsible for showing the counter will not be rebuilt in case of loading or error.
What’s next?
- Introducing rx_bloc: Part 2
Dart package that helps to implement the BLoC (Business Logic Component) Design Pattern using the power of the reactive streams. - Introducing flutter_rx_bloc: Part 3
Set of Flutter Widgets that exposes your reactive BloCs to the UI Layer.
