DEV Community: Murilo Lodovico

Something about Architecture: Client-server

Murilo Lodovico — Fri, 14 Nov 2025 04:12:10 +0000

Hey there! I hope you’re all having a great day. Continuing with our discussion on software architectures, I’d like to introduce and explore the client-server model. This architectural style has been fundamental in shaping how applications are built and how systems communicate, serving as the backbone for countless modern solutions.

Nowadays almost every online service we use relies on a foundational model called client-server architecture, it's components, types, and real-life applications.

It's a network model based in two main entities -> clients and server. And they communicate it other to share data or specific logic tasks.

Client: starts the request and wait for response server, displaying response to user.
Server: responsible of processes the request, retrieving information and send it's back to the client.

Advantages:

Centralized Control: server can handle multiple clients simultaneously, centralizating resources data management.
Scalability: scalable architecture, allowing to add more clients or servers as needed without affecting the entire system.
Data Security: the server part can be secured with layers of security controls.

Drawbacks:

Single Point of Failure: if the server goes down, all connected clients lose access to data and service.
Network Dependency: this model relies on network communication, poor connectivity can lead to an issues performances.
Resource-Intensive: servers requires significant resources to manage and server multiple clients, which may increase infrastructure cost.

Conclusion

As I often emphasize in my articles, there is no silver bullet in software architecture. Instead, we navigate a landscape of trade-offs to identify the design that best addresses the specific problem at hand. This is one of those cases: this architectural model empowers a wide range of applications by efficiently orchestrating communication between clients and servers, ensuring scalability, robustness, and maintainability across diverse environments.

I hope this article was helpful in some way—happy coding! 🚀
Feel free to share your thoughts or suggestions in the comments below!

Something about Architecture: Layers

Murilo Lodovico — Wed, 17 Sep 2025 04:34:45 +0000

Hey there! I hope you're having a great day. Today, I want to share an article about a fascinating topic that's been getting a lot of attention lately.

The field of software architecture is still evolving and relatively new, requiring ongoing research and development. The discussion around this definition is extensive, with many different points of view.

It’s an engineering concept, where this model can be seen as encompassing different types of architectures that serve as resources, with the primary goal of maximizing performance and development productivity.

In this time we will talk about Layers:

This architecture is structured around clearly defined responsibilities, resulting in isolated layers with distinct purposes. Each layer can be reused across different levels of the system or even seamlessly replaced, enhancing flexibility, scalability, and maintainability.

The concept of layers is not new; it was widely applied long before becoming popular in software engineering. This organizational model has proven its significance across different domains of computing, serving as a foundation for the construction of complex and standardized systems.

Some of the most notable examples include:

OSI Model: developed in the 1970s and consolidated in the 1980s as the reference framework for communication protocols in computer networks. Its seven-layer structure established a conceptual foundation for interoperability and the evolution of networking technologies.
Operating Systems: the layered approach enabled the standardization and continuous improvement of operating systems. By structuring responsibilities across levels — from CPU and memory management to devices, kernel, and applications — this model fostered modularity, portability, and system stability.

The layered architecture typically consists of three layers: presentation, application, and data.

Presentation: layer is responsible for the user interface — what the end user interacts with. It displays information, collects input, and sends requests to the application layer.
Application: processes user inputs, applies business rules, and manages data flow across the system. It executes operations and computations, coordinates interactions between layers, and defines the overall system behavior.
Data: manages everything related to information storage, retrieval, and updates. It controls database operations, provides data to the application on demand, and ensures both integrity and persistence of information.

Advantages

Clear organization: Each part of the code has a well-defined responsibility, which improves readability and makes the system easier to understand.
Reusability: Layers can be reused in different contexts or applications, reducing duplication and fostering consistency across the system.
Flexibility: A layer can be replaced or updated without significantly impacting the others (e.g., switching the database engine), enabling adaptability to new technologies.
Ease of maintenance: Bugs and improvements are more localized, which accelerates troubleshooting, testing, and overall software evolution.

Disadvantages

Performance overhead: An excessive number of layers may introduce unnecessary calls and complexity, which can degrade system performance.
Added complexity: For small projects, the layered approach might be considered over-engineering, adding structure where simplicity would suffice.
Hierarchical rigidity: Communication must follow the layer order strictly, which can increase verbosity and reduce the speed of certain operations.

