So I'm really glad that I'm sharing a stage prove to you need constant e.

Um, so just always incident.

She's gonna speak with, like, 1/2 British, half Singaporean accent, But I'm gonna go all out Singaporean accent.

So I am from Singapore s.

So if you're from out, how we'll come to sing about Ah, it's the weather.

This really, sir, not bad.

Is actually a lot harder on other days.

Uh, yeah, Well, somewhere beaver.

Okay, so my name is issue.

Ah.

I'm a software engineer at Carousel.

Um, So what Carousel is OK?

This is how our website look like it's actually a place where you get to buy and sell the relief from each other, So Ah, listen.

Motor eBay, I guess.

Yeah.

So what people do in Carousel is that they get to buy limited edition goods, usually, and then sometimes they buy a vengeance footage from other people before so that they can wash before their friends boys there.

So, um ah, I realize that that's only one bullet point, which is a bigger yet, so I'm gonna put a 2nd 1 I got myself electrical engineering degree before starting my career software engineer.

So usually when people ask me like, um, can you tell me something about electrical engineering and I'll tell them, Do you know how your keyboard works?

They are not individual, the eye individual weapons.

But then the wires criss cross.

Yeah, so, um, I'm currently working on the web platform at Carousel.

Um, this is an hour ago that come out about half.

Ah, your goal.

October more than that.

Okay, so this is, um this is Stacy, who is our web team?

Lee, He, uh he wrote down like how this project came about.

So this project is like a carousel.

Like, if you have seen, like, Tweeter Light, 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 performance as possible.

Okay, so I didn't plan for this, but then, um so to raise ago.

Ah, Alex Lakatos went toe our office for a meet up and then booms.

She tried to, like profile our website and Oh, hey, thank goodness he said it was Ah, good performing website.

Okay, So from, um, we head and buy on this project because of our previous code base was about five year old.

It was showing a lot of science off aging.

And so the decision wasn't the whole all new features and into concentrate.

So every singer engineers who was working away platform stop our normal work to move on to work on this and migration.

And two engineers.

This is this is just great news because we got to work on completely a complete new coat base from scratch.

And then we make do may we gotta make design decision.

We And then because we were already working on the old court based me no other features that we have.

So we solve, have more, like a 2020 hindsight toe building this and then we get to try new AP eyes.

Yes.

So, um, but, um, it's not redo it problems.

So today I'm gonna show about some of the lessons that I've learned and specifically pertaining to components.

So Trotta hysteria.

When we have always been trying to break, I will court up into pieces.

Um, so this is a chart off the journey.

There's a logo.

I guess can I gotta understand?

PHP server.

So we try to break things up on the server.

We try to do it on Java screen with most ach handlebar.

And then, of course, that was backbone.

Um, and they would move on to Angela react view today and also wept.

Components.

So what's that small logo at the bottom?

That means you win components.

So today, everything is a component.

You feel like he eyes great.

If you don't like, everything is due a component.

So, um, component has become the defect.

Oh, beauty ing patterns off front end from work today.

And depending on, like, the fremont they're using.

Oh, you are not using from Well, um, this schematics, it's a better friend.

So, um, my favorite description of it off.

What the component is is that it has data structure and yes, algorithm.

So, no, not this one.

Not visible but separately.

Date our structure and our algorithm so that I think this is ah, question for what we know.

Like, this is, um, what the information in this component contains, and you also have structure.

So, for wet to us, this is the Dom Ah, an algorithm.

um, garden.

It's sometimes it's called Met.

That's sometimes called functions This out things that determine what this component can't do.

So a lot off the discussion about components usually bring up two concepts.

So first concept is that singer responsibly the principle, which is that every single class, every single value, or, in our case, everything component in the program should have responsibility for just a single piece off the program's functionality.

And the second concept, usual talk about is calm possible compostable, which is that the components can be selected and as ember in various combination to satisfy the user requirement.

Okay, so for the stuff, I would try to be s framework agnostic as possible.

But then, um, I like Rick a lot.

If we can do everything we were, I would have done everything we react.

So, um, to this point of view, is gonna come from react.

But then, hopefully it can also apply to different different frameworks.

Also so far show hen over here who uses reac and like yet why do this.

Thank goodness I was I was so afraid that everybody is gonna save you view.

View.

Uh, okay.

Um, so, uh, I'm sure everybody is familiar with the concept off atomic design.

So this is atomic designed.

This is not atomic C S s.

I think asses industry is time for us to us, one of them to change the name because it's a bit confusing eso using In this concept of atomic design, we restart the smallest element and they are at those and they were used them as a building block us the buche bigger, larger building blocks.

And then this larger beauty boxes then used to make even larger building blocks and then an hour in where there's gotta pitch usually.

And this is, ah, really good concept that we can apply to start building a component library.

So we stopped by sussing out across the different pay tress and what kind of components that we will reuse them over and over again, and then we start by building them.

So, um, if I worked on a component Libby before, usually was that with, But then we will start with select.

