DEV Community: Ahamed Rasni Nathees

Creating a Custom Input Component with v-model Binding in Vue 3

Ahamed Rasni Nathees — Tue, 13 Aug 2024 04:42:35 +0000

When building a Vue 3 application, managing form inputs through components is a common practice. One of the powerful features of Vue is the v-model directive, which simplifies two-way data binding. In this blog post, we will explore how to create a custom input component and use v-model to bind its value in a parent component.

1. Understanding `v-model` in Vue 3

In Vue 3, v-model is a shorthand for creating two-way data bindings on form input elements. The directive binds the value of the input to a data property and listens for changes to update the property.

<input v-model="password" />

In the above example, the password data property is bound to the input value. When the input value changes, the password property updates automatically.

2. Creating the Custom Input Component

Let's say we want to create a reusable input component called BaseInputGroup. Here's how the component might look:

<template>
  <div class="flex flex-col text-white mx-5 md:mx-0 space-y-2 mb-2">
    <label :for="labelFor">
      {{ labelFor.toLocaleUpperCase() }}
    </label>
    <input
      :type="type"
      :name="name"
      @input="$updateInputValue"
      :value="modelValue"
      class="p-2 px-4 rounded-2xl bg-white/15 focus:outline-none focus:ring focus:border-blue-500"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineOptions, defineEmits } from 'vue'

defineOptions({
  inheritAttrs: false
})

defineProps({
  labelFor: {
    type: String,
    required: true
  },
  name: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'text'
  },
  modelValue: {
    type: [String, Number],
    default: ''
  }
})

// Emit an event to update the v-model in the parent component
const emit = defineEmits(['update:modelValue'])
const $updateInputValue = (event: Event) => {
  const input = event.target as HTMLInputElement
  emit('update:modelValue', input.value)
}
</script>

3. Binding v-model in the Parent Component

To use this component in a parent component with v-model, you simply bind the model to a data property in the parent component. Here's an example:

<template>
  <BaseInputGroup
    labelFor="password"
    name="password"
    type="password"
    v-model="password"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseInputGroup from './components/BaseInputGroup.vue'

const password = ref('')
</script>

4. How It Works

Model Value Prop: The modelValue prop represents the value of the input. It's passed from the parent component via v-model.

Emitting the Update: The $updateInputValue function listens for input events and emits an update:modelValue event with the new input value. This updates the parent component's password value.

Binding in the Parent: In the parent component, the v-model directive binds to the password data property, ensuring that the value is always in sync with the custom input component.

5. Benefits of Using Custom Components with v-model

Reusability: The custom input component can be reused across your application, reducing code duplication.

Separation of Concerns: The logic for handling input values is encapsulated within the component, making the parent component cleaner and more focused on its core functionality.

Customization: You can easily extend the custom input component to include additional features, like validation, different input types, or custom styles, without affecting the parent component.

Conclusion

Using v-model with custom components in Vue 3 is a powerful way to manage form inputs and data binding. By emitting the update:modelValue event, you can ensure that your components remain in sync with the parent component's data properties, making your code more modular, maintainable, and easier to understand.

This pattern is especially useful in larger applications where input handling logic can become complex and repetitive. By leveraging Vue 3's composition API and the v-model directive, you can create flexible and reusable components that simplify your codebase.

How to Create a Test Case in Laravel Using Pest

Ahamed Rasni Nathees — Mon, 05 Aug 2024 15:27:53 +0000

Testing your Laravel application is crucial to ensure that your code works as expected. Pest is a testing framework for PHP, designed to be minimalistic and user-friendly. In this blog post, we'll walk through creating a test case in Laravel using Pest, focusing on an example where we test the creation of an Employer record, including uploading a logo.

Prerequisites

Laravel application set up
Pest installed in your Laravel application

If you haven't installed Pest yet, you can do so by following the official Pest installation guide.

Step 1: Setting Up the Models and Relationships

Ensure your User and Employer models are correctly set up with the necessary relationships.

User Model (app/Models/User.php):

namespace App\Models;

use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Database\Eloquent\Relations\HasOne;

class User extends Authenticatable
{
    public function employer(): HasOne
    {
        return $this->hasOne(Employer::class);
    }
}

Employer Model (app/Models/Employer.php):

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Employer extends Model
{
    protected $fillable = ['name', 'email', 'phone', 'address', 'city', 'website', 'user_id', 'logo'];

    public function user(): BelongsTo
    {
        return $this->belongsTo(User::class);
    }
}

Step 2: Setting Up Factories