Conclusion
The layered software architecture remains a cornerstone in software engineering, valued for its modularity, clarity, and adaptability. Despite limitations such as performance concerns and rigid communication flows, its structured approach provides strong support for building maintainable and scalable systems.

In small applications, lightweight models may be more suitable, but in enterprise and large-scale contexts, layered architecture continues to be a robust and effective paradigm.

I hope this article was helpful in some way—happy coding! 🚀
Feel free to share your thoughts or suggestions in the comments below!

Differences between Tailwind and Bootstrap framework

Murilo Lodovico — Wed, 09 Apr 2025 04:43:58 +0000

Hey Dev Community!
Welcome to another article where we dive into the world of software engineering and development. 🚀

Today, we’re putting two popular CSS frameworks under the microscope: Bootstrap and Tailwind CSS. While they share a common goal—making it easier to build beautiful UIs—they take very different approaches to get there.

Both frameworks treat styling more like a set of commands than traditional CSS code, which can speed up development, especially for those already familiar with these tools. That said, their heavy use of classes can sometimes clutter your HTML, depending on how they're used.

Let’s break it down:

📌 Quick History
Bootstrap: Launched in 2011 by Twitter, it quickly became a go-to solution for responsive design and consistency.

Tailwind CSS: Introduced in 2017, Tailwind took a utility-first approach, prioritizing flexibility and customization.

🎨 Design Philosophy

Bootstrap: Comes with a full suite of pre-styled components and a robust grid system—great for rapid prototyping and consistent designs.
Tailwind CSS: Emphasizes utility classes, giving developers the freedom to create highly customized and unique UIs.

⚙️ Customization

Bootstrap: Customizable through Sass variables and theme overrides, but this requires knowledge of Sass and the Bootstrap theming system.
Tailwind CSS: Customization is centralized in a single config file, making it straightforward to define your own colors, spacing, fonts, and more.

🚀 Learning Curve

Bootstrap: Very beginner-friendly thanks to its ready-to-use components.
Tailwind CSS: Steeper learning curve—it takes some time to get comfortable using utility classes effectively.

Conclusion
Both frameworks are powerful tools, and the best choice depends on the specific needs of your project or application. If flexibility and deep customization are your priorities, Tailwind CSS is likely the better fit. On the other hand, if you need a ready-to-use component library and a reliable grid system, Bootstrap may be the more efficient option.

I hope this article was helpful in some way—happy coding! 🚀
Feel free to share your thoughts or suggestions in the comments below!

Is the design pattern so important on application

Murilo Lodovico — Mon, 27 Jan 2025 01:03:39 +0000

In my opinion, a design pattern is like a set of methods and development approaches that not only help the developer responsible for creating the application but also make it easier for others who will implement new features, fix bugs, and carry out future updates.

No company, application, or service is strictly required to adopt methods such as design patterns. However, choosing not to implement these methodologies — among others — often makes the project harder to understand and develop, especially as it scales. Moreover, the absence of such patterns can negatively affect the maintainability and performance of the application, making the development process more prone to errors and rework. Once the use of design patterns becomes an integral part of the software development process, all the previously mentioned points turn into clear advantages, as long as the right patterns are applied to each context and situation. Otherwise, using design patterns becomes counterproductive, as each pattern was designed with a specific purpose, whether to enhance code readability, promote standardization, or abstract the architecture efficiently. Therefore, it's essential to understand the project’s needs before opting for any design pattern, ensuring that its application truly brings long-term benefits to the software lifecycle.

I make an effort to read and understand as much as possible about the topics I discuss in my articles, as I believe that a solid knowledge base is essential to create relevant and well-supported content. For this reason, I constantly seek sources of inspiration and learning, such as specialized books and trustworthy articles. Below, I share some of these resources that have been crucial for my education and for the development of the ideas I present. So some links that I use to learn more or books:

Sites

Refactoring Guru: https://refactoring.guru/design-patterns
Patterns Dev: https://www.patterns.dev
Source Making: https://sourcemaking.com/design_patterns

Books

Clean Architecture: A Craftsman's Guide to Software Structure and Design
Clean Code: A Handbook of Agile Software Craftsmanship
Patterns of Enterprise Application Architecture
Refactoring to Patterns

