How to measure your performance in a Flutter App? How to improve it?

[Music] [Music] oh everyone hi daniel hi randall how are you hey hi oh my hair's a mess all right wow bad hair day yes yes dania nice to see you welcome heaven needed to be uh on camera for a while so i've kind of gotten out of routine for it but happy to be here i'm just gonna be shut up and on the side of the screen somewhere so uh happy to help out if there's questions but um you're the you're the show today thank you yes today we have uh hi danny how are you fine thank you are you coming welcome nice to see you so we have a big topic about the performance and i'm excited to see you this presentation thank you coming yes we can wait i don't know maybe two minutes or we can start right now we can't wait two minutes maybe welcome to the new okay daniel shafar say you can see everyone but no camera or mike i think he means he doesn't have a camera or mic we all have cameras and mics a few of us have these wow the collection just one so far yep amazing daniel how many do you have four three okay my wife gave me a funko oh my god the cherries cool right wow my two cats okay this is [Music] okay let me see my dreams okay daniel hello daniel shepard from new hampshire how did you say that yeah hampshire it looks like hampshire like it might be part of the lord of the rings thing but no it's just hampshire okay hi kevin he is a gd from angular angularjv from peru cool kevin well we can't wait one minute more yeah for humpty stuff we often wait till five after because it's just you know people wander in actually we just start talking and then we ignore everybody for about five or ten minutes yes it works and from where else do you read us so someone in canada maybe peru usa well toronto vancouver vancouver is that way about a four-hour drive and i do randall yep oh i'm in portland oregon already okay yep just down the street down i-5 for a while [Music] all the way across washington state just to the other side of the border of course honey i think so all yours your counts are now okay i wish her my screen only give me a second okay let's go can you see the screen can we go you can see my screen okay all is right hello everyone today we will be talk about what is performance in florida how is mystery how is interpreted how is it improved but fears a little about me i am daniel herrera senior front-end developer from colombia i love sharing my knowledge then two years ago i created a youtube channel one code in this channel i shared information about front-end development about flourish obviously and the last year i created the floor imaging community there are more than 800 members today i love writing articles on medium and creating open source projects on github so what is performance in our contest performance is how well your device executes some tasks and this is very important because we need to ensure our users have the best experience possible then to have a good performance we need to keep in mind some items the fifth one is we need a make easy to understand our metrics we need additionally standardize our metrics and make easy to compare our metrics test all our app and we don't show we factor all our code before finding performance issues then performance has two main categories the first one is the tank categories for example frames per second first airframe to render and this is the tank category and the second one is the space category like app size memory consumptions and others how can we measure the performance in our fluid labs well plural give us an amazing tool and it is the profile mode when we execute the command learn around in profile mode we can see two amazing tools the observatory tool and the fluid developer tools in the observatory tool you can see for example the current memory consumption pics of memory and in the developer tools you can see amazing layers for example the performance layer you can see the ui thread and the raster thread remember in florida in the ui trade we build the layer tree then we only build the widgets or the blueprints but these blueprints don't render anything in our ui then when we execute the raster tree the raster tree takes the output of the ui thread and then rendering our screens the widgets then is this two threads are very important in our flurrier solutions in some scenarios we can have a slow frames and as long as low phase appears when one friend waits more than 70 milliseconds to render in this scenario we have a jack and a jack is one on a slow frame in the bureau section you can see the detailed information about this junk and identify how what happened and what you need to improve your performance the another layer is the september profiler as you can see in the in this slide the cpu profiler uh disappearable profiler helped to us to identify how much time spent our computer to finish a method for example if you see a metalist spend a lot of time you have an issue problem in your performance another important thing is the memory layer the moment layer you can see in real time the memory consumption and this is amazing because you can identify how screens have problems in the memory wasting and another important layer is the network layer in the network layer you can see the internet consumption and this is amazing because you can identify unnecessary consumptions on your apis or maybe when you consume image in and you can see the headers the response of your service then the network layer is amazing you have the login layer the login layer only show us the login of our app and the app size you can use this layer to analyze your else your size of your application and if you have a all measurement you can compare the old measure with the new measure and identify the the difference between these two versions let's code a little example because i know this is more clear in an example then i will share with you a little example this is on github then in the end of the presentation i can share with you the repository we have three main screens in this project we have the height perform a screen in this screen we have a list view builder if this leaves your builder render t thousand widgets two thousand widgets and the low perform screen or low perform page have a lot about practice for example we have a column at this inside this column we are rendering more that in talks and widgets and this is a bad practice because we need to use in long list the listview builder additionally we have a function that returns a widget and this is an other bad practice then we hope the low perform pace have performance issues and the network base will show a little consumption on internet in this case we we go for to the pocket and get all the pokemon's name as you can see we have a little clean architecture inside the a pocket i do you think we need more size okay uh in the pokemon as you can see we have the domain layer models use case infrastructure driven adapter the connection with the api then is a little example of clean architecture inside the pokemon folder but that is not important for this presentation but we are focusing in the internet consumptions in this screen then let's go to execute the fluid profile mode how we can execute the fluid profile the first thing i shared with you this my cell phone screen as you can see yeah we have there my screen then i execute the command plural run in profile mode if you have many device connected to your computer you need to choose the the cell phone the fixed cell phone to run this comma well let's wait a little to execute this task okay amazing we finished in a second installing and launching he's launching the app okay um we have uh as you can see two links in the uh in the end of this comment the first one is the observatory as you can see we have the current memory the peak memory and the current memory you can see in this part if i go to hyperfoal we don't have a lot of change our current memory as you can see theory egg megabytes consumption and the current memory is then 19 megabytes consumption but if we go to a low performance as you can see i will refresh and obviously we have a problems in our performance our current memory it weighs more than 400 of megabytes and the big memory more than 500 megabytes this is a lot of consumption of memory then obviously we have a serious problem in this screen then let's go to see the other tools i will go to the second link as you can see i will clear the lock well in freeze and please go to hike perform as you can see we don't have any problem we only see the right the ui thread and the raster thread but you can't see any junk or a slow frame because any frame weighs more 17 milliseconds to render but if we go to low powerful experience as you can see we have serious problems we have two slow frames or two jams but if you want to identify where is the problem you can click inside this junk and then the tool load this information maybe this is a little confused but you can see this button information you have as mri in this mri it says you spend more than 400 milliseconds to render this screen but if you go to bottom up we have a lot of information you can filter this info and only shows your developers at your uh your line support for example i will hide a cord dart libraries helicopter fluid libraries and when i apply these chains as you can see low perform bill spends more time 200 milliseconds to render and if i add this other two 100 milliseconds we spend more than 400 milliseconds in our development then the problem of this performance is not by florida the problem is of us because we have bad practice in the love peripheral page but we can use the same example to see the another important layers for example let's go to sepero profiler you need to record a little time and then this will show you the final report i will record in first the hyper for screen and stop and i will filter all the core libraries as you can see we don't have any problem with the high performance experience but i will clear again the report and if i try to record the low performance let's see what happened and stop as you can see i have enabled the same filter but we have again problems with our solutions in this case we are spending more than one thousand milliseconds to finish the septual process in to build the fake elemental and low perform bill spend more 400 milliseconds then it's a loaf of time spending to finish our methods obviously we have problems in the low perform screen but we can identify another information using the memory layer in this case i will go to memory layer and i will clear our query information as you can see we have a little consumption on memory if i go to height perform we can identify a big difference between instead the home page and the hyperflow page i can go to the list of widgets and i don't identify some difference between the home page and the high performance page then this is amazing because we don't have any product but if i go to the low perform page as you can see we have a lot of consumption of memory because you know we have performance problems but if you go down [Music] on this list of widgets as you can see we currently consume a lot of memory because fluid and retains this frame this ui thread the raster thread gave me a second as you can see the ui trade span a lot because the right trend contains these 10 thousand of widgets and to render these titans and we just don't spend a lot of time but we have serious problems because we are using a column to render all the these ten thousand widgets and this impact our ui thread well with this info we can identify we have serious problems in our low peripheral experience and if we return to the observatory as you can see we identify a peak of memory with more than 600 of megabytes of consumption on memory in the big memory this is a lot of construction then we have a high profit problem well to see the other tools we need to the network experience to identify the the net the internet consumption if i go to low perform as you can see we don't have any consumption on internet but if i return a high performance we don't have any consumption of internet then when i go to network in this case we have consumptions as you can see i can see the requests alright in this case the pokey the headers for this consumption are the response of this happy this is amazing because i can identify how many times i spent to get the information from the backend and in some scenarios some developers can make in unnecessary requests and you can identify these unnecessary requests in this layer then it's an amazing tool as you can see we can identify the consumption of acid image in this case a pokemon picture and as you can see we have a big dimension dimensions is inside this widget because we only need a surely image or picture to fill this part of our app we can filter by a status this information for example i can write only excuse me the 200 status of super success status or filter and erase all the success status as you can see or only show all the information as we can see okay that is fine in the login layer we can see the login of our app as you can see is a lot of information because this contains all the info and along the this test and finally we have the app size how we can analyze our app size well first give me a second as you can see we have a image folder inside the dcms folder i have a video that mod i will change this name for example uh fake video and i will change my my tools back jumbo i will import this fake video fake video this will increase our ad size because we are using a a big asset in this case a fake video how we can to analyze our websites we need to execute a new command and this command is fluid reveal the ios or ipad or macro ears depends what you want and analyze size flag will help to analyze our upsides i will execute this comma give me a second this will generate a json with the report of the consumption our memory in this case the upsize [Music] image second is a little as low this command in this case i can give a second dot json this is the report with the analyze of our app i will copy this report and paste this report in the test perform size with video i will copy and change my current report and previously i generate a report without needing let's see what happens when we analyze this in our flural developer tools i will import i bought files first one the with video json and analyze them as you can see the app size is more than 68 megabytes and i can't see the detailed information about this size i will clear this info and import the the report without a video and then i can analyze as you can see we have 54 megabytes of size and see the detailed informations about these size but in some scenarios we need to compare two reports to identify why our app size change and how we can improve this size in this case we can use the div tool i will import and with without video info and with video and i will analyze that if as you can see the report says to us you have a problem you have more than 14 megabytes of increase in your app you can filter only with the increase and if i go to detail information this increasing happens in the florida assets i can go inside in the image i i can say i have a fake video that and this that's why i have an encryption of my upsides then i can delay this delete this video and maybe go to the cloud with this video and use this asset well this is amazing you can filter with the degrees only here and if you have any decreasement this will appears in this report well this is an amazing tools because we with this info we can identify what are our problems in this case when we go to the low perform and identify the junk spring and we know we have problems in the get in the low peripheral pace field we can go to the code and see what is in our codename we are using a loan list then maybe we counting well in now how we can improve our code if we identify we have performance issues well the florida team gave us an amazing website in this website we can identify the performance best practice you need to think how you are doing to identify how you can improve in this case i will share the list as you can see through there have a good advices about implement grids and lists hopefully and in this link working with long lists you can find you can render your elements without this view builder and if we change this implementation for this we improve our performance as you can see in the floor developer tools then you always need to identify in how in how hard you have your issues to your performance issues and then shares into the official page and find the best practices to implement performance additionally we can use the firebase performance tool and this is amazing because you can monitor your performance in your app and in this case you can install this solution in your footloader applications and this will be amazing because you can measure your performance before go to production in using the fluorite tools or the darby and observatory and another amazing tool you can use is the performance monitoring with firebase then the most important thing is we need to measure to prefer to measure our performance to in ensure the best experience for our clients and that's right if you're following these advices and used in the correct way this amazing layer you will identify before going to producing your performance problems and fix them well i finished my little presentation i don't know if we have another questions kami you need to to run your microphone oh sorry thank you annie this topic is the base for a lot we use flutter so it's important useful using the profile mode in projects i have participated it has helped to identify and improve the performance of the app i remember we increased the frames per second on at least loader because it looked too slow it fell frozen the the up and the experience we increased from 35 to 48 per second on average and more fluently amazing this tool and yes if anyone have questions we are happy to answer steven toledo oh my god hi my friend oh this is a good question how could i use this in a fine line okay we have a the fruiter driver tool in maybe a if you follow me in medium i am writing an article about that and we can made a little test in our fluid driver test and this test can measure our memory consumption our frames per second and then you can block some pipelines if you see any issue in your performance that topic is also very important everything about plural driver okay juan gonzalo other question oh it's uh from them well in android or ios depends depends what what are you using what that is i don't think it should be due to performance issues maybe you can use this uh performance tool to mess you if you have any problem about that because if the performance tool can show you if you have a lot of consumption of memory and maybe if you have long problems starting your application in this part then you can see where is the problem but if the problem is not performance you can try a testing in another computer maybe you have problems in your local variables or in you either with the and with floor but maybe if you have performance issues you can see with this the report of the performance and identify you have any problem about that maybe in in the developer tools you can test the starting of the application and this is amazing because you can profile the app a startup i will share a little give me a second i will share my screen again as you can see in the set your profiler you can profile the startup and another amazing things then it you it will help if you have problems in your performance and if you have assets with the locations and some calls to the back end in the start of the application make sure of control your errors right because if you have a any broken of your app maybe is because you don't control some nerve in the style of your application okay danny i have a question you can make profile to the app in background mode okay what it can make profile or rom the mode profile to the app in background mode with the app is in background when the answer can't plan yes it's possible you can i think let's try oh my god okay this is the app as you can see okay they lost their connection in a second the memory consumption appears i will go to again to the app uh okay they show you uh a little consumption but it is not what do you want okay okay yes i i think in the upfront one with the maps related maybe you have a background mode with the maps but okay okay um no thank you okay and anyone maybe have questions okay [Music] i think that's all for today are other questions taking our performance taking i could handle this one um because i do a lot with provider and riverpod um it's really important if you have expensive wish to rebuild that they be as compartmentalized down as you can so that the trigger for rebuilding is rebuilding as little as possible you know don't get crazy about that because there's a lot of optimizations that are going on in the framework already too i mean like if this blue square moves down over here chances are that's not being repainted that's just being moved in the widget tree so uh there's a lot of things you don't have to do because the framework is very careful about that but yeah you shouldn't have to do expensive things more often than you should one thing also that i keep seeing out in the field out here is a lot of people are putting way too much work into just build methods a build should have one precisely one job which is to take the current model data and it and that's it shouldn't be doing io it shouldn't be doing heavy calculations it should just be translating the model data into something that is on the screen for the user to interact with and that's it so it when people start putting you know stream builders feature builders and stuff in there it starts getting me a little concerned i mean obviously we need them for some things but i've seen people with like tripoli nested future builders and i go okay you you need to have your model set up over here before you even fire up this this view um it's uh it's getting a little crazy so i think i beat that answer to death but it's that's yeah you can always scope down to a smaller consumer with both riverpod and provider you can scope down to a smaller consumer so that fewer widgets get rebuilt and you should consider that if you're seeing performance problems that's why we need to be careful with the build method is very expensive and i think you can see that in the profiler by looking at the time spent doing the build part as opposed to the time spent doing the other things if your builds are consistently taking up most of your 60th of a second slot uh you've got problems any other questions about so these guys can answer it or if we have any general questions about flutter i kind of know a thing or two about flutter do you have the cricket sound effect in there somewhere yep right it is the life for the first livestream thanks randall danny for participating and sharing to the twitter community thank you very much and again if you want to participate and maybe in the future danny i the topic with florida driver is the other very interesting how to apply testing if you are interested and i think so thank you daniel okay thank you okay see you in the next time thank you brandon thank you camilo thank you randall bye bye bye see you later

Channel: Flutter Canada

Views: 7,674

Keywords:

Id: F477W64z9e4

Length: 45min 35sec (2735 seconds)

Published: Tue Sep 13 2022