Um, so this was this is great, because it's gonna give you the look at a few off site very, very quickly.

Um, sometimes the thing about like, Look at fewer think.

Oh, and this is how you're cut.

Look like, Oh, this is, um, how your any mission look like, but a long time since actually determined by your four incisors.

Your foreign family.

Why can't type scale.

You're using account color palette you're using.

And this is very it's gonna come out very soon.

Once your beauty, your first pattern and you build your first select component or your style your first of that camp for then.

So it's gonna majorly influence how you built your component on the rail lowers lever.

And so this is like the atoms, the two, the one week if they go block and then, eh?

So what's your big finish?

All this your thing.

Okay.

What's the next step?

Sharp your cut.

Because, you know, every single website has a cut.

It's it's everywhere.

So, um, once I've you okay?

I have my butt that I might select on my cut, and I realize Oh, um, I stopped I What?

Doing view?

Next.

You.

So I think.

Okay.

Oh, the very common, reusable components.

One is never so no.

Every pitch has a never but they always look the same.

Okay, maybe not that usable.

Um, And then we have a foot up.

Okay.

Yeah, it's no.

Yes.

You don't have in front of schooling.

Use this.

I gotta see if What the?

And Okay, so I got myself my bathroom might select my cut my neck by my food, and I look at, um, the design, and then I see Okay.

Ah, this this iPhone iPhone next iPhone seven plus pure looking thing.

So this is, um, this hour such result page.

And then when you go into a such result picture, most of them were tried to suggest you other terms, everything you might be like, like, um, do you mean you want to You want to search for iPhone six instead?

So, um, to me, this looks like a very reusable component.

So I looked deeper into our Zeppelin and I realized that there are actually variations to this component.

They're different colors.

And then this one that has a close.

But then So the one on top works more like an anchor.

Because just now you see, I'm on the iPhone pitch and anyone that click on it, I will goto 16 pages.

So It's like a navigation, but in the close, one is not gonna navigate anywhere.

So bond wise, it's gonna be an anchor, and then the one bolos.

But we're gonna be like a dif wrapping a p tech and then have a close, but it as a sibling like Okay, this is actually a lot more complicated than what I was thinking in the first place.

And the suggestion is those soft imaginary problems, because as engineers, we don't want our court to come back and bite us.

So we try and design our A p i s turkey be as flexible as possible and and then we need to pre m alone.

And we might end up preempting for a problem that will never, ever happen.

Or we leave a room for an A p I that we'll never going to create the run.

So it's an hour cook guideline, which is also known as I'm not going to approve your PR that you shouldn't be solving for imaginary problems, and I'm gonna coined the tongue here instead is to take all your components outside in in this approach.

Ah, oui.

Instead of going from bottom upwards, like how atomic desire is we're gonna do it very similar to how we have always view hitched their mail, which is from top to the bottom.

So, Tom Lever, we will have the pitch.

Is that of a blank page?

You start filling up the space is you putting your hater.

You point your left side bar, you bring your right mean ah, about the and you're gonna realize that this whole pitch component is one single Copan, and it's gonna be really, really big.

Don't worry about that.

We'll get to that on how they're breaking them up.

So first step is, well, your beauty.

You will realize that sometimes there are things that you'll go that actually should have bean a library, and this is gonna very calmly come out.

It's like pagination two key Aargh.

Messages are like a localized labor.

So this kind of thing, when you're building your pitch, you'll be like me.

This one somebody should have done the right.

So this and this is, uh when you will realize that Okay, this is where I need to break it up into a component.

We have a text component in our in our core base is going to sound very it because you'll be like, isn't it just a peeping when we have encouraged to Later, in this component functions and style, they will make our life easier.

So for example, what happened If you overflow show you show you put like that?

Philip sees that the $3 Sure you support multi lying.

She only support single eye.

This us thinks they were.

She built it into our text component so that once you use it, you stop having toe worry about it.

So in fact, we have built a lot off components and our component Liberia like this they sound like history.

My element Baton import, pecs, anger They are some like histamine element.

But when we didn't waas to put a lot off functionality into it, that makes your life easier every time you think it should have been solved by someone else.

You have been soft by all these components and this is the way our recommend starting your component library.

So on the site, nor either it often because of the outside in approach, you're gonna realize that sometimes you get me something out.

So, for example, our error message share.

We missed it out.

We'll be rebuilding as packed off our pitch.

The big pitch component.

But actually, they are very They're happening quite often, and they should be components on their own.

So, um, if you so it's okay that you're mr Out the first time row because each town wrecked red retroactively, you try and make them into components.

It's a very comfortable detoxing process.

So, uh, this is our pitch component.

It looks a bit shot because they have been broken up into different render functions s so now is because now we have.

So what we have now is actually our component library.

They're very small components that we have this big pitch component.

Um, what is our next guideline to start breaking it up?

Don't make it quick.

I want to name this technique.

Don't make it awkward.

So, um, this is court that it's a little bit awkward.