DEV Community: Jean Lucas

🧠 Choosing the Right Frontend Framework: React, Angular or Vue?

Jean Lucas — Tue, 15 Apr 2025 11:41:32 +0000

In the world of modern web development, frontend frameworks play a critical role in building scalable, fast, and maintainable user interfaces. But with so many options available, how do you choose the best one for your project?

Here’s a quick overview of the three most popular frontend frameworks today and when it makes sense to use each:

⚛️ React

Created by Facebook, React is a library (often called a framework due to its ecosystem) for building user interfaces based on components.

Why choose React?
✅ Large community and ecosystem
✅ Flexible and highly customizable
✅ Great for Single Page Applications (SPAs)
✅ Supported by Next.js for server-side rendering (SSR)
✅ Easy to integrate with other libraries

When to use:
React is ideal when you need flexibility, plan to build with micro-frontends, or want to integrate with different backends or tools.

🅰️ Angular

Developed by Google, Angular is a full-featured framework based on TypeScript, offering everything out-of-the-box (routing, HTTP, forms, etc.).

Why choose Angular?
✅ Complete solution, ready for enterprise applications
✅ Strong typing with TypeScript
✅ Built-in CLI and testing tools
✅ Two-way data binding
✅ Excellent for large teams and structured development

When to use:
Choose Angular when you're working on complex enterprise applications, internal systems, or when you need strong architecture and scalability.

🖖 Vue.js

Created by Evan You, Vue is a progressive framework that balances the best of React and Angular, with simplicity and great performance.

Why choose Vue?
✅ Gentle learning curve
✅ Lightweight and fast
✅ Clear documentation
✅ Reactive data binding
✅ Vue CLI and ecosystem (Nuxt.js, Pinia, etc.)

When to use:
Vue is great for small to medium-sized projects, quick MVPs, or if you want easy onboarding for new developers.

🔍 So, which one should you choose?

Flexibility & Ecosystem -> React
Enterprise Applications -> Angular
Simplicity & Quick Prototypes -> Vue.js

Ultimately, there’s no one-size-fits-all. The best framework depends on your team’s experience, project complexity, and long-term goals.

🔎 Pro Tip: If you're building a new project for a company or client, it’s worth analyzing the existing tech ecosystem.
If other teams within the organization already use a specific framework, aligning with it can bring several advantages:

✅ Standardization: Promotes a consistent development experience and easier code sharing across teams.

🔄 Flexibility in resource allocation: Developers familiar with the same stack can be reassigned between projects more easily—whether it's temporarily borrowing someone for a critical sprint or reallocating devs due to team restructuring.

Choosing a framework that matches the company’s existing stack can save time, reduce onboarding friction, and increase overall agility in development.

💬 Which framework do you use the most in your projects? Let me know in the comments!

🚀 Why Code Versioning is Essential and Why Git Dominates the Market

Jean Lucas — Mon, 17 Mar 2025 12:05:33 +0000

In a world where software evolves rapidly and teamwork is key to success, keeping code organized and under control has become crucial. That’s where code versioning comes in.

📌 What is Code Versioning?

Code versioning is the practice of tracking and managing changes made to a software project over time. It allows developers to monitor modifications, collaborate efficiently, roll back mistakes, and maintain a complete history of the project’s evolution.

It also enables different teams to work on the same project without conflicts, making development much more efficient, organized, and reliable.

🛠️ What is Git?

Git is the most widely used version control system in the world. Created by Linus Torvalds (also the creator of Linux), Git is a distributed, fast, and powerful tool to manage code versioning.

Nowadays, it’s the most recognized and adopted version control tool across companies and open-source communities.

Key advantages of Git:

Enables multiple developers to work on the same project simultaneously.
Keeps a complete history of all code changes.
Allows reverting changes or recovering previous versions easily.
Helps resolve code conflicts efficiently.
Integrates seamlessly with CI/CD platforms (such as GitHub Actions, GitLab CI, Jenkins, and others).
Keeps the codebase organized and facilitates code reviews.

🌎 Popular Git-based platforms:

GitHub – The most recognized globally, heavily used in open-source and team collaboration.

GitLab – Popular among companies seeking an all-in-one DevOps solution.

Bitbucket – Commonly used by teams already relying on Atlassian tools (like Jira).

🏢 Why Can’t Companies Live Without Version Control Today?

🔒 Security:
Ensures the code can always be restored if something goes wrong. It supports architectural principles such as fault tolerance, RPO (Recovery Point Objective), and RTO (Recovery Time Objective).

🤝 Collaboration:
Enables entire teams to work on the same project without overwriting each other's work. It’s a foundation for modern agile development.

🚀 Scalability:
Facilitates processes like code reviews, continuous integration, and deployment (CI/CD). Git platforms support these workflows and integrate with various hosting platforms, making it possible to automate everything.

📊 Auditability:
Provides a complete history of the codebase for analysis, accountability, and compliance. Every change is tracked, including dates, authors, and version states.

