STCS - Class 23: How to make your Mobile App Fast

[00:00:34]Come in toilet roll.

[00:00:40]>> Let out.

[00:00:50]Okay. Okay. Okay. Okay.

[00:01:05]Can I do it?

[00:01:25]As I see any desk is having issues. I'm seeing a ton of issues here with any desk. So I have to pivot.

[00:01:39]>> I don't know.

[00:01:50]Are we cooking food?

[00:01:52]>> Are we cooking?

[00:01:55]>> Are we cooking?

[00:02:10]All right.

[00:02:18]Okay.

[00:02:31]>> Okay.

[00:03:14]See 1440.

[00:03:30]Guys, do you know scammers use any desk to gain access into your computer?

[00:03:54]God, God, God, God, God, God. I am all right. So, now that any disc is not working, I I hope I'm audible.

[00:04:26]No, it's the other way Welcome.

[00:08:33]Oh my goodness, my microphone was off.

[00:08:38]Oh my goodness. All right.

[00:08:42]Hello and welcome to today's live session.

[00:08:49]Okay, I need to do something here. Mute that.

[00:08:59]All right. Hello and welcome to today's live session. Today we're going to talk about performance of you know performance in mobile apps in performance in mobile app development.

[00:09:10]Oh my goodness. So um let me just see for the first time I have prep prepared slides. I normally just you know now why are you why are you displaying on the wrong screen? My goodness.

[00:09:31]Okay, it appears.

[00:09:35]No, I thought I was sharing this screen.

[00:09:43]Um ah okay there we go. So we are going to talk about performance um reliability and security in mobile app development.

[00:09:58]Now that we have AI, um we shift our focus from learning about the syntax, you know, knowing what to type where, um knowing how to write an array or write a list or write a variable to what really matters when we develop software. Um, and three of the most important things, and I've been talking about this for a very long time, is performance, reliability, and security.

[00:10:30]If your app is fast, if your app is reliable, if your app is is secure, nobody cares how you built it, whether you coded it, whether you you you generated it with what, nobody cares. We only care about these three things. And to start us off, I want us to look at this video.

[00:11:04]Okay. Uh let's look at this other one.

[00:11:07]Where is it? Uh let's look at this other one.

[00:11:12]Oh, I have to hit play. Okay. All right. And let's look at this other one.

[00:11:31]Where is it? This one.

[00:11:39]All right. So there is one common factor or there's one thing common between the two videos that we have watched and that is uh the animation is smooth or maybe let's say just how the app performs.

[00:11:55]It's smooth, it's fast, uh there's no flickering. You don't see something flickering on the screen. You don't see something shaking on the screen. Um everything moves smooth and and all that. But before we dive deeper into um you know performance in the app, let's look at what a mobile app does. So let's just draw a mobile app here. So this is our mobile app. Uh we have quite a few things. We have maybe let's say this section. We have another section here maybe for displaying images and whatnot. Um like so uh let me see.

[00:12:35]I forgot how to draw. All right. So, uh, we can have something like that.

[00:12:46]All right. And we can have a bunch of text down here. Um, so to simulate a bunch of text, I can just do Oh my goodness. No, no, no, no, no, no. Don't duplicate like that.

[00:13:02]So, let's see. We have a bunch of text down here and we have our little navbar down here. Our navbar will have um nav link. So this might be home, um about, contact us. Okay, in mobile apps, you don't do that. Uh profile page and whatnot. So what does a mobile app do?

[00:13:26]Uh let's start with the very basics. Uh number one, you open it. So we'll have another So let's just simulate something like this. So assuming it's story app.

[00:13:38]Um all right assuming it's story app. So the first thing you'll do is you will click on the icon or you know uh story.

[00:13:50]So we have story app here.

[00:13:57]Why are you snapping? Why are you snapping? Oh my goodness. You're not supposed to snap. Okay. I don't know why this thing is snapping.

[00:14:09]I don't know why it's snapping.

[00:14:16]Okay, there we go. So, the first thing you'll do, of course, is you will click the icon to open your mobile app. So, you click the icon, it opens the mobile app. So if it's like for example Facebook you have uh posts uh you know you can see comments you can see reals if it's WhatsApp you'll see the charts the statuses uh you can scroll at the bottom or at the top wherever the navigation bar is and do a lot of things. So the first thing an app needs to do it needs to get data from an external source. It needs to get data from your API. So, we can list here the things that an app does.

[00:14:57]And if you're just joining us, welcome.

[00:14:59]We're just getting started, so you'll not get lost. Uh, we are basically just listing the things an app does. So, things app do. Let's let's let's call our list this. Um, so we can just put it there and scale it a little bit. So, we can say number one, it fetches data.