Create factories for generating test data.

User Factory (database/factories/UserFactory.php):

namespace Database\Factories;

use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;

class UserFactory extends Factory
{
    protected $model = User::class;

    public function definition()
    {
        return [
            'name' => $this->faker->name(),
            'email' => $this->faker->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => bcrypt('password'), // password
            'remember_token' => Str::random(10),
        ];
    }
}

Employer Factory (database/factories/EmployerFactory.php):

namespace Database\Factories;

use App\Models\Employer;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Http\UploadedFile;

class EmployerFactory extends Factory
{
    protected $model = Employer::class;

    public function definition()
    {
        return [
            'name' => $this->faker->company,
            'email' => $this->faker->companyEmail,
            'phone' => $this->faker->phoneNumber,
            'address' => $this->faker->address,
            'city' => $this->faker->city,
            'website' => $this->faker->url,
            'logo' => UploadedFile::fake()->image('logo.png')
        ];
    }
}

Step 3: Writing the Controller

Create a controller method to handle the creation of an Employer.

Employer Controller (app/Http/Controllers/EmployerController.php):

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employer;
use Illuminate\Support\Facades\Storage;

class EmployerController extends Controller
{
    public function __construct()
    {

    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email',
            'phone' => 'required|string',
            'address' => 'nullable|string',
            'city' => 'nullable|string',
            'website' => 'nullable|url',
            'logo' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        if ($request->hasFile('logo')) {
            $path = $request->file('logo')->store('logos', 'public');
            $validated['logo'] = $path;
        }

        $employer = $request->user()->employer()->create($validated);

        return response()->json($employer, 201);
    }
}

Step 4: Creating the Pest Tests

Create test files and write test cases to verify the creation of an Employer, including uploading a logo.

Create the Test File:

php artisan pest:test EmployerControllerTest

Write the Test Cases (tests/Feature/EmployerControllerTest.php):

<?php

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Support\Facades\Auth;
use App\Models\User;
use App\Models\Employer;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;

uses(RefreshDatabase::class);

it('prevents guests from creating an employer', function () {
    // Define the data to be sent in the POST request
    $data = [
        'name' => 'Test Employer',
        'email' => 'test@employer.com',
        'phone' => '1234567890',
        'address' => '123 Employer St',
        'city' => 'Employer City',
        'website' => 'https://www.employer.com',
    ];

    // Send the POST request to create the employer as a guest (unauthenticated)
    $response = $this->post('/api/employers', $data);

    // Assert that the response status is 401 (Unauthorized)
    $response->assertStatus(401);

    // Optionally, check that the employer was not created
    $this->assertDatabaseMissing('employers', [
        'name' => 'Test Employer',
        'email' => 'test@employer.com',
    ]);
});

it('creates a new employer for authenticated user', function () {
    // Create a user and log them in
    $user = User::factory()->create();
    Auth::login($user);

    // Define the data to be sent in the POST request
    $data = [
        'name' => 'Test Employer',
        'email' => 'test@employer.com',
        'phone' => '1234567890',
        'address' => '123 Employer St',
        'city' => 'Employer City',
        'website' => 'https://www.employer.com',
    ];

    // Send the POST request to create the employer
    $response = $this->post('/api/employers', $data);

    // Assert that the response status is 201 (Created)
    $response->assertStatus(201);

    // Assert that the employer was created
    $this->assertDatabaseHas('employers', [
        'name' => 'Test Employer',
        'email' => 'test@employer.com',
    ]);
});

it('creates a new employer with a logo', function () {
    // Create a user and log them in
    $user = User::factory()->create();
    Auth::login($user);

    // Fake a storage disk for testing
    Storage::fake('public');

    // Define the data to be sent in the POST request
    $data = [
        'name' => 'Test Employer',
        'email' => 'test@employer.com',
        'phone' => '1234567890',
        'address' => '123 Employer St',
        'city' => 'Employer City',
        'website' => 'https://www.employer.com',
        'logo' => UploadedFile::fake()->image('logo.png'), // Fake file for testing
    ];

    // Send the POST request to create the employer
    $response = $this->post('/api/employers', $data);

    // Assert that the response status is 201 (Created)
    $response->assertStatus(201);

    // Optionally, check if the employer was actually created
    $this->assertDatabaseHas('employers', [
        'name' => 'Test Employer',
        'email' => 'test@employer.com',
    ]);

    // Check that the file was uploaded
    Storage::disk('public')->assertExists('logos/logo.png'); // Adjust path as needed
});

