Description Transcript
Data teams shouldn’t have to leave all the building to their engineering counterparts.
Join Retool Solutions Engineers Garrett Daly and Mason Mathai for an interactive conversation about using AI to generate secure, governed apps with a live demo guided by your questions.
The conversation will cover:
How to use Assist to build an order management dashboard using natural language prompts
Enterprise features that make the app secure: source control, role-based access, and resource provisioning
Live Q&A—we’ll answer your questions and problem-solve in real time
Whether you’re wrestling with compliance, drowning in tooling requests, or struggling to give non-technical teams safe data access, this is your chance to talk to the experts. You’ll leave with JSON exports of the apps we build, prompts you can use, and a security implications guide.
Read more 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.