[00:15:20]Fetches data. Uh, number two, what does it do? Um, it stores data locally. Uh, number three, sends data to the API endpoint. Number four, calculates um something like um what it calculates discount. So something like discount. Uh a mobile app also fetches the location.

[00:15:47]Uh in this case we will say GPS co co Oh my goodness. How do you write coordinates? Coordinates.

[00:16:00]Yeah. It fetches GPS um connections.

[00:16:04]What else? Uh coordinates not connections. What else can a mobile app do? A mobile app can attach a photo.

[00:16:12]Um, it can view a photo. View a photo or video. All these things a mobile app can do. So, what does all this have to do with the performance of of a mobile app? Again, we'll make another list here. we will say this is factors affecting performance of uh mobile apps. So let's just say MA mobile apps because I'm trying to be fast. Um one thing you will notice about how I do my live my live sessions and you've come to a few of them I I I rarely prepare that much prior to my classes. It's because h what I always want you to do is I want you to have a raw experience of what goes on under the hood, you know, not under the hood. Uh when we talk about building apps, what exactly are we doing? So, I want you to go with me uh you know, see the errors, see me fix the errors and so on and so forth. So, the downside of that comes with this because now you have to sit there and watch me write some notes. So we have network connection uh factors affecting the performance of an app. If I forget something just uh type in the chats. Uh what else? We have CPU uh we have memory.

[00:17:38]And what else? What else affects the performance of of of mobile apps? Uh CPU, memory, battery. Okay, not that much. battery doesn't really affect uh the performance because if you are at 30% and you at 40% your app will just perform uh the same way but you can just list it here um you know so that we don't get lost. Now we going to put this in oh my goodness no this was supposed to be in a different section so that I put them in red right so CPU memory and battery these are factors affecting the performance of a mobile app we'll put it like that so you ask yourself how does the network affect the performance of a mobile app your mobile app fetches data all the time and your mobile app is connected to some form of um you know a router. So you can have Wi-Fi connection, you can be connected to um hotspot and so on and so forth. So if you're using story app, your mobile app will need to fetch data from the API or from the back end and it will look um something like this. So let's assuming you're fetching data from the server and you can have our server right at the top there. So we can say um this is the server.

[00:19:06]So we can say backend server.

[00:19:09]All right. So your app will fetch data from the backend server. Now if you are connected to an internet um let's say for example 30 Mbps uh Mbps so that means if you if if the data you're fetching is 30 MBs you will get that data in a second or less if it's let's say for example 5 MBs you'll get it in less than a second if you are downloading data that is let's say 60 Mbps then That means roughly it will take longer than 1 second. I don't know how much it will take according to that math but it will take roughly longer.

[00:19:52]Now here's the interesting bit. If the user is quering um our our API endpoint has how many users?

[00:20:01]So let's say our backend server has 1 million users. All right. 1 million users. Uh you know 1 million users on Facebook. If we are qu if you are uh quering uh a list of users if you are on Facebook and you search all right you want to search for Moses will the system go through the entire list and recommend because if you notice when you're searching on Facebook it shows you um you know uh potential matches uh of the name you're searching.

[00:20:34]So will the system go and fetch all the 1 million users and show you or will it just show you maybe 100 users? All right. So that um brings us to a very important question. When your users are fetching data in your mobile app, are you showing them the data they need to know only or are you showing them extra data? Assuming this user is on the profile page. So we can say this is the homepage. Uh this is the homepage.

[00:21:05]uh put it there. And we can also have an extra uh profile page.

[00:21:12]All right. And the profile can look like let's try to create a profile page. So the profile can have the background. Um it can have the profile image. Um you can have uh what you can have buttons right here, follow buttons and whatnot.

[00:21:30]Um and things like that. And then you can have the name. Let me just You can have the name and then more information here. And then you can have more sections down here. So uh let's just change this to black. So if a user is is is is fetching information about you know um their account and the user has written a couple of stories which you can display at the bottom here. So when you have when you're when you're querying the data from the database, how much data are you giving to the user? Are you sending to the user? Are you sending uh let's say for example if their profile has uh let me see um I cannot type inside here. If their profile has a name um let me just delete that. It wasn't a text.

[00:22:27]So if their profile has a name, age, uh year of birth, um reads count, uh let's say for example, monthly reads, uh followers, um what else does it have? Uh for example, bio, contacts. All right, so uh let's see.