An Easy Way To Learn Docker

Murilo Lodovico — Mon, 30 Dec 2024 03:20:57 +0000

There isn't an easy way to learn Docker, but we definitely have approaches to understanding it, knowing how and when to use it.

Docker is one of the best containerization platforms, using image-based modules that simplify sharing applications or service sets, including all their dependencies and configurations, across different environments depending on the Docker configuration.

To make the process and needs of this stack easier to understand, imagine it like a kitchen where a chef is familiar with the location of every utensil and tool he needs to cook. If he were to move to a different kitchen that isn’t his, he wouldn't be able to cook efficiently because the utensils are in different places, disrupting his workflow.

So, he arranges the utensils according to his needs in each kitchen he works in, preparing them in a way that allows him to cook efficiently in any kitchen he has set up beforehand. This approach enables him to work seamlessly with a variety of kitchens and different setups.

This analogy illustrates how Docker works in a way that's similar to the chef's process in the kitchen. Just like the chef organizes his tools in a way that allows him to work efficiently in any kitchen, Docker enables developers to containerize applications, along with all their dependencies, configurations, and environment variables, into isolated "containers". These containers are like the kitchen setups the chef prepares in advance. When a chef moves to a new kitchen, he can immediately start cooking because the kitchen is set up just the way he needs it. Similarly, Docker containers can be easily moved and run on any machine, whether it's a developer's local machine, a testing server, or in production, because the container includes everything the application needs to run—no matter where it’s deployed.

By preparing the "ingredients" (software, libraries, dependencies) in advance and packaging them into containers, Docker allows developers to work seamlessly across different environments and setups, avoiding the issues that can arise from differences in system configurations or dependency versions, much like the chef avoiding disruption from a disorganized kitchen.

Technically

Although Docker containerization is derived from LXC, the same technology used in traditional Linux containers, it provides a much better user experience for developers. Docker simplifies the process of creating, building, and managing containers, as well as handling image versioning, deployment, and distribution, among other features.

Some Positive Points

Modularity: Docker allows you to easily isolate and shut down a part of an application for repairs or to add new features, without interrupting the entire application. This makes it ideal for microservices and similar architectures. Additionally, enables seamless communication between applications or services, similar to a service-oriented architecture (SOA), allowing them to work together efficiently.
Reversion: Every image in Docker is composed of layers, making it easy and fast to revert to a previous version. This feature is particularly popular in CI/CD pipelines, where rapid rollbacks and version control are essential.
Rapid Deployment: Provisioning and deploying new hardware used to take days, a time-consuming and tedious process. With Docker containers, deployment takes just seconds. Each process is isolated within its own container, enabling easy sharing between applications. There's no need to boot an operating system to add or move a container, significantly speeding up the deployment process. Additionally, creating and destroying data generated by containers is straightforward, quick, and cost-effective.

Conclusion

In summary, Docker is a powerful and indispensable tool for standardizing dependencies, configurations, and libraries, facilitating seamless integration across diverse environments and pipelines. By isolating processes within containers, it ensures consistency between development, testing, and production stages, significantly reducing the risk of environment-related issues. Docker empowers teams to work more efficiently, enhancing collaboration and streamlining workflows. Its ability to optimize resource utilization and accelerate deployment cycles leads to increased agility, improved performance, and higher productivity, making it an essential asset for modern software development and DevOps practices.

Thank you for making it this far and reading the entire article! =D

Why it's important to know at least one back-end language as a front-end developer

Murilo Lodovico — Mon, 22 Jul 2024 20:40:17 +0000

Understanding the fundamentals and mechanics of your primary programming language is crucial for creating high-quality, performant code. However, as a Senior Software Developer, I've learned over the years that knowing a back-end language is equally important. In this article, I'll explain why this is a valuable insight.