Step 5: Running Your Pest Tests
Run your Pest tests to ensure everything works as expected:

php artisan test --testsuit=Feature

Conclusion

By following these steps, you can create test cases in Laravel using Pest to verify the creation of an Employer record, including handling file uploads. This approach ensures that your application behaves as expected and helps catch any issues early in the development process. Happy testing!

Agile vs. Lean: A Powerful Combination for Software Development

Ahamed Rasni Nathees — Sat, 03 Aug 2024 15:55:41 +0000

In the world of software development, Agile and Lean methodologies are often viewed as distinct approaches. However, they are not only compatible but also highly complementary. Understanding how these methodologies align can lead to more efficient, value-driven development processes.

What is Agile?

Agile focuses on the how of software development. It’s about delivering software iteratively and adapting to change. Agile principles emphasize:

Individuals and interactions over processes and tools
Working software over comprehensive documentation
Customer collaboration over contract negotiation
Responding to change over following a plan

These principles guide teams in delivering valuable software quickly and efficiently while adapting to evolving customer needs.

What is Lean?

Lean is a broader management philosophy aimed at maximizing value by eliminating waste. It addresses the what and why of development through principles such as:

Eliminating waste to streamline processes and reduce costs
Amplifying learning to continuously improve and adapt
Deciding as late as possible to keep options open
Delivering as fast as possible to provide value quickly
Empowering the team to make decisions and drive improvements
Building quality in from the start
Seeing the whole to understand and optimize the entire process

Benefits of Agile

Customer Satisfaction: Agile’s iterative delivery ensures that customers receive valuable software quickly.
People Focus: Agile practices promote collaboration and trust within the team.
Continuous Improvement: Agile encourages practices like test-driven development and regular refactoring to maintain high-quality code.
Adaptability: Agile’s flexibility allows teams to respond to changing requirements.
Early Return on Investment: Rapid delivery generates revenue and reduces development costs.
Valuable Feedback: Frequent feedback from customers drives meaningful improvements.

Benefits of Lean

Efficiency: By removing waste, Lean speeds up development and reduces costs.
Early Value Delivery: Lean’s focus on delivering value quickly accelerates the benefits provided to customers.
Empowerment: Lean practices empower teams to make decisions, leading to better outcomes and increased motivation.

Combining Agile and Lean: The Perfect Match

Agile and Lean, while distinct, are highly synergistic. Agile provides a framework for iterative, collaborative development, while Lean offers strategies for optimizing the process. Combining the two can enhance both the development process and the value delivered to customers.

Agile delivers the iterative structure and collaborative practices necessary for building software effectively.
Lean refines these processes by focusing on efficiency and value optimization.

Contrary to common misconceptions, Agile and Lean are not mutually exclusive. Instead, they can be integrated to create a more robust approach to software development.

Real-World Examples

Curious about how Agile and Lean principles can be combined in practice? Here are a few examples:

Iterative Value Delivery: Using Agile sprints to deliver incremental improvements while applying Lean principles to streamline each sprint’s processes.
Customer Feedback Loops: Agile's frequent customer feedback can be combined with Lean's focus on eliminating waste to ensure that feedback is effectively utilized without unnecessary delays.

By understanding and leveraging the strengths of both Agile and Lean, organizations can create a development environment that is both efficient and customer-centric.

Feel free to share your thoughts or ask any questions about how to integrate Agile and Lean in your projects!

Evolution of Application Architectures: From Monoliths to Microservices

Ahamed Rasni Nathees — Fri, 02 Aug 2024 07:58:41 +0000

In this post, we'll delve into the world of microservices architecture, exploring its concepts, benefits, and trade-offs. We'll also discuss how to design and implement microservices effectively in your projects.

Traditional Monolithic Applications

Traditionally, applications were built as monolithic structures, where all components (data access, business logic, user interface) were tightly coupled in a single unit. This approach led to several challenges:

Complexity: Changes in one part of the application could ripple through the entire system, making development and maintenance difficult.
Deployment Issues: Updating the entire application was a time-consuming and resource-intensive process.
Scalability: Scaling the application meant scaling everything, which was often inefficient and costly.
Developer Challenges: Tight coupling often resulted in code reuse, leading to fragile and hard-to-maintain systems.
Impact on Delivery: Testing and deploying updates became slow due to tight coupling and complexity, hindering faster feature releases.

The Rise of Service-Oriented Architecture (SOA)

SOA emerged as a solution to address the limitations of monolithic applications. It decomposed applications into smaller, modular services that communicated with each other over a network.

What is SOA?