[00:22:51]So when the user is what have I done? My goodness. when the user is in the homepage where we only need to fetch and display um the author's name who posted that post. We only need to fetch and display the name only. So here will you query the back end uh server for all the information available to that user and then only pick the name or will you query the name only? Um the same applies to if you are querying um for the profile. So you're quering for the profile. How much information do you need to query from the server so that you can display in this uh page. So that is one of the things to look at. So network affects uh a mobile app performance in two ways. one uh the speed of the maybe let's say router or or or mobile data the user is connected to. Number two is the amount of data you're sending. Uh so if you have an endpoint and we looked at creating endpoints in the back end. So if you have an endpoint that does something like profile uh me.p profile uh and then it does something like author profile.

[00:24:13]All right. So, does this change when you're querying data in the homepage or does it remain the same? Because remember in the homepage we only need the author's name. We don't need their age, we don't need their followers count, you don't need anything else that we can figure out once we get to the profile page. Um the other thing uh that affects performance is CPU and we look at uh CPU in more details when you look at rendering and how your computer is supposed to uh draw items in the screen.

[00:24:43]But I'll give you a preview of of what happens. So we all know let me just um again copy this somewhere else.

[00:24:54]So your mobile screen um your mobile screen uses what we call um RGB which is basically dots you know when you zoom in you can when when you move closer to the screen you can see which is basically dots uh that have colors RGB RG what does RGB means red blue green I think uh so that in that is the language your screen understands that touchcreen you're you're touching that is the language it understands. It does not know what a button is. It does not know what a text is. It does not know all those things. So if you have a button for example um so let's say this button is for buy now.

[00:25:42]If you have a button or if you have an image um I I don't know what I did because this thing is snapping and I don't like it. I don't want it to snap. So, uh, let me see. Let me just drag an image in here.

[00:25:59]Let me get an image. Where is that image?

[00:26:08]So, let's say we have an image like this. Um, and somebody wants to buy the laptop and it's an e-commerce shop. So, you have to show the laptop and you have to show the buy now uh button. Now to a normal user all you will see is let me see all you see is the laptop image and the buy now button. Uh this is what you're seeing on the app. However the screen for it to display um the the the the dots it has to convert the image uh let me just do this. It has to convert the image and the button to a language the screen understands which is dots and zeros. And it does this using the GPU and the CPU. So they work together to see what is displayed. That process is what you call rendering. Basically that's what rendering is. Um sometimes when you're reading it can sound a little bit too complex but let me see is this loud enough because I want to move it here. But that's basically what rendering means. It means the process of your uh the process uh your your your phone goes through to convert text, buttons, uh vector-based uh shapes and images into the tiny dots on your screen, the RGB dots. Am I saying that correctly? I hope I am. Yeah. So, basically that's that's what happens. So that means if you are rendering a lot of content on your screen, if it's in your let's say for example in your product details a user is looking at this product and you want to display other products on the screen. So you will have maybe let's say for example houses and you want to display houses on your screen at the bottom here and u um you know more options or whatever. So you have four images here that you want to display at the bottom. So how much work will the CPU have to go through or maybe to to carry out the CPU and the GPU? how much work will they have to perform for the display to work as it's showing right here. So again, that goes back to how the CPU affects the performance of a mobile app. So you would imagine um a CPU with let's just look at some random figure. I'm not saying uh this is this is act this is actual. So a CPU with um let's say 1 GHz per second and a CPU of let's say 2 GHz per second if they are rendering the same content if they are rendering the same content on the screen. This one will obviously perform way better and that's why um older phones struggle a little bit. So, if you have an older phone and you're trying to use um WhatsApp, Facebook, you'll see it struggling a little bit. But for a newer phone with a higher CPU, uh you'll see it, you know, it will be smooth.

[00:29:17]There'll there'll be no flickering.

[00:29:19]There'll be no sluggishness. Uh everything will be smooth as I showed you in the videos that we looked at. Um so, that's one thing to to to to keep in mind. Now, why is this important? Um if the process of displaying this image on your screen consume more CPU than the process of displaying this button then that means there will be some sluggishness in your app. Uh your app will be a little bit slow because the phone has to go through so much uh uh work for it to display the image. So you might be asking yourself how can that happen? That happens uh when let let me just show you. Let me just go to this website uh called pixels.

[00:30:11]Um so you're using this uh image in your mobile app. You want to display this image in your mobile app.

[00:30:19]So you want to download it. Of course, when you go to the download section, if you click on this, you can see we have quite a few options. So we have this and that. So let me just download them. So I will download this size and I will download this size right here. So I will bring those two sides into my um whiteboard here. So let me see. So I'll bring them inside here. Oh no, I'm opening instead of just dragging them.

[00:30:49]I'll bring them inside here. So even without doing anything uh if you look at the sizes of these two images uh they look different. One is bigger than the other. All right. Um and as you can see just visually by looking at it they are already too big for our our screen size.

