Whenever an application becomes successful, adding new features and update old functionalities become your goal. To create the best user experience possible the codebase grow and grow you will notice that bugs start to pop up everywhere into that pile of spaghetti code. Spaghetti code in the concept of programming is when the code is just all over the place with tons and tons of code messing around and even the reading of it hurt your eyes. It’s the ultimate nightmare for any developer team as small or big the team can get. whether it’s a small startup or a successful big branded company with thousands of engineers, project management deals with new developers joining the team and sometimes with devs leaving the projects and a leaving behind them a big legacy of code source that nobody wants to read or even look into so from a project manager point of view the best thing is to do their best to avoid dealing with the issue of spaghetti code in the early stages of the project. And when it comes to implementing a solution for this issue things can get very confusing because of the multitude of possible technical solutions they can choose from. Some call those solutions best practices some other call them guidelines but the most used term is patterns. personally, I like to call them the golden standards. Why??? pretty simple I prefer to hire a new developer and teach him about a pattern that allows him to understand how my project code works than teach him what every bloc of the code does. and teach him again for the next project. From my newbie developer lead angle those gold standards, design patterns, help me accelerate the learning curve any developer in my team it does also help to ship a product that can be easily maintained over the next years. And the most important thing the code looks so clean and OOH BOY I HATE SPAGHETTI CODE.

What are the characteristics of Spaghetti code?

Spaghetti code has specific characteristics which distinguish it from plain poor code. Spaghetti is extremely complicated and unstructured, so it is hard to follow the flow of a process through the program. It is like trying to untangle the noodles in a bowl of bolognese.
Global variables contribute to spaghetti code because the values are assigned outside of the scope of the current program unit. This can make it difficult to determine where in the code base a variable is set to a given value.

• No modularity (everything in one file, class, module),
• Plenty of goto’s,
• Poor organization,
• No clear separation of functionality and purpose. 
• Long functions.
• Poor naming.
• No consistent coding style throughout.
• No clear interface contract between implementation and clients of code.
• Over-reliance on internals of data structures with little abstraction.
• Functions randomly modify global state without any mention of it in documentation.
• Lack of comments or documentation of non-trivial code.
• Code that is more complicated than it needs to be.
• Lack of reuse. (plenty of duplicated code)
• No verification or unit testing 
• Magic numbers.
• No structure
• No documentation
• Any attempt to add a feature breaks two existing ones
• Any attempt to fix a bug introduces a regression
• No modularization, every one access everyone else’s global variables
• No version control
• Too many parameters in function calls
• Never uses a #define or enum where a magic number will suffice
• Inconsistent coding styles for indentation, naming
• Never validates external inputs

The different patterns you can implement when it comes to mobile app development. They are so many and I am not going to detail them all. But I am going to fastly talk about few of them.

MVC

Model, View, Controller. MVC architecture sperate your code into 3 different components. The following illustration illustrates for you the interaction allowed between the different components on an MVC project.

A Model is the data used by the software. This can be an abstraction, database, file, or character in a mobile game.

The View is a visual representation of an object. it includes anything that user can see

A Controller updates both models and views. it accepts input and performs the corresponding update. for example, a controller can update a model by changing the attributes.

MVP

Mode-View-Presenter a derivative form of the MVC pattern that has been for a long time the golden architecture pattern for Android developers. with a single relationship between the Model and the Presenter and a dual relationship between the presenter and the view, the Model and the View remain separated apart. Now this pattern is considered the silver pattern because it has been dethroned by the next one the list MVVM.

MVVM

Model-View-ViewModel. ViewModel shot dead the Presenter. With libraries for DataBinding and LiveData, the MVVM become so powerful and produce such an elegant code that I personally was astonished the first time I came across it. If you still never came across this I suggest this 7 minutes Medium article

Redux