SOA is a design approach where different parts of an application interact using services.
SOAP, a common protocol used in SOA, facilitates information exchange using XML messages.
Strong contract systems like WSDL ensure proper service interaction.

Challenges of SOA:

Implementation complexities can arise due to SOAP's limitations and response types.
As more services are added, tight coupling can resurface, making management more difficult.

While SOA aimed to overcome the limitations of monolithic applications, it introduced its own complexities, paving the way for a more modern approach – microservices.

Microservices: A Distributed Approach

Microservices break down a system into smaller, independent units of work, similar to modularizing code in software development. Here are some key characteristics of microservices:

Decomposition: Microservices break down a system into smaller, well-defined units with clear responsibilities.
Communication: Services communicate with each other using a common protocol (often REST) for seamless interaction, even if written in different languages.
Flexibility and Cost: Microservices offer flexibility and can be implemented using open-source software on commodity hardware, making them cost-effective compared to traditional SOA.

Key Benefits of Microservices:

Modular Design: Smaller, independent units of work promote modularity, making the system easier to understand and maintain.
Improved Scalability: Scaling individual services based on their specific needs becomes easier with a microservices architecture.
Increased Agility: Teams can work independently on service development and deployment, accelerating development cycles.
Reduced Risk: Failures in one service are less likely to cascade and impact the entire system, improving overall resilience.

Implementing Microservices Effectively

While microservices offer significant advantages, they also come with their own set of challenges. Here are some considerations for successful microservices implementation:

Complexity: Increased complexity in deployment and management requires careful planning and automation to mitigate these challenges.
Latency and Reliability: Distributed systems can introduce latency issues. Implementing strategies like reactive technologies and ensuring core services can handle partial availability are crucial.
Cost-Benefit Analysis: Weigh the benefits of flexibility and scalability against the increased operational costs and potential risks.

Additional Considerations

Microservices vs. Cloud Native:

Microservices: Independent units of software.
Cloud Native: Applications designed to run in cloud environments. Although they often go hand-in-hand, they are distinct concepts.

The Services:

The size of a microservice is less critical than its well-defined functionality and independent operation.
Services communicate using HTTP (often REST) for seamless collaboration between development teams.
Domain-Driven Design principles encourage each service to handle specific tasks within a well-defined domain.

Communication Dance:

Microservices communicate using protocols like HTTP/REST, enabling service development in various languages with seamless interoperability.
This flexibility also requires careful orchestration, strong versioning strategies, and well-designed APIs to prevent system failures.

Distribution and Scaling:

Distribute your microservices globally for geographically diverse user bases to ensure faster response times and higher availability.
Individual services can be scaled independently to meet varying demands, enhancing overall system performance and resource utilization.
Implement elastic scaling strategies to handle traffic spikes efficiently and optimize infrastructure costs.

Latency Management:

Implement circuit breakers to manage service latency and maintain system stability.

Key Takeaways

Trade-offs in Microservices: Balancing distribution tax, deployment complexity, and technology stack diversity.
Edge Services: Simplifying external dependencies and client-specific requirements.
Unified Logging and Tracing: Essential for troubleshooting and maintaining the system.
Continuous Delivery: Automating the delivery process for agility and efficiency.

Understanding these concepts and strategies will help you design and manage more efficient, scalable, and maintainable microservices architectures in your projects.

DEV Community: Ahamed Rasni Nathees

Creating a Custom Input Component with v-model Binding in Vue 3

1. Understanding v-model in Vue 3

2. Creating the Custom Input Component

3. Binding v-model in the Parent Component

4. How It Works

5. Benefits of Using Custom Components with v-model

Conclusion

How to Create a Test Case in Laravel Using Pest

Step 1: Setting Up the Models and Relationships

Step 2: Setting Up Factories

Step 3: Writing the Controller

Step 4: Creating the Pest Tests

Conclusion

Agile vs. Lean: A Powerful Combination for Software Development

What is Agile?

What is Lean?

Benefits of Agile

Benefits of Lean

Combining Agile and Lean: The Perfect Match

Real-World Examples

Evolution of Application Architectures: From Monoliths to Microservices

Traditional Monolithic Applications

The Rise of Service-Oriented Architecture (SOA)

What is SOA?

Challenges of SOA:

Microservices: A Distributed Approach

Key Benefits of Microservices:

Implementing Microservices Effectively

Additional Considerations

Microservices vs. Cloud Native:

The Services:

Communication Dance:

Distribution and Scaling:

Latency Management:

Key Takeaways

1. Understanding `v-model` in Vue 3