[00:31:08]So if you have these two images so you have this um let me just resize them manually and then put them here and then do this again and put it here. All right. So if you have these two images and you want to display them in your mobile app right away this one will take less resources to display it will take less resources because as you can see it is the size it we call into size. Okay because if you just drag the image into your viewport as you can see it fits inside very well. Of course you might need to expand it a little bit. What if you want to use this image? If you want to use this image, you'll have to do some extra work so that the image fits on your screen or on your view port. Oh, this one fits. So, this one is good. Uh, this one has no problem. But if you want to fit this one, your phone will have to go through so much work for it to fit inside uh that display. Furthermore, going back to the concept of uh network connection, this image is bigger than this one in terms of size. Uh let's see if that is true. So, uh let me just zoom in. So, if you look at this image, uh let me see properties. Where is properties?

[00:32:28]Uh this one is 36 kilob. Uh if we look at this one, properties, this one is 918 kilob. It's almost 1 megabytes, right? So that is one thing to consider. Now imagine you're fetching stories for your for your mobile app.

[00:32:47]You're fetching let's say 10 stories you want to display or not really stories.

[00:32:51]You're fetching items. All right. So um each item will have a name. Um why are you not So each item will have a name. It will have a price. It will have um what what what what color or whatever. It will have location and it will have let's say an image and images can be as you have seen in in in apps that sell um items such as GG and whatnot. We don't just display one image. We'll have the main image. So image one, image two, uh image three, image four. All right. So this is the data we get when you query one item. Now let's look at how um not uh optimizing the size can affect your performance. So if these images if each of these image is one megabytes um one megabyte 1 megabytes oh my goodness what am I saying didn't all right so one megabyte um and then the last one 1 megabytes so the total size of this uh data will be 1 2 3 4 so it will be around 4 mgabytes all right so what happens if your data if your images are more than if one of your image is more than 2 megabytes. So you'll have um let's say 3 mgabytes 3 mgabytes and then maybe this one has 9 mgabytes. So the total size of your payload will be 9 10 11 12 13 14 15 16 17 18 19 it will be 19 mgabytes.

[00:34:39]All right. So as you can see from this this one is already bigger. If somebody is connected to an internet which has two megabytes per second. Let's look at what my internet speed is. Uh speed test.

[00:34:56]Let's look at my internet speed.

[00:35:09]That's a lie. By the way, can anybody tell if my screen is flickering? because I see a lot of flickering on this other screen. I'm sorry I couldn't get my usual um thingy to work. Anyway, uh 24 Mbps. So, um if I am fetching products um and each payload has this size, how much will it be to fetch 10 products?

[00:35:34]Yep.

[00:35:36]If I'm fetching 10 products, then I'll be working with at least about 140 megabytes. Of course, I have not said 19 * 10. And I'll leave you to figure out why. You'll be working with 14 um we'll be working with 140 mgabytes. That is quite huge. All right, that is quite huge. My app will be a little bit slow and it will be a little bit sluggish. So that is why this has nothing to do with your mobile app. This is entirely on your back end. So your back end is responsible for making this payload smaller.

[00:36:14]You don't have control over the size of the image the user is going to upload.

[00:36:20]If I want to upload a post right now and I'm uploading an image uh taken by a camera uh you know a sophisticated okay not sophisticated but just a camera the image will be say about uh 20 MBs now you don't want to tell me Facebook will store 20 MBs for every user millions of images being uploaded every minute um on their server That will be crazy. It will be crazy. I don't think they'll be able to sustain that kind of storage. So, Facebook does some little bit of uh um what do we call it? They resize your image once you upload it and they resize your image for this specific task uh for this specific uh uh purpose. If you've also tried to um view somebody's profile on WhatsApp, you'll notice that at first the image appears a little bit blurry and then now it appears um the higher quality version of it. That's basically because uh the data Facebook wants to send you at first for that screen you are on needs to be very small. So um we have looked at uh network connection. We have looked at how CPU affects your performance. Uh now let's look at memory. How does memory affect your performance? It goes back to the example I was giving you with the CPU because as you all know the CPU needs memory to store um the data and the instructions it's performing uh uh to that data. So again it goes back to this. If you are loading an image, you know, 19 MBs in size and the CPU has to draw that image actually uh you know, when you're writing code, you're writing code in text. So, you're saying uh screen size 20 megapixels. The CPU needs to understand what you're saying. It needs to take that code, convert it into something it can draw on the screen. And I'll show you that uh in a second. So if I'm sending 19 mgabytes of data uh to the CPU then that means it will need 19 mgab of memory so that it can store the information there as it processes. Um so that means if you're sending more data to the CPU more data is being stored in memory more data is being uh more memory is being used uh that leads to your app becoming slow uh some phones will even kill your app your you know you'll find your app crashing and things like that. Um, so, uh, battery, um, not that much. Uh, it's just that if you have a poor battery and your phone is using, um, a lot of CPU, uh, no, no, not that tool. And your phone is using a lot of CPU and a lot of memory, then that means your battery will drain faster. All right? So, you can go to your phone to battery usage and look at the apps using the most battery and and all that. So just by going through what I've gone through here, we can now understand everything um your app needs to do, your app needs to draw on the screen. Your app needs to fetch data. Your app needs to store data um you know while it's processing and all that and all that. All right, I think I did digress. Anyway, back to our PowerPoint presentation. So So let's let's let's see uh play this thing.

