What Vue.js Does Better Than React - द्विभाषीय उपशीर्षक
Hello everyone, welcome back to my channel.
I've been looking into Vue.js for the past two to three weeks because it's the biggest UI framework that's not React.
And as you may know from watching this channel, I am a big time believer in React.js.
drink that Kool-Aid daily, but it's sometimes healthy to look beyond your immediate comfort zone to see what else is around there.
So UJS is the other big, very popular framework.
And I was curious, why it was so popular.
And in some ways, looking to see what VUJS does better than react.
So, after about 2-3 weeks of me doing a deep dive into VUJS and becoming maybe a novice
VUJS engineer,
because I am far from expert, but this is my novice opinion, I have a few thoughts that I figured I'd share with you.
what I actually think, quite honestly, Vue.js does better than React.
And if you're listening, you steal some of these ideas because they are.
Awesome.
Before I even delve into this,
compare contrast between Vue.js and React.js, I want to actually kind of set the stage for what these two things are.
And the easiest way to do that is just kind of taking what these web pages say at face value.
So on Vue.js's And that word is very key to kind of how UGS approaches how you use UGS.
And is compared to React, which describes it itself as a JavaScript library.
Now these these are the two big themes and it's been the source of countless debates between what is a library, what is a framework.
I think when I actually look between React and UJS and I actually think about those words in context of
these frameworks and libraries it kind of crystallizes what that actually means.
So I just want to kind of not exactly caveat what I'm
going kind of gives better context on why the decisions have been made by each of these
frameworks because the DJS is a framework and React is a library.
Also, before I delve into this, this is not trying to start a flame war, this is not trying to start, this is better, this
is worse, this is me literally just looking.
out into the ecosystem and trying to understand why is UJ has popular and what potentially can react,
learn from UJ has to make itself better.
This is in the pursuit of making things better, not to tear something down.
So that's my disclaimer.
The disclaimer out, let's get into the meat of this.
video.
One the coolest features of the UJS is their concept of a single file component.
Most components in either UJS or React require three things.
There is the template, there is the behavior, like the actual JavaScript, and then there are the styles.
And Vue.js, they have wonderfully combined all these things into one, nice developer friendly.
experience.
This is what a single file component looks like in Vue.js.
Where you have here the template,
which is what the actual component looks like, then you have a script which defines the behavior of this component.
And then you also have the style as well in the same and you can see here it says scoped and what that means is that beauty asked will actually
scope these styles to just this template so you can have as many of these components as you want,
you can have as many components as you want, all of their own p-tads, all with their own individually scoped styles.
And that is just out of the box provided by Vue.js.
And one thing I actually like that they say on here to kind of beat the naysayers to the punch,
people ask about separation of concerns.
One thing to note is that separation of concerns is not equal to separation of file.
But file is separating the concerns from data,
template, and styles, but it's just in one file, which I think is fine and I think is awesome.
You kind of already have this in a React component as well,
especially with hooks where you have all the final one function,
the behavior, which is up here with the hook, and then you have the template here.
The big missing piece with React is the style aspect,
which I'm going to actually get to in a later part of this video, so stay tuned to that.
And again,
React has libraries that help you do styles inside of React file where you can,
there's the library emotion that lets you easily inject CSS into your template or your GSM.
and that'll automatically style things, but this is again, a separate library that you have to include.
You have to know to install and then include and configure it into your React application, whereas with the UJS, it is just built in.
and by default there.
Any large UI application will inevitably need two things, a routing solution and a data state management solution.
In UJS, both of those things are first-class supported libraries by the UJS core teams.
They have their own view router, routing in large view applications.
It is officially supported by BJS,
so means that for any newcomer coming to BJS,
if they want to do routing,
there is an officially supported router that you can just use and be confident that it will be around forever.
Of course,
you can use third party routers if you want,
but by having that first party router is an extreme foot of confidence in both the sustainability of that
library but also newcomers knowing what to use.
They have many routers in React,
React Router is probably the de facto second party router I would say,
it's not first party,
it's a little bit more official than third party,
so I'll call it second party,
which is a weird thing to say,
which makes no sense,
but there you go,
but again you have to know that React Router exists to then install it in,
whereas this is on the actual official UJS docs pages to use this router,
and likewise for a large state management, has the library view X to handle large centralized state management for UJS.
It's a first party maintained library, again, for newcomers.
It makes it a very easy choice to know what to use when you're actually having to deal with state management.
It's heavily inside of Redux.
which, again, in the React Land, you use Redux for that or Flutter, and Recoil JS is another option,
but it's all outside of the Vue.js core.
To be fair, Vuex and Vue Router are not actually bundled into Vue themselves.
They're still first party-maintained libraries, and by having that voter confidence is just great for newcomers from the field.
And I would love to see something like that react to have first party answers for these two highly common issues that every application has,
routing and state management.
Here is a big thing that Vue.js does better than react.
Here's the Vue.js homepage.
If I go to docs and click on this little link called style guide, this is the official style guide for Vue specific code.
What this means is that if you are just coming to Vue.js
and you want to know the best way to write Vue.js applications, what is the best style for certain questions?
How should you do multi-war component names?
How should you use component files?
There is this style guide that answers all of those questions.
just for free, online, maintained view it themselves, this is Why doesn't React have it?
I want React to have this.
There are so many idioms and conventions with the React land, and you could argue that it's good to have that as well.
But newcomers to React,
that is horrendously overwhelming to know,
should I have my component names be camel case,
kabob case,
snake case,
all these questions that you have when you're starting an application,
when you are a order of words in component names, just to make different UGS applications more specific.
from one code base to another is immensely valuable.
That was the whole value proposition of Golang with the go format, making it so that every go application content aside is styled the same.
So that the amount of effort to get into reading the code is as small as possible.
This style guide is absolutely incredible.
And think one of the secret weapons of Vue.js to make Vue applications as consistent and proper as possible.
And then, of course, you know, you can automate this with ESLint rules like, and React has that as well, but there's no official...
The way official React ESLint rules is for hooks to make React hooks.
But this just goes way beyond that, and it is fan-fricking-tastic.
I told you I'd talk about styles, and here I am.
Vue.js has built-in support for class and styles.
So means is that if you want, so this requires some Vue.js knowledge, but essentially it's saying that...
that this essentially Vue.js has the class, the react class names library built in into the framework itself, which is awesome.
So if you have a variable called,
where is it, is active, if that variable is true, then view will apply the active class name to this div, to this class binary.
So again, if you have isactive is true.
So given that you have a static class name like this,
static, you have this object of classes where these variables is active, has error, these are the class names.
If is active is true, then it will render this static active built into Vue.js.
By default, for free, no coupons required.
React, you have to know that this class names library exists.
I don't think it's referenced on the React Docs pages.
It's an awesome library,
but in some ways might be nice to have,
not exactly built in by default, but it's such a common concern that there should be some attention paid to this.
And that's kind of like a theme that I saw when I was reading through BJS,
is that it does whatever it can to make your life as a developer easier.
And also again to reference my earlier point,
that's why the UGS is a framework where it's react as a library, which has its own trade-offs.
Also what's really cool about the UGS is it has support for inline styles,
so if you want to just put inline styles just like React you can do that,
but where the UGS takes it up a notch is that if you have inline styles,
view will automatically add vendor prefixes for stylists that require it.
Because again it can,
because it has its own template syntax, it knows about this and it can do that, and that is really really cool.
Here's a style difference between Vue.js and React that I actually found that I liked Vue.js is a little bit better.
In React you have children as a prop to pass content inside of a component.
So you have this component called fancy border that is injecting props.children,
you can use the component fancy border to inject content inside of it.
And that is pretty much it.
case that you have, you want to kind of put things inside of there.
If you want to have different places to put children,
the react solution is to just add more props,
because everything is a prop and react, which is both very simple, but also maybe too simple.
So you have here the component split pane, we have props left, props right.
and you'd use it here, split plane with left and right.
That's fine, that's good.
Feels kind of like a hack, but it kind of just fits in the hole.
idea of React whereas with view they use these things called slots which is
actually inspired by the web component draft spec which is kind of cool web
components is kind of the official DJS React solution that has never happened not gonna delve into that whole story But essentially,
if you have a like this,
where you have,
where this is your custom component in view,
you've got content inside of it, the template that you have would just put the slot element to replace the app to do content here.
So would render what it would do here.
So this is very similar to, react.
However, where I think Vue kicks up a notch is when you have those multiple slot situations.
So if you have named slots, so here we have a where we're going to go here.
Here is our And we have a header, main and footer, they have what's called a named slot.
So you can use this slot element multiple times and then assign a name to different areas.
And then when you want to put content inside of it,
So, for example, this component is called base layout inside of it, you would say template
the slot header, the slot is a directive in view for doing kind of behaviors in the template itself.
I'm not going to delve into it right now, but you have header default and footer.
And that's how it actually renders the content here.
And also what I like about VGS is that they have the raw verbose name of functionalities.
We also have
So instead of having do that v.bash slot you can just use the hash symbol to
reference where those places are going but even further you can omit I believe the default if you want.
It's the default one but you have here template default the template header template default and template footer saying where content should show up,
which I think is a little bit less crowded than having to just inject everything into a component prop itself.
Different ways of solving the same thing.
I think Vue.js is a little bit more Organomic if I could say but it was wrong,
but I like Vue.js is maybe just a little bit more Okay,
now we're delving into the deep line of UGS and talking some real Vue.js specific things So to start off things you have a brief background.
All you react engineers watching this.
I Vue.js has a template language for writing Which is similar to JSX,
but also not at all You do interpolation of content with these double braces
so much you must stash JS if you use those in the past and
Inside of view templates are things called directives and they are a they're a special
you prefix with v- and it's a way to reactively apply side effects to the DOM when the value of its expression changes.
So in this case this directive is v-if.
So if the scene variable is true then you would see this element.
If it's false then VGS will remove this entire element.
Of course in React you would just kind of do plain JavaScript where you'd say scene and then the component on
the right hand side but directives let you kind of express things in a different
way and you can actually see a whole list of directives on their documentation.
This is kind of the entire list of directives, text, so can read it online at your own leisure.
But with directives, the cool thing here that I love with VJS is that there's such things as directive modifiers.
And these are almost shortcuts for hyper-common tasks you have to do when writing UI applications.
So, there's event modifiers, so if you have a click, a in the page where you can, so here's the example over here.
There is the von directive where you can say on click, call this method.
So this is a very simple, with react, it would just be on click.
But you also have modifiers.
So for example, there's this whole list of modifiers, you can assign to these click events.
to just add all this functionality for free.
So there's the dot stop modifier to call stop propagation prevent to call prevent default, so on and so on.
There's the once modifier to just trigger the event once.
And just all these, what else is there?
There's modifiers for the VModel directive to make the number be type.
So you could,
if you have an input element and you have an age variable,
you bind that to,
you can bind this input to the age variable and make sure that it's typecast to a number and not a string.
And you will just handle that for you.
There's also key modifiers, so for example on input, on key up event, when the enter key is hit, call the submit event.
Like this is just built in for you just for free, which makes it so easy just to build a UI applications.
Again, it's not hard to this and react, but to have this built in to view is just a very, very nice experience.
And highlights the difference with view is the framework and react is a library.
Something else very cool is the VModel directive.
There's a way to make two-way data bindings between input, text area, and select elements.
And what's really cool is model directive is that it abstracts away how you actually set values on these input elements.
So text and text area, use the value property for checkboxes, it uses checked, and for select fields, it uses value and the change event.
Just You don't have to worry about implementation details.
It's just done for you by the model, which you could argue is good and bad, but it's also just really pragmatic.
You don't have to worry about things at all.
Things just work as you expect.
Use the model in the variable and you're good to go.
And it wouldn't be a framework if you couldn't extend it, which you can do with custom directives with you.
isn't really what you recommend you do.
It that the primary form of code re-use and abstraction is components.
However, if you want to make your own custom directives, you can.
And I think a great example of this is this custom focus directive.
So if you want to have an input element, be automatically focused on mount.
You can make this directive.
that do that for you.
So can just use input, be focused, this custom directive, and on page load, it'll automatically just focus that input for you.
Which again,
you can do with React,
with a hook,
you can make a custom input component, kind of wrap like a auto focus input component, which is fine, but this is kind of clean.
We say that this is the input element that should be focused, and you can use it wherever you want in your entire application.
So, an alternative way of doing things,
which,
Exactly, strictly better, but is also maybe a little bit more cleaner in more instances than I would actually expect than just making a wrapper component would be.
And last but not least,
something that is very cool about Vue.js is that in Vue3, they actually rewrote Vue from the ground up in TypeScript.
Just like with React, they re-did all of React and React 16 with fiber, Vue is re-written.
itself which means that the TypeScript support is first-party so to speak
because it's directly provided by the code itself and it's not a huge thing
like React TypeScript support is fine but in terms of you know the community,
the community is definitely shifting more towards TypeScript and having this be written in TypeScript I think it's just kind of it's a fun little like easy win over React,
honestly in my opinion.
And with that is my very long list of what Vue.js does better than React.
I think in some ways React is it advantage to view because it's just it's just a library, although very on commissing one.
And if it wasn't for the community support of React, I think that this comparison would actually be very uneven.
I think a lot of the ways that React and View are in parity is because...
support holding up react but again that's because it's a library it's trying to
just focus on UI and ignore everything else which is fine but I feel like at
this point in time You kind of have to have all these other parts,
at least be officially, you know, recognized by React or something more.
Right now, the hands-off approach is just way too hands-off.
There needs to be a little bit more love there, for sure.
But UGS is open arms embracing its role as a framework and doing everything it can to help you when making a UI application.
Single components.
support library style,
the style guide,
oh my gosh,
built in support for styling,
slots, directive to make easy tasks easy, and also written in TypeScript, it's just frameworks
can do more than libraries,
just can,
but you know it's amazing to see how their popularity is pretty,
you React is probably still more popular,
but it's been around for longer, but it's kind of Interesting to see what each strengths and weaknesses both of these things have.
That's my video.
Hopefully you learned a few things about Vue.js you haven't even know about before.
I certainly did.
Some of these things really blew my mind and I'm curious to hear what gets you excited about Vue.js.
I'm looking forward to more videos coming to catch you every week.
Subscribe if you aren't already a subscriber to see more videos like these.
I'll catch you in the next video.
Till then...
Stay happy.
Bye.
अधिक सुविधाओं को खोलें
ट्रांसी एक्सटेंशन स्थापित करें और अधिक सुविधाओं को खोलें, जैसे कि AI उपशीर्षक, AI शब्द परिभाषा, AI व्याकरण विश्लेषण, AI बोलना, आदि।
मुख्य वीडियो प्लेटफ़ॉर्म के साथ संगत
Trancy न केवल YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera जैसे प्लेटफ़ॉर्मों के लिए द्विभाषीय उपशीर्षक समर्थन प्रदान करता है, बल्कि नियमित वेब पृष्ठों के लिए शब्द / वाक्य अनुवाद, पूर्ण-पाठ तार्किक अनुवाद और अन्य सुविधाएं भी प्रदान करता है। यह एक सच्चा सभी-एक भाषा सीखने का सहायक है।
सभी प्लेटफ़ॉर्म ब्राउज़र का समर्थन
Trancy सभी प्लेटफ़ॉर्म ब्राउज़र का समर्थन करता है, इसमें iOS Safari ब्राउज़र एक्सटेंशन भी शामिल है।
विभिन्न दृश्य मोड
सारांश, पठन, मिश्रित और अन्य दृश्य मोडों का समर्थन करता है ताकि एक समग्र द्विभाषीय अनुभव हो सके।
विभिन्न अभ्यास मोड
वाक्य लेखन, वाणीक मूल्यांकन, बहुविकल्पी, वाक्य लेखन और अन्य अभ्यास मोडों का समर्थन करता है।
AI वीडियो सारांश
वीडियो को संक्षेप में देखने और महत्वपूर्ण सामग्री को तेजी से समझने के लिए OpenAI का उपयोग करें।
AI उपशीर्षक
केवल 3-5 मिनट में सटीक और तेजी से YouTube AI उपशीर्षक उत्पन्न करें।
AI शब्द परिभाषा
उपशीर्षक में शब्दों पर टैप करके परिभाषा देखें, AI-संचालित परिभाषाओं के साथ।
AI व्याकरण विश्लेषण
वाक्य व्याकरण का विश्लेषण करें ताकि वाक्यार्थ को तेजी से समझें और कठिन व्याकरण बिंदुओं को संभालें।
अधिक वेब सुविधाएं
द्विभाषीय वीडियो उपशीर्षक के अलावा, Trancy वेब पृष्ठों के लिए शब्द अनुवाद और पूर्ण-पाठ अनुवाद भी प्रदान करता है।