BE CAREFUL with your project dependencies

Everyone who follows me on instagram (@devinvestidor) knows that I’ve been studying English a lot, and next year I will go to Ireland on an exchange.

So… This is my first post in English 🙂

I’ve been as a programmer for about 10 years and I’ve worked with many programmers in different stacks (Java, Javascript, Angular, React, Node, C#, Delphi, Ionic…).

And I need to share with you I saw a lot of things (good and bad ones). The main thought of most programmers is:

“I need solve the problem no matter what”

That’s what we’re going to talk about today. Let’s remember what Robert C. Martin said:

“It is not enough for code to work.”

So we (programmers) need to pay attention to what we are adding to our projects. I have often seen some “professionals” adding a large dependency to a project to only use 1% of the library.

I confess, I’ve already done that 🙁  and almost did it again.

I recently recorded the class 10 (Otimizations) in the course: How to Create a PROFESSIONAL WEBSITE | Step by Step and I used a template to help me create the interface.

In this class I show the possibility of removing half of the dependencies because they were not necessary.

In parallel with this class I was placed in charge of a new front-end project at my work.

It’s funny because I try to teach about good pratices and I almost made a bad mistake.

The task

I needed to create a responsive system with infinite scrolling: 3 columns for large devices, 2 columns for medium devices and 1 columns for small devices.

Simple, right?

Not exactly… There are some challenges in this task. And I decided to add ngx-bootstrap because it’s simple to resolve the responsive layout.

This decision was made because I have experience with Bootstrap. But the question is:

Would it be the best soluction?

I included a canon in the project but I need only the system grid.



  • Heavier project
  • Longer time to start the project
  • Longer time to build the project
  • Possible conflicts with Angular Material

Is it worth adding 16.61mb to the project just to use the grid system (row, col..)?

Of course not!

Time is money

I’ve worked on some projects we needed to wait a long time to start or build the project. This could be a disadvantage of monolithic architecture, but most of the time, the problem is due to excessive dependencies in the project.

In the book: The Clean Coder Uncle Bob says:

In today’s world, construction time should be measured in seconds, not minutes, and certainly not hours.

I know that you programmer has probably worked on a similar project where you had to wait a long time to start or build it.

I got to say: You are responsible for this and you must improve this result.

I believe that we should be careful before adding any dependencies in our projects.. Perhaps add a double code review to avoid the problems in the future.

In the future, the cost of solving this problem will be enormous.



I could solve the task using CSS media queries, but I preferred to choose Flex-Layout from Angular-itself. The sintax it’s similiar, look:

<!-- Using Bootstrap -->
<div class="row">
  <div class="col-sm-12 col-md-6 col-xl-4 mb-3 " *ngFor="let studie of patientShared.studies">
    <app-card [studie]="studie"></app-card>

<!-- Using FlexLayout -->
<div fxLayout="row wrap" fxLayoutGap="16px grid">
  <div [fxFlex]="(100/3) + '%'" fxFlex.xs="100%""100%""50%" fxFlex.xl="33%" *ngFor="let studie of patientShared.studies">
    <app-card [studie]="studie"></app-card>

The same result, but look at the difference:

16.61mb to 2.56 mb

A big problem with a legacy project is this:

BE A PROFESSIONAL! I saw a number of projects similar to this meme.


“With great powers comes great responsibilities.”


Bye 😀

Leave a Reply