 Hello everybody. I'm Thomas. I fill in a quick talk because there was only one as I just found out. I hadn't looked up the schedule before I came and like it's gonna be a talk about quick things that I learned over the last half year setting up with the new company a front-end component suite to make a rather ambitious project work. But before that, I should make sure that my screens work the way I want them. I want to give you an update on something else. You might have heard about that. Well, I'll do this here. There we go. That's how I like it. There's a conference here in Singapore that happens about every 18 months by now or officially whenever I feel like it. It's called JSConf Asia and it's gonna be happening again next year in June to be exact. So mid next year. We have a really quite exciting venue for it. We swapped again away from the Capital Theatre and there's gonna be announcements coming all through November on what how why who all this stuff. For now the most important thing is that this event is a community event and it lives off contributions. So I want to encourage you and whoever you can think of in your company or friends or people you admire online or work with and tell them this is the event you want to contribute to fill out this form. They don't even need to know about it. We'll reach out to them for you if you don't want to talk to them. But if you think they do awesome things that inspired you or really gave you new knowledge, please send them here to submit talks, workshops. This is the first year we're gonna have a digital art submission as well. If people just want to do a generative art, create visuals or even IOT pieces that somehow react or are interactive or even fully passive and just do their own thing. We're gonna have space to exhibit, to showcase, to present whatever creative things that come to your mind and it's the way that we want to introduce this year that people can work their way into the conference. Because I hear a lot of feedback every year that the conference is so expensive and now you can work your way in. You can give workshops, you can give talks and you can contribute creative experiences for people to explore during the event. Please do that. Tell us what you like, why this is exciting, how we can reach you and if you have some references or already a working demo on CodePen or something, let us know here. It's contribute.js.conveja. Here you can see when exactly it'll be. So you can count that back down. So yeah, I want to talk a little bit about components, specifically the presentational ones. Quick questions so that your hands don't get too cold. Who have you used as a component library on the front end? View, the new Angular or React? Web components? Everybody great. So most of you are front-end developers. I'm sure you know the differentiation between presentational components and kind of functional components or container components. I mean there are different names for it. Those that connect to, I assume most of you might use something like Redux or MobX or those are the functional container ones and then you have those that are not connected to the app state in whatever reason and they're called presentational. Now I want to introduce a distinction further. There are two kinds of presentational components and I'm sure you are doing this already just because it feels natural. There are those that I would like to call base components. They're kind of like single simple packs that could exist in HTML themselves like buttons or input fields and then you have what I want to call maybe like model components or object components that represent a larger aggregation and represent some piece of content or information like a model and in this case for example a post. This is like a composite component. You could call it as well. It's not just one thing although now it is one tag. It's a composition out of many things and it represents a model object or a piece of content in your application which is different to the button which is a generic thing that you can reuse or all across your website in different components. Now so that was one thing that helped us make distinctions between components and how they should be used and one thing that I learned. Let's start with the simple things. Buttons. What's a good button? Well I mean you use a button component. Everybody uses the correct HTML tags for what they are used right? Links are A's, lists are UL's and so on. Why should you do this? Well it's accessibility right so that like if people might not visually navigate your website the browser comes with a fantastic set of features to help them navigate and if you just use the right components it's way easier for them right they can actually highlight links they can use their keyboard to navigate your website. If you make diffs with on clicks everywhere they won't be able to do that so don't right you're making yourself more work doing this not less. Simple things like use titles whenever you make a button right and have ARIA labels on them that are speaking text like this button will do this and you can write this in text. There are people that listen to websites so that will help. If you create a good component you can mark them as required so that every developer suddenly has to enter them right meaning otherwise they get a warning in their console which is annoying so and then they're just right okay whatever when I click this you go to this page well done better than nothing right so that's why one thing in components that's a pretty good thing. Another thing so we have like different variations of this post you can see it's like if you if you create this kind of model components they can by themselves be kind of responsive to degree right so they just fit it into whatever space you give them typically by width so I would say every kind of composite component or model component should always take a hundred percent of width that it gets and the height could be either depending on content or also a hundred percent. If you follow that simple rule what you do to the person that consumes your component is you give them a tool to adjust the size of your component because they can define the containing element the parent element and give it a certain size that they want and your component will just fit in right if you do this consistently through all your components you have a way easier way to work with and it will do one thing that I think is incredibly important outside CSS doesn't need to change your component I see this happening way too often looking to way too many code bases where people in parent components overwrite CSS inside child components right I want the pop-up like we have a little share pop-up here but I don't want it with a header right so I use the pop-up and then I overwrite the CSS to make the header display none you don't do that right it's a bad habit because if anybody ever changes the post as I did the other day because on mobile I kind of wanted to have it full screen and animated to come from the bottom like that so that it looks more like a proper mobile app I had to restyle things and I don't want to go fishing around our entire code base on where anybody has overwritten style for this component so that I can adjust it right so never change style of components that you use in the parent component you're just making everybody's life more difficult and the same way you should try to avoid overflow hidden and transitions with the trends or not transition transforms with a translate zero right whenever you move something on the screen like you do an animation like and use a translate or a scale or any of these transforms what you're actually doing is you tell the browser okay take this out and modify it and what it does it will make this component overflow hidden for the time period of the transform and if you don't remove the transform property from the CSS or set it to unset it will remain in an overflow hidden state so we had that something that I can show you here this is the whole yeah this is fun image this is a little swipeable component here that you can tap through to get to different session no different taps if you will and we had this in like a kind of a mask if you will write a cut out where you have like a container you make it overflow hidden and then you have a big sheet of paper if you will behind it that you just move by position to make this effect right like that's kind of how everybody approached these things and it turns out that that wasn't great because there's one cool trick and presentational components that is really powerful and helps you to have way less let's call it state traveling where your component needs to throw an event in a parent component that throws an event in a parent component to trigger this pop-up to show up to capture the entire page right we all hate that part because it goes all the way up your code and back down and you don't need to do that because if you don't have overflow hidden or these transforms still active you can actually just do position fixed on the whole screen you can break it out but the moment you have an overflow hidden or one of these transforms on your component you cannot do that it will only take over the content of that hidden overflow container right so sometimes you obviously can't do it where you need an a scroll container or something but in most cases you can actually avoid it specifically for carousels avoid it this is the carousel that doesn't do overflow hidden if you're interested how that works come visit me later I can show you so essentially they are all like have a hundred percent negative margin on the right so that they are all these like tabs are just zero pixels width so they all begin on the top left position so that like all I do is I animate them during the animation like multiple exist and when the animation is over the ones that don't need to be shown are not even rendered anymore the DOM is not even there so that this is their default state they are now not transformed there's no transform right now on on this component neither on this one neither on this one only during the animation itself I transform them in CSS right never use position absolute and then move left right that's shitty right you want to do this in the compositor in the browser and position absolute and the left top properties and so on are not done by the compositor but by the render it's way slower or layout or actually which is way slower so do this with CSS translates makes it much faster and don't use overflow hidden because you can break out and take over the full screen so you don't need to travel with state all the way up to your application component and trigger a pop-up any component can do that you can do cool effects like I'm not logged in just do that you can do a pretty cool effects like this as well because every component can just break out and take over the entire screen meaning I can make every component kind of cover the screen right I can have a pop-up or anything in any component and so these kind of effects become suddenly really easy and you don't need to bother about having traveling state yeah so that's like one really really good tip don't use overflow hidden and don't do transforms that stick around after the animation is done our other tips let's see this is since I spontaneously proposed this talk I'll have to remind myself on the interesting things that we did as the image gallery again as a component like the interesting part if you do these components kind of separately like these model components and you don't assemble them in the application they're only sorry you don't assemble them in the application but you assemble them in something like storybook is that you can really focus on making that component great right there's no distraction there's no integration work or nothing so in this case like we could make sure that like you can navigate everything with the keyboard and everything has nice outlines so that people know where they are and you get the all the buttons obviously have their titles right because they were required on the components so they had to be filled in yeah like it all comes together quite nicely if you can just focus on making one thing great it's essentially the the old model of making big problems to small problems so you can really focus on solving them well and then you assemble them afterwards so that this part really really helps I can show you how these components are being put together as well it's really straightforward this is a post component has an ID the URL and all the parameters that the component would need and then the actions and then we passed in comment components and the comment box and so this is a quite nice abstraction we thought because this way like even all of these kind of features to be able to with your keyboard select names to tag them and all this kind of stuff you can do all of this without the noise of the entire application around you so it makes it way easier to design these things here's a drop-down component and it's just reused in these composite component right and like escape works to escape out of things out so it's a it becomes fun like when you think you're done and then oh we have forgotten keyboard controls and then you add escape and all this kind of stuff to it and enter in arrow keys and so on that should exist and you give it the right area labels so that like a pop-up really becomes a dialogue box that like the browser understands as a dialogue box and this kind of stuff you have never looked up aria google for MDN and aria it's a whole new world of things very important topic and you can even do like simple parallax effects in a few lines of code like we coded this during another meetup like animating things on scroll is always the best thing you can waste your time on all right but since this one is just a background image that's animated the the background position is changed with JavaScript this is really just four lines of code to do this kind of parallax effect which is becoming the norm these days I think don't know if you're curious add scroll handlers remove scroll handlers never forget that and here all you do is you position the background image by let's say half the top that's that's it good question like I I don't know like luckily the company I work in has a rather high standard in terms of to which degree these components should work so that that question has not bothered me meaning we can make them as well as we can and then we ship them and when we see something is wrong with them we can fix them I think it has a certain advantage to do that and you get rather quick over time because if you start with some base components very very simple ones and then you compose them into these model components that reflect some model object or your database like you like you build yourself pieces that you can just puzzle together your website with everything else becomes so simple afterwards like the way I approach creating rapid vacations these days is that I make them almost entirely work just in UI meaning there's no back end connected to it it's just the entire thing just works in UI as a fake as a mock right so that I can nail down the user experience and how I want it to work and sometimes I get lost at it too and like make it way too crazy and then eventually I plug in some some back end I don't know if you hit me rambling about this but like I started a little project a weekend project last year in April exactly that way it's simple tool to order food at one of four restaurants that are currently supporting it but that whole thing just existed as a mock UI that you could just click through and it would do things in HTML and if you want later on I put in more bags as a state manager and then I plugged in fire base for persistence and so it all just grew into the back end if you will from from the front end both ways like the obvious ones I start with like so that they are few like the buttons is always a good thing to start with right and then you might have like sometimes you have certain input fields although don't go too crazy on those right but like you start with the obvious things and wherever you see a sense for reuse very quickly you go back and componentize something for example right now the avatar picture here is already a component because it always has a link it always has certain thing over it it comes in different sizes oh this is another good one always bind your components you know with a hundred percent width or height as well and if you make inline block components don't give them sizes like large or small or something like that ideally make them respond to whatever the font size is at that time you'll have a way easier time like because no developer knows what small is right you would need to look it up somewhere but every developer knows which font size they're currently working with in this context right only in a like at the same time if you create a pop-up component like this make sure you reset the font size to 1 rem inside of that component so that because it's now a new context that you're creating right but like four four buttons they should always listen to the font size that they embedded in again you're giving because of the cascade in CSS like you're giving other developers that consume your components like a parameter that they can adjust the size of your component with that is in their control that you just inherit further down the tree right the DOM tree so that's like another really good tip like never make a property with a certain size parameter but just make it EMS like listen to the font size and and configure them accordingly because it typically respond to the flow anyway right so that's maybe another good good tip right there yeah anyway specific questions to componentization and these these things I mean these are just learnings from from doing it and running into issues with other developers in collaboration because too much CSS was infiltrating other components and you changed something and it breaks millions of things and it's on right and nobody wants that the stories yeah so I mean this is storybook so all the actions are just fake it's a storybook function meaning when I when I click an action let's say I want to post something it just shows up in the action logger it's just a logging event right so that I can see what objects I'm passing so I'll try adopting a storybook on a number of teams and it generally starts out really good but people seem to fail so it doesn't continue to do it it sort of ends up in a state of disrepair pretty quickly yeah not yet no I I mean it happens in between you know like eventually you start implementing and like nothing ever holds up to the the real use case you know no matter how good you did it and then you start fixing it for the real use case and then your story box out of date yeah that happened to me too but like I essentially went back and fixed the storybook because in the end the storybook should become a documentation for other people so these things will start becoming stickier the bigger your front-end team is because there are more people relying on these things and you'll see that like you know the the collaboration requires certain things to be up to date and so yeah it's like just sitting down going back and fixing them up after some time because nobody hates broken documentation or outdated documentation right like the worst so the more people you have on that team obviously the more feedback you get about these things and the more important they become yeah so I'm maybe I'll even find in here a broken component somewhere but yeah the other cool thing obviously if components are done well you can just do components inside components like so we have a post inside a post like if you share a post and stuff like that so yeah I made it so that literally you pass a post tag into a post forgot where that was here yeah here you can do that too but it's also to come back to that issue never write CSS that goes inside a child component if you want to have a quick fix and you don't want to like necessarily create a new parameter on that component and then implement it properly at least write the CSS that you need inside of that child component so if you in this pop-up example if you want this pop-up in a certain case to not have the header then write that case into the CSS of that component CSS is global right so you can say if your CSS is inside of the newsfeed page then I don't want a header but you don't write that CSS into the newsfeed page but you write that CSS into the component because at least me who then eventually goes and wants to update the component sees it because it's there I don't need to fish around for it right so you can make these things contextually aware you know there are these funny CSS selectors like the plus right if something follows another class right and the same way maybe I did this here actually somewhere maybe not in this one but there are definitely components in here that say like if this components outer class or ID is inside or follows a certain other component then it should look slightly different right that's kind of okay it's been hacky but it's kind of okay if you do it inside of the component and everybody who works with that component can see it there right it's better than having it somewhere else yeah so that's maybe my quick summary on learnings on working with presentational components and I hope you found something helpful in there and I want to end with a little information that's going to be a conference about not so much coding but about working with developers and engaging with developers next week on Friday that I helped to organize it was kick started by Mozilla I think they want to get foothold in Southeast Asia a little bit and thought it would be a good idea to to run a conference first and so we helped them do that it's essential for everybody who works with or engages with developers to learn how to do that better and to understand issues and problems of developers and maybe also speak up as a developer during the event to get your voice heard there's still a few tickets available so if you feel like this is an event for you come on Friday in any case you should come to the level up social which is the night the evening afterwards I think we're a sponsor for that too I think that's gonna be in an arcade at Clarkie so some some drinks and some hangout would be cool to see you there that's it thank you