💎 Quality:
Promotes best practices and organization in development workflows, ensuring clean, maintainable, and high-quality code.

Conclusion

In today’s fast-paced, competitive landscape, companies that don’t use version control tools fall behind, losing productivity, security, and code quality. Git and its platforms are essential in any modern software development environment!

Do you use Git in your daily work? Which platform do you prefer? Let’s discuss in the comments! 💬👨‍💻

🐳 Why Use Docker? A Beginner’s Guide

Jean Lucas — Wed, 05 Mar 2025 19:03:25 +0000

In modern software development, ensuring consistency across different environments is crucial. Have you ever faced the infamous "it works on my machine" problem? If so, Docker is the solution you've been looking for!

Nowadays, encountering such issues is no longer acceptable. We have several ways to ensure that your code runs smoothly in a production environment, and one of the best approaches is using Docker. It allows you to simulate a production-like environment during development, reducing inconsistencies and deployment issues.

Let’s dive deeper into what Docker is and how it works! 🚀

🐳 What is Docker?

Docker is a containerization platform that enables you to run applications in isolated environments. A Docker container includes everything needed to execute an application:

✅ Code
✅ Dependencies (libraries, frameworks, etc.)
✅ Configuration files
✅ Operating system components

Unlike virtual machines, containers share the host OS, making them lightweight and faster to start.

⚙️ How Does Docker Work?

Docker operates using a client-server architecture, consisting of:

Docker CLI 🖥️ – A command-line interface for managing containers.
Docker Daemon ⚙️ – Runs in the background and handles container operations.
Docker Images 📦 – Blueprints that define how containers should be built.
Docker Containers 🚀 – Instances of Docker images running in isolated environments.

Want to learn more? Check out the official Docker documentation:
🔗 Docker Website

🖥️ Using Docker on Windows

If you're using Windows, I highly recommend installing Docker Desktop. It’s a powerful tool that simplifies container management and provides a user-friendly interface.

🔗 Download Docker Desktop

Using Docker in your development workflow significantly improves consistency, scalability, and efficiency. Have you tried Docker in your projects? Let’s discuss in the comments! 💬🚀

🚀 Why Use SonarQube in Your Development Workflow?

Jean Lucas — Fri, 28 Feb 2025 16:04:24 +0000

Maintaining code quality and security has become crucial in any development process. Nowadays, we have many ways to ensure code quality, whether during local development or in a production environment. Regardless of where the code is running, we must ensure that it is well-structured, optimized, and free from bugs. This is where SonarQube comes in.

What is SonarQube?

SonarQube is a code quality and security tool that helps developers identify bugs, code smells, duplications, and vulnerabilities in their applications. It supports multiple languages, integrates with various IDEs, and can be used in CI/CD pipelines to enforce quality standards before deployment.

Why Use SonarQube?

✅ Detects bugs and vulnerabilities
SonarQube scans your code for security risks, memory leaks, and potential runtime errors (many of which might go unnoticed during development) before they cause real issues.

✅ Improves code maintainability
By identifying code smells, SonarQube helps developers write cleaner and more efficient code, reducing technical debt.

✅ Enforces coding standards
It ensures that developers follow best practices by applying configurable rules to the codebase, such as indentation, line breaks, typing conventions, and other formatting guidelines.

✅ Integrates with IDEs
SonarQube provides real-time feedback while coding, helping you fix issues before committing your changes. It is compatible with many languages, but if you're working with TypeScript, I recommend using SonarLint + ESLint + Prettier a powerful combination of tools that will help you write clean and efficient code.

✅ Works in CI/CD pipelines
You can automate code quality checks in your build pipeline, preventing bad code from being merged into production.

Using SonarQube in VS Code

For real-time code analysis inside your IDE, you can use the SonarLint extension for VS Code.

How to install SonarLint in VS Code?

1️⃣ Open VS Code.
2️⃣ Go to Extensions (Ctrl+Shift+X).
3️⃣ Search for SonarLint and install it.
4️⃣ Restart VS Code and configure it to connect with SonarQube (if needed).

Now, SonarLint will highlight issues in your code as you write it!

Using SonarQube in CI/CD Pipelines

Setting up SonarQube in a CI/CD pipeline is a deep topic that I can cover in another post! 🔥

Conclusion

Using SonarQube (or SonarLint in VS Code) is essential for maintaining high-quality, secure, and maintainable code. Whether working in your IDE or enforcing quality gates in your CI/CD pipeline, it helps you catch issues early, improve code reliability, ensure the quality of the code, avoid duplications blocks of code and show us points that we can improve.

📌 Do you use SonarQube or SonarLint in your projects? Let’s discuss in the comments! 💬

🚀 Why Use ESLint in Your Project?

Jean Lucas — Thu, 27 Feb 2025 12:10:25 +0000

When working on a project, maintaining code quality and consistency is just as important as writing functional code. And who has never encountered a piece of code that's hard to understand?

Nowadays, refactoring has become a common practice due to code being written without proper patterns and best programming practices. This is where ESLint comes in, helping developers prevent bugs, enforce best practices, and improve maintainability.