Redux architecture revolves a strict unidirectional data flow which means all data of your application follows the same lifecycle pattern. If you are a React developer or you want to become one please read more about this pattern. This Design pattern is mainly composed of Actions, Reducers, and Presentational Components and Store. If you want to know more about this particular subject find here a simple Todo List app as an example of how to use Redux

BLOC with Flutter

Being a Flutter enthusiastic, BLOC (Business LOgic Component) is the design pattern that I am the most excited about. The way Bloc works you can compare it to a black box that takes an event is an input, and it output Streams. I personally find this very performant decomposition of the code especially if the team does have dev that performs better with UI implementation that allows to have some kind of separation between work done of the UI and works done into the business logic layer.
In the rest of this blog post. I assume that you know Flutter and you are you know that everything is a widget from now on.
I am going to teach you more about bloc when, why and how to use it into your flutter app.

Why and When using BLOC?

When you are working on a project that has multiple features and a big UI widget tree the mixture between stateful and stateless widgets alone is going to harm your performance because data will need to be passed into that big tree of widgets and that can make your state management hard and messy. that’s why Google developers recommendation calls it a state management system for Flutter. Also it worth to mention that you can use it if you are familiar with the MVP and the MVVM architecture because BLOC does co-relate with them the only thing that change, when you implement it with an MVVM, is that the ViewModel gets replaced by BLOC.

How to implement BLOC?

Let me take you through the journey of Creating a small app with BLOC. Let’s pretend that we are working on a todo list app.
There are 6 things we need to implement in our bloc class: Create a list of todo, create a stream controller, implement your business logic, create stream getters, create Constructor, and at the end never forget to dispose your streams.

Create a List of todo I hardcoded the list in this tutorial to keep things simple. this is usually some data from different API’s or databases.  

//TODO: List the TODOs

List<Todo> _todoList = [

  Todo(0, “todo number 1”, false),

  Todo(1, “todo number 2”, false),

  Todo(2, “todo number 3”, false),

  Todo(3, “todo number 4”, false),

  Todo(4, “todo number 5”, false),

  Todo(5, “todo number 6”, false),

];

Consider the Stream controller as a class that has methods as stream and sink. to understand it better. Sink is to add data in the data flow and Stream is to get data from a data flow.

//TODO: Stream controller

final _todoListStreamController = StreamController<List<Todo>>();

final _todoChangeStateStreamController = StreamController<Todo>();

Our code feature here is pretty simple all it needs is to change a todo from pending to do. The private function change state change the status of any to-do item from pending to done or from done to pending 

//TODO: Code functions

void _changeState(Todo todo){

  _todoList[todo.id].state= !todo.state;

  todoListSink.add(_todoList);

}

As you may have noticed the streams in here are private so to use them elsewhere we need to implement getters and setters. And this can a little bit tricky when you want to implement the getters.

//TODO:Stream Sink getter

Stream<List<Todo>> get todoListStream => _todoListStreamController.stream;

StreamSink<List<Todo>> get todoListSink => _todoListStreamController.sink;

StreamSink<Todo> get todoChangeState=>_todoChangeStateStreamController.sink;

As you may have noticed the streams in here are private so to use them elsewhere we need to implement getters and setters. And this can a little bit tricky when you want to implement the getters.

//TODO: Constructer

TodoBloc(){

  _todoListStreamController.add(_todoList);

  _todoChangeStateStreamController.stream.listen(_changeState);

}

Each stream that you create allocate memory and resources, to avoid memory leaks and performance issue always implement a dispose function when you close all Streams that you are listening to. You can name this function what even you want to but since on the widget, you can overwrite the dispose function. so naming it “dispose” make more sense then close or something else.

//TODO: Dispose impletentation

void dispose(){

  _todoListStreamController.close();

  _todoChangeStateStreamController.close();

}

Become PieceX Best Seller Before

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

After that, we are done creating the TodoBloc Class. you can start using the data streams from bloc into your UI buy the use of the widget SteamBuilder.

  •  
  •  
  •  
  •  
  •  
  •  
  •