hello everyone thank you for voting and
also thank you for coming and today
we're talking about hype and so maybe as
a front-end developer you already
experienced that we are living in a hype
driven development environment hyper-v
development is one of the things but
also there's the fear of missing out
because there bazillion new 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 I have to apply what do I have to
learn and so at some point we start kind
of following just a few people on
Twitter because I don't know maybe we
heard them talking in one of the
conferences or we read a really cool
medium article from them and so we are
now following these people but somehow
this is just a very small group of
people and 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
the people we follow safe so let me
introduce you to the motto of the high
royal society back in the day there was
a group dedicated to science and back in
the day it was very common that the word
of a person that was like a lord or I
don't know somebody who had money was
yeah here louder and better and their
opinion mattered more to people then
let's say from a poor monk or some other
worker on the street and so the high
royal society the British Royal Society
had one motto and they call it unison
bah bah it's Latin and that means don't
take word for granted or and so that
means that we should listen to the facts
and not only who says it so in this what
we're going to do today
we're talking about five pieces why we
are currently using side components and
if they are right if they are wrong and
I also want to give you a little
disclaimer so today I'm talking mostly
about site components there are other
approaches of CSS and J's but I have the
most experience with that one and also I
think that's the most popular package
right now for at least the react world
also I believe that people that write
these packages are awesome so I don't
have anything against them this is
really just mostly like what I
experienced by working with this in real
life and trying not to compare with
other solutions that are not CSS and J's
in the classic approach so I think the
biggest reason why we are starting to
put our CSS in our Jas is because sadly
CSS is render 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
he like look at the classic approach to
include a style it's by using a link tag
and it's just linking to a CSS file and
what then happens in the browser is the
browser starts downloading the stuff so
first browser needs to know like what is
all there with the contents of it so
there's the HTML and then it starts
render downloading all the other stuff
which also contains our CSS because it
doesn't make sense for the browser to
start rendering or painting before it
doesn't know how the stuff should look
like otherwise you would always see for
a second a very ugly unstyled page and
that's also not so nice
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 HTML they just having style
haxe and then put the sails all there
that was done even way before there was
something like react or you were angular
and people hated it because of different
reasons but we're back at that today and
makes sense because when we will now go
for example for style components this is
like the biggest feature of it you don't
even have to write a CSS file anymore
because you just write all your styles
in your javascript file next to the
stuff where you have to you render and
return of your component which is really
awesome really nice because it renders
like this so it generates you this
button component and it even generates
you automatically some class names and
then it pastes inline the CSS in the
bottom of the HTML so we have achieved
what we wanted we have our HTML combined
with our CSS and so the browser can
render faster than before because also
we only show the stuff that we show that
we need in the first page because in our
first page there is 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 part okay but this is a
problem we have since longer time and
other people already had this idea and
develop a thing called backpack backpack
is a module bundler and just some magic
so it goes through all your files and
looks how they are tangled together
which imports which and then it pipes it
through and gives you out a very nice
bundle of all of these things so when
you have your project
and your web pack is there and then you
configure it like this that you add a
CSS load or style order to it and then
you can even say something like source
maps is there because that's one of the
not so nice things when everything is
crunched together
you don't know anymore where your pieces
are coming from and by source Maps
enabled you still know where the stuff
was once located so what you then do is
in your JavaScript file with backpack
configured you import your CSS file not
with a link like before but with a just
JavaScript import pointing to the file
and then where pack does the rest of the
magic for you
so it renders your vanilla button and
then it puts in the bottom after HTML
also your style and what's a little nice
comment to you where that original code
was from also very nice so kind of the
same thing solved but so we have done
all of this work like configuring web
pack or sai components to be faster so
let's compare them I did a little
experiment I know it's all blurry
so I created four buttons so one is a
like vanilla version that's the normal
version the other one is my primary
button the second one is mystic in the
red button and then there is a
combination of primary and inactive
state so just what we do normally in our
web applications we combine stuff and I
approach this like three different
things first I tried CSS vanilla CSS
with map pack then I tried sty
components by using props and I also
tried side components by using the
extent so there is no extent but you can
take your primary button and then add
another thing to it and extend it and
is your primary inactive I don't know if
you can see this so I let it all render
in the browser and they're not that far
apart
so the normal CSS takes about 3.4
seconds until the first meaningful paint
the site components with the props takes
around 3.5 seconds unto the first
meaningful paint and the extent one
takes 3.6 seconds that's all time very
close to each other but when you look at
the other the cake graph the donut um
you see that the scripting time is way
bigger for the Sai components approached
as for the CSS approach which also means
they are growing faster like this time
of script rendering scripting time grows
faster with the complexity of your
component system so the more props you
use the more extensive the more
variations you have the longer it will
take to script so it's very Wake thing
I'm saying now but it's most likely that
in the long run the site component
approach will load not as fast as when
you just have vanilla CSS ok so next
thing next very nice thesis and there is
collocation scheme so CSS has some
issues by design and it's 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 apply a style
and based on like how intense and how
strong your selector is your style is
stronger than the other one and so now I
and slight components is going for
colocation 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 and it helps you with
just issues of the global stuff the
inheritance and everything which is
really nice so awesome so but imagine so
this is something I copied from a
project I'm currently working on this is
just AI components in one of our a
little bit more complex components and
I'm seeing a little bit more it's
cheeser that have a button and a text on
it okay and there are a hundred lines of
code that are only dedicated to styles
so if you want to see what's actually
going on in that component you need to
scroll a hundred lines which is annoying
especially when you work on that thing
more often um also just imagine you have
a more like generic component like a
wrapper and you're doing your
collocation and somehow it's everywhere
because you start copying everything
because it's a generic component and
probably the difference is not very big
so you have copies over and over by cow
locating your component in your render
thingy and then you maybe decide okay
you know what I give up and echo
location for some like more generic
components I create our like space where
it put them like a component folder and
then because I also need to have
variations on this very basic component
I start to import them and add more
cells to them like I have a normal
wrapper and then I create a gallery
wrapper on it which is nice and works so
far really cool but so it gets rendered
to this so we have very nice not
readable classes and just one style and
we don't know anymore
like where which style is coming from
because sigh components doesn't support
source maps yet and if you don't know
exactly where all your rappers are you
probably will never find that again and
it's a little more helpful when we look
at the reactive bugger because there we
can at least see ok that style somewhere
used in a component named 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 full
stay a text search so that is how I'm
finding my stuff now ok but but bobble
for the rescue
do you know bobble that's super cool
translator thing people have written
plug-ins for that because they have been
bucked by the same issue as I so and
when you have configured a bobble
plug-in for Sai components it finally
adds something meaningful to his class
names and it adds the react component
itself and his tie component to your
class name as prefix so you have a
better hint now where it is more or less
depending on how good you are in your
location style stuff but also there's
like a nun plugin required solution to
this issue and it is called parents and
there is one very nice pattern I tried
it in syrup 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 the 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
kind of no okay which parts of my
components are like the basic ones that
I have to reuse more often so I locate
them in one place and then the other
stuff I'm locating in like the bigger
component and so you kind of have a
better guess on where to locate the
stuff that also helps you when you use
style components so that's this is no
exclusive or something you can combine
them it's really cool so then as I
already have mentioned the other thing
that seems kind of bad about is scoping
what do I mean with scoping and maybe
one of you has done something like that
before
just having like a very long selector
and then still have to run an important
statement on it because you have a very
tangled Caeser space and you don't know
anymore where this comes from or you
have a third-party application that has
like some very strong selectors and
there is no other way to come around it
so yes that components means you put
everything next to each other which
means you don't have classes anymore
which means you cannot have two strong
selectors anymore
yay problem solved maybe you still have
some legacy CSS laying around or some
CSS from a third-party plugin maybe and
they have a very strong selector so and
still no matter what you do because in
your site component you cannot access
the class name anymore you cannot like
make your selector more specific so as
the selector is very specific your
button will still be pink like forever
what that is what rescue yeah there's a
second buffer plug-in that allows you to
generate something more specific and
it's doing it by how awesome oh yeah the
bible plugin is named ababa plugging
site component CSS namespace
very nice word and you can configure it
and then what it does it duplicates your
class name in your style definition to
make it more specific than any other
style okay cool
another nun plugin approach would be to
generally use some naming convention for
example BAM which is working like the
blog element modifier so that kind of
cute save you from two specific
selectors I mean it still doesn't
prevent you from bad sore party CSS but
at least your own CSS looks nicer than
okay so then the probably hardest thing
in software development next to
centering stuff and yeah okay naming
naming is really hard what do I mean
with that so maybe one of you also have
had that you have a button that has like
a bazillion class names on it you maybe
start like very nice with yourself which
was one class maybe a second class you
modifier maybe you even you spam but
somehow the next morning your designer
comes in and gives you like this unicorn
and then you're like okay now I add the
class unicorn to my button okay good
good so like components as I said they
generate the class names for you so you
don't have to care about this anymore
which is really really awesome but I
have a 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 a designer comes up to me
and gives me something and even with all
my atomic design approach on my BEM
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 is
what problem of two user should this
thing solve that that is a very good
question always to your designer so what
should it do how should it help the user
to solve a problem or to reach a goal
[Music]
then it's just a variation of something
that is already existing and maybe why
is this variation better so maybe
there's a drop shadow now and 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 to
change all our backgrounds or not or
whatever so and also another question
would be is this a combination of
something that you already have just
newly arranged and does it matter to
like be like this or would it be
beneficial for us to maybe make an a/b
test and see which of them is working
better and then we decide for just one
of the variations and also that also
very nice question what is the semantic
meaning of 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 of a thing and if you
still can't find the name of the thing
and your designer starts to questioning
himself or herself maybe you have like
saved all on every one of you from a
fancy button class okay so so far we
have talked about many of the issues of
CSS and also there's one really cool
thing on site components which you
couldn't do before and that's throwing
props at everything okay so now it's I
components you can add this kind of
props to your button and then use them
for styling which is really exciting
unfortunately just 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
error functions and I have also seen
something like that but not error
functions but a lot of offenses 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 of
that
how can you easily tell what style is
applied in which case so awesome
how does it look like when we render it
and reactive over it looks like this
that you can at least see what kind of
props you are applying to it and what
values they have but in the end it just
is combined into again one style class
so you don't know which prop is causing
which line of style you can't tell from
looking at the debugger in chrome also
when we now take the other approach with
the bobble plug-in that gives us better
class names we still don't see what prop
is calling causing which style there is
no mention of primary there okay so
let's try a different approach
don't use props try the extents but
suddenly I have by like having just
primary secondary normal active and
inactive I have now six button
components okay yes and again this is
how they look in the browser and somehow
the primary inactive has six classes six
classes okay and somehow from these six
classes only three provides style
what why so at first I thought I have
done something wrong maybe I have
misconfigured soy components but then I
found that on github and one of the
contributor says how we did to some
purpose that we add always another class
to it that is therefore identifying your
component because when you have a closer
look on all these classes they change
their name every time you add a new
style or remove a style so there is no
way how you can like predict what is
happening based on your site class but
the other the second class which hasn't
any style rules is the identifier which
is also just gibberish so maybe someone
can tell me why they didn't prefix them
on default I don't know but they decided
against it
okay let's look at some more classic
stuff let's look at normal CSS or sass
in this okay in this case where I have
created a button and added just the
classes like I would usually do with
primary and overwriting by inactive and
this is what it comprises what everybody
has seen this already so I can clearly
tell like which class is causing which
style which is nice for debugging I
would say and also maybe for identifying
where I should probably optimize my
style okay but probs I want to have
props please give me my props back ok
maybe I have something how about best of
both worlds so maybe some of you have
already stats I component tries to
create a higher-order component which is
and react higher-order components
so let's do some higher-order component
so let's create a higher-order component
for a button and give it some props for
example a type for example the inactive
and then take these props and
make them into bemmon classes so we now
have like the button st lock and the
primary ended active has modifiers and
then we just like give it to the
component and we turn a button and also
something that we can do now which side
component doesn't with the process we
can define prop types and default props
so everybody that wants to reuse a
component we have done for example
button knows exactly what they can give
as prop and we'll get like meaningful
warning and error messages in the
debugger when they saw something wrong
with it just really nice I believe okay
so let's summarize that was a lot of
talking about CSS okay the render
blocking part we talked about it in the
beginning we can solve it with side
components you can solve it with
backpack so and then you would probably
need to look at what is going to be more
performant 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 side components but also
you can use them with other components
and get rid of a couple of node modules
maybe then we had thought that
communication can solve some problems
like naming like having too many
variations on your website so
communication is always king and will
definitely help you on getting rid of a
lot of your problems and then the last
thing is props are really really fancy
but they're dangerous and may be hard to
debug and maintain
okay so but when is Sai components
really beneficial for you because I mean
a lot of users people are using it
already and like it and love it and so I
would say if you want to bootstrap
something very quick because you don't
have to think too much about CSS
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 or you're
not easily able to talk to them I'm not
saying that you don't want to talk to
them but maybe in some companies
designers are not in house there's
somewhere else and so you cannot let go
and poke them every day so maybe you
just want to like soft things quickly
and then I would sigh component yeah
that's one thing I haven't talked about
yet but the most awesome thing about the
site component approach is that you can
share them with your react native
application because react native
applications is not so well with vanilla
CSS so when you put your CSS in your
JavaScript and then give it to the react
native they can just use the same
components as you do in your normal
reactor plication so and there's just
one more thing I want to like say and
that is the worldís bigger than you
react so I had a very nice privilege to
listen once to a talk of how can leave
who is one of the yeah who is like the
father of CSS
he brought CSS to life back in the day
when they were working on CERN together
with Tim berners-lee
and he had a vision to make to pop a
nicer prettier place as freely as they
had in their environment and so when you
think back from the beginning of CSS 2
where was there and where it is today
we also have the abilities of pure CSS
variables now where we have now finally
rounded corners and are now able to
Center things gradually so there has
been a lot so maybe we should also trust
in the development of CSS that it can
overcome its issues and not just
throwing the JavaScript hammer on it so
[Applause]
[Music]