What is ESLint?

ESLint is a powerful linter for JavaScript and TypeScript that analyzes your code, detects issues before they cause problems, and even highlights areas that can be improved to meet the best standards. It enforces rules based on predefined or custom configurations, helping teams maintain a clean and consistent codebase.

Why Use ESLint?

✅ Catches errors early
Detects common mistakes such as unused variables, incorrect imports, and potential runtime errors before they break your application.

✅ Enforces best practices
Encourages good coding habits by following recommended standards, such as using === instead of == this exemple is simple but give us a glimpse the intent of ESlint.

✅ Improves readability and maintainability
A well-structured and consistent codebase makes it easier for developers to collaborate and understand the code. It also saves time in the future when adding new features or onboarding new developers.

✅ Boosts development speed
By automating code analysis, developers spend less time debugging and more time building features.

✅ Compatible with Prettier
ESLint can work alongside Prettier to format and lint your code, ensuring both style and quality are maintained.

📌 If you don't know what Prettier is, check out my post:
💅 Why Use Prettier in Your Project?
🔗 https://dev.to/jean_lucas/why-use-prettier-in-your-project-58dp

Let's see a simple example

Take a look at the code below. We can identify two common issues that might lead to unexpected behavior in an application:

1️⃣ Variable typing is missing.
2️⃣ Comparison is done using == instead of ===.

ESLint alerts us with messages explaining these issues and prevents the project from building until they are fixed. This guarantees better code quality for both local development and deployment.

Without ESLint:

function compareValues(firstValue, secondValue) {
  if (firstValue == secondValue) {
    return 'They are equal';
  }
  return 'They are different';
}

With ESLint:

Now, all issues are fixed, making the code safer and more reliable:

function compareValues(firstValue: number, secondValue: number) {
  if (firstValue === secondValue) {
    return 'They are equal';
  }
  return 'They are different';
}

Conclusion

Using ESLint is a game changer for modern development, ensuring clean, error-free, and maintainable code. Combined with tools like Prettier, it helps you and your team focus on building great software instead of fixing code issues.

📌 Do you already use ESLint in your projects? How has it helped you? Let’s discuss in the comments! 💬

💅 Why Use Prettier in Your Project?

Jean Lucas — Wed, 26 Feb 2025 12:37:27 +0000

When developing a project, we spend a lot of time ensuring that our code is efficient, readable, and well-structured. However, a major workflow disruptor can be manual code formatting, which consumes time and leads to unnecessary discussions during code reviews.

That's where Prettier comes in! 🚀

Let's move on, But from the beginning.

What is Prettier?

Prettier is an opinionated code formatter that automatically enforces a consistent style. It supports multiple languages and integrates seamlessly with VS Code, WebStorm, Git Hooks, and other tools.

Why use Prettier?

Less time wasted on formatting.
With Prettier configured, you can focus on what truly matters: improving your logic and code quality, while Prettier takes care of formatting for you!
More productive code reviews.
By eliminating discussions about spaces, indentation, and line breaks, teams can concentrate their code reviews on architecture and logic instead.
Consistent codebase.
Every file follows the same standard, regardless of who wrote it. This makes code easier to read and maintain.
Automation and easy integration.
Prettier can be set up to run automatically when saving a file or before committing, ensuring a standardized codebase at all times.

Follow the example below, a simple function about say hello to someone:

Without Prrettier:

function sayHello(name){console.log("Hello, "+ name + "!");}

With Prrettier:

function sayHello(name) {
  console.log("Hello, " + name + "!");
}

Even a simple piece of code becomes more readable and structured!

Conclusion

Using Prettier is not just about formatting, is not just become your code beautiful, it's about productivity, collaboration, and code quality. Set it up in your project and experience the difference!

📌 Do you already use Prettier in your workflow? How has it helped you? Let’s discuss in the comments! 💬

Handling Errors in TypeScript: Why Use unknown in catch (e: unknown)

Jean Lucas — Tue, 25 Feb 2025 12:31:14 +0000

When dealing with exceptions in TypeScript, it’s common to see something like this:

try {
  // Desired logic.
} catch (e) {
  console.error(e.message); // This can cause an error!
}

By default, TypeScript assumes that (e) is of type any. However, common errors such as 403, 404, 500, 504, and many others can trigger exceptions, and they don’t always share the same response structure. This can lead to runtime issues if you try to handle the error in a user-friendly way without properly validating its type.

Why Use unknown ?

The unknown type was introduced as a safer alternative to any. It prevents us from performing direct operations on a variable without first verifying its type, forcing us to handle errors correctly before accessing any properties.

Correct Error Handling Example:

try {
  // Desired logic.
} catch (e: unknown) {
  if (e instanceof Error) {
    console.error(e.message); // Now it's safe to access .message
  } else {
    console.error("Unknown error:", e);
  }
}

With this approach, we prevent unknown errors from breaking our application and ensure that unexpected issues don’t escape our control or get directly exposed to the end user.