Enhanced Collaboration
- Better Communication: Understanding back-end concepts allows front-end developers to communicate more effectively with back-end developers, leading to smoother collaboration and fewer misunderstandings.
- Shared Vocabulary: Knowing common terms and concepts used in back-end development helps in discussing project requirements and debugging issues.
Improved Debugging Skills
- Full-Stack Debugging: When issues arise, understanding both front-end and back-end can help in diagnosing problems more efficiently, saving time and reducing frustration.
- Identifying Issues: Front-end developers can identify whether a problem is rooted in the front-end or back-end, leading to faster resolution.
Comprehensive Understanding of Web Applications
- Big Picture Perspective: Understanding back-end processes gives a more holistic view of how web applications function, from data storage and retrieval to server-side logic.
- Informed Decisions: It enables making more informed decisions about front-end architecture and performance optimizations that may depend on back-end capabilities.
Increased Versatility
- Full-Stack Development: Knowing both front-end and back-end languages makes a developer more versatile and capable of handling a wider range of tasks, leading to more job opportunities and career growth.
- Handling Back-end Tasks: Front-end developers can take on back-end tasks when necessary, such as creating APIs, managing databases, or setting up servers.
Better Design of APIs and Data Flow
- API Consumption: Understanding back-end development helps in designing better APIs and making more efficient use of existing APIs.
- Data Handling: Knowing how data is processed and stored on the back-end can inform better data handling practices on the front-end.
Enhanced Performance Optimization
- Efficient Interactions: Understanding back-end performance considerations can help in optimizing front-end code to reduce load times and improve user experience.
- Caching Strategies: Knowledge of back-end caching mechanisms can be leveraged to improve front-end performance.
Improved Security Awareness
- Security Best Practices: Understanding back-end security practices can inform better front-end security measures, such as input validation and protection against common vulnerabilities.
- Data Protection: Awareness of how data is handled and stored on the back-end helps in implementing secure data transmission and handling practices on the front-end.

Conclusion
Knowing at least one back-end language enhances a front-end developer's ability to collaborate effectively, debug issues efficiently, understand the full scope of web applications, and increase their versatility in the job market. It leads to better API design, performance optimization, and security awareness, ultimately contributing to the development of more robust and efficient applications.

Graphs and why so important!

Murilo Lodovico — Wed, 19 Jun 2024 18:52:24 +0000

Graphs are networks of points (vertices) connected by lines (edges). They represent relationships or paths, useful in routes, social networks, and bioinformatics. In programming and software engineering, they optimize search algorithms, network analysis, route planning, and solving problems.

Why you should write a good resume on your github profile page?

Murilo Lodovico — Tue, 11 Jun 2024 03:29:02 +0000

My thoughts on

I have been working in software development since 2019, and over these years, I've learned many things that are often not taught. One of the key lessons is the importance of creating a website portfolio and a detailed README on your GitHub profile page.
These elements can make a significant difference. This is particularly interesting when it comes to new opportunities, as it allows tech recruiters to analyze your profile more technically and draw more accurate conclusions about your professional experience.
In a GitHub summary, you can specify the technologies in which you have expertise and knowledge, the ones you are interested in learning, as well as provide a brief overview of your professional background and experiences.
Just like this

How to do it

To create a profile README on your GitHub page, you first need to create a new repository with the same name as your GitHub username.

Then, create a file inside this repository and customize it as you see fit.

Repository: https://github.com/Mlodovico/Mlodovico/tree/main

Thanks for making this far reading my article, hope you enjoyed :D

Express vs Nest

Murilo Lodovico — Wed, 22 May 2024 21:14:01 +0000

This post was maded to show the difference between the principal node frameworks, pros and cons

About ExpressJs
Express is one of the oldest and most widely used open-source frameworks for Node.js. Primarily utilized for building REST APIs, it offers a plethora of features for web application development.
Key Features: Minimalistic and Lightweight, Middleware-based, Large ecosystem, Manual Configuration, Unopinionated Structure

Pros

Simplicity and Minimalism

Lightweight: Express is minimalistic, offering straightforward way to create web applications without a lot of overhead.
Flexibility: you have more control and flexibility to structure your aplpcation as you see fit, without being constrained by a framework's architecture.

Performance

Efficiency: its has a smaller footprint and can be more efficient for applications that don't need a lot of build-in functionality.
Fast: its minimalist nature can lead to faster performance for certain tasks compared to more feature-rich frameworks.

Large Community and Ecosystem

Mature Ecosystem: Being one of the oldest Node.js frameworks, Express has a vast ecosystem of middleware and third-party libraries.
Extensive Documentation: There is a wealth of documentation, tutorials and community support available.

Cons

Lack of Structure

