App Dir & Tailwind SoC questions

[strataga]

Great project! A lot of work went into this.

• Why not use the new app directory?
• Why not use a tailwind ui library like Chakra? The problem with base tailwind is the tsx can be too crowded with tailwind classes.

[bmstefanski]

Hi, thanks, great questions!

Why not use the new app directory?

This project allows you to use a new app directory and it is something that we recommend if you find benefits from using it, e.g. performance or technology debt. We only have one page here which is a very simple landing page, so we decided it doesn't matter if it's in Pages Router or App Directory Router, but since there are more and more requests for the app directory, I am sure we will move it very soon. It won't be a big change, but rather one file change.

Why not use a tailwind ui library like Chakra?

We worked with ChakraUI before the first stable version was released and it is indeed great and helps a lot, but the overhead that it introduces when it comes to the bundle size and the overall performance is something that moved us in the direction of ditching it from most of the projects. It doesn't support tailwind, so that's another drawback and it is not as accessible as Radix UI for example - which is also easier to style.

The problem with base tailwind is the tsx can be too crowded with tailwind classes.

This is a great point and honestly, this is why I didn't like Tailwind for the past 2 years, but after working with it for quite a while I figured that the lack of SoC between markup and styles doesn't make any negative difference in development time or DX. This might be to the fact that we always use cva.style to separate more generic components and make them a part of design system

The lack of SoC was also a big drawback of React when it was first released and now, a few years later, it is doing great in extremely big and advanced projects even though it still mixes app the state layer with the markup layer. It helps deliver business value really fast and good and also has great DX - just like Tailwind! :)

Thanks and all best!

[strataga]

Understood. Thanks for the feedback.

…

On Tue, May 23, 2023 at 10:29 AM Bart Stefanski ***@***.***> wrote: Hi, thanks, great questions! Why not use the new app directory? This project allows you to use a new app directory and it is something that we recommend if you find benefits from using it, e.g. performance or technology debt. We only have one page here which is a very simple landing page, so we decided it doesn't matter if it's in Pages Router or App Directory Router, but since there are more and more requests for the app directory, I am sure we will move it very soon. It won't be a big change, but rather one file change. Why not use a tailwind ui library like Chakra? We worked with ChakraUI before the first stable version was released and it is indeed great and helps a lot, but the overhead that it introduces when it comes to the bundle size and the overall performance is something that moved us in the direction of ditching it from most of the projects. It doesn't support tailwind, so that's another drawback and it is not as accessible as Radix UI for example - which is also easier to style. The problem with base tailwind is the tsx can be too crowded with tailwind classes. This is a great point and honestly, this is why I didn't like Tailwind for the past 2 years, but after working with it for quite a while I figured that the lack of SoC between markup and styles doesn't make any negative difference in development time or DX. This might be to the fact that we always use *cva.style <http://cva.style/>* to separate more generic components and make them a part of design system The lack of SoC was also a big drawback of React when it was first released and now, a few years later, it is doing great in extremely big and advanced projects even though it still mixes app the state layer with the markup layer. It helps delivering business value really fast and good and also has great DX - just like Tailwind! :) Thanks and all best! — Reply to this email directly, view it on GitHub <#32 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACTGAMAPOH3I2IZ6RNW6EODXHTJUFANCNFSM6AAAAAAYMBWOYA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[0xRowdy]

One more question.
Why did you decide to stick with yarn instead of pnpm?

[bmstefanski]

@0xRowdy

One more question.
Why did you decide to stick with yarn instead of pnpm?

Yarn is battle-tested and still fast (not as fast as pnpm, but good enough), its main drawback is that it takes a lot of disk space, but that's not a worry for most projects. I personally like pnpm and use it in smaller/personal projects, but using it with mono repo tools like Turborepo or lerna can really be hard or even impossible sometimes because of its immaturity.

So to sum it up: having a mature package manager that will work with every library and tool was more important than speed benefits.

[rharkor]

Great project! A lot of work went into this.

• Why not use the new app directory?
• Why not use a tailwind ui library like Chakra? The problem with base tailwind is the tsx can be too crowded with tailwind classes.

Hy @appjitsu , I've forked this project and included a lot of cool features like the app directory, shadcn components, authentication and more. If you want to give a look https://github.com/rharkor/next-boilerplate

[bmstefanski]

Updated to app directory, closing.