Placeholder Image

Subtitles section Play video

  • uh, I'm good morning, everyone.

  • 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.

  • Um, over here, we check that we should look more.

  • And then previously we did a lot more than now.

  • We should look more.

  • And then there's a query, No querido load.

  • We'll meet.

  • Then we asked for.

  • So this is actually just now that pews.

  • This all that checking there then So this is a local that we have where we check before we load the pew.

  • After we've read the re factoring, we actually moved up yourself into a component by itself, and we only called for the FBI on deep mouth.

  • So this has been checked by, uh, over on the top so the parent component would choose whether do so.

  • So it's like a this on now.

  • So on Lee, when you have something loaded and then inside a component, you would say, OK, I will ask for the data myself.

  • So if it is a bit clearer, So when you want to sleep a component a good gauge is a speeded along your data lines.

  • Because the closer your data is your component, the easier things will be after a lot of our work is actually the translating data into interface and a lot off.

  • Our abs today are very data driven.

  • Um, and they and they that itself is very guided by information architecture.

  • Well, we're all front and death, and then we don't trust back and death.

  • But I believe they do their work also.

  • They they will split the data, Probably just like how we will speak our date abruptly, so use it as a hint.

  • Each time you realized that this is gonna be a different model, this is gonna be a different end point.

  • It's a good time where you split things up.

  • So most of the time you're one pitch.

  • It's not gonna be just one single FBI call.

  • It's gonna be five.

  • Use that as a chance to split it into five separate components.

  • And then if that's a 11 AP, I re dense you an array off listings.

  • Use that chance to realize that you can have you can split them up into all small listing Cut component.

  • Um, sometimes you realize that your data doesn't match how things look because, you know, sometimes the designer and the end f the world too well, so you get stuck in the media, use a data adapter, so data adapter can happen.

  • It can be like a you to function, so you can do it after you fetch, or they're all right at the point where you you retrieve your data out from your store.

  • This, uh so they actually functions where you were transformed how information came in from back end.

  • Do how it should look on the front end.

  • Try not to do it on your component itself.

  • Because this functions is gonna go because every single Brenda and you, you know that this this transmission just have to happen one single time.

  • So do it right after you fetch it from your if you do it right at the point where you get that from your store.

  • Okay, so this is, uh, the type definition of one off component.

  • I I actually didn't count how many from?

  • They're, uh uh It's It's stealing our core base.

  • I'm I'm sorry.

  • Ah, so, uh, very like, Oi, this is called and the prophet collapse.

  • Um, 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 Okay, so let me show you how it looks like.

  • Okay, so this is our input.

  • Pecks its Inquire him once, though.

  • So, uh, is there a message if you get out this No error message and then, Ah, there's a labor.

  • So you see, like when you go on it, the labor will move fatwa, and it is also face holder at the same time.

  • And then Ah, this is a prefix.

  • Sometimes you don't get prefixes when we get to get out.

  • Ah, we have different sizes to cater to different use case.

  • And then sometimes you can, uh, okay, this doesn't look at it same time with their rules, So problem and then you can disable it.

  • You cannot put me in it anymore.

  • Okay, so you see, actually, some off the promise won't leave each other very well.

  • Like if you have Ah, icon left and there.

  • Oh, okay.

  • Probably your skates for a key down.

  • Okay, so the problem is a use case, right?

  • But sometimes that prop that's what we each other like you have auto capitalize.

  • We've attacked because a pale What's happening?

  • You so ah, before, like they are to prop is very.

  • Isn't it there?

  • Because they are two props on the same element.

  • But they will never worked well with each other.

  • And but the two ah, engineer, When you come in your life Actually, they're all pigs in Poland.

  • So I should just extend on my text input.

  • And you realize that actually a lot off the process option?

  • Er, um this is how really relate to, like, make yourself feel better.

  • Like, OK, 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 weighs in really lets you do this, Um, so that you can extend on the base class and then you can have, like, a telephone in import text.

  • That's ah, photo capitalize.

  • Input X.

  • Okay, sure.

  • But then, um, one thing they will walk across different from wall is too.

  • Then split them.

  • Create a new component.

  • Even if there's gonna be a duplicate cook.

  • No, don't be shy about having to pick it.

  • Cool.

  • Um, of course.

  • Always come from the frame off clean court, but in clean coat at the expense off.

  • Like making it difficult to use.

  • So, um, the apocalypse is a monster is a Frankenstein creature because all of us.

  • But we have so many where engineers, all of us are gonna add onto the Kobe is thinking that it's gonna affect me, but someone else is gonna join the team.

  • They're gonna come in it against your component with 20 props, and there will be like, Oh, the who wrote this?

  • So, uh, I'm gonna end off my tongue with this street that I just saw yesterday.

  • Uh, most off my ideas.

  • I just not repeating people's mistakes.

  • And I think I love us.

  • We come, uh, and we go, we really listen to podcasts.

  • You come to a conference thinking that, you know, that's gonna be a somewhat so wisdom.

  • But I realized that a long time guidelines is just one percents 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, um, please and make this community more knowledgeable for okay.

  • Thank you.

uh, I'm good morning, everyone.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it