0:07 Hello everybody. Welcome. I'm I'm Alexi. 0:10 I'm going to be the one running this 0:11 webinar. Thank you so much for taking 0:13 the time. We we know it's in December. 0:15 It It's the last one of the year and 0:17 we're all waiting to go on holiday, but 0:19 I promise you it's going to be worth 0:21 your time. I'm a solutions engineer here 0:24 at RTOR and I wanted to go over today a 0:26 few things around software essentials 0:28 for app building. In my job on a current 0:31 basis, I've been working with more and 0:33 more people that are building inside RET 0:35 and we've actually realized that the 0:37 persona building has sort of expanded 0:40 over the years and it's less and less 0:42 software engineers running. So, this is 0:44 what I wanted to talk about today and 0:46 make sure that we go through a lot of 0:48 the of the things that you're going to 0:49 encounter when you're building from now 0:51 on. Now, what can you expect for today? 0:54 The first thing is I'm going to talk 0:55 about software in general and how it's 0:57 becoming more and more accessible. And 0:59 then we're going to do a buildalong 1:01 where we're going to explore different 1:02 topics that I've seen a lot of people 1:04 run into from the data, the ops, or even 1:06 the PM world. And we'll end with Q&As's. 1:09 So, don't hesitate. If you have any 1:11 questions, put them in the chat. We'll 1:13 be sending you quite a lot of material 1:15 throughout. There's a document to follow 1:17 with the buildalong. So normally you 1:19 should find quite a lot of links during 1:21 this webinar that are there and if you 1:23 have any questions I have Ollie who is 1:26 more than happy to help you with that. 1:27 So if you see any message from any 1:29 messages from him he's from the 1:30 organizing team uh and he says the 1:32 truth. 1:34 So the first thing is the level of of 1:37 abstraction when it comes to building 1:38 software is reducing with time. 50 years 1:41 ago it was well basically like machine 1:43 languages binary and from there as the 1:46 years have gone on we've sort of 1:47 expanded who is able to develop across 1:50 the way only a few years ago before the 1:53 rise of chat GBT openai and even low 1:55 code in general the statistic that was 1:57 thrown around was that around only one 1:59 person 1% of people were capable of 2:02 coding as a whole and the whole idea 2:05 that we had in the 2010 era was to 2:09 really devel velop what we called 2:10 citizen developers. The the thing that 2:13 we wanted to solve was allowing more 2:15 business people to be able to develop 2:17 applications. And it just ended up that 2:19 the frameworks that we had at the time 2:21 and the sort of way that code worked at 2:23 that day wasn't good enough to allow 2:25 them to really create flexible 2:28 production grade quality applications 2:30 when it comes to enterprise. So that 2:32 died down a bit. But since then we've 2:35 had a resurgence of visual interfaces 2:37 and of course AI coding that has allowed 2:39 more and more people to simply develop 2:42 as a whole. So today in retool it's 2:44 exactly what we're going to explore the 2:47 visual interface and a bit more of the 2:48 vibe coding aspect which is why we've 2:50 seen many of you come to our platform. 2:53 So as I was saying today well the 2:56 builder profile inside retail is really 2:58 changing. Initially it was mainly 2:59 software engineers and I think that was 3:01 true until three to four years ago but 3:03 today what we've seen is that 40% of 3:05 retail builders are not software 3:06 engineers they're data people ops people 3:09 and some of our big biggest clients 3:11 today are still from that world so I'm 3:15 talking like companies like LVMH like 3:17 NBC Universal like Zeus very very big 3:20 organizations that are driven by data 3:23 ops or engineering oh sorry not 3:25 engineering people like product managers 3:27 product owners mainly people from the 3:28 product side and all of these personas 3:30 are sort of expanding to them. This 3:33 isn't an issue at all. On the contrary, 3:34 it's super exciting for us because it 3:36 really enables us to have a new sort of 3:38 entire world of people that are building 3:40 and it's actually making our platform be 3:43 more used, which is a great thing. But 3:45 we also realize that these personas in 3:48 general, they tend to struggle a bit 3:50 with certain parts of the platform which 3:52 are due to the fact that they aren't 3:53 traditional software engineers. So there 3:56 are sort of four main topics that I've 3:58 been seeing when I've been running be it 3:59 hackathons be it calls with clients and 4:02 this is what we're going to go through 4:03 today. The first one is on UXUI in 4:06 working with design systems. So we're 4:08 going to explore that. Also I think in 4:10 the internal development world which is 4:12 where retol is specialized there's it's 4:14 even more true that you generally don't 4:16 have UXUI people to help you. So often 4:18 the one building is also the one 4:20 defining the entire UI. The second thing 4:23 is the notion of front end and back end 4:26 which is a notion that has a lot of 4:27 implication into what happens where how 4:29 does code run and you tend to have a lot 4:32 of issues when it comes to performance 4:34 or other things that we're going to 4:35 explore. The next one is what we call 4:38 the event loop or essentially all of the 4:40 actions and how you can trig them 4:42 [clears throat] inside the tool. So 4:43 we're going to explore how that works so 4:45 you can make sure that you have control 4:47 over whatever whatever's running and at 4:48 what time to make your applications work 4:50 the way you intended and in a performant 4:52 way. And finally, it's going to be very 4:54 basic things around best practices and 4:57 how you can incorporate RAI that allows 4:59 you to develop faster inside these best 5:03 practices to help you when you're 5:04 building 5:07 for the build along. Um this actually 5:09 what we're going to be building is 5:10 something that comes from a friend of 5:12 mine. So I have a friend who's a data 5:13 analyst and he wanted he he's got into 5:16 aviation. He's becoming a pilot and he 5:18 wanted to sort of track where all of the 5:20 airports are in the world and he started 5:21 using RTOR and I realized when I was 5:24 working with him that he encountered all 5:26 of the specific problems that I was 5:27 mentioning to you. So what I'm going to 5:29 do is sort of retrace with you what I 5:32 did with him and covering all of the 5:34 topics um along the way. So, it's really 5:36 going to be about reproducing real real 5:38 world like building experience and we're 5:40 going to pause along the way for all of 5:41 the concepts that we want to attend. 5:44 This being said, let's get right into 5:47 the building phase. 5:49 Now, I will start by saying I hope a lot 5:52 of I hope most of you are here. So, I'll 5:54 just give you 10 seconds to uh connect 5:56 to this. The most important part is the 5:58 login phase to EMIA agents. You should 6:01 have normally, I sent this out this 6:03 morning, an invitation for you to be 6:05 invited to the instance. If it's not the 6:07 case, please put a message in the chat 6:09 and Ollie will add you there. I'll just 6:11 give you um like 30 seconds to connect. 6:14 Uh hoping you don't have any issues on 6:17 that end. 6:29 So let me just look quickly at the chat. 6:31 I think quite a few of you are in. So 6:35 first of all, welcome to the main page 6:36 of retool. What you can see here is the 6:39 initial page that we all have. And we're 6:41 directly going to go into building. So 6:42 you can click on this blue button right 6:44 here to create an application, create an 6:47 app, and from this you will arrive on a 6:50 blank canvas. 6:52 The first thing that I did with my 6:53 friend though before even getting into 6:55 building itself was do you want some 6:57 inspiration in terms of UIU UX and I 7:02 sent him a few links to them and there's 7:04 one of them that he actually liked more 7:05 than the others and this one is buck 7:08 tool. He saw this and he was like in 7:10 terms of design I love it and I want 7:12 this. The initial discussion we had then 7:14 was is this good in terms of UIUX? Are 7:17 the good are there good practices in 7:19 this application that he should retake? 7:20 And when he's going to show all of the 7:22 airports, should he actually make them 7:23 look like this or not? And that's the 7:26 first thing that I sort of want us to 7:27 consider is the importance of UI UX when 7:30 it comes to internal tools and then how 7:32 to interact with the design system. So 7:34 these are the two things that we're 7:35 going to see in this first phase. 7:38 How to start? First of all, in this 7:40 application, there are a lot of things 7:41 that are done actually really right when 7:43 it comes to UIUX. The first thing is 7:46 everything in terms of naming actually 7:48 makes sense. So this is a tool that 7:50 resembles Jira and in Jira in linear you 7:53 talk about issues. So the first thing 7:55 that's really good is that the wording 7:56 that's used around this application is 7:58 very good. Everything's linked to what 8:00 it should be and what the real world 8:02 actually is. It's an issue. The second 8:04 thing is like the navbar on the left 8:05 hand side is the same. It's consistent 8:07 across the application and I can see 8:09 that all of the different parts in terms 8:11 of design and UI are very consistent. 8:13 It's the same colors everywhere. 8:15 Whatever I do, I sort of see it in the 8:17 same way. The third thing that's really 8:19 good is this drop down right here. What 8:21 you can see is that it actually gives 8:23 quite a lot of space for us to have more 8:24 information and I can really see it in a 8:27 clear in a clear way. There's no there's 8:30 nothing here that's not useful and 8:32 that's really really good in terms of UA 8:33 UX principles. However, we do have a few 8:37 issues. The first one is I've got some 8:40 buttons that actually don't seem to do 8:42 anything. So, of course, that doesn't 8:44 really make sense. And as a user, I'm I 8:46 want to click on them, but I can't. In 8:48 terms of other things that I want to do, 8:50 I realized on clicking on new issue that 8:52 I had other issues when it comes to 8:53 UIUX. The first one that I see is I 8:56 filled nothing in, and I can already 8:58 click and hover create issue as though I 9:00 could. And if I click on it, I don't 9:03 know what's I don't know what's just 9:04 happened. 9:05 These are sort of the basics of what is 9:07 going on in terms of UIUX. And I I don't 9:10 think that you should arrive on an 9:12 application and never know what's going 9:13 on. If something's loading, you want to 9:15 see it. If you can't click on a button, 9:17 which should be the case here because 9:18 I've I've done nothing, you shouldn't be 9:19 able to. And these are the first things 9:22 that I really want a lot of these new 9:24 builders to think about is what should I 9:26 think of in terms of UXUI. 9:29 What you need to know is that there's an 9:30 entire research around that as you are 9:32 all aware of. However, what we do when 9:34 it comes to internal tools is there are 9:36 two things. The first one is f on 9:40 internal tools, UX is way more important 9:42 than UI. UI in general, which is the 9:45 style, the styling of the components is 9:47 way less important compared to clicks. 9:49 On internal tools, you're really looking 9:51 for operational efficiency. So, you want 9:53 to make things super simple where nobody 9:56 can sort of go wrong when it comes to 9:58 your application. And also if a if you 10:00 can click on a button, you can be sure 10:01 that a user will click on a button. 10:03 We've all seen applications used in a 10:05 way that isn't conventional. 10:07 when it comes to best practices, what I 10:10 would consider for you to look into 10:12 first is um so that there are 10 10:15 usability horistics that have been out 10:19 for quite some long time by Jakob 10:20 Nielson who's a great great designer and 10:23 it's the first thing that I would advise 10:24 you actually to think about when you 10:26 start building system is how do I want 10:28 to build them? How will the user be and 10:30 these are sort of 10 global principles 10:32 that will already give you a very good 10:34 idea of what you should do for 10:35 usability. 10:36 I won't go through all of them because 10:38 we're actually going to going to go 10:39 through quite a few when we're building. 10:41 But the main three to have are things 10:43 that we actually talked about. The first 10:45 one is visibility of system status. It's 10:48 you should always be informed of what's 10:49 going on. So in bug tool, when I create 10:51 a new issue and do this, I don't know 10:53 what's going on. That's very bad in 10:54 terms of design. The second thing is 10:56 your system should match between the 10:58 system and the real world. So typically 11:00 here, the fact that everything is called 11:02 an issue is very good because it makes 11:04 it super simple for me to understand 11:05 what's going on. And you really want to 11:07 not use any jargon that you're using. 11:10 And for the rest of them, I'd more than 11:12 advise you to look into this when we're 11:14 building when you're building out and 11:16 use this more as a checklist of how to 11:18 build good UI UX. 11:20 This being said, let's get back to 11:22 building and we're going to try and 11:23 build something quite close to this. 11:27 So, normally you should all by this 11:28 point be on a blank page. And the first 11:31 thing that we're going to do is that 11:33 we're going to add the navbar for 11:35 reusability. So, every single time that 11:37 somebody wants to change a page, we'll 11:39 be able to. And to do this, you can 11:41 click on the component tree. Because the 11:44 navbar is global, that's why it's not on 11:45 a given page. It's at a global level. 11:48 And if you click on the plus right here, 11:50 you'll be able to add a sidebar that 11:52 will automatically connect um a logo and 11:55 a navigation component. 11:58 So I'll just give you 10 seconds to 11:59 follow this. And during that time, I'm 12:01 going to go and I'm not a huge fan of 12:03 random logos. So I'm going to use I'm 12:05 going to use ours, but don't hesitate. 12:07 You can change this in terms of URL. 12:10 Now the logo I've put right here. So 12:13 once again, if you have access to the 12:14 documentation, uh you can find our logo 12:16 here or use yours. Please don't 12:18 hesitate. 12:22 So let me put that in. And I can see 12:24 that retail fits in. 12:27 When we're getting to styling, there's 12:29 already something that we can talk about 12:30 right here is when it comes to 12:32 components and dragging well components 12:34 that are already on the canvas. You have 12:36 an entire panel on the right hand side 12:38 where actually you can do a lot when it 12:40 comes to appearance. This is the second 12:42 thing is we've got a huge amount of 12:45 components inside retool and while I'm 12:47 going to be trying to re well to 12:49 recreate the bug tool bit for my 12:50 airports I'm going to want to use as 12:52 many components that already exist as I 12:54 can and it's very important for you to 12:56 sort of look into the design system 12:58 because that's how you're going to know 12:59 what you can build quickly or not and I 13:02 think most of you are looking for 13:03 efficiency when it comes to building 13:04 tools. The more you know the component 13:06 library, the more you'll be able to know 13:08 what capabilities you can and cannot 13:10 build super quickly inside retail. Same 13:12 goes for styling on this logo. If you've 13:15 imported our logo, you'll see that it 13:16 fits quite well. If it's not the case, 13:18 you'll probably want to play around with 13:21 cover and contain. Essentially, cover 13:24 will expand your logo to make it fill, 13:26 but sometimes it cuts some of the 13:28 borders to make it fill. And contain, it 13:30 will just make sure that your entire 13:31 logo is present. But if you have super 13:33 wide borders on this, you'll you'll see 13:34 certain issues on the UI side. So when 13:36 it comes to styling UI, look at the 13:38 appearance of all of these components 13:40 and that will really help you going 13:42 forward. 13:44 The second thing that we're going to do 13:45 now that we've changed the logo URL and 13:47 styled it is look a bit more into the 13:51 navigation component. Right now I see 13:54 that it's called page one and I see that 13:56 it's mapped to my data sources of pages. 13:59 This is something very traditional that 14:01 you're going to have and we want to 14:03 change this to something that actually 14:04 makes sense. So I'm going to try and 14:05 call this airports for example. So I'm 14:08 going to click on the pages tab right 14:09 here and click on page one. And when you 14:12 have this, you have the configuration 14:14 panel of the page that will appear on 14:15 the right hand side. And I want you to 14:18 go through the content and change the 14:20 page title. In this case, we're going to 14:23 go towards airport. And automatically I 14:26 see that this has been called airport. 14:29 We also mentioned this was a navigation 14:31 component. I just wanted you to see that 14:33 if you add a new page automatically, it 14:35 will be added to the navigation. So this 14:38 already in terms of structure when it 14:39 comes to making things very clear. You 14:41 it does it by default and it's one of 14:43 the features of the navigation component 14:45 you can explore. If you wanted to know 14:47 exactly how this works, you have the 14:49 entire description of what happens here 14:52 where essentially it maps through the 14:53 different pages that you have. So in 14:55 this case page one and page two and it 14:57 reuses the title the titles that you 14:59 have 15:02 all about configuring the design system. 15:04 Give you 10 seconds to be up to date and 15:07 then we'll move to the second part 15:09 around how do we display um well the 15:11 table component as itself. 15:21 Let's carry on. So on the right hand 15:23 side now this is the place where if I go 15:25 back to bug tool I would want to have I 15:28 have two views when it comes to this. I 15:29 have an issue view and the project view. 15:31 So the first thing that I see is that 15:33 the entire UI in the middle of my screen 15:35 changes depending on where I am. By the 15:38 way I won't use the breadcrumbs cuz 15:39 that's one other thing that I found a 15:41 bit weird is that they don't they don't 15:42 work. They don't do anything. So let's 15:45 for now just focus on having like two 15:47 tabs and we'll first do the airports 15:49 like this and then look later at how we 15:51 can do the project view. So the first 15:53 thing I'm going to do is I'm going to go 15:55 towards a component called the tab 15:56 container which I'm going to drag and 15:58 drop on the screen and I'm going to 16:01 rearrange this on my screen. What you 16:03 can see in terms of grid when it comes 16:05 to positioning elements is that you have 16:06 different aspects. The first one is 16:08 actually simply using the entirety of 16:11 the grid. So please do and then what I 16:14 can see is that I was able to move it 16:16 from left to right but not from top to 16:18 bottom. This once again is a feature of 16:20 the design system. If I go to the um 16:23 layout and appearance what I can see is 16:25 that the height is automatic and that is 16:28 one of the concepts inside CSS which 16:30 essentially means that your components 16:32 will only stack on well sorry your the 16:35 parent tab container will only be as big 16:37 as the components that are within. 16:39 That's not exactly what I want because 16:41 when I look at bug tool, it's more of a 16:43 it's more of a fixed sort of list that's 16:45 infinite. So, what I'm going to do is 16:47 change this to fixed in here. And I'm 16:50 just going to tell it to take the entire 16:51 page. So, something like this sounds 16:54 good to me. What I also see on bug tool 16:57 is that I don't have the borders that I 16:58 have automatically. So, right now, what 17:00 you can see is that there's space 17:01 between my space bar and my page main. I 17:04 want to remove that. And that is 17:06 everything that's linked to uh padding, 17:09 margin, things like that. So I'm going 17:11 to remove the padding on the page 17:13 aspect. And on the tap container, I'm 17:15 going to do exactly the same. Remove the 17:17 margin and remove the padding. So every 17:20 single time that I'm doing this, I'm 17:22 clicking on the elements, going to the 17:24 bottom of the round the of the right 17:26 hand side panel, and deselecting the 17:29 margin and and the padding. 17:32 When it comes to a tab container, I have 17:34 different views. And the idea is that 17:36 the components that will be shown here 17:37 are different depending on the view. So 17:39 the first thing we're going to do is 17:41 we're going to add a table. Um that's 17:43 the the main component that we have. And 17:45 let me just drag and drop this. And 17:47 we're going to check that this table is 17:49 only for the first view. And it's the 17:51 case, which is great. So that already 17:53 means in terms of creating navigational 17:55 structure, we've got a sidebar that we 17:57 can reuse from one page to another. By 17:59 the way, it's already bound bind in the 18:01 same that in the sense that you I'm 18:04 moving from one page to another when I 18:05 click on one of these two. I've got my 18:07 tab containers which will allow me to 18:09 separate my visions. And I'm very very 18:11 quickly getting to something that is 18:12 looking more and more like buckle. 18:16 The next thing I'm going to do is change 18:17 the tabs. Right now they're called view 18:19 1, view 2, view 3. That doesn't make a 18:21 lot of sense to me. So what I'm going to 18:23 do is click on one of the views and 18:26 change them. Now the key could change. 18:28 It could well stay the same, but what 18:30 I'm mainly going to change is the label 18:32 and just call this um airports for 18:34 example. And I'm going to call it 18:36 airports table compared to airports 18:40 project which is where I would do the 18:42 other kind of disposition. 18:44 The third view I don't need. So I'm 18:46 going to click on the three points at 18:47 the end and delete them. And you should 18:49 have something that looks much more like 18:51 the issue views, the project views as we 18:53 had in bug. 18:55 The next thing that we see when it comes 18:57 to this table is that right now it's 18:58 only taking part of the component 19:00 whereas here it was taking the entire 19:02 space. This once again in terms of UI is 19:05 really knowing what your design system 19:06 does. And in the appearance part we can 19:09 see that there's a property called 19:10 expand content to fit. And when I hover 19:13 over it I can see that it removes all 19:14 padding and margin causes the container 19:16 to take up the entire space. And this is 19:19 true when there's a single component in 19:21 the container. So I'm going to click on 19:22 this and automatically my table fits the 19:26 fits the container perfectly. So I don't 19:28 have any whatever the size of my screen 19:30 whatever I do I'm redefining this so 19:33 that the table will always take its 19:34 entire place. 19:37 This is great. This means that now we've 19:39 got a design that looks way closer to 19:41 what bug was. But there are still a few 19:44 things that I want to change if I look 19:45 at bug tool and generally in terms of 19:47 UIUX that aren't interesting. The first 19:50 one is my data. So when it comes to the 19:53 t the table right now, if I click on it, 19:56 you might have to close a few tabs to do 19:57 this. You can see that I'm using demo 19:59 data. So that I will change to query 20:01 airports right afterwards. 20:03 The um so that that's one of the things 20:06 that I'm looking at. The other things is 20:08 in terms of columns, there are a few 20:10 columns that I wouldn't like here. For 20:12 example, the ID, I don't think any end 20:14 user would be interesting in that. I can 20:16 see that I can make certain columns 20:18 hidden, certain columns editable, and 20:20 actually go further in terms of how 20:22 they're defined. So, that's one of the 20:24 things that I'm looking into when I'm 20:25 defining them to really fit the UI. And 20:28 then the second thing that I'm well that 20:31 I'm looking at when it looks to this 20:32 table and styling in general is that the 20:35 colors of bug don't look at all like 20:37 they do here. Right now, everything is 20:40 sort of well, everything is kind of pure 20:42 white everywhere. and I want to change 20:45 these colors. 20:47 That's a super important concept when it 20:48 comes to design system in general is 20:50 that these these components that we're 20:52 using right now, they are functional 20:54 components that we can then as we saw 20:56 change the style in the bottom right 20:58 hand side. So technically now I'm the 21:00 I'm on the table component. I could add 21:02 a lot of styles. For example, I could 21:04 say that the background of this table 21:06 and change it to something sorry that's 21:08 a bit of a flash. Uh I shouldn't have 21:10 chosen something so colorful. That's not 21:12 much better. But Essentially, I could I 21:14 could style my entire um my my entire 21:18 application this way using these kind of 21:20 elements and styles that are right here. 21:22 The thing is I'm going to lack 21:23 consistency when it comes to bigger 21:25 bigger applications. I'd really like all 21:28 of my design system to fit to fit 21:30 exactly what I have and that's what I 21:32 want to look into. And there's a concept 21:34 that we've built out for this in terms 21:36 of design system which is themes. 21:39 themes. You can find if you look into 21:41 the app settings, you have an app theme. 21:44 And this is a way actually for you to 21:46 customize the UI aspect of everything 21:49 that you're drag and dropping onto the 21:51 canvas. And it is the first layer of 21:55 what will happen to any given component. 21:57 So I'm going to quickly show you what it 21:59 looks like if it will open for me and 22:03 then we'll come back to the application 22:04 and apply a theme or two. 22:08 So the idea of a theme is every single 22:12 component that you have you can reuse 22:14 throughout your application and a button 22:16 will always be read by default. It's 22:18 really setting the default of everything 22:20 that you have. So what I would advise 22:22 you to do is use themes wherever you 22:24 have to have consistent UIs wherever you 22:26 go. It will help you building build 22:28 faster and it will add a lot of 22:30 consistency to your applications. Now, 22:32 let me just go back to where I was 22:34 before to my airports application. And 22:36 I'll just go through a few themes for 22:39 you to see the difference. So, I'll just 22:41 remove this. And if you look at what 22:43 happens on my right hand side, when I'm 22:45 clicking on a few of them, the UI is 22:48 drastically changing depending on that. 22:50 And that is how you will be able to 22:51 create way better uh UX UIs in general. 22:55 One last things, when it comes to UXUI, 22:58 the rules of them are always the same. 22:59 And I think this is something that trips 23:01 quite a lot of people up. The theme is 23:03 the default and the styles that you put 23:05 here will override whatever you do. So 23:07 if I wanted to do as before and change 23:10 the background because I've defined the 23:12 background at the element level, this 23:14 one will be the one that will actually 23:16 be used. So if I'm I'm going to put this 23:17 in yellow, um this will be the one that 23:20 will be used to do a bit of a summary of 23:23 everything that we've seen in terms of 23:24 UXUIs. What you want to look at is how 23:27 do I build clarity? How do I build 23:30 navigation in general so that it looks 23:33 well in terms of all of the elements and 23:35 the components that I have? You really 23:37 have a lot to learn in terms of what 23:40 they how they work, what are the 23:41 interactions, what do all of the uh what 23:44 do all the information the right hand 23:45 side panel sort of mean. And if you want 23:48 to know if your application is following 23:50 sort of the best practices or not, 23:52 please don't hesitate to come back to 23:54 these 10 sort of um well usability 23:57 heruristics and they will be a very good 23:59 checklist to know if you're implementing 24:02 the right UX and the right UI that comes 24:04 into this. 24:07 With that being said, let's go into the 24:08 second topic. The second thing that we 24:10 want to look at is right now we don't 24:12 have any data around airports. And of 24:14 course that's not what we want cuz we do 24:16 want an airport tape. This brings us to 24:19 the second aspect which is how do we 24:20 query data and how do we make that data 24:23 efficient and make sure that our 24:25 applications don't lag. So the first 24:27 thing that we want to do is connect data 24:29 to this table. So I'm just going to 24:30 click on the table and as as we saw 24:31 before we were using demo data. I don't 24:34 want to use this. I actually want to 24:35 connect to a data source. So I'm going 24:38 to uh I'm going to use a query. 24:41 And to use a query you can open on the 24:44 left hand side the code panel. This will 24:46 open the resources. You can connect to 24:49 retail database. 24:51 So uh this has already been set up for 24:53 you and I've given you the code. In this 24:56 case we want to select everything from 24:58 airport. So you can select stuff from 25:00 airports. Airports is a table that I've 25:02 put into the back end where essentially 25:04 we found a the data set of all the 25:06 airports online and we've imported this 25:08 into the system. 25:10 So, let me save and run this. 25:14 And the thing is, it's going to take a 25:16 while. It's going to take a actually, 25:19 it's going to take a pretty pretty long 25:21 time. And the problem is, as you can 25:23 imagine, right now, we have there's a 25:26 lot of airports. There's like 83,000 of 25:28 them, maybe more. When it comes to the 25:30 number of airports that you have. So, 25:32 actually, I'm at the query ran for 25:35 nearly 20 seconds if you looked at the 25:36 bottom of my screen. And right now it's 25:40 yeah 83,792 25:43 airports. That's a huge huge amount. If 25:46 I look at my table on the right hand 25:48 side, it's even kind of bugging out cuz 25:51 it's hardly capable of creating or 25:53 generating the table itself. And this is 25:56 sort of the second concept that I see a 25:57 lot of people stumble into, which is 26:01 what is going on? Why is my application 26:03 taking so long? And what is sort of the 26:06 difference? Well, the solution to this 26:08 is what is the difference between a back 26:09 end and a front end? What's going on? 26:12 The first thing to know and when I 26:14 became a software engineer, it's how it 26:16 was explained to me. You can see the 26:19 back end as a kitchen and the front end 26:21 as a dining table. And in this case, 26:23 what we said is that us when we ordered, 26:25 we asked in the kitchen for them to 26:27 bring every single airport in the 26:29 database. And so what they had to do was 26:31 basically scramble around and find the 26:33 83,000 ingredients or airports in this 26:36 case and then bring it back to us so 26:38 that we could actually start using them 26:39 and look into them. It's an ungodly 26:41 amount of work and even for me when I'm 26:44 in my dining room, if you bring me 83 26:46 83,000 ingredients to just have them 26:49 have them there, show them on a screen, 26:51 it's it takes me a lot of time to render 26:53 this. And this is where you have the 26:56 difference between a back end and a 26:57 front end. The front end is essentially 27:00 uh what you see. It's your machine. It's 27:03 your telephone. It's your computer right 27:05 now. And what's important to know is 27:08 where does the code run? When you're 27:11 bringing 83,000 elements to your front 27:13 end, you're asking your phone, your 27:15 device to show 83,000 lines of elements. 27:19 So for one, it's taking a very very long 27:22 time because it has to send you 27:23 everything. That also means that over 27:25 the internet, well, you're essentially 27:27 sending ungodly amounts of information. 27:29 So, that takes a long time. If you have 27:32 users that are in places that don't have 27:33 good connection, this is going to take a 27:35 crazy amount of time. And I think we can 27:37 all imagine that waiting 20 seconds for 27:39 application to load, it would probably 27:41 be off by then. Um, it's it's just too 27:43 long for us to sort of look into. 27:47 So what we actually want to do in this 27:49 case is not have everything sent to the 27:51 front end and then tell our table 27:53 components, oh, you can handle it, but 27:56 actually have our back end send us less 27:58 information, but that we can show 27:59 quickly. And there's a trade-off right 28:01 here. By the way, once the information's 28:03 been given over, like once you've got 28:05 everything in your in your dining room, 28:06 you can select whatever you want. So 28:08 actually here, uh, now it's pretty 28:10 responsive. Like if I if I scroll down 28:12 since Oh, sorry. Sorry. If I scroll down 28:14 on the table, I might not be able to do 28:16 it. If I scroll down on the table like 28:18 this, I'm actually like everything's 28:20 showing up super super fast, but I had 28:22 the initial load of 20 seconds. That was 28:24 pretty pretty long. When it comes to 28:26 things like filters, they will also 28:28 work. So, if I wanted to add a filter 28:30 rule saying that the uh type had to 28:33 include helport. So, the type is this 28:34 column for example, including heliport. 28:37 It's going to take a bit of time because 28:38 right now it's my machine, it's my 28:40 computer that's actually doing the 28:42 filtering. and it's found 22,000 records 28:45 out of the 83,000. It's capable of doing 28:47 it quite snappily, but it's still not 28:49 exactly what we want. So, how do we fix 28:52 this? We can go back to our table and as 28:55 I said initially, we don't want to show 28:57 all of these columns. So, we're going to 28:59 have to change at the same time the 29:02 table itself so that as a user, you know 29:04 that you're not showing everything and 29:06 at the same time the queries in the back 29:08 end. To do this, we're going to go into 29:10 the configuration part to the add-ons 29:12 that are right here. So, if you click on 29:13 the table and go to the add-ons, you can 29:16 add pageionation. 29:19 Now, the first thing is when you click 29:20 on pageionation, actually it 29:22 automatically renders this part of the 29:24 table, which now means that I it's not 29:26 an infinite scroll anymore inside my 29:28 table. I can actually uh snap through 29:30 one page to another. That's pretty 29:32 self-explanatory. The only thing is I'm 29:34 still sending 29:36 like the initial load of the of the of 29:38 the document well of the number of 29:40 airports would still be huge in that 29:42 sense. So that's what we want to change. 29:45 To do this we're going to enable 29:47 serverside pageionation to make sure 29:48 that the load is on our back end or in 29:51 the case of a kitchen well it would be 29:53 in the kitchen. And why is that better 29:55 than in your dining room? Generally in 29:57 your kitchen everything's ordered. You 29:58 know where things are. So if I tell you 30:00 to take to take out 10 different 30:02 elements of a kitchen, it's way it's 30:03 stored in a way that's much more easy 30:05 for you to find anything in there and 30:08 then and then send it out. So that's 30:10 what you want to do there. And it also 30:11 just in general if you have bad Wi-Fi. 30:14 Um the a backend will always have good 30:16 Wi-Fi because it's stored on a server 30:19 inside a data center 90% of the time. 30:21 And that means that all of the 30:23 operations that will be done there are 30:24 done very efficiently, which is not the 30:26 case of certain people that are in the 30:28 field on computers or on phones. We've 30:30 all had that connection once. 30:33 When I click on serverside pageionation, 30:35 the first thing that it tells me is that 30:37 it wants a page size and a total row 30:39 count. If I hover over page size, I see 30:42 um an indication the number of rows to 30:44 display per page when empty. This is the 30:46 number of rows that fill the table. So 30:48 actually I don't need I don't need to 30:50 put anything in here because by default 30:52 it's just going to take the 12 rows 30:54 which is what it can show inside my 30:56 table. But then I need to give it a 30:58 total row count and actually send over 31:00 the right information when we enable it. 31:02 By the way, you'll see that right now it 31:04 doesn't since it doesn't know the total 31:05 row count. It's not capable of telling 31:06 you when the pages end. So it it's 31:10 completely bugged when it comes to what 31:12 am I supposed to show. It doesn't know 31:13 what it's supposed to show on that end. 31:16 to change this in our query. We can we 31:18 can look at our query right now and 31:20 we're going to add limit a limit to the 31:23 number of elements we want to show to 31:24 the front end. That's the first part. So 31:26 the idea is as we were saying we want to 31:29 limit this to the number of elements 31:30 that our front end is actually going to 31:32 show. So I'm going to add this and it's 31:35 called I need to select my table and 31:39 it's called pageionation dot page size. 31:42 So now if I save and run this, 31:46 I can see that instead of well lasting 31:48 for for 20 seconds, it lasted for nearly 31:51 less than a second. And right now I've 31:54 only queried exactly the elements that I 31:56 need for my page. That's really good. 31:59 The only thing is there's no link 32:01 between which page I am at and what I'm 32:05 querying. So right now when I do this, 32:07 I'm just limiting to the 12 12 first. 32:09 there's no way of it to know which 32:12 segment, which 12 parts of these 83,000 32:14 it should segment. And that's why we 32:16 have something called offset. And the 32:18 idea of an offset is to say if you're on 32:20 page 12, well, you're actually looking 32:22 at the elements the 144th element 32:25 because you're on the 12th page. There's 32:27 been already 120 122 before. So that's 32:31 the way it works. So what we're going to 32:33 add actually is an offset. And the 32:35 offset once again is something that 32:36 we've prepackaged. So let me just bring 32:39 that up and it should be called right 32:41 now table one pagionation 32:45 offset. 32:47 That's the first thing. 32:49 So right now at least when I'm when I'm 32:51 on page three what it's going to do is 32:53 that it knows the offset as I told you 32:55 is so in this case it's 24 because we've 32:58 on page one it's the first 12 on page 33:00 two it's the second 12. So now it's from 33:02 well 25 to 36. If I scroll through, it's 33:06 bringing up every single time new ones 33:08 that I see, and it's super snappy, which 33:11 is great for me. The next issue I have 33:14 though is that my count isn't right on 33:16 the bottom side. So, I actually need to 33:18 tell it the number of rows just so my 33:20 users know how far this goes. 33:22 To do this, I'm going to add another 33:24 query, and I'm going to add um I think 33:28 I've sent this in documents, so please 33:29 reuse that. In this case, it's select 33:32 count 33:34 star of 33:36 of airport. So from airports, 33:40 this is a very simple SQL command that 33:43 any AI system could generate for you 33:45 today. And essentially what it does is 33:47 that it gives me the count. But compared 33:50 to before where it had to find all of 33:52 the rows, the count star method is a 33:54 special one in a database that can very 33:56 quickly give it back to you. So it's not 33:58 something that you have to query every 34:00 single time and it will take 20 seconds 34:01 loading. So here I'm just going to run 34:03 it again and it took like four to five 34:06 seconds which is acceptable knowing 34:08 you're only going to do this once. And 34:10 in the total row count what I'd like to 34:12 do is put that in. So to do that I would 34:16 open double curly braces which is our 34:18 way of putting code in and say query 34:21 two. And then I want to put the output. 34:24 And right here what I see is that 34:26 actually if I look at what my element 34:27 looks like I have to call something 34:29 called data then I have to call an 34:32 element called count. And the thing is 34:35 this this format that it's giving me out 34:37 is a table. So actually I have to choose 34:39 the first element of this table which 34:42 gives me this. And right now when I put 34:44 this in it works. So we've got something 34:47 that's that's working. But I'm not a 34:49 huge fan when it comes to building 34:51 applications with pageionation of having 34:54 a bit of extra code that's inside my 34:56 element itself. So if you go back to the 34:58 server side, you can see that right here 35:00 I'm writing a bit more code and this in 35:02 general isn't something that I'm a huge 35:04 fan of. The reason is first of all 35:09 why this query is returning a table and 35:12 this is normal because actually when 35:13 you're doing SQL it will always um give 35:16 you a table back and this is the kind of 35:18 code snippet if I have these everywhere 35:21 across my application and one day I've 35:24 got this query that changes I'm not 35:26 going to be able to maintain this we're 35:28 going to start so this is actually a bit 35:30 of a bridge between what is a front end 35:32 what's the back end and also how do we 35:34 have like best practices coming in into 35:37 reusing code and making sure it's 35:38 reusable. But here I wouldn't want to 35:41 have this kind of snippet of code here. 35:43 And what we can do is actually change 35:46 the query itself so that instead of 35:48 outputting a table, it outputs exactly 35:51 what I want, which is the number. And to 35:53 do this, it's we're going to introduce 35:55 the next topic, which is the event loop. 35:58 So first we're just going to do it and 36:01 then I'm going to talk about the event 36:02 loop. So what we're going to do is 36:04 transform the result. The idea is that 36:06 once this has been run, it will run the 36:07 transform results part. And what I'm 36:10 going to do is actually um well use the 36:14 count dot 36:16 zero for with uh with with that symbol 36:20 that I forgot the name of in English. 36:21 And when I do this and I run it and save 36:24 it, it automatically gives me exactly um 36:26 the thing that I want. In this case, 36:28 it's a string. If I wanted it to be a 36:30 number, I could send it as a number 36:32 using the pass function. I don't need to 36:34 do this. It just so happens that when 36:36 you have a string that is a number, most 36:38 of in JavaScript, it will be cast from a 36:41 string to uh a number. So, actually here 36:44 right now, I can just write query.data. 36:47 And as you can see, it says string to 36:49 number because it knows that a string 36:50 and a number, it's basically the same 36:52 thing. 36:54 This is super important as I said 36:56 because it's going to allow you to re to 36:57 reuse this code way better across your 36:59 application and if you change things 37:01 it's going to be better going forward. 37:02 So let me save and run this will also 37:05 save and run this part with the offset. 37:08 And I'm going to do one last thing on 37:10 this query which is I'm going to order 37:11 them by ID. Now, the idea of doing this 37:14 is a bit of a setup for what I'm going 37:16 to talk about next, but also simply 37:18 because if I want to refine certain 37:20 columns that we're going to edit later 37:22 on, it's going to be easy easier if 37:24 they're ordered by by a given metric, 37:26 which in this case is the idea. 37:30 To finish this topic around front end 37:31 and back and imagination, what we've 37:33 just seen as a whole is that for one you 37:38 right now my table is much more snappy 37:40 and the first time I connect I won't 37:42 have those 20 seconds because I'm 37:43 actually delegating the work to the 37:45 right the right person and more globally 37:48 this is actually a topic that I've seen 37:49 a lot of people stumble into and not 37:50 really understand what's going on. 37:52 Everything that you see on your screen 37:53 is happening on your laptop. The other 37:57 um the other sort of aspect that I see 38:00 where a lot of people um sort of stumble 38:03 this too is when it comes to uploading 38:05 documents. So let me move to page two. 38:08 And what I'm going to do is just add a 38:11 file button. In this case when you're 38:14 uploading a file to to this you're 38:17 actually what you're actually doing is 38:19 that you're uploading it to your well to 38:21 your computer to your browser. And so 38:23 the issue that you have there is that 38:25 your browser has limits that a server in 38:27 a data center doesn't. So that's the 38:29 other thing that you want to look into 38:30 is what can actually my machine do. And 38:33 so this is why for example we see a lot 38:35 of threads happen around when I uploaded 38:37 a file it it wasn't able to because um 38:40 but your file is huge. It's like over 5 38:42 GB. And the idea here is because you're 38:44 doing work that your machine is running 38:46 and that not a server. So what you want 38:48 to remember from this is when first when 38:51 you have latencies, think about what am 38:53 I asking different parts of my 38:56 architecture to do. Am I asking my PC to 38:58 load like 83,000 rows and show them? How 39:00 can I split this up? How can I make it 39:02 so that I'm actually only have just the 39:05 right data to show to people? And it's a 39:07 very good principle to only have the 39:10 right data at the right time. That will 39:11 speed up your applications massively. 39:16 This being said, let's move on to the 39:18 event loop. I'll just give you 10 39:19 seconds. I'll drink a bit of water and 39:21 give you a bit of time to catch up if 39:22 you want to uh finish anything linked to 39:24 pagination. 39:33 So the event loop as I was talking to my 39:36 friend he comes from the data world and 39:39 that's a world where everything is read 39:41 only which means that you don't write 39:44 back to system you only get thing you 39:46 only get information you don't do 39:48 anything without information. Um it's 39:51 also actually one of the things that 39:52 retail solves allowing you to write back 39:54 to systems but that's another topic. The 39:56 idea when it comes to the event loop and 39:58 events in general in application, it's 40:00 the predictable set of rules that govern 40:04 how your code runs. And what we want 40:08 what we want you to do is allow you to 40:10 sort of do this very simply and run this 40:12 simply. So what we're going to do is 40:14 we're going to add a way to edit the 40:15 airports so that so that we can see how 40:19 this mechanism works. To do that, we're 40:22 going to be uh well, simply adding a 40:25 modal and making sure that we can modify 40:27 the first line. To add a modal, you can 40:31 click on the components part, add a 40:33 modal to the frame, 40:35 and it did not add the modal for some 40:37 reason. 40:40 Oh, what's going on now? Drag and 40:43 dropping on my end. I'm just going to 40:44 have to refresh. Sometimes you may have 40:46 to refresh. Um, if on your end the modal 40:49 if if the modal doesn't show, we'll just 40:51 do it another way. But, um, that seems 40:54 to be a slight bug. 41:02 Okay, I'll try to do it another way. So, 41:05 another way of doing this is if you go 41:06 to the uh component tree, I'm hoping it 41:10 lets me add a modal this way. Okay, so 41:13 that's the other way of doing it. If you 41:15 go to your first page, you can add a 41:17 modal frame clicking on the plus button. 41:19 If for some reason drag and dropping 41:20 doesn't work. So in that case, you have 41:23 this modal and I'm going to do a very 41:26 quick thing once you've done it. Remove 41:27 the header, remove the footer. The only 41:30 thing that we want to do is modify one 41:31 of the lines that we see right here. If 41:33 you want to modify things, you want to 41:35 add a form. So that's what I'm going to 41:36 do right now. Click on plus component, 41:38 add a form, 41:40 and it should autogenerate a component 41:43 like the one you see on my screen. And 41:46 right now, we're going to do the 41:47 important thing, which is generate it 41:48 from a table 41:51 because we're looking at talking about 41:53 the event loop. And this is a bit of a 41:54 setup to be able to talk about it. I'm 41:56 going to voluntarily reduce this form to 41:59 its minimalist version of simply 42:01 changing uh the only thing that I want 42:03 us to change is the name of a given 42:05 thing. So, if you can go into this, you 42:07 want to deselect all of the other 42:09 fields. It won't generate them. The only 42:11 thing that will be generated is the 42:12 name. And if I click on generate form, 42:14 you should have exactly this. 42:17 And I'm going to call it edit uh edit 42:20 airport. 42:23 So, 42:25 normally it should look like this. The 42:27 next thing we want though is to look a 42:29 bit more into our event loop. Now, there 42:32 are multiple things that we want to do. 42:33 The first one is if I want to modify a 42:35 column, I need a way to when I click on 42:37 a column actually get to that modal. And 42:39 the second thing is when I submit the 42:42 element of that modal, I want it to go 42:44 into my system and then to have this 42:47 page refresh. So let's do this just 42:49 that. I'm going to click on the table 42:51 component and I'm going to add a row 42:53 action. And in this case, I'm just going 42:55 to call it edit. Oh, this is once again 42:58 an element of your system design. I'm 43:01 going to close this out right now. And 43:03 if I so at least now I see it. The 43:05 second thing that I want to do is 43:07 actions. And when it comes to the event 43:09 loop, everything is handled through 43:11 event handlers. The idea is when I do X, 43:15 Y happens. And so here, what we want to 43:17 do is open the modal. So if I click on 43:20 the plus right here, you're going to 43:21 have edit click action handler. And in 43:23 the actions, it's not a query we want to 43:25 trigger. It's a modal we want to open. 43:27 So we want to control a component. And 43:29 that component would be the modal. So, 43:31 I'll choose modal frame one. And let's 43:34 see if this works. 43:38 When I click on it, it opens. And by the 43:40 way, and this is sort of a thing that I 43:43 didn't even have to bind. The data 43:45 source has automatically chosen the 43:47 selected row. So, by default here, I'm 43:50 as you can see, the first row is in Abu 43:51 Dhabi, and it is showing me an airport 43:53 in Abu Dhabi. If I clicked on the fourth 43:55 row, which is I shouldn't have chosen 43:57 that one. No idea how you pronounce 43:59 that. Um this one you can see that it 44:01 has chosen the right row. With this 44:04 being said, we now wanted to add a 44:06 submit button to this. To do this, we 44:10 can add an event. So we want to again 44:12 want an event handler. And the idea is 44:13 that I have a form. I want to trigger an 44:15 event. So I'm going to do one. And this 44:17 is on the submit button. It's going to 44:19 trigger a query. Now, right now it says 44:21 to trigger query one, but that's not 44:23 what I want cuz query one I know is the 44:25 one to select all of my well all of my 44:27 airports. I actually want to update the 44:29 database. So to do this I want to let's 44:33 use the retail database. What I want to 44:35 do is create a new one. So you can click 44:38 on right here create a new query. It 44:40 will automatically call this form one 44:42 submit handler. You want to reselect 44:45 retor database and we want to write this 44:47 one using very simple uh ue sort of uh 44:51 collection. So what I'm going to do in 44:54 this case is the table that I want is 44:55 the airport. I want to update an 44:57 existing record. I want to filter by the 45:00 ID that I have and the ID that I'm going 45:03 to choose is the one of the selected 45:04 rows. So 45:07 once again, the only thing you need to 45:08 know here is so select the the right 45:11 resource which is retail database. Go to 45:12 guey airports update an existing record 45:15 and the ID we want to filter by is the 45:18 ID of the selected row. And here 45:20 actually it's given me a bit of an idea 45:22 of what it looks like in terms of 45:23 syntax. It's exactly this one. And if I 45:26 want to change select the ID of that 45:28 row, I can just do dot ID. And in this 45:30 case, I see it's the fifth one, which 45:32 hopefully is the fifth one in this list. 45:35 The next thing that I want to do is the 45:36 key value pairs that I want to change is 45:39 the name. And I want to change it to the 45:41 name input that I have in my field. So 45:43 I'm just going to bind that and put name 45:46 input dot value. 45:49 And with that being said, normally if I 45:52 change this to two, I will uh first I'll 45:55 test this out. 45:57 So it does tell me that it would update 45:59 the item which is uh this airfield and 46:03 let me try this on let me save this 46:05 query 46:07 and then we'll run this query once 46:08 again. So if I run this query I've 46:11 called it airfield 2. It tells me that 46:14 it's called airfield 2. So at this point 46:16 we should be pretty happy with it. We've 46:17 updated, we've updated our table. We've 46:19 had an event to open the model. Then 46:22 this modal when I submit it gives me 46:25 airport 2. So I should be happy with 46:26 this. The only thing actually is that I 46:29 don't I don't see the change. I I don't 46:31 see any change right here. 46:33 And that's one thing also about events 46:35 that my friend stumbled on quite well 46:38 upon quite a lot is when you're 46:40 triggering events at no point did we 46:43 actually ask our system to re-query the 46:46 events that the database has. So what's 46:49 happened right now is that we've updated 46:50 the database but our system isn't aware 46:53 that it's updated. So this is where and 46:55 this is why we're going to talk more 46:56 about the event loop in general is that 46:58 you want to use queries well um event 47:01 triggers that triggers queries 47:03 everywhere be it for components or for 47:05 modles and when you run these kind of 47:07 things you can run them in a chain. So 47:10 here for example you have the uh run the 47:13 run behavior which is uh manual that's 47:17 good to know but you can have event 47:19 handlers on top of this and so say well 47:21 on success I want you to recall my first 47:24 query and this is how you're going to 47:26 make sure that the set of rules that you 47:27 bring are always used and so if I save 47:30 this and that I run this again now I 47:34 should actually see my system update to 47:37 uh query 2 hoping that it will do so. 47:40 So, oh, it's just that actually I 47:41 haven't updated the form. So, let me 47:43 just update the form. Write query 2. If 47:48 I submit this 47:51 now, it's called query 2 because I've 47:53 recalled my back end to re get the data. 47:57 We've covered quite a lot right here 47:59 when it comes to the event loop. There 48:00 are a few things that I think you should 48:02 be aware of. The first one is I 48:04 mentioned that we had a run behavior 48:07 that was manual or automatic. In this 48:09 case on a the difference between both of 48:11 them is that one of them will run 48:13 whenever every anything it depends on 48:14 changes. The other one will only run 48:17 when you when it's triggered by an 48:18 event. In the case of a form submission, 48:21 you definitely want this to be triggered 48:22 by an event because this is really what 48:25 you need because you need it to only run 48:27 at certain times. But for example, on 48:28 our first query, it wouldn't make sense 48:30 to do this. And this is why if I look at 48:33 the run behavior, it is automatic 48:35 because I don't want to have to 48:36 re-trigger it every time somebody uh 48:39 changes well clicks on the navigation. I 48:41 want it to trigger it trigger it 48:42 automatically. Always think of that and 48:45 sort of look into what are the run 48:46 behaviors, what are the transform 48:48 results that we've done like the one on 48:49 the second query. This is going to give 48:51 you a lot of efficiency when it comes to 48:54 uh what you're building and how it 48:55 builds and make everything predictable 48:57 in your system. So that's the main thing 48:59 to remember of this section is you can 49:02 trigger events at any given moment. But 49:05 what you really want to do is know know 49:07 that you need to when you're reading 49:09 data and you write data back reread that 49:11 data to see it updated. Use event 49:14 handlers. Look at what the run behaviors 49:16 is and don't hesitate to transform the 49:18 result at the right place so that 49:21 everywhere else in your application it 49:23 actually makes sense what you're 49:24 manipulating. 49:28 This being said, let's move on to the 49:29 last section which is around best 49:31 practices and using assist. I'll make 49:34 this very short and then we'll move into 49:35 Q&A 49:37 along with so when it comes to best 49:39 practices in engineering actually it's 49:40 it's a huge field as you can imagine 49:42 we've got so many different ways of well 49:45 there are so many good practices out 49:47 there that sometimes even for me it's 49:49 complicated to know what is a good 49:50 practice anymore. So what I'm going to 49:51 do is I'm going to focus on two of the 49:54 main ones. One of them we'll just talk 49:56 about and the other one will actually do 49:57 and show an application. 50:00 As we've been building, we haven't been 50:01 naming every anything. So right now 50:04 everything's called query one, query 50:06 two, form one, submit handler. And one 50:09 of the principles in engineering is uh 50:11 think of your future self as somebody 50:13 that you care for. Imagine if in let's 50:16 say 12 days time you come back to this 50:19 and you open an application. Nothing's 50:21 really named. everything's called tab 50:23 one, button two, image one, etc. You 50:25 won't be able to know what's going on. 50:27 The first thing that we really recommend 50:29 you to do is name everything with 50:31 something that makes sense. And a quick 50:33 tip for you is we've shared quite a lot 50:36 of webinars around this around our AI 50:38 capabilities. Do not hesitate to use 50:40 this. So in this case, what I would 50:42 advise you to do is say, can you name 50:45 the elements in my UI? 50:48 Nothing is named right now. And the idea 50:50 that you have behind this in best 50:51 practice is that when you're going to 50:53 come back to this, this table is going 50:54 to be called the airport table. It also 50:57 means that when you're going to be using 50:58 them inside SQL or inside code, you're 51:02 going to actually be naming things that 51:04 make sense and not just saying, oh, use 51:05 query one, use query 2, use, etc. So 51:08 look at this even more when it comes to 51:10 naming. And what I'm going to do is just 51:11 let it run while we talk about the 51:13 second subject. And hopefully it's going 51:15 to update it along the way. Um if you 51:18 didn't follow the assist part is on the 51:20 bottom left hand side. Uh and so you can 51:22 click on this element which will open 51:23 the UI and then you can prompt it. There 51:26 are many other things you can do with 51:27 this but I won't get won't get into it 51:29 right now. 51:31 The second thing that we actually looked 51:32 at in terms of best practices is where 51:35 do I put my different logic and elements 51:37 as a whole? Right now as you as you saw 51:41 on query 2, we transformed the result 51:43 inside the query itself which is which 51:46 is great. It's it's a good practice, but 51:48 really think when you're building 51:50 applications, where do I want to put my 51:52 logic? And try to avoid putting them 51:54 inside the components themselves because 51:56 it's just not reusable. And when we're 51:58 talking about reusable logic, we have 52:01 many different elements in the code 52:02 section that you can that you can then 52:04 refer to anywhere across your 52:06 application. And so let's say for 52:08 example that while I was editing this 52:10 part, one of the things that I wanted to 52:13 do was check for example the length of 52:15 the name. 52:17 Now I've got multiple ways of doing 52:19 this. I could do this using validation 52:20 rules, but I could also for example say 52:23 well when you submit the form before 52:26 submitting the form I want to do I want 52:28 to check something specific. 52:31 In that case, what you could do is you 52:33 could actually uh write a huge function 52:36 right here saying, "Oh, uh, you want to 52:38 go through the validation validation 52:40 checks here before going into the into 52:41 the form submit handler." But what you 52:43 could also do, and this is sort of what 52:45 we advise you to do, is use queries, 52:48 transformers, and variables to really 52:51 level up what you can do and make 52:52 everything reusable and easy to make. So 52:55 what I would do in this case is I would 52:57 create a folder where I would call this 52:59 for example submit logic and in this 53:02 case I would have all of the logic all 53:04 of the business rules list linked to any 53:06 submit inside my application and inside 53:08 that I'd put a uh in this case probably 53:11 query where I would actually do checks 53:13 on the on the uh on the elements that I 53:16 have. By the way, as you can see, it's 53:18 just renamed everything because right 53:19 now, uh, if I look at my elements, it's 53:23 oh, it's it's in the middle of renaming 53:24 things, by the way. So, this is called 53:26 tabs airport. Now, this is called this 53:28 is called navigation one. This is called 53:29 sidebar logo image. So, assist is 53:31 probably in the middle of renaming 53:33 things as you can see it is. So, that's 53:35 great. I'm just going to ask it to auto 53:38 approve all queries. You may have this 53:39 to do. Uh, you can select this dropown, 53:41 auto approve, and it will keep working 53:43 on its own. 53:46 when it comes to so this logic you would 53:48 put it right here and when it comes to 53:52 so making any validation check that you 53:54 could have this is where I would for 53:56 example evaluate the value of this which 53:58 is uh text text edit import is it model 54:03 is it what is it called airport name so 54:05 this one dot value and here I have you 54:08 don't need to put the curly braces 54:09 you're in JavaScript and here for 54:11 example I have access to the value which 54:13 is lum lumla airport and I would 54:16 evaluate them this use the event loop 54:20 have a run behavior or an event handler 54:22 that on success makes it work and make 54:23 your event loop go in cycles along that 54:26 way. 54:28 I'll stop here because I want to have 54:29 time for a few questions. Thank you so 54:32 much for your thank you so much for your 54:33 time in general. I hope we've covered 54:35 quite a lot. I just wanted to go over 54:38 the main the four things to remember 54:40 before we go into Q&A. The first one is 54:43 explore the design system. Use the 54:45 different elements fully. Really look 54:47 into them and follow the guidelines that 54:50 we sort of showed you. Second thing is 54:52 think about your system and what should 54:55 your backend do, what should your front 54:57 end do, who should see what at what 54:58 time. This will allow you for your 55:00 system to scale and really help your 55:02 performance. The third thing is think 55:04 about how data flows inside your 55:06 application. And remember that your 55:07 systems are separated. So if you update 55:09 your database, your front end won't know 55:11 automatically. You really need to link 55:13 everything together. And finally, have a 55:16 thank me later approach. Implement the 55:18 best practices for your future self. 55:23 That being said, I'll just move into 55:25 Q&A. Um, and Ollie, if there's anything 55:28 I need to know or that I haven't 55:30 answered, please don't hesitate to jump 55:32 in. 55:34 I don't any questions, so maybe actually 55:36 we don't have anything in terms of Q&A. 55:38 Oh, Ollie answered most of the 55:40 questions. That's great. Uh thank you so 55:42 much Ollie. In that case what I'm going 55:44 to do is that we're probably going to 55:45 wrap it there. What um so thank you so 55:48 much for coming to this session. Please 55:50 you can scan this QR code. It's on the 55:52 next one that Ollie will be running. It 55:54 is around debugging retool AI powered 55:57 troubleshooting for your apps and 55:58 workflows. It's going to be great. It's 56:00 in February and uh by then well merry 56:03 Christmas to everybody. I hope you have 56:05 a great end of the year that you have 56:06 time with your families and friends and 56:08 we hope to see you another time.