[00:39:53]again. I have Oh my goodness, I have to switch. All right, so we've looked at how smooth this is. We've looked at how smooth the other one was. Um so um again, just to go through what I've said, um RAM, battery life, affect um u um the performance of your app. So there are four universal uh pillars of performance or things you can use to gauge how fast your app is. So we have rendering. Uh do you see that thing called 60 120 fps? It's what we call frames per second which basically means it's the that drawing on the screen that I've shown you. How how many frames is it drawing per second? So some draw at 60 frames per second. So you cannot really see because it's too fast. So it draws 60 frames per second and you know some draw 120 frames per second. It's interesting actually. You see um videos they are just images stored in a sequence. That's basically what videos are. Even when you're shooting a video you're not actually shooting something continuous. You're shooting a lot of images per second. So uh even in your camera you will find such settings in some phones uh where it asks you I think it is here. Let me see if I have that feature where I specify how many frames per second do I need here. So if I have video turned on as you can see at the corner here it shows that I'm shooting at 30 fps.

[00:41:38]You might be wondering what is that FPS?

[00:41:40]It's frame frames per second. So if I click on it, I see I have 30.

[00:41:47]I hope I'm not recording myself. I, as you can see, I have 30 and I have 60 frames per second. So 30 is more natural. The natural world, you know, as things are moving and whatnot, it's about 30 or 25 frames per second. So that means 25 images will be captured in 1 second. So that to create that loop.

[00:42:11]So that is just something interesting to note about frames per second. And then we have memory which is RAM management.

[00:42:18]Um and then we have threading which is basically how much information can the CPU handle at one go. Um and then we have network and I've already explained to you how network can affect the performance of your app. By the way, all these things nobody has no no app is perfect like you know it follows all the pillars to 100%. Um if you have downloaded story app you can see in some screens it's a little bit slow it's a little bit sluggish because in as matter in as much as network performance is important um you also have to remain um sustainable. You can't deploy your application to a server where you need to pay 10,000 a month and you're serving a,000 users. It won't make any sense.

[00:43:07]Um, so this is again things to do with frames.

[00:43:12]So if uh when you talk about frame dropping, if your frame drops then your app flickers or it becomes sluggish. So uh and again these things you don't really have to master them. You don't have to understand exactly what this is.

[00:43:26]and and you know what it does because if you build an app and you tell whatever AI agent you're using, I want you to maintain my rendering at 60 frames per second or you can even ask it to scan your code and identify uh areas where frames might drop. It will tell you. It will tell you frames are dropping here, frames are dropping here. And it will even it will even give you the reason why your frames are dropping. So that is all you need to do. You all you need to you need to know your app should never drop a frame because if it drops a frame then uh there's a gap and that is where the flickering comes in or the sluggishness comes in um and things like that.

[00:44:14]So uh this is just a very complicated AI generated image that explains the entire process you know what happens. All right. So if you have let's say for example an object uh hello world and you have given it uh the size 16 padding whatever and you have an icon your phone will have to go through all this uh process and you would imagine this has to be very fast uh because you only have 2 seconds to impress anybody using your app.

[00:44:51]All right. So the your phone will have to go through this entire process. It has to measure how much ho how far am I drawing on the screen. So it has to convert the vectors uh or rasterized images. Don't worry about that word uh into pixels and then these pixels can be drawn on the screen. Like I've said this is what your screen understands pixels and you know the RGB dots. It does not understand text. It does not understand hello world. It does not understand a profile image or a profile icon. And then now that is what now gets um you know drawn on your screen. All right. Um so um in terms of memory like I've explained with the example I've given you um you want to use as little memory as possible. So if you are fetching profile images or products images from the back end, which image are you fetching? In certain back ends, whenever a user uploads an image, it's uh normally processed and stored in three or four or two versions. So you have the first version which is super small. uh it could be even as small as uh 5 kilobytes and you have another version which is the original version the the the original um um high clarity version. So, when you're browsing through WhatsApp and you look at the profile images, all right, um, and you look at the No, I'm not showing you guys my my WhatsApp. Anyway, you get what I'm saying. If you if you're browsing through WhatsApp and you look at the profile images, they are very small. So, there's no need for you to fetch the original image and display it there. It becomes um a lot of work for the for the phone to understand and to calculate and to print on the screen. So first you send the preview image which is smaller and then when the user clicks on that image so that means they want to see the full image you can now fetch the full image and display it um you know and things like that. So that is one of the things that separates an app that has been built by a professional from an app that has been built by maybe let's say a student because a student you will not pay attention to such things that's why you see uh the app flickers uh the app is buggy and and all those things. Um so um now we talk about the concept of threading and this is so complex to explain. Let me just pull my notes. I did write some notes for this one. So let me just pull my notes here.

