Forem: Babalola Macaulay

Laravel - Advanced Eloquent ORM Techniques

Babalola Macaulay — Thu, 11 Jul 2024 18:52:46 +0000

Laravel's Eloquent ORM is a very powerful took for interacting with databases, using an expressive fluent syntax. While it's very easy to get quite familiar with the basics of Eloquent and stick to using just the basic techniques, there are advanced techniques that can significantly enhance your application's efficiency and capabilities.

In this article, I will be talking about these advanced Eloquent ORM techniques, helping you make the most of Laravel's strongly built database interaction layer.

1. Complex Query Building

Eloquent provides a clean and simple way to build complex SQL queries, beyond just basic CRUD operations. You can use advanced query-building techniques to optimize your database interactions using Subqueries and Advance Where Clauses.

SubQueries

use App\Models\Order;
use App\Models\User;

$latestOrders = Order::select('user_id', 'created_at')
    ->where('created_at', function ($query) {
        $query->selectRaw('MAX(created_at)')
            ->from('orders')
            ->groupBy('user_id');
    })
    ->get();

$users = User::whereIn('id', $latestOrders->pluck('user_id'))->get();

Advanced Where Clauses

$users = User::where('status', 'active')
    ->where(function ($query) {
        $query->where('age', '>', 30)
            ->orWhere('country', 'US');
    })
    ->get();

2. Relationships and Performance Optimization

Eloquent makes it easy to define relationships between models. However, optimizing these relationships is crucial for performance.

Eager Loading

This helps to reduce the number of queries executed by loading related models alongside the main model.

$users = User::with('posts', 'comments')->get();

Lazy Eager Loading

Sometimes, you might want to load relationships after the initial query. Lazy eager loading can help in such scenarios.

$users = User::all();
if ($someCondition) {
    $users->load('posts', 'comments');
}

Chunking

For processing large datasets, chunking can help avoid memory exhaustion by breaking the query results into manageable chunks.

User::chunk(100, function ($users) {
    foreach ($users as $user) {
        // Process user
    }
});

3. Advanced Relationships

Polymorphic Relationships

Polymorphic relationships allow a model to belong to more than one other model on a single association.

// Migration for comments table
Schema::create('comments', function (Blueprint $table) {
    $table->id();
    $table->text('body');
    $table->morphs('commentable');
    $table->timestamps();
});

// Comment model
class Comment extends Model {
    public function commentable() {
        return $this->morphTo();
    }
}

// Post model
class Post extends Model {
    public function comments() {
        return $this->morphMany(Comment::class, 'commentable');
    }
}

// Video model
class Video extends Model {
    public function comments() {
        return $this->morphMany(Comment::class, 'commentable');
    }
}

Many-to-Many Polymorphic Relationships

Many-to-many polymorphic relationships allow a model to belong to multiple other models and vice versa.

// Migration for tags table
Schema::create('tags', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

// Migration for taggables table
Schema::create('taggables', function (Blueprint $table) {
    $table->id();
    $table->foreignId('tag_id')->constrained();
    $table->morphs('taggable');
    $table->timestamps();
});

// Tag model
class Tag extends Model {
    public function posts() {
        return $this->morphedByMany(Post::class, 'taggable');
    }

    public function videos() {
        return $this->morphedByMany(Video::class, 'taggable');
    }
}

// Post model
class Post extends Model {
    public function tags() {
        return $this->morphToMany(Tag::class, 'taggable');
    }
}

// Video model
class Video extends Model {
    public function tags() {
        return $this->morphToMany(Tag::class, 'taggable');
    }
}

Mastering advanced Eloquent ORM techniques can significantly enhance your Laravel application's performance and maintainability.
By leveraging complex query building, optimizing relationships, understanding advanced relationships, and a few other Advanced Eloquent ORM Techniques in Laravel, you can build more efficient and scalable applications.

Cheers 🥂

How to create an Animated Toast with React Native Re-Animated

Babalola Macaulay — Sun, 16 Oct 2022 07:37:52 +0000

In this article, we will be creating our own Animated Toast from scratch in React Native.

React Native is a popular open-source Javascript framework, created and managed by Meta (They used to be known as Facebook).

NOTE: This article assumes prior knowledge of basics of react native, and i will not be explaining how to install or setup react native on your computer.

You should know that there's not just one way to achieve animations in React Native. React Native has it's own Animated library, for really nice fluid animations that are very easy to create.

However, we will be using React Native Reanimated created and managed by the awesome team at swmansion.

Animations done using React Native Reanimated are even more smooth and cooler, as animation and event handling logic off of the JavaScript thread and onto the UI thread.

Now let's get into real code...

We'll start by creating our new React Native project by running the code in our terminal:

npx react-native init AnimatedToastExample

Feel free to run your new project on a simulator or a real device using npx react-native run android

Next, we install our package for animation

npm i react-native-reanimated

To complete our react-native-reanimated setup, go to the root of your project and add this to your babel.config.js file:

 module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Don't forget to run npx pod-install if you are developing for iOS.

Now we're ready to start animating our React Native Components.

Create our button component

<TouchableOpacity
    style={{
        backgroundColor: 'teal',
        alignSelf: 'center',
        padding: 10,
        marginTop: 40,
        borderRadius: 4
    }}
    onPress={showToast}
>
    <Text style={{ color: 'white' }}>
        Show Toast
    </Text>
</TouchableOpacity>

Create our toast component

<View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</View>

Now, before we animate our toast, let's import Animated from our animation library and change our the wrapping View component to use Animated.View instead.

import Animated from 'react-native-reanimated';

Change the View on our component to Animated.View to look like this:

<Animated.View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</Animated.View>

Next, inside the style block of our animated component, we need to add styles that can be animated. What we want to do is change the top value to a value that makes is completely hidden from view, at the top of our screen.

Let's import 2 hooks from our animation library: useAnimatedStyle and useSharedValue:

import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

useSharedValue

This hook allows you to create a value that can be changed at any point in your code, and the change can be listed to by other animation hooks.
It takes the initial value you as the only argument.

useAnimatedStyle

This hook takes a callback as it's argument and returns a style object.
This hook will listen for changes in any of the values returned in it's style object, and effect these changes in your view component.

We will use these 2 hooks to create an initial top value for our Toast that hides is completely from viwew, and then listen for changes in that value, so that when we click our button and the value is changed, the toast will animate to the new top value.

hide toast container

const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

const toastAnimatedStyle = useAnimatedStyle(() => {
    return {
        top: toastTopPosition.value
    }
})

Add this new style to your Animated.View component styles.

<Animated.View
    style={[
        {
            padding: 20,
            position: 'absolute',
            width: '100%',
            zIndex: 1
        },
        toastAnimatedStyle
    ]}
>

Once you reload your App, you should see your toast container is now completely hidden.

Show toast on button click()

Now we will handle our button click and show our toast immediately. At this point, all we need to complete our animations is to change the value we created with useSharedValue

const showToast = () => {
    toastTopPosition.value = withTiming(40)
}

You will notice that we just used another hook from react-native-reanimated.

withTiming

This hook helps us to animate a change in our values.

Reload your app to see complete changes.

To wrap this up, we'll add a setTimeout function to our showToast function to make our toast disappear after a few seconds.

const showToast = () => {
    toastTopPosition.value = withTiming(40)

    setTimeout(() => {
        toastTopPosition.value = withTiming(-Dimensions.get('window').height)
    }, 2000);
}

Now your final code should look something like this:

import React from 'react';
import {
    SafeAreaView,
    Text,
    TouchableOpacity,
    Dimensions,
    View,
} from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

import {
    Header,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
    const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

    const toastAnimatedStyle = useAnimatedStyle(() => {
        return {
            top: toastTopPosition.value
        }
    })

    const showToast = () => {
        toastTopPosition.value = withTiming(40)

        setTimeout(() => {
            toastTopPosition.value = withTiming(-Dimensions.get('window').height)
        }, 2000);
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <Header />

            <Animated.View
                style={[
                    {
                        padding: 20,
                        position: 'absolute',
                        width: '100%',
                        zIndex: 1
                    },
                    toastAnimatedStyle
                ]}
            >
                <View
                    style={{
                        backgroundColor: 'teal',
                        padding: 10,
                        borderRadius: 4,
                    }}
                >
                    <Text style={{ color: 'white' }}>
                        This is a toast message
                    </Text>
                </View>
            </Animated.View>

            <View
                style={{
                    flex: 1,
                    backgroundColor: 'white'
                }}
            >
                <TouchableOpacity
                    style={{
                        backgroundColor: 'teal',
                        alignSelf: 'center',
                        padding: 10,
                        marginTop: 40,
                        borderRadius: 4
                    }}
                    onPress={showToast}
                >
                    <Text style={{ color: 'white' }}>
                        Show Toast
                    </Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

export default App;

Feel free to let me know what you think, and if this article has helped you in any way, please don't hesitate to give it a ♡ and share 👍🏽.

How to create an Animated Toast with React Native Re-Animated.

Babalola Macaulay — Sun, 16 Oct 2022 07:32:02 +0000

In this article, we will be creating our own Animated Toast from scratch in React Native.

React Native is a popular open-source Javascript framework, created and managed by Meta (They used to be known as Facebook).

NOTE: This article assumes prior knowledge of basics of react native, and i will not be explaining how to install or setup react native on your computer.

You should know that there's not just one way to achieve animations in React Native. React Native has it's own Animated library, for really nice fluid animations that are very easy to create.

However, we will be using React Native Reanimated created and managed by the awesome team at swmansion.

Animations done using React Native Reanimated are even more smooth and cooler, as animation and event handling logic off of the JavaScript thread and onto the UI thread.

Now let's get into real code...

We'll start by creating our new React Native project by running the code in our terminal:

npx react-native init AnimatedToastExample

Feel free to run your new project on a simulator or a real device using npx react-native run android

Next, we install our package for animation

npm i react-native-reanimated

To complete our react-native-reanimated setup, go to the root of your project and add this to your babel.config.js file:

 module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Don't forget to run npx pod-install if you are developing for iOS.

Now we're ready to start animating our React Native Components.

Create our button component

<TouchableOpacity
    style={{
        backgroundColor: 'teal',
        alignSelf: 'center',
        padding: 10,
        marginTop: 40,
        borderRadius: 4
    }}
    onPress={showToast}
>
    <Text style={{ color: 'white' }}>
        Show Toast
    </Text>
</TouchableOpacity>

Create our toast component

<View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</View>

Now, before we animate our toast, let's import Animated from our animation library and change our the wrapping View component to use Animated.View instead.

import Animated from 'react-native-reanimated';

Change the View on our component to Animated.View to look like this:

<Animated.View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</Animated.View>

Let's import 2 hooks from our animation library: useAnimatedStyle and useSharedValue:

import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

useSharedValue

This hook allows you to create a value that can be changed at any point in your code, and the change can be listed to by other animation hooks.
It takes the initial value you as the only argument.

useAnimatedStyle

hide toast container

const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

const toastAnimatedStyle = useAnimatedStyle(() => {
    return {
        top: toastTopPosition.value
    }
})

Add this new style to your Animated.View component styles.

<Animated.View
    style={[
        {
            padding: 20,
            position: 'absolute',
            width: '100%',
            zIndex: 1
        },
        toastAnimatedStyle
    ]}
>

Once you reload your App, you should see your toast container is now completely hidden.

Show toast on button click()

Now we will handle our button click and show our toast immediately. At this point, all we need to complete our animations is to change the value we created with useSharedValue

const showToast = () => {
    toastTopPosition.value = withTiming(40)
}

You will notice that we just used another hook from react-native-reanimated.

withTiming

This hook helps us to animate a change in our values.

Reload your app to see complete changes.

To wrap this up, we'll add a setTimeout function to our showToast function to make our toast disappear after a few seconds.

const showToast = () => {
    toastTopPosition.value = withTiming(40)

    setTimeout(() => {
        toastTopPosition.value = withTiming(-Dimensions.get('window').height)
    }, 2000);
}

Now your final code should look something like this:

import React from 'react';
import {
    SafeAreaView,
    Text,
    TouchableOpacity,
    Dimensions,
    View,
} from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

import {
    Header,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
    const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

    const toastAnimatedStyle = useAnimatedStyle(() => {
        return {
            top: toastTopPosition.value
        }
    })

    const showToast = () => {
        toastTopPosition.value = withTiming(40)

        setTimeout(() => {
            toastTopPosition.value = withTiming(-Dimensions.get('window').height)
        }, 2000);
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <Header />

            <Animated.View
                style={[
                    {
                        padding: 20,
                        position: 'absolute',
                        width: '100%',
                        zIndex: 1
                    },
                    toastAnimatedStyle
                ]}
            >
                <View
                    style={{
                        backgroundColor: 'teal',
                        padding: 10,
                        borderRadius: 4,
                    }}
                >
                    <Text style={{ color: 'white' }}>
                        This is a toast message
                    </Text>
                </View>
            </Animated.View>

            <View
                style={{
                    flex: 1,
                    backgroundColor: 'white'
                }}
            >
                <TouchableOpacity
                    style={{
                        backgroundColor: 'teal',
                        alignSelf: 'center',
                        padding: 10,
                        marginTop: 40,
                        borderRadius: 4
                    }}
                    onPress={showToast}
                >
                    <Text style={{ color: 'white' }}>
                        Show Toast
                    </Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

export default App;

Feel free to let me know what you think, and if this article has helped you in any way, please don't hesitate to give it a ♡ and share 👍🏽.

How to create an Animated Toast with React Native Re-Animated

Babalola Macaulay — Sun, 16 Oct 2022 07:09:10 +0000

In this article, we will be creating our own Animated Toast from scratch in React Native.

React Native is a popular open-source Javascript framework, created and managed by Meta (They used to be known as Facebook).

NOTE: This article assumes prior knowledge of basics of react native, and i will not be explaining how to install or setup react native on your computer.

You should know that there's not just one way to achieve animations in React Native. React Native has it's own Animated library, for really nice fluid animations that are very easy to create.

However, we will be using React Native Reanimated created and managed by the awesome team at swmansion.

Animations done using React Native Reanimated are even more smooth and cooler, as animation and event handling logic off of the JavaScript thread and onto the UI thread.

Now let's get into real code...

We'll start by creating our new React Native project by running the code in our terminal:



npx react-native init AnimatedToastExample

Feel free to run your new project on a simulator or a real device using npx react-native run android

Next, we install our package for animation



npm i react-native-reanimated

To complete our react-native-reanimated setup, go to the root of your project and add this to your babel.config.js file:



 module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Don't forget to run npx pod-install if you are developing for iOS.

Now we're ready to start animating our React Native Components.

Create our button component



<TouchableOpacity
    style={{
        backgroundColor: 'teal',
        alignSelf: 'center',
        padding: 10,
        marginTop: 40,
        borderRadius: 4
    }}
    onPress={showToast}
>
    <Text style={{ color: 'white' }}>
        Show Toast
    </Text>
</TouchableOpacity>

Create our toast component



<View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</View>

Now, before we animate our toast, let's import Animated from our animation library and change our the wrapping View component to use Animated.View instead.



import Animated from 'react-native-reanimated';

Change the View on our component to Animated.View to look like this:



<Animated.View
    style={[{
        padding: 20,
        position: 'absolute',
        top: 40,
        width: '100%',
        zIndex: 1
    }]}
>
    <View
        style={{
            backgroundColor: 'teal',
            padding: 10,
            borderRadius: 4,
        }}
    >
        <Text style={{ color: 'white' }}>
            This is a toast message
        </Text>
    </View>
</Animated.View>

Let's import 2 hooks from our animation library: useAnimatedStyle and useSharedValue:



import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

useSharedValue

This hook allows you to create a value that can be changed at any point in your code, and the change can be listed to by other animation hooks.
It takes the initial value you as the only argument.

useAnimatedStyle

hide toast container



const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

const toastAnimatedStyle = useAnimatedStyle(() => {
    return {
        top: toastTopPosition.value
    }
})

Add this new style to your Animated.View component styles.



<Animated.View
    style={[
        {
            padding: 20,
            position: 'absolute',
            width: '100%',
            zIndex: 1
        },
        toastAnimatedStyle
    ]}
>

Once you reload your App, you should see your toast container is now completely hidden.

Show toast on button click()

Now we will handle our button click and show our toast immediately. At this point, all we need to complete our animations is to change the value we created with useSharedValue



const showToast = () => {
    toastTopPosition.value = withTiming(40)
}

You will notice that we just used another hook from react-native-reanimated.

withTiming

This hook helps us to animate a change in our values.

Reload your app to see complete changes.

To wrap this up, we'll add a setTimeout function to our showToast function to make our toast disappear after a few seconds.



const showToast = () => {
    toastTopPosition.value = withTiming(40)

    setTimeout(() => {
        toastTopPosition.value = withTiming(-Dimensions.get('window').height)
    }, 2000);
}

Now your final code should look something like this:



import React from 'react';
import {
    SafeAreaView,
    Text,
    TouchableOpacity,
    Dimensions,
    View,
} from 'react-native';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

import {
    Header,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
    const toastTopPosition = useSharedValue(-Dimensions.get('window').height)

    const toastAnimatedStyle = useAnimatedStyle(() => {
        return {
            top: toastTopPosition.value
        }
    })

    const showToast = () => {
        toastTopPosition.value = withTiming(40)

        setTimeout(() => {
            toastTopPosition.value = withTiming(-Dimensions.get('window').height)
        }, 2000);
    }

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <Header />

            <Animated.View
                style={[
                    {
                        padding: 20,
                        position: 'absolute',
                        width: '100%',
                        zIndex: 1
                    },
                    toastAnimatedStyle
                ]}
            >
                <View
                    style={{
                        backgroundColor: 'teal',
                        padding: 10,
                        borderRadius: 4,
                    }}
                >
                    <Text style={{ color: 'white' }}>
                        This is a toast message
                    </Text>
                </View>
            </Animated.View>

            <View
                style={{
                    flex: 1,
                    backgroundColor: 'white'
                }}
            >
                <TouchableOpacity
                    style={{
                        backgroundColor: 'teal',
                        alignSelf: 'center',
                        padding: 10,
                        marginTop: 40,
                        borderRadius: 4
                    }}
                    onPress={showToast}
                >
                    <Text style={{ color: 'white' }}>
                        Show Toast
                    </Text>
                </TouchableOpacity>
            </View>
        </SafeAreaView>
    );
};

export default App;

Feel free to let me know what you think, and if this article has helped you in any way, please don't hesitate to give it a ♡ and share 👍🏽.