Manual Configuration: I guess its obvious, but Express needed to be seted up many aspects of your application manually, which can lead to inconsistencies and more boilerplate code.
Scalability Issues: As the application grows, managing the structure and dependencies can become cumbersome.

Limited Features:

Basic Functionality: Express provices a basic set of features out of the box. Advanced features like dependency injection, modules, or middleware require additional setup and configuration.

About Nest
It's one of the most popular open-source framework which is extensively used in web app development services. Designed on Typescrip, utilizes progressive JavaScript, main components of the NestJs include controllers, modules and provides.

Key Features: Built-in features, Typescript support, Modular Architecture, Dependency Injection, Opinionated project structure, Swagger ntegration.

Pros

Modular Architecture:

Organized Structure: NestJs promotes a modular architecture, making it easier to manage and scale large applications.
Built-in Dependency Injection: This helps in managing dependencies efficiently and facilitates testing and maintenance.

Comprehensive Features:

Out-of-the-Box Functionality: NestJs comes with many built-in features such as authentication, validation, and WebSockets, reducing the need for third-party libraries.
Typescript Support: Designed to work seamlessly with Typescript, providing type safety and better tooling support.

Consistency and Convention:

Standardized Practices: It enforces a consistent coding style and best practices, which can improve code quality and maintainability.
Extensive Documentation: Detailed documentation and a supportive community help developers get up to speed quickly.

Cons

Learning Curve:

Complexity: It has a steeper learning curve compared to Express due to its more complex architecture and the use of Typescript.
Overhead: The additional features and structure can fell like overkill for small or simple applications.

Performance Overhead:

Heavier Framework: NestJs extensive feature set and abstractions can introduce some performance overhead compared to the leaner Express framework.

Conclusion
As any good developer knows, there is no silver bullet or definitive choice between the two. The decision depends on the project's specifications and its dependencies. Generally, Express is ideal for smaller, lightweight, and flexible projects, while NestJS is better suited for scalable and complex projects.

Project maded with NestJs: https://github.com/Mlodovico/petshop-backend-nest

Project maded with Node + Express:
https://github.com/Mlodovico/go-barber/tree/main/GoBarber-back-end

SSR, ISR, CSR

Murilo Lodovico — Thu, 26 Oct 2023 22:11:58 +0000

SSR

Server Side Rendering

Trata-se de uma abordagem diferente de render de tela, pela fato do node ser composto por javascript, o next consegue usar isso a seu favor fazendo a renderinizacao de tela por parte do servidor e nao mais pela parte do cliente, assim diminuindo o uso de memoria RAM do processador do cliente.

Pontos Positivos:

SEO APRIMORADO: permite que os motores de busca indexem facilmente o conteudo das paginas, tornando seu aplicativo mais amigavel para mecanismos de busca.
Carregamento Rapido da Pagina Inicial: O Conteudo da pagina inicial inicial pode ser renderizado no servidor, reduzindo o tempo de carregamento inicial melhorando a performance.
Experiencia de Usuario: Pode-se garantir que os usuarios recebem uma pagina completamente renderizada desde o inicio. Isso evita flashes de conteudo vazio e melhora desempenho.
Cache do Lado do Servidor: Eh possivel implementar um cache do lado do servidor para armazenar paginas pre-renderenizadas, o que pode reduzir a carga do servidor e acelerar as respostas as solicitacoes subsequentes.

Pontos Negativos:

Complexidade de Desenvolvimento: Implentar esse formato pode ser mais complexo do que renderizar do lado do cliente (CSR). Requer um entendimento maior sobre arquitetura e pode precisar de mais configuracoes.
Custo de Recursos do Servidor: esse metodo coloca uma carga significativa no servidor, principalmente quando se necessita de um grande numeo de solicitacoes simultaneas. Utilizando mais memoria e aumentando os custos de hospedagem.
Latencia do Servidor: a latencia entre cliente e servidor pode afetar o desempenho da renderizacao ou se o servidor estiver sobrecarregado gerando um atraso no carregamento.
Menos Flexibilidade no Cliente: pela maior parte do processamento ser carregada do lado do servidor, limitando a capacidade do usuario de personalizar e interagir em relacao ao CSR.
Tempo de Desenvolvimento Maior: geralmente leva-se mais tempo para se desenvolver uma pagina SSR, devido a complexidade e a necessidade de gerenciar o ciclo de vida do servidor.

