[Music]
hi good morning everyone so I'm really
glad that I'm sharing a stage with two
unicorns today so just I always you say
that she's gonna speak with like half
British half Singaporean accent but I'm
gonna go out Singapore next so I am from
Singapore so if you are from out how
welcome to Singapore it's the way that
this really is a not bad it's actually a
lot hotter on other days yeah so many
people okay so my name is issue I'm a
software engineer at carousel
so what carousel is okay this is how our
website look like is actually a place
where user get to buy and sell directly
from each other so a little similar to
eBay I guess yeah so what people do on
carousels that they care to buy
limited-edition goods usually and then
sometimes they buy Avengers footage from
other people before so that they can
wash before their friends voice them so
I realized that that's only one bullet
point which is a period so I'm gonna put
a second one I got myself electrical
engineering degree before starting my
career as a software engineer so usually
when people ask me like can you tell me
something about electrical engineering
and I'll tell them do you know how your
keyboards they are not individual the I
individual buttons but then the the
wires crisscross yeah so I'm currently
working on the web platform at carousel
this is an article that come out about
half a year ago October more than that
okay so this is this is Stacy who is our
web team
he joined he wrote down like how this
project came about so this project is
like carousel like if you had seen like
Twitter like we have a carousel like
version and then we only serve it to our
mobile users and that's only one goal in
this like version which is to make it as
performant as possible okay so I didn't
plan for this
but then so two days ago Alex Lakatos
went to our office for a meet-up and
then booms he tried to like profile our
website and
oh thank goodness he said it was a good
performing website okay so from we had
and but on this project because our
previous code base was about five year
old it was showing a lot of signs of
aging and so then the decision was sent
to halt all new features and then to
concentrate so every single engineers
who was working a web platform stopped
our normal work to move on to work on
this migration and who engineers this is
this is just great news because we got
to work on completely a complete new
code base from scratch and then we make
to me we can make design decision we and
then because we were already working on
our code base we know other features
that we have so we solve have more like
a 20/20 hindsight to building this and
then we get to try new ap eyes yes so
but it's not without problems so today
I'm going to share about some of the
lessons that I've learned and
specifically pertaining to components so
Schroeder he's sure where we have always
been trying to break our code up into
pieces so this is a chart of the journey
there's a lot logo I guess yeah I gotta
understand mm-hmm
PHP server so we try to break things out
on the server we try to do it on
JavaScript with moo-stache
handover and then of course there was
backbone and then we move on to angular
react view today and also web components
so what's that small logo at the bottom
okay let me zoom it in components so
today everything is a component if you
like it it's great if you don't like it
everything is still a component so
component has become the de-facto
building
patterns of front-end framework today
and depending on like the framework that
you're using or you are not using
framework this the semantics it's a bit
different so my favorite description of
it of what the component is is that it
has data
yes structure and yes algorithm so not
not this one not this boat but
separately they attach structure and our
algorithm so data I think this is a bit
it's quite straightforward we know like
this is what the information this
component contains and you also have
structure so for web to us this is the
Dom and algorithm algorithm it's
sometimes it's called met that's
sometimes called functions these are
things that determine what this
component can do so a lot of the
discussion about components usually
bring up two concepts so first concept
is the single responsibility principle
which is that every single class or
every single module or in our case every
sink component in a program should have
responsibility for just a single piece
of the program's functionality and the
second concept you should talk about is
composable composable which is that the
components can be selected and assembled
in various combination to satisfy the
user requirement okay so for this talk I
will try to be as framework agnostic as
possible but then I like react a lot if
we can do everything we're I would have
done everything we react so today's
point of view it's gonna come from react
but then hopefully it can also apply to
different different other different
forum was also so for show hand over
here who uses react and like yeah oh my
goodness thank goodness I was I was so
afraid that everybody is gonna save you
view
okay okay so I'm sure everybody is
familiar with the concept of atomic
design so this is atomic design this is
not atomic CSS I think as an industry
it's time for us to ask one of them to
change the name because it's a bit too
confusing
so using in this conservative design we
we start the smallest element and they
are atoms and then we use them as
building blocks to build bigger larger
building blocks and then this larger
building blocks is then used to make
even larger building blocks and then in
our in web this is called a page usually
and this is a really good concept that
we can apply to start building a
component library so we start by sassing
out across the different pages and what
kind of components that we will reuse
them over and over again and I really
start by building them so if I worked on
a component library before usually we'll
start with button we will start with
select so this process is great because
it's gonna give you the look at a few of
a site very very quickly sometimes the
thing about like look at few I think I
mean this is how your cat look like or
this is how your animation look like but
a lot of times it's actually determined
by your phone sizes your phone family
what kind of type scale you are using
okay color palette you're using and this
is very it's it's gonna come off very
soon once you build your first pattern
and you build your first like select
component or your style your first
select component so it's gonna mentally
influence how you build your component
on the very lowest level and so these
are like the atoms the the the two the
one with they go block and then so once
your beaut finish or this your thing
okay what's the next step should be your
cut because you know every single
website has a cut
it's it's everywhere so once I be okay I
have my button I my select on my cut and
I realized oh am i stuck i what do I
mean UNIX you know
so I think okay Oh the very common
reusable components one is Napa so no
every page has a Napa but they always
look the same okay maybe not that usable
and then we have a footer okay yeah as
long as you don't have infinite
scrolling users I could not see a food
and okay so I got myself my batter I
might select my cut my nav bar my footer
and I look at the design and then I see
okay this this iPhone iPhone next iPhone
x7 plus pure looking thing so this is
this is our search result page and then
when you go into a search result page
most of time we will try to suggest you
other terms that we think you might be
like like do you mean you want to you
want to search for iPhone 6 instead so
to me this looks like a very reusable
component so I look deeper into our
Zeppelin and I realized that there are
actually variations to this component
there are different colors and then this
one that has a close button so the one
on top what's more like an anchor
because just now you see I'm on the
iPhone page and then when i click on it
i will go to iphone 6 page so it's like
a navigation but then the close one it's
not gonna navigate anywhere so don't
wise it's gonna be an anchor and then
the one below is probably gonna be like
a deep wrapping a pea tank and then have
a close button as a sibling like oh okay
this is actually a lot more complicated
than what I was thinking in the first
place and the suggestion here is those
soft imaginary problems because as
engineers we don't want our code to come
back and buy us so we try and design our
API is to keep it as flexible as
possible and and then we need to pre
Emma log and we might end up pre-empting
for a problem that we'll never
happen or we leave a room for an API
that will never gonna create later on so
it's in our code guideline which is also
known as I'm not going to approve you up
here that you shouldn't be solving for
imaginary problems and I'm gonna coin
the term here instead is to tackle your
components outside in in this approach
we instead of going from bottom upwards
like how atomic design is we're gonna do
it very similar to how we have always be
HTML which is from top to the bottom so
top level we will have the pitch you
start with a blank page you start
filling up the spaces you put in your
header you put in your left sidebar you
put in your right mean body and you
couldn't realize that this whole pitch
component this one single component it's
gonna be really really big don't worry
about it we'll get to that on how to
breaking them up so first step is while
you're building you will realize that
sometimes there are things that you go
that actually should have been a library
and this is gonna very commonly come out
as like pagination to keep error
messages or like a localized they labor
so this kind of thing when you are
building your page you'll be like
actually this one somebody should have
done it right so this and this is when
you realize that okay this is where I
need to break it up into a component we
have a text component in our in our code
base it's got it somewhere because
you'll be like isn't that just a P tag
one we have encapsulated in this
component functions and style
they will make our life easier so for
example what will happen if you overflow
sure you should you put like the
ellipses the three dot should use the
point multi-line she only support single
line this has things that will she built
it into our text component so that once
you use it you stop having to worry
about it so in fact we have built a lot
of components in our component like
media like this
they sound like HTML element button
input text and girl they all sound like
HTML element but what we did was to put
a lot of functionality into it that
makes your life easier every time you
think oh it should have been solved by
someone else it'd have been solved by
all these components and this is where I
recommend starting your component
library so on a sidenote iterate often
because of the outside in approach you
can realize that sometimes it gonna mean
something out so for example our error
message here we missed it out we built
it as part of our pitch the big pitch
component but actually they are very
they are happening quite often and they
should be components on their own so if
you so it's okay that you missed it out
the first time around because each time
rect read retro actively you try and
make them into components it's a very
comfortable detoxing process so this is
our pitch component it looks a bit short
because they have been broken up into
different render functions so now is
because now we have so what we have now
is actually our component I read a very
small components that we have this big
pitch component what is at our next
guideline to start breaking it up don't
make it okay I want to name this
technique don't make it awkward so this
is content it's a little bit awkward
over here we check that we should load
more and then previously we did a lot
more then now we should lot more and
then there's a query no query don't load
only then we asked for so this is
actually just now that puce these are
all that checking they returned so this
is an OCO that we have where we checked
before we were loaded up you after we've
read the refactoring we actually moved
up yourself into a component by itself
and we all
we call for the API on deep mouth so
this is been checked by over on the top
so the the parent component will choose
whether do - so it's like a this or now
so only when you have something loaded
and then inside the component you will
say okay I will ask for the data myself
so a bit it's a bit clearer so when you
want to sleep a component a good gauge
is fitted along your data lines because
the closer your data is to your
component the easier things will be
after a lot of our work is actually to
translate data into interface and a lot
of our apps today are very data-driven
and they and data itself is very guided
by information architecture although we
are all friend F and then we don't trust
that Y and F but I believe they do their
work also they they will split the data
properly just like how we will split our
data abruptly so use it as a hint each
time you realize that this is gonna be a
different model this is going to be a
different endpoint it's a good time
where you split things up so most of the
time your one pitch is not gonna be just
one single API call it's going to be
five use that as a chance to split it
into five separate components and then
if let's say one one API returns you an
array of listings use that chance to
realize that you can have you can split
them up into a small listing component
sometimes you will realize that your
data doesn't match how things look
because you know sometimes the designer
and the end F don't work too well so you
get stuck in the middle
use a data adapter so a data adapter can
happen it can be like a YouTube function
so you can do it after you fetch or they
all right at the point where you you
retrieve your data up from your store
this so they are actually functions
where you will transform how information
came in from back-end to how each look
on the front-end try not to do it on
your component itself because this
functions is going to call we call every
single vendor and you know that this
this transmission just have to happen
one single time so do it right after you
fetch it from your API or do it right at
the point where you get it from your
store okay so this is the definition of
one of our component I actually didn't
count how many from there it is doing a
code base I'm sorry so very bleak oi
this is God and a protocol lips so of
course I don't think any any any one of
us as engineers we want the design
things in this way but this this
component has grew and grew grown grew
grow so big as we add more and more
features and ok so let me show you how
it looks like ok so this is our input
text it's quite a monster so this error
message if you take it out there's no
error message and then there's a labor
so you see like when you and it is also
face holding at the same time and then
there's our prefix sometimes you don't
need prefixes so we get to get out we
have different sizes to cater to
different use case and then sometimes
you can okay this doesn't work at the
same time with area so haha and then you
can be savor it then you cannot type in
it anymore
okay so you see actually some of the
prompts work with each other very well
like if you have a icon laughs and the
arrow okay
probably the seduce kids worry a key now
and a placeholder probably is a use case
for it
but sometimes the prop that's a work
with each other that you have Auto
capitalized with a tight because it
he'll say what's happening you so
therefore like the ad who Pro is real
isn't it because there are two props on
the same element but they will never
work well with each other
and but to a engineer when you come in
your lady actually there or text input
one so I should just extend on my text
input and you realize actually a lot of
the props are optional this is how we
relate to like make ourselves feel
better like okay
the optional you know just I use it
nobody else use it but then why do you
want to put in the same component if
they are separate split them you know
create a new component don't don't be
shy about creating new components there
are actually ways in react that lets you
do this so that you can extend on a base
class and then you can have like a hello
phone in input text as a auto
capitalized simple text okay sure but
then one thing they work across
different framework is to then split
them create a new component even if it's
going to be duplicate code no don't be
shy about having to placate code of
course we always come from the framework
of clean code but in clean code at the
expense of like making it difficult to
use so the pro clips is a monster it's a
Frankenstein creature because all of us
we have so many web engineers all of us
are going to add on to the code based
thinking that it's gonna affect me but
someone else is gonna join the team
they're gonna come in and I can see your
component with 20 props and they will be
like
[Music]
this so I gotta end of my talk with this
suite that I just saw yesterday most of
my ideas are just not repeating previous
mistakes and I think a lot of us we come
and we go we listen to podcasts we come
to a conference thinking that you know
there's gonna be some words of wisdom
but I realized that a lot of time
guidelines is just one person's pain and
then they don't want to repeat that pain
anymore
so every one of you will have a
guideline that you want to share so
please check and make this community
more knowledgeable okay thank you