[00:47:37]Uh what are we talking about? We are talking about threading. So basically and I'll try to explain this in in in a simple to understand way. So let me even do away with the notes. So on your phone um anything that does any processing like I've said your CPU has to process um how much how much information it needs to draw uh how much information it needs to draw on the screen. So for the CPU to process all this it has the concept of threading. It has the concept of threading. Does that even make any sense? It has threads. Threads are what you call threads are what performs the tasks. So inside your computer um or inside your phone you have the main thread which handles everything important like for example clicking a button making a payment that is handled by the big boss which is the main thread and then it has background threads. So what these background threads do they handle anything that is less important because the background threads can sleep but the main thread cannot sleep. So we can give it an orange. So the main thread cannot sleep because it handles everything important while your app is running. It handles the button clicks.

[00:48:57]it handles the the the the the you know receiving uh for example if you're building an app that handles phone calls receiving a phone call anything important is handled by the main thread so so I realize that sometimes I talk too fast that I lose you guys and that's why when you are starting this course I started with almost 100 people in my live stream now I only have less than 10.

[00:49:28]H it's because I talk too fast. So let's let's let's let's let's uh take a step back and understand what threads are in any operating system. How the operating systems performs your instructions. It uses what you call threads in the CPU.

[00:49:42]Your CPU has threads. Threads are those tiny things that perform instructions.

[00:49:48]So threads are divided into two groups.

[00:49:50]You have the main threads and you have the back the oh back background threads.

[00:49:56]The main threads never sleeps. It remains running 24/7 you know it remains running because it handles the important tasks you want to give it like for example turning on the camera uh taking a photo so that you can upload uh for example clicking a button like I've said and then you have the background threads. These ones they can sleep because they are performing.

[00:50:22]Um Oh yeah. Amir Amir Phillip. Uh what tech stack do you use for mobile apps? Um it really depends. Uh but I prefer flatter.

[00:50:34]Uh what? Oh, you're done. You're done cooking. Okay, I'm almost done. Uh so I use flatter for mobile apps because flatter is crossplatform from just one single codebase. You can develop apps for app store um apps for play store and all that. Android and Apple is what I I mean uh thank you for the feedback air.

[00:51:01]So if you have an if a user uploads an image, if you want a user to upload an image, all right, and an image takes some time to process because we have to check if it's the correct image. We have to check if it's not malicious because some people are very creative. They can embed malicious code into an image. Do you give that function to the main thread or do you give it to the background threads? you give it to the background threads. So when you're writing code uh when you're writing yes just like React Native React Native is also crossplatform. Um uh one thing to note though React Native struggles a little bit when you're building when you're working with location intensive apps. So if your app needs to work with location GPS uh React Native struggles uh you know more than flatter.

[00:51:55]So, if you want to process an image, you send it to the background tasks. Okay?

[00:52:00]Now, here's an interesting thing. When you're using Uber and it needs to show your accurate location. All right? Do you give that to the main thread or do you give it to the background threads? I'll leave that for you to research and find out. Right? So, that is basically the concept of threads. So when you're developing an app, you need to identify the tasks you need to perform at this particular screen or this particular section when a user clicks uh um uh buy token or load air time. How instant do we want that process to happen? Then you can put it to the uh uh main thread. if it's something that can happen in the background. If a user needs to fetch and just wait and see the stories, for example, uh think of Facebook.

[00:52:53]When you're browsing through Facebook, you will browse continuously. I don't know if it has I don't know if you'll get to the end, but you'll just keep browsing continuously. But Facebook did not fetch all that data. it will it did not fetch all that data and display it for you because if you scroll you'll realize there's quite a lot almost over 50 post a post maybe a real uh which has a video it has an image it has multiple images so at first when you open the app uh Facebook will use the main thread to load the important things like for example the the first three posts that you see and then it will offload the the job of fetching data to the background uh threads so that they continue fetching jobs in the background as you scroll. That way you'll not even see any flickering.

