Two Ways to Write Cleaner Components

[@alexmorris5019]

This is adding indirection, declarative templates are so much easier to read. Imagine if there was an easy way of applying styles to all anchor tags inside a given div. Oh, wait..

[@GoWokeGoBroke1]

Agreed. This is terrible. In my case I would definitely not approve this PR and demand a rewrite

[@LosfrogerX]

Yeah, this could be solved with some css, and if you're using tailwind, maybe with the @apply thing to get your tailwind classes

[@ScimonInTheSkies]

Could you elaborate maybe on functional components having props, using typescript (even with setting optional and default props)? :)

[@alnahian2003]

I kinda feel guilty of using for loops everywhere now 😅 Nice tips, Jake

Does Tailwind compiler pick up these classes in the render function?

[@JaimitoAleman]

Without fail ALWAYS the GREATEST CONTENT @matt 🙂😎👍

[@shareefhassan8197]

I really love the render function approach, are there any reason why it maybe a bad thing? i feel like they wouldn't benefit from the same compile time optimizations that vue does unlike normal components

[@kasopejohnson3831]

Maybe not but if it's used for small content components like it is here it probably doesn't need much optimisation. It's just returning vnodes

[@RedsTom_]

For your own sanity, I recommend you use tsx or jsx to return content in these functional components instead of the render method

[@plukerpluck]

First video I'm seeing from you, but this seems like some real good content! I've just started messing with tailwind myself, and it's clear to me that the entire concept of tailwind feels based around the fact that we can remove repetition though alternative methods (components and loops) and because of that we can "inline" our styles again. Yet all examples never seem to take advantage of that! I've never really used the render function, so seeing it used as a way to make tailwind even better is great! It makes perfect sense for those tiny components where it feels overkill to create a new file. Will definitely be checking out your other videos.

[@RedsTom_]

Imho the render function is a bit weird. I personally prefer using tsx or jsx. In this way, functional components really feel like you're using react 😂. Speaking of tailwind, this is clearly a bad framework in my opinion as you're doing all your CSS in the classes instead of in the stylesheets...

[@plukerpluck]

@@RedsTom_ The question you should be asking about tailwind is this. Why use stylesheets instead of inline styles? What is wrong with inline styles? Because that's the purpose of tailwind. Tailwind says "inline styles are cool but a bit too verbose and not powerful enough". Think of it like that, and perhaps you'll see why some people love it.

[@RedsTom_]

@@plukerpluck because inline styles are pure shit. You can't reuse the same on two elements without rewriting the whole thing, it's horrible to determine what belongs where, it's a pure nightmare to debug and more important : it's ugly as fuck. Stylesheets weren't invented for pure pleasure but because they are necessary. Return to html4 if you want to use inline style, you'll be happy with what existed

[@paulvarner9570]

@@RedsTom_ Tailwind is great for ameliorating cognitive shifting during development. You can then extract it to sass, assign whatever naming conventions you want, and clean up your components when closer to production.

[@paulvarner9570]

@@BeFourCM 'Reusing Styles' on TailwindCSS docs. If extracting is done prematurely during development, it just adds confusion; but when components are fairly locked in, then extract. If you need to override a style down the road, then pass to component as attribute.

[@mjbates7]

How would you go about doing functional components with typescript? Ie what types does the function need to take etc. Be useful to see how to do it with both js and TS. Cheers

[@RedsTom_]

Use tsx as the lang and return html. It will look a lot like react and will be really apreciable to use

[@arthur10renato]

Thank you for one more awesome video!

[@LearnVue]

thanks for watching

[@ДенисКуликов-м3о]

Vue 3 имеет дополнительную оптимизацию шаблонов в отличии от функций рендеринга. (translate) Vue 3 has additional template optimizations as opposed to render functions.

[@brunolopes_]

Sounds good! But decrease the legibility. Like all things in T.I, it's a tradeoff.

[@MuhammadM1998]

This is nice. Thanks for the great work. Please consider doing more Nuxt content now it's stable (maybe a seperate channel if possible?)

[@LearnVue]

have some nuxt content coming soon on this channel!

[@MuhammadM1998]

@@LearnVue This is great your content is amazing much thanks 🙏

[@starlederer]

I wonder why you didn't talk about the simplest and most obvious method: put these classes in a string and reuse it

[@JoachimEckerlin]

You mean like having a single class and adding css properties to it? 😅

[@whaaaley3810]

Functional components is the primary reason I love using JSX in Vue rather than templates.

[@kirillvoloshin2065]

looks wild from a react dev perspective

[@kevinison3740]

Good videos... background music is distracting...

[@iq240-1]

Awesome 👍

[@fayazara]

Love your content

[@RedsTom_]

Best way to clean up tailwind mess : don't use tailwind

[@cotneit]

Just don't overabstract things, one of the selling points of Tailwind is how easy it is to make changes, needless abstractions mess with that

[@Mark73]

Why would nested loops be a red flag?

[@СергейКиршевский]

Or... you could just use @apply

[@RedsTom_]

Or just write plain css

[@christianmartinez2179]

Every time I see someone use tailwind just to end up pretty much creating a class of classes I get so fucking triggered, don't use tailwind, use normal css and stop adding unnecessarily complicated layers of abstraction just because you feel obligated to use that library

[@Natewhar]

this is literally firesihp with a different voice

[@anj000]

I really despise render function and jsx way of doing this. It is making code so much more complicated and hard to follow.

[@arturpendrag0n270]

Can you please change your background music. I feel like its distracting from the video at least for me and the sounds are kind of stress inducing.

[@Ab4kus]

If barely audible background piano music induces stress, don't you think that's something you have to deal with, instead of the person playing it?

[@arturpendrag0n270]

@@Ab4kus it is barely audible for you but imagine someone with ok headphones that only listens it gets distracting if you are trying to understand with that annoying background piano. Also if you think barely audible sounds aren't stress inducing try looking into the science behind scary movies music and soundtracks.

[@ennioVisco]

Honestly, better but: 1) you are likely trading worse readability and performances with less repetition (not the best of the trade-offs) 2) CSS/SCSS is still much clearer and can allow developers to define their own "language", it's not that great that we all force ourselves at accepting the assumptions the tailwind people made

[@TheMarkDrake]

The easiest thing to do is not write HTML like this - including dropping the utility-litter-framework (whether it's Tailwind, Bootstrap, or another framework). Write classes via CSS (or SASS) to accompany your web components. If you can't go it alone, leverage the utility-litter-frameworks via SCSS if you have to! There are some good things about the CSS frameworks, but it's best to use only the needed parts.

[@pellyryu2344]

Im happy with tons of duplication of tailwindcss and dont want go back to my past days believing css could be separated from html or js at all 😊

[@plukerpluck]

The whole purpose of tailwind is the realization that CSS separated from HTML is actually really hard to maintain. You need to keep this deep context of where classes are used and how they all interact, and you have to jump back and forth between CSS and HTML to work out what's going on. There's a reason there's so many different "best practices" when it comes to how to handle nested divs and their interactions. Instead we recognise that we can (and should) be creating components for reusable HTML blocks. That's the real way to reduce duplication. And at that point they're effectively solving the same things that functions do in a programming language. And if we're using components properly, then why can't we go back to using inline styles? Why can't we couple our style to the HTML (which is, in practice, always heavily coupled anyway) Now, of course, there are edge cases. I wouldn't be against just writing a custom class for these tiny links as an exception. That's especially true given that you can use `@apply` to actually use the tailwind classes in your custom CSS.

[@RedsTom_]

@@plukerpluck but with Vue, CSS is with html, just a couple lines underneath. No need for a heavy framework for the developer (because yes, tailwind is ultra heavy visually) to write and maintain CSS. And if you are too bad to do this, quit, it's not your job to write frontend uis.

[@IanJamieson]

I f*cking hate tailwind. I keep seeing people littering front end code with this utility class mess. Create components and your styles. Learn to create your own design system. It's bootstrap 2022.

[@plukerpluck]

@@IanJamieson The whole point of tailwind is simply the idea that "inline styles are actually a good idea, but wouldn't it be great if we could make them practical". It's not really similar to bootstrap at all. And when your CSS classes are so simple, it makes sense for everyone to use the same system. That way anyone can glance at your HTML and see what's up. I find it much easier to maintain in practice vs having to context switch between HTML and CSS on a code base you're not familiar with. The only time I'm a little apprehensive about it is if you're running many media queries. But even then you could write regular CSS using `@apply` to use the tailwind classes there as well, allowing you to mix and match if need be.

[@i3looi2]

Not the best case scenario. You simply waste time by compressing all that (mostly static html) into a component. Good practice for own projects and such, but not practical from productivity pov.