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