[00:53:46]You'll not see any uh um um sluggishness when you're when you're browsing through Facebook and so on and so but of course Facebook has money you know you don't.

[00:53:57]So you also have to be smart about that.

[00:54:00]Um let's carry on.

[00:54:03]So um that is all about thread management. Um and it's basically you offload your tasks uh to background threads and some of these tasks can be database queries, crypto hashing, image manipulation and JSON passing because as you saw from our previous tutorial when you are talking about how to uh connect your mobile app to a back end, you saw that the back end gives us data in JSON.

[00:54:29]So we need to pass it into a language the mobile app can understand. So um each uh framework or language has its own tools that will help you know where to put your data. Um so if you want to work with the background threads um you know in React Native you will use this thing you can google about it. Uh in flatter you will use this thing again you can google about it. erh cotlin and swift I have never written a single swift uh application so I don't even know how that works there but yeah that's basically about it so smart data fetching and app startup um which falls under what we call TTI and TTI is basically time to interactive how much time does it take for a user to complete uh you know like a complete uh action so let's look at An example here, user clicks on your website link. Uh the page appears on the screen, buttons and menus, forms um on the screen and then eventually everything becomes responsive. So the user can click a button, they can browse. How much time has it taken for all that to happen? The sweet spot is 2 seconds. So it should take 2 seconds for your website to load the contents um and make um you know and up to that point where the user can interact with your content. It has to take 2 seconds. Uh so that is the time to interactive.

[00:55:58]A lot of senior engineers use this to you know gauge how fast and responsive their their mobile apps are. So how you attain this? Uh, Facebook uses a lot of aggressive caching. If I open Facebook right now, if I just open it, I'm not even looking at it. But you have seen how long it has taken it to open. It's almost less than 2 seconds. Now, here's where aggressive caching comes in. I've opened Facebook and I've closed it.

[00:56:32]Okay. Now, I will go I will go and turn off my Wi-Fi. So I don't have any internet connection. My Wi-Fi is off. My data is off. Now I will go ahead and open Facebook.

[00:56:45]All right. So if I open Facebook, as you can see, there's data. There's data. So where exactly is Facebook getting that data from? Because we don't have mobile.

[00:56:55]Uh we don't have internet connection, but Facebook has data. And as you can Oh. Oh, I thought that's a Mac X.

[00:57:02]There's quite a lot of data here. And it can even play videos. If I go to reals, uh, let me see. If I go to reals, as you can see, that video is playing. The next video is playing. The next video is playing. The next video is okay. The next one is not playing. So, I have turned off my my mobile internet. I have turned off my Wi-Fi, but Facebook is still able to to load data. It's because Facebook uses what you call caching. So the moment you're using Facebook, it's not asleep. In the background, a lot is happening. Facebook is fetching data and storing that data. Uh um it's storing that data on your on your phone.

[00:57:45]All right. So as you continue to browse, it's fetching more data in the background, but not the data that you need to see at that particular time. So that is on uh you know caching. Uh another thing is payload minimization.

[00:57:58]And I've talked about this. I've said if you are loading the author's name in the homepage, do you query the profile information and get everything and then just filter and display what you want or are you fetching the information that you need? Um and then you also have lazy initialization uh which basically if you're using um an external tool like empessa uh what um like pay SDK I know when I mentioned past Africans uh uh Kenyans want to cry. So all these dependencies that are not required when a user opens the app you don't need to load them you need to load them in the background which is what you call lazy initialization.

[00:58:42]All right. So, um how do you diagnose your app if it's not um performing well?

[00:58:49]Number one is to check if it has any uh CPU issues. Um is there anything in particular that is eating a lot of CPU?

[00:58:58]Uh check GPU issues. Is there anything um that's using a lot of GPU? And also check uh check memory issues. U depending on the language you're building your app in. If you're building in flatter um we have what? Let me just scroll to where where where we have this it's called flatter develop uh flatter dev tools which basically uh gives you information about your your your what you call widgets. So if you've worked with React, if you've worked with React Native in Flatter, we call them widgets, which is basically reusable um components that you can use and that you can you can reuse and you can use to structure your flatter uh project. Uh you can also run your code your prof your your flatter with this uh flag. Um again, if you're using React Native, I'm pretty sure there's a similar command in React Native uh that you can use. Um, and the other thing we can do to optimize our our our flatter uh apps is to optimize our widgets. Like I've said, flatter uses what you call widgets. And uh there's an example here. So if you use a list view uh which is a list view builder um it's different from when you're using grid view because in grid view only visible items are rendered and destroyed on scroll. So as you scroll uh the things that are out of your display will be destroyed. You don't need them.

[01:00:29]You don't need them to eat up your CPU and your GPU as compared to if you're using a list view. But in some cases, you might want to use a list view because if you're SC, if you're displaying information that is, you know, not that big. Uh for example, in the profile section, you might want to use a list view. Again, like I said, don't worry about list view and grid view and whatnot because uh all this information, all this the AI can take care of all this. You just have to know what to tell it to do. So, for example, if your homepage is a little bit sluggish or it's a little bit slow, you have to start uh the diagnosis. Is it CPU? If it's CPU, what exactly is affecting the CPU? Am I drawing everything over um or am I drawing only the parts that I need? And in terms of drawing only the parts that you need, um where is rendering? My goodness, I had some notes here.

[01:01:29]Yeah, I have this very nice example to u showcase. Okay, this is obsidian and somehow I cannot zoom. I don't know where to zoom from, but I hope you guys can see. So we have two pieces of code which basically um draws the user profile on the screen. So as you can see from this uh react native code this is react native um we are displaying uh the screen container which will display the the entire screen and then we have the card container which will display uh I think it's the name and then we have the header strip which is at the top there.

[01:02:09]All right. Now if you look at the style we have the screen container background which will paint the background of the container and then we have the card container and then we have the header strip. All right so if you look at it this is how it will look like. All right so you have the header strip this one right here it has its own background.

[01:02:33]the screen has its own background and then the information you're displaying uh the the profile name or whatever they have uh okay it has its own background.

[01:02:43]So as you can see your phone is drawing three times it's drawing this one this one and this one at the same time. So if somebody is just viewing um uh the profile your screen has gone through three steps to draw the background only. How you optimize that is you only draw the background of the information you want to see on the screen and I've shown you by this and I've also shown you in code.

[01:03:12]Um I will combine these notes and share it on my summer stories blog for you guys to have a look. I think I've I've I've attached the link in the description of this video. Um and that's basically it. Um I wanted this to be a very brief session uh so that it can serve as an eye openener. It can serve as something you can use to dive deeper into your app's performance.

[01:03:39]So if you are displaying the profile page you need to ask yourself how much data am I am I fetching? All right. Am I fetching only the data I need or am I fetching a lot of data and then just displaying the the parts I need? How am I drawing on the screen? Is are there any layers stacking on top of each other whereby the layer below is redundant?

[01:04:06]It's not needed and things like that.

[01:04:08]These are the questions senior engineers ask themselves uh when they're developing apps. You see, if you're a junior, all you care about is, is it displaying the content? Perfect. Uh, can I click this button? Perfect. But for senior engineer, they ask themselves these questions. If I click this button, how much work am I giving the CPU, you know, and things like that. Um, yeah, that's about it for this session.

[01:04:43]Oh, Amir, is that on React Native? I'm guessing that is on React Native. Um, I haven't worked with Dubdub Dev before, so I think I'll need to explore on that.

[01:04:53]Um, yeah. Uh, that's basically it. Um, I will see you guys next Saturday. We will find something else to do next Saturday. I've been thinking of having a fresh new course from scratch which we'll call it build with AI which basically involves what we've just tal talked about having that senior engineer mentality but using AI to help you uh you know get to production fast.

[01:05:22]Um I actually learned this um the presentation slide. Okay. Yeah sure. I will share I will I will share it on the WhatsApp group. I hope you're there and on discord as well. So some of these things I was not taught and sadly enough there is no course that tells you all this. Um if you are learning about mobile development um there is no course that shares all this information with you. They will just tell you this is how you fetch data. This is how you display data. But they will not tell you if you are fetching data. Are you fetching the data you need or are you fetching excess data? All right, they'll not tell you that. And some of the things some of these things I learned when I was building STO.

[01:06:09]Uh fun fact, STO was actually built in 3 months. Um in 3 months I I had deployed it. It was the MVP version. But it's not what it was when I deployed it. It is not what I deployed what it is when I was dep when I deployed it. There's quite a lot of changes that have happened. I've made changes to how um I'm doing caching. I've made changes to how I'm handling uh background tasks and all those things. So a lot has changed.

[01:06:40]Um air I think the one on my the one on my bowax. So let me just share it here again.

[01:06:55]H I see Brooklyn boys have dropped another song. That is what I'm listening to right after this. So, let me just get you the Discord link.

[01:07:10]All right. Um I think the link I've shared in the chats will work. If it doesn't work, just uh let me know. Um, Collins Oiera, yeah, there's no giving up. I like that.

[01:07:23]U presentation slide, Collins, I will share that on Discord and um on the WhatsApp group. Uh, that's it. I will see you next Saturday. Goodbye.