DEV Community: Phuc Le

📝 Migrating from npm to pnpm: A Journey of Decisions and Experiences 🚀

Phuc Le — Sun, 30 Jul 2023 15:52:07 +0000

Are you ready to embark on a journey from npm to pnpm? 🛤️ If you've been contemplating this migration, it's essential to understand that the process might vary depending on the complexity of your project. I read many articles migration from npm to pnpm but it is mostly surface-level guidance. Let's dive into some important decisions and share experiences that can make this transition smoother for you 😊.

1. Choosing the Right Time for Migration ⏰

The first and most crucial decision you need to make is to select the perfect time for the migration. If your project is large and involves multiple developers, it's best to plan the migration during a time of reduced development activity or during a dedicated sprint. Why?

Folder structure changes during migration can lead to conflicts if parallel development is ongoing.
Even if you use pnpm import to generate a pnpm-lock.yaml from another package manager's lockfile, issues may still arise. Ensuring all dependencies are the same can be tricky.
You may need time to handle regressions and have a backup plan if things go wrong.

Choosing the right time for migration will make your life easier, reduce pressure, and minimize potential bugs. 🗓️

2. Understanding the Root Cause and Deep Diving into Issues 🕵️‍♂️

During migration, you might encounter unexpected problems, such as unit tests failing even when all dependencies and libraries seem fine. In such situations, it's essential to resist the temptation to simply fix the failing tests. Instead, take the time to investigate the root cause.

For example, I faced unit test failures after migrating. After some research, I discovered that an incompatible node version in my updated pnpm version was affecting the reactivity of Vue.js. Fixing the tests alone wouldn't have addressed the real problem, and the actual features of the application wouldn't have worked correctly either. Upgrading the Vue.js library along with pnpm resolved the issue and improved overall performance. 🌱

3. Proper Regression Testing with Backup Plans 🛡️

Once you are confident with the migration through your own testing, it's time for comprehensive regression testing with a solid backup plan.

Changing the package manager can introduce issues here and there due to slight differences in the way each package manager operates. So, instead of merging your migration branch into the master immediately, set up a sandbox environment and point it to the migration branch. Observe and test it over a specific timeframe, similar to your production setup. This way, you can easily revert to the current master if any unexpected problems arise. 🔄

Although maintaining two branches might require extra effort, it will be worth it in the long run if you've chosen the right time for migration as advised earlier.

4. And more...
In real-world scenarios, you may also need to address related components such as Storybook, TypeScript, and CI/CD configurations. However, three decisions above are the most important you might need to think before starting your journey from npm to pnpm.

Conclusion 🎉

Migrating from npm to pnpm is indeed an adventure, and you're right to expect more than just surface-level guidance. Understanding the complexity of your project, choosing the right time for migration, investigating compatibility issues, conducting comprehensive testing, and considering the full scope are all critical steps that contribute to a successful migration.

Don't be discouraged by potential challenges; instead, embrace the journey with a proactive and thorough approach. By doing so, you'll gain valuable experience and insights that will help you navigate future migrations with confidence. Happy migrating! 🚀💻

Why React Needs Keys, Why It Matters

Phuc Le — Thu, 22 Jul 2021 01:04:57 +0000

Everyone uses React library all know that whenever we use a map to render, we need to pass the key. Otherwise, React will "yell" at us like this.

Oh nooo 😱😱, we need to pass the key now and most of the time we will pass like this.

list.map((l, idx) => {
    return (
        <div key={idx}>
            <span>{l}</span>
        </div>
    )
})

Problem solved ✅, no more warning 😎

But...😢😢

Life is not a dream

Let jump into an example of why "Like is not a dream"

Our manager gives us a task to create a dynamic Form with multiple Input fields, the user is able to enter their information and allow us to add or delete Input.

We already know how to render the map in React library ✅
We already know how to use useState in React Hook with an array ✅
We also know method push/splice on array ✅

Easy one lah 😎...

Without the beat, we set up our application