ISR

Incremental Static Rendering

Trata-se de uma abordagem que combina o Static Site Generation (SSG) e o Server Side Rendering (SSR) para criar paginas estaticas que podem ser atualizadas de forma incremental ao em vez de serem totalmente recriadas sempre que ocorrer uma alteracao.

Pontos Positivos:

Desempenho Melhorado: o ISR permique que as paginas sejam pre-renderizadas de forma estatica e regeneradas em segundo plano. Resultando em tempos de carregamento menores para os usuarios, pois muitas partes do conteudo ja estao prontas antes mesmo de selem solicitadas.
Flexibilidade: esse metodo oferece um esquilibrio entre o SSR e o SSG, podendo assim definir quais partes serao estaticas e quais serao dinamicas, flexibilizando a otimizacao e desempenho.
Experiencia do Usuario: altamente otimizados para carregamento rapido, proporcionando uma experiencia de usuario mais satisfatoria.
SEO Melhorado: benefico para SEO, uma vez que as paginas podem ser pre-renderenizadas e fornecer conteudo facilmente indexavel pelos motores de busca.
Economia de Recursos: permite atualizar partes especificas de uma pagina sem ter que recriar a pagina inteira, economizando recursos do servidor.

Pontos Negativos:

Complexidade de Desenvolvimento: implementar o SSR chega a ser mais complexo do que SSR ou SSG, eh necessario entender as tecnicas e definir os pontos corretor de regeneracao incremental.
Tamanho do Aplicativo: Dependendo de como se configura, pode acabar ficando maior em relacao a tamanho, gerando multiplas versoes da pagina.
Cache e Limpeza: gerenciar e limpar o cache de forma adequada pode ser desafiador, principalmente quando o conteudo tem atualizacoes frequentes.
Tempo de Publicacao: pode atrasar a publicacao de conteudo em comparacao ao SSG, pois as paginas precisam ser regeneradas apos a primeira solicitacao.
Picos de Carga no Servidor: Dependendo do trafego do site, pode haver picos de carga no servidor quando as paginas sao geradas. # CSR

Client Side Rendering

Nesse contexto significa que a renderizacao da pagina e a montagem dos componentes ocorrem do lado do cliente, ou seja no navegador do usuario ao inves de serem realizadas no servidor.

Pontos Positivos:

Carregamento Inicial Rapido: oferece um carregamento inicial rapido, uma vez que o servidor envia um esqueleto basico da pagina e o conteudo real eh buscado e renderizado no navegador do usuario.
Maior Flexibilidade do Cliente: as interacoes no lado do cliente sao mais flexiveis, como animacoes, transicoes entre paginas e atualizacoes de estado sem a necessidade de recarregar a pagina inteira.
Menos Carga no como todo o processo de render ocorra na parte do usuario, o servidor economiza em termos de CPU e memoria. Tornando a aplicacao escalavel e capaz de lidar com grandes numeros de requisicao.
Cache do Lado do Cliente: cache do lado do cliente para armazenar dados que podem ser reutilizados sem a necessidade de fazer solicitacoes adicionais ao servidor
Atualizacoes de Conteudo Dinamico: o CSR eh apropriado para casos em que partes espesificas de uma pagina presisam ser atualizadas dinamicamente, sem a necessidade de recarregar a pagina inteira.

Pontos Negativos:

SEO Limitado: como o render ocorre do lado do cliente, os motores de busca podem ter dificuldade em indexar o conteudo, pois o HTML inicial pode conter somente o esqueleto basico da aplicacao.
Flash de Conteudo Vazio: os usuarios podem ver uma breve “tela em branco”, enquanto a tela eh renderizada.
Desempenho em Redes de Baixa Velocidade: em redes lentas, o carregamento da pagina pode ser mais demorado, uma vez que todo conteudo precisa ser buscado e renderizado no navegador.
Seguranca e Gerenciamento de Estado: parte da logica do aplicativo eh executada no navegador, eh importante garantir que a seguranca seja mantida, o gerenciamento de estado tambem pode ser mais complexo em comparacao ao SSR.
SEO e Compartilhamento em Redes Sociais: a falta de conteudo no HTML inical pode afetar negativamente a pre-visualizacao em redes sociais, ja que as informacoes iniciais sao limitadas.