Placeholder Image

字幕表 動画を再生する

  • Hello, everyone.

  • Thank you for wording.

  • And also thank you for coming.

  • And today we're talking about hype on And, uh So, um, maybe as a front and developer, you already experienced that.

  • We're living in a hype driven development environment, hyper urban development.

  • Just one off the things.

  • But also there is the fear of missing out because they're Brazilian.

  • You frameworks coming out every day and you don't know, Like, what should I learn?

  • What should I follow?

  • What should I need to apply?

  • What do we have to apply?

  • What we have to learn on.

  • So at some point, we start kind of falling just a few people on Twitter because, I don't know, maybe we heard them talking in one off the conferences or we read a really cool medium article from them, and so we're not following these people.

  • But somehow this is just a very small group of people on, so we kind of end up in a bubble because these people follow each other.

  • And so we maybe don't hear others people opinions anymore.

  • And maybe we even start taking everything for granted to people we follow.

  • Say so.

  • Let me introduce you to the motor off the High Royal Society.

  • Back in the day, that was a group dedicated to science.

  • And back in the day it was very common that the bird off a person that was like, Lord or I don't know somebody who had money Waas Yeah, hear louder and better And their opinion mattered more to people than, let's say, from a poor monk or some other worker on the street on Dhe.

  • So the Hiroi Society, the British Royal Society, had one motto and they call it Julius and Barbara.

  • It's Latin on.

  • That means don't take a word for granted or and so that means that we should listen to the facts and not only who assess it so.

  • And the spot Where you going to do today?

  • We're talking about five pieces.

  • Um, why we're currently using psych opponents.

  • And if they're right, if they're wrong on dhe, I also want to give you a little disclaimer.

  • So did I.

  • Am talking mostly about sy components there.

  • Other approaches off seasons and Js.

  • But I have the most experience with that one.

  • And also I think that's the most popular package right now or at least the react well.

  • Also, I believe that the people that write these packages are awesome, so I don't have anything against them.

  • This is really just we'll see.

  • Like what I experienced by working with this in real life on Dhe, trying not to compare with other solutions that are not see, assess and Js in the classic approach.

  • So I think the biggest reason why we are starting to put our CSS in our Js is because sadly, sees us surrender blocking.

  • That also means that we need to bring it to our clients as soon and as fast and as quick as possible.

  • And how are we doing this?

  • So if you like, look at the classic approach to include a style, it's by using a link tack that's just linking Thio, a CSS file on DDE.

  • What then happens in the browser is the browsers starts downloading the stuff, so first brother needs to know, like what?

  • It's all day with the contents off it.

  • So there's tht Mel, and then it starts.

  • Render downloading all the other stuff, which also contains overseas s because it doesn't make sense for the browser to start rendering or painting before it doesn't know how this stuff should look like.

  • Otherwise, he would always see for a second.

  • Ah, very ugly on style page on.

  • That's awesome.

  • That's NYU's.

  • So the browser decides instead to show you a blank page until it all has downloaded all the files and then it starts painting.

  • So the easiest and fastest way to not have render blocking your styles is to have them included in your HD male.

  • They just having style tax and then put the sales all there that was done even way before they wants something like react or you were angular.

  • Andi people hated it because of different reasons.

  • But we're back at that today and makes sense because when you're not, go for example foresight components, that is like the biggest future off it.

  • Um, you don't even have to write a sees this file anymore, because just write all your styles in your JavaScript file next to the stuff where you have to.

  • You render and return off your component, which is really awesome.

  • Really nice, because it renders like this so it generates you.

  • Um, this button component on it even generates you automatically some class names on then, um, it piss in line the CSS in the bottom after get him out.

  • So we have a chief.

  • What?

  • We want it.

  • We have our HTML combined with our CSS andi so the browser can render faster than before because, awesome, we only show the stuff that we show, uh, that we need in the first page.

  • Because in our first page, there's only the components we show there.

  • And so there's only the CSS of these components and nothing else.

  • So we also show only the necessaries.

  • So the critical CSS path.

  • Okay, but this, uh, problem we have since longer time.

  • Um, and other people already had this idea on dhe.

  • They build the thing called Peck.

  • That pack is a model bundler and does some magic.

  • So it goes through all your files on DDE looks how they're tangled together, which imports which, and then it pipes it's room on, gives you out a very nice bundle off all of these things.

  • Um, so when you have your project Ah, and you're, um, weapon is there, and then you configure it like just that you at a CSS loader style odor to it.

  • And then you can even say something like source maps iss the air because, um, that's one off the not so nice things.

  • But everything is crunched together.

  • You don't know any more where your pieces are coming from and by source maps enabled.

  • You still know where to stuff what's once located.

  • So what do you don't do?

  • Is in your JavaScript filed with backpack configured.

  • You, um, import your sees this file not with a linked like before, but with a just JavaScript import pointing to the file on dhe.

  • Then Peck does the rest of the magic for you, so it renders you vanilla button, and then it puts in the bottom after a she male.

  • Also your style on.

  • What's a little nice comment to you?

  • Um, where that original code waas from?

  • Also very nice.

  • So kind of the same thing solved.

  • But, um, so you have done all of this work like configuring lepak or Sigh components to be faster.

  • So let's compare them.

  • I did a little experiment.

  • I know it's a little blurry, so I created um, four buttons.

  • So one is a like vanilla version.

  • That's the normal version.

  • The other one is my primary button.

  • The 2nd 1 is my secondary, Barton.

  • And then there is the combination off primary on dhe inactive state.

  • So, um, just what we do normally in our applications, we combined stuff on dhe.

  • Um, I approached, just like with three different things.

  • First, I tried CSS vanilla, see Assessment backpack.

  • Then I tried Cy components by using props, and I also tried, um, side components by using the extent so there's no extent, but you can take your primary button and then at another thing to it and extend it, and then it issue our primary inactive.

  • So I don't know if you can see this.

  • So, um, I let it all render in the browser, and they're not that far apart, so, um nah, missed.

  • CSS takes about 3.4 seconds until the first meaningful paint.

  • Um, the state components with the props takes around 3.5 seconds unto the first meaningful paint on the extent one takes 3.6 seconds.

  • That's all kind of very close to each other.

  • But when you look at the other two cake grass, the doughnut, um, you see that the scripting time is way bigger.

  • Uh, for the site components approached, asked for the CSS approach, which also means they're growing faster like this time off script rendering scripting time grows faster with the complexity off your components system.

  • So the more props he used, the more extensive half, the more variations to have, the longer it will take two script.

  • So it's very wake thing I'm saying No, but it's most likely that in the long run, the psych component approach will not as fast as when you just have been in Lucius.

  • Okay, so next thing next very nice thesis on that.

  • It's cold locations King.

  • So C s s has some issues by design.

  • Andi is not a mean thing to say.

  • It's just fact.

  • So in CSS, everything is global.

  • In CSS, you have selectors which have very specific rules.

  • How to like a playa style on DDE based on, like how intense and how strong your select a wrist you style stronger than the other one.

  • And um So now again, start components is going for co location, which means that you put your style in the same thing as you put your render component, which means that it's always in the same file.

  • It's always in the same location on dhe.

  • Um, that helps you with just issues off the global stuff, the inheritance and everything.

  • Um, which is really nice.

  • So awesome.

  • So but imagine so it is this something I copy it from a project I'm currently working on.

  • This is just I components in one off our a little bit more complex components, and I'm saying a little bit more.

  • It's teaser that have a button and a text on it.

  • Okay.

  • And there are 100 lines of code that are only dedicated two styles.

  • So if you want to see what's actually going on in that component, you need to scroll ah, 100 lines, which is annoying, especially when you work on that thing more often.

  • Um, awesome.

  • Just imagine you have a more like generic component like a ripper.

  • And you you're doing your coeducation.

  • Somehow it is everywhere because you start copying everything because it's generic component, and probably a difference.

  • It's not very big.

  • So you have copy is over and over by co locating your component in your render singing.

  • And then you maybe decide.

  • Okay, you know what I give up on that cool location For some, like more generic components I create are like space where it put them like a component folder on dhe.

  • Then because I also need to have a relations on this very basic component, I start to import them on dhe at more Celts them, like I have a normal ripper, and then they create a gallery wrapper on it just nice and breaks a farm.

  • Really cool.

  • But so it gets rendered to this.

  • So we have very nice not readable classes on dhe.

  • Just one style on.

  • We don't know any more.

  • Like where Which Silas coming from?

  • Because sy components doesn't support source maps yet on dhe.

  • If you don't know exactly where all your records are, you probably will never find that again.

  • Um, it's a little more helpful when we look at the reactive under because Debbie Kennelly see Okay, um, that style somewhere used in a component and cat galleries.

  • So part of my style will be there.

  • But I had very often times where I wasn't able to find the style that is bugging me like literally without a project.

  • Fools text search so that that is how I'm finding my stuff now.

  • Okay, but but Bible, photo rescue, You know, bobble that supercool translator thing.

  • People have written plug ins for that because they have been back by the same issues.

  • I, um so on when you have configured the bobble plug in for psych components, it finally at something meaningful to host class names.

  • And it adds the react component itself.

  • Anti start component to your class, name as prefix.

  • So you have a better hint now where it iss more or less, depending on how good you are in your locations.

  • Style stuff.

  • Um, but also, there's like, a none plug in required solution to this issue, and it is called patterns.

  • And, um, there is one very nice pattern.

  • I tried it in several, like project so far, and that is called atomic design, where you start by, like, splitting your components in their parts.

  • So you start by having the slightest thing smallest thing like a button, and then you start combining it up to like molecules and organisms and templates and pages.

  • And so by this way, you at least make sure that somehow you kind of know.

  • Okay, Which parts off my, um, components are like the basic ones that I have to re use more often.

  • So I locate them in one place and then the other stuff I'm locating in, like, the bigger component.

  • And so I kind of have a better guess on where to locate the stuff.

  • Umm, that also helps you when you'd use style components.

  • So that's this is no exclusive or or something.

  • You can combine them.

  • It's really cool.

  • So then a zay already have mentioned, uh, the other thing that sees us kind of bad about its scoping What?

  • Dreamy with sculpting.

  • Um, maybe one of you has done something like that before, just having like, a very long selector and and still have to run an important statement on it because you have a very tangled sees a space, and you don't know any more where this comes from or you have 1/3 party application that has, like, some very strong selectors and there's no other way to come around it.

  • So yes, I components means you put everything next to each other, which means you don't have classes anymore, which means you cannot have two strong.

  • Select us anymore.

  • Yeah, a problem soft.

  • But maybe you still have some legacy sees us laying around or some CSS from a certain party.

  • Le Guin.

  • Maybe on they have a very strong selector.

  • So and still, no matter what you do, because in your psych component you cannot access the class name anymore.

  • You cannot, like, make your select a more specific.

  • So as the selector is very specific, your button will still be pink like forever.

  • But this would rescue.

  • Yeah, There's a second Bajuk plug in.

  • Um, that allows you to get a rate.

  • Um, something more specific on dhe.

  • It's doing it by it.

  • How awesome.

  • Oh, yeah.

  • What about plucking?

  • It's named Baba plugging psych component CSS name space.

  • Very nice bird.

  • Um, and you can configure it, and then what it does is it duplicates your class name in your side definition to make it more specific than any other style.

  • Okay.

  • Okay.

  • Cool.

  • Um, another nun plug in approach would be to generally use some naming convention, for example, them, which is working, like with block element modifier.

  • So, um, that kind of kid safe you from two specific selectors I mean, it still doesn't prevent you from bats or party success, but at least your own CSS looks nicer than okay, so then the probably hardest thing and suffer development next to centering stuff.

  • Yeah, okay.

  • Naming.

  • Naming is really hard.

  • What do you mean with that?

  • So maybe one of you also have had that you have a button that has, like, a Brazilian class names on it.

  • You may be slurred, like very nice with yourself, Which this one class, maybe a second class you modifier, maybe even you spend.

  • But somehow the next morning, your designer comes in and gives you like this unicorn, and then you're like, Oh, ok.

  • Now I acted close, unicorn to my button.

  • Okay, good, good.

  • Yeah.

  • So components as a set they generate the class ends for you.

  • So you don't have to care about this anymore, which is really, really awesome.

  • But I have ah unpopular opinion now for you.

  • If you can't name a thing, you probably don't need it.

  • So when I come into the situation that he designer comes up to me and gives me something.

  • Andi, even But all my atomic design approach on my bending classes, I still would add a class like fancy.

  • I'm going to my designer and start asking them questions.

  • So the first question I usually ask ISS what problem off the user should this thing solved that that is a very good question, always to your designers.

  • So what should it do?

  • How should it help the user to solve a problem or to reach ago?

  • Um, then is this a variation of something that's already existing on?

  • Maybe why is this variation better?

  • So maybe there's a drop shadow now on your button, and the drop shadow is there because there's now a button on a darker background than before.

  • So then you should think about okay, Do we need toe change all our backgrounds or not or whatever So?

  • And also another question would be, Is this a combination off something that we already have just newly arranged on?

  • Does it matter to like you like this, or what?

  • It beneficial for us to maybe make an AP tests and see which off them is working?

  • Veteran.

  • Then we decide for just one off the variations on dhe.

  • Um, also, that's also very nice question.

  • What is the semantic meaning off the thing like, is it the primary action?

  • Is it like the call to action?

  • Is it a warning and information and error and all these helps you to define the name off a thing on.

  • If you still can't find the name off the thing and your designer starts to questioning himself or herself, maybe you have, like, safety all on everyone of here from a fancy button class.

  • Okay, so so far, we have talked about many of the issues of CSS on dhe.

  • Also, there's one really cool thing on site components which you couldn't do before.

  • And that's throwing props and everything.

  • Perhaps.

  • Okay, so now recite components.

  • You can add this kind of props to your button, Andi, then use them for styling, which is really exciting.

  • Um, unfortunately, it looks like this.

  • So now you have your props, but somehow you have to apply them and to apply them you have to use smart JavaScript, which means in this case, there are factions.

  • Andi, I have also seen something like that, but not our functions.

  • But a lot of if else's.

  • And I don't know about you, but if you ask me.

  • I don't want to maintain this because like adding a new variation there would mean, like, adding And you if or maybe breaking all the other ifs or I don't know, how would you remove like a variation off that How can you easily tell what stylist applied?

  • In which case, So awesome.

  • How does it look like when we render it and reactive ever It looks like this that you can at least see what kindof props you're are applying to it and what?

  • Well, you'll stay half.

  • Um, but in the end, it just is combined into again one style class, so you don't know which profits causing which line off style you can't tell from looking at the d bugger and chrome.

  • Um, awesome.

  • When we now take the other approach with the bobble plug in that gives us better class.

  • Seems we still don't see what props calling causing which style.

  • There is no mention off primary there.

  • Okay, so let's try a different approach.

  • Don't use props.

  • Ah, try the extent, but something I have by like having two primary, secondary, normal, active and inactive.

  • I have no six button components.

  • That's okay Yes.

  • Six.

  • Um, And again, this is how do I look in the browser?

  • And somehow the primary inactive has six classes, six classes.

  • Okay.

  • And some are from these six classes.

  • Only three provides style.

  • What?

  • Why?

  • So at first I thought I have done something wrong.

  • Maybe I have miss Configured star components, But then I found that on get up on One of the contributor says I waited to some purpose that we add always a nutter class to it.

  • That is stare for identifying your component.

  • Because when you have a closer look on all these classes, they change their name every time you're at a new style or remove a style.

  • So there's no way how you can, like, predict what is happening based on your site.

  • Close.

  • But the other second class, which hasn't any style rules, um is the identity fire, which is also just gibberish.

  • So maybe someone can tell me why I didn't prefix them on default.

  • I don't know, but they decided against it.

  • Okay, um, let's look at some more classic stuff.

  • Let's look a normal CSS or sauce in this in this hiss, where have created a button and added just the classes like I would usually do with primary Andi overwriting by inactive on dhe.

  • Um, this is about it Comprises two.

  • Everybody has seen this already, so I can kill you.

  • Tell like which class is causing which style?

  • Just nice for debugging, I would say.

  • And also maybe for identifying where I should probably optimize my style.

  • Okay, but props, I want to have props.

  • Please give me my prospect.

  • Okay, Maybe I have something.

  • How about best of both worlds?

  • So maybe some of your Valerie, That psych component tries to create a higher order component, which is to shit in react higher order components.

  • So let's do some higher arctic component.

  • So let's create a higher order component for a button on dhe.

  • Give it some props.

  • For example.

  • A type, for example, the connective on.

  • Then, um, take this props and make them into Ben classes.

  • So we now have, like, the butt nasty lock on dhe the primary and in active has modifiers Andi.

  • Then we just like give it to the component and return a button on dhe also something that we can do now which die component doesn't with the process.

  • We can define crop types on default props.

  • Um, so everybody that wants to reuse a component we have done, For example, Button knows exactly what they can give as prop on, and we'll get, like, meaningful warning and error messages in the D bugger.

  • Wedneday's throw something wrong at it.

  • Just really vice.

  • I believe we'll keep.

  • So that's some rice.

  • It was a lot of talking about ceases.

  • Um, okay, the rendered blocking part.

  • We talked about it in the beginning.

  • We can solve it with Cy components.

  • You can solve it with a backpack.

  • So and then you would probably need to look at what is going to be more performance for you in the long run, then the conventions, like using a design pattern like atomic design and naming conventions like them help you even if you are using psych opponents.

  • But also, you can use him with all star components and get rid of couple off note modules.

  • Maybe, um then we're thought that communication can solve some problems, like naming like having too many variations on your website.

  • So communication is always king on.

  • Dhe will definitely help you on getting rid off a lot off your problems on Dhe, then the last thing is perhaps a really, really fancy, but they're dangerous on may be hard to be back and maintain.

  • Okay, so But when is Sai Components really beneficial for you?

  • Because, I mean, a lot of fuses.

  • People are using it already and like it and love it on.

  • So I would say if you want to bootstrap something very quick because you don't have to think too much about seizes architecture and everything, just put it next to your render stuff and you're good to go.

  • It's really cool, then.

  • Yeah, when you don't have a designer, are you or not easily able to talk to them and not saying that you don't want to talk to them?

  • But maybe in some companies, designers on the in house, there's somewhere else.

  • And so you cannot like go and poke them every day.

  • So maybe you just want to like soft things quickly and then no, with sy components.

  • Um, yeah, that's one thing I haven't talked about yet, But the most awesome thing about ah, the site components approach ISS that you can share them with your react native application because red native applications is not so well with Ulysses s.

  • So when you put your success in your JavaScript on, then give it to the reactor native, they can just use the same components as you do in your normal react application.

  • So on.

  • And there's just one more thing I want to like, say, and that is throw disfigured and react.

  • So, um, I had the very nice privilege to listen Ones to a talk off.

  • How can we Who is one of t?

  • Ah, yeah.

  • Who is like the father off CSS.

  • Um he, uh, brought CSS to life back in the day when they were working on certain to get over it.

  • Tim Berners Lee aunt.

  • He had a vision to make the bap a nicer, prettier place.

  • As for TSA hat in their environment on dhe.

  • So when you think back from the beginning of CSS toe, where was there?

  • And Barrett is today will be also have tea abilities off pure seizes variables.

  • Now where we have now finally rounded corners and are now able to center things for Italy.

  • So it has been a lot.

  • So maybe we should also trust in the development of CSS that it can overcome its issues.

  • I'm not just throwing the telescope camera on it, so that's it.

Hello, everyone.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

Kathrin Holzmann - CSS in JS: Is it worth it hype|JSUnconf 2019 (Kathrin Holzmann - CSS in JS: Is it worth the hype | JSUnconf 2019)

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語