export default function App() {
const [list, setList] = useState([]);

const handleDelete = (idx) => {
    list.splice(idx, 1);
    setList([...list]);
};

const handleAdd = () => {
    list.push(`Information ${list.length + 1}`);
    setList([...list]);
};

const handleChange = (idx, l) => {
    list[idx] = l;
    setList([...list]);
};

return (
    <div className="App">
        {list.map((l, idx) => {
            return (
                <div key={idx}>
                    {FancyComponent(l, handleChange, idx)}
                    <button onClick={() => handleDelete(idx)}>Delete</button>
                </div>
            );
        })}
        <button onClick={() => handleAdd()}>Add</button>
    </div>
    );
}

const FancyComponent = (l, handleChange, idx) => {
    const onChange = (e) => {
        e.preventDefault();
        handleChange(idx, e.currentTarget.value);
    };
   
    return <input defaultValue={l} onChange={(e) => onChange(e)} />;
}

Here is Playground

Done!!! Feel super awesome 😁💪, it works like charm. We pass to our manager, our manager like 🤩😍

A few moment later, our manager comes back again. We thought he would asking for the beer to appreciate but he said he found a bug 😱😭. The deletion didn't work as expected 🥺

After he modified Information 3 to Information 323, deleted this input but the application deleted Information 4, Information 5

We like whattt 😱😱😱, how it could be possible!!!, it just only 50 lines of codes...

After put the console.log everywhere, googling, StackOverflow... We found the problem is the index we passed before is changed it makes ReactJS confused and render incorrect.

And if we don't use idx anymore, use content instead. Problem solved! ✅

<div className="App">
    {list.map((l, idx) => {
        return (
            <div key={l}>
                {FancyComponent(l, handleChange, idx)}
                <button onClick={() => handleDelete(idx)}>Delete</button>
            </div>
         );
     })}
    <button onClick={() => handleAdd()}>Add</button>
</div<

PS: Still has an issue, waiting for anyone to figure it out. 😉

So now you might wonder that it is React's bug?!. No, it is not React's bug. Let's deep dive into it

If you noticed that when we change the value of the input, it works perfectly but deleting didn't work well because "changing" and "moving" state it is very different. When "moving" React needs to know what key of component is which we passed as an index of the array and deleting is changing the index hence it makes ReactJS confused. So why React don't make the by itself.

Dan's explanation:

React can’t make up a good key itself. Only you know how your data is structured and whether two circles in two renders are “the same” circle conceptually (even if all of its data changed) or not. Usually, you’d use an ID generated during data creation. Such as from a databaseReact can’t make up a good key itself. Only you know how your data is structured and whether two circles in two renders are “the same” circle conceptually (even if all of its data changed) or not. Usually, you’d use an ID generated during data creation. Such as from a database

It is 100% true, as an example, we go through above that it is a business requirement, as library React doesn't know what the key should be which only us, developers created those components.

What happens if you pass a random key every time?

Well, you’re telling React that circles are never the same between renders. So if you have some state inside of them, it will be lost after every re-render. React will destroy and recreate every circle because you told it to.

We will lose the "beauty" of ReactJS, isn't it? I believe no one wants to re-render every single time unless you have special requirements.

You might wonder why this topic pops up now, the concept of Keys has been there for a long time. ReactJS core team has started to built-in deep support Animation so Keys will play a big role there and in the future.

Bonus:

ReactJS Core will update documentation about keys for more details.
You might have awake of ReactJS 18 Alpha out and you also can follow ReactJS 18 working group to follow what the changes and new APIs are.
React 18: https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
React 18 Working Group: https://github.com/reactwg/react-18 Hope you enjoy the article 😊

The article is inspired by Dan Abramov https://twitter.com/dan_abramov/status/1415279090446204929

How unit tests help you onboard existing project

Phuc Le — Sun, 06 Jun 2021 14:14:50 +0000

There Is always a time when you will join a project that was built a while ago, especially if you just join a new company or new organisation.

Besides documents, training ... I would suggest starting to write unit tests is one of my favourite approaches.

Benefits to write unit tests on existing source code:

Good understanding of the components is based on how the project is built which builds up your confidence.
Understand state management, data flow which you need to pass correctly by mocking the store when you do unit tests for pages, screens.
Understand and learn the coding style and from your team members
It might be one of your KPI for first month which it is good start to help improve code quantity

Especially writing unit tests when you join a big organisation with huge code on many layers, which nowadays design systems, composition components are becoming popular, you will realise that most of the time we are over-engineering and unnecessary layers.

Gook luck :)