All language subtitles for 2. Why Material-UI

Welcome back.

In this lecture we're going to talk about why exactly we're learning material UI and what it really

does for us.

So I'm sure that you have your own reasons as to why you're interested in learning this but I just really

wanted to dive into why I think it's so important and why I chose it over other libraries that are out

there so I think they all react to developers run into a similar problem along their learning process.

You know after you've learned react and you've learned redux and you understand components and stay

and props and J.S. X and you understand how all these things fit together to build an application well

then you want to start making your own applications.

And I think they pretty quickly when you start doing that you realize how difficult it is to create

consistent components the look and feel the same.

Not only across a single application but across all of the applications that you build.

You know you don't want to be going in and having to redo the same style over and over or having to

go in and change variables everywhere when you want to reuse one piece of code from one project to the

next.

You also always want to live by that programmers rule of not reinventing the wheel and you know that

every application out there has a lot of base features that are going to end up being the same in functionality

relatively you know like your navigation your header your footer buttons things like that.

The every application is going to need and that you're sure other people out there have obviously had

to build before.

So you know that there has to be some better solution out there than doing it on your own.

And thankfully there is.

So the solution to that would be to have a set of standardized components all with built in functionality

and styles that you could call upon from the beginning of your project to get everything laid out very

easily and then go in and customize things specific to the situation that your project calls for.

So I'm going to walk you through some of the solutions to this problem.

Some of the libraries that are out there and why I think material UI is the best most powerful yet least

understood Out of all of them so the first option is probably the one that you've heard most about bootstrap

and react bootstrap.

So this is actually the oldest of the libraries that I'm going to show you.

And it was one of the first to really try and solve this consistency problem by providing a suite of

pre styled HCM UML elements that you could access via classes.

So that really did well for a while and kind of became the standard until some of these other solutions

came around before react was even out actually.

So react bootstrap is a library.

The essentially ports the original bootstrap library by taking those classes they had developed and

turning them into react components.

Now they did a really good job of this.

But I think that is still misses out on some of the functionality.

They could be gained from a reactive specific library.

And I also think that it is a little bit restrictive.

I think that it is not necessarily as easy to customize as some of these other solutions.

And I think that the core set of just providing a bunch of components to you is essentially all it does.

And I think the out of a library like what we're looking for there's a lot of other helpful things that

they can do which material UI does provide that I'll get into that will show you why you would really

want to look for that over something as basic as react bootstrap.

So the second option is one you may or may not have heard of semantic UI and semantic UI react.

This is another library attempting to solve the problem by providing a set of pre styled elements but

it seeks to add a little bit extra functionality by also including a theming system that makes it a

little easier to centralize some of your styles and is definitely a step up from just having all the

components kind of isolated.

The one thing that I don't really like about semantic UI as much is it again is ported for react.

So you see we have the semantic UI react library that was brought over from the original.

And again I just think the when you do this you're missing out on some of the innovation and features

and functionality that I think could really come out of a completely react specific system.

Another problem with that though is that that styling system actually isn't react specific.

So they're theming that they have it doesn't include any specific react optimizations or any you know

considerations that might have made it easier and more applicable to react projects.

And on the semantic UI react documentation it says that you just have to rely on the system from the

base library.

And so that's something that I don't really like is that you are completely dependent on that main library

for new features.

And since it isn't a react specific library it's not as likely that you're going to see as much of a

push for new react specific features or taking advantage of new react developments.

And so you're kind of limited here.

I think when you're relying on that duality between the original and the react version in the library.

And to me that just seems to show that there has to be a better solution out there.

And as you can probably expect there is so that brings us to the one you've all been waiting for material

you.

I now you can tell that this is the best library because the logo is by far the coolest.

But in all seriousness I really have fallen in love with this library and I really think that you're

going to as well I think first and foremost the reason for that is the material UI was built explicitly

for and only for react.

J Yes I think that that really allowed the developers to innovate and to think through every possible

situation which might arise and really optimize that to create a streamlined cohesive experience that

I really just think beats out any of the other similar libraries another great feature about material

UI is its flexibility and how it's able to allow you to really customize everything and every sort of

way specifically to how you want it and how you need it.

Whereas some of the other libraries I feel like it maybe wasn't as clear or as easy to customize the

styles that they already had and I felt maybe a little more trapped into their defaults with material

UI.

I never felt that once and I really feel like you have the complete power to manipulate every aspect

of it in the ways that you need to.

And that's really really powerful for a library like this.

Now what I find really interesting is how they're able to provide that extreme flexibility for you while

at the same time maintaining consistency throughout your application.

So they provide all those default components and functionality for you but they enable you to really

customize it without breaking the flow of everything else.

And more than that they allow you to add to it and to redirect that flow and to really you know extend

the consistency of your own designs through their library without being restrictive.

And that really is amazing that they've been able to pull that off so well and was something I continuously

appreciated as I was building these projects material UI is also very actively developed.

I think that the latest commit to the project was actually only a few days from when I was recording

this and they're constantly adding features and releasing updates and fixing bugs and doing all of the

upkeep the a good library should have going on what I really like about this too is since they are so

active they're able to respond to updates in react like say hooks and create features and functionality

around that specifically that enabled things that definitely aren't possible in other libraries.

If you're not react specific and that is just really impressive and shows the commitment of the authors

who have created this so finally one of the last reasons that really pushed me to material UI over other

libraries was its advanced features support.

So not only is it a library giving you an extensive set of components priest style and functional for

you to build on and not only is it a library that provides a great seeming solution allowing you to

centralize your styles and modify individual components as necessary but it also provides a framework

for building on even more advanced features outside the scope of normal design.

So a great example of that is server side rendering which we are going to get into in this course and

material UI is built specifically to work with server side rendering and they even provide boiler plates

for common server side rendering setups for us to use and we actually are going to use that another

great feature that I love of material UI is the responsive design system they make it so amazing we

easy to change your layouts and adapt your styles based on the sizes of the screens that you're on without

having to do all the tedious labor that you think might be involved with that.

They really integrated responsive design with their entire layout and grid system and really just made

it easy and natural for you to create applications that look perfect on every screen size without having

to really struggle to implement that.

So I really tip my hat off to them for being able to pull that off and I think that that is absolutely

one of the best features of material UI.

The you are going to fall in love with and really grow to appreciate the way that I have so I hope I've

convinced you by now that material UI is the best library out there for what we want to do and that

it is really going to change the way you create react applications and really going to enable you to

make unique and amazing really professional looking designs and not even have to worry about implementing

them and about figuring out the details because material UI just does such a great job of handling it

for you.