The Ultimate Jetpack Compose Creation Checklist!

Salam Alum friends and welcome back to the channel in this video I'm going to share with you my checklist on how to create the best Jetpack composed UI out there let's get started so this checklist is from my own experience of course so in this checklist I try to add all the things that I learned along the way to make the best composable right I also wrote about it in my newsletter you can follow this one this is actually a guide on how to build checklist so this is actually concept for productivity so whenever you see yourself repeating certain stuff try to create a checklist so you don't forget anything and this is actually a guide on how to build such checklist all right so let's get start of course you need some kind of a design let's pretend we are having this kind of design let me hide this UI this is igma let's say we got this from our designer that we need to create some kind of buttons that have beginning icon let's call it leading icon and trailing icon it can accept two colors like the following so we shall create this kind of UI of course at the beginning you have to write some kind of UI of course so this is actually my UI here you can see it is called New button can Define the the name of course and we simply try to design it and compose of course I'm not going to teach you how to add rows icons text stuff like that but this is actually the way on how to design it so this is the first thing you try to design the composable also make sure about your parameters whether they are fine or not let's say that the designer said this is the only colors are going to need so maybe we can create a cancel button and for example a accept button but I know from the designer that the color will be changed this is just an example so one of the first thing I try to do is to add previews previews are essential so we need to add previews to my composable so here is a simple preview let's build and refresh this preview will be the same as you are having in figma so I try to create a simple preview in which I tell other developers how this composable look like okay you can do it like that or you can for example do default preview for this button and this button alone all right now this is the first thing I tried to manage which is uh the default previews the next thing I Tred to look at which is cyclomatic complexity okay this is pattern I start to do recently which is simply a software metric that indicate the complexity of the program okay now in compos it's a little bit different because compos tend to be little bit complex but I can get a sense on how my composable is doing luckily here it's 75% it's pretty fine I'm using actually a plugin for that reason let me show you the plugin the plugin is called code complexity this is the one code complexity and you can give it a setting here let me check the settings in the tools which is code complexity simple score is less than seven complexity I get this magic from a book called code that fits into your hand actually can Define different standard but this one is pretty simple that's good thing complex score I tried my own which is 11 seems to be fine this is for all cutl code right it's not not just for composable but in my compos world I try to follow this patch okay that's the first thing I like to keep my cod in compos under certain complexity all right so that was the next step well let me just increase the size a little bit the next thing is that I try to run some kind of lenting there is a great Library uh provided by slack and Twitter which is called compos lint it has many simple lint check for Jetpack compos that way I don't have to always remember some common pitfalls so using this kind of linting we ensure I don't make such mistake so let's add this Library here is a library actually it's called compos lint right it's by slack It Is by Twitter actually those link specifically so simply add this line into your GitHub project I'll try to add it like the following and then I'll try also to make it as part of this one the lips okay so it is right there in the lips file in the version calog right so at the start you are going to see that we have an error okay so this is a pattern actually parameters in composable let me show you that parameter Inc composable function should be ordered by the following pattern params without default then modifiers then param with default optionally and trailing function that might not have a default parameter okay so I think I'm not doing that correctly exactly it is it is done actually but if you change it like that it will be an error okay this is fine for the moment if if I change it like that it won't it won't work this one would work actually let's wait sometimes sometimes the linting doesn't work until you try to uh do this one so it is working pretty fine sometimes you can get more details about something for example you can click on this link and it will show you like ordering composable properly and this is this is kind of a standard you can follow with your team you can also create your own standards right so let me set it this back to here also you can use KT lint for such a thing but uh this is for the moment this is fine for me and let's say you don't want a specific lint in your case you can simply press suppress this length and it will work pretty fine okay you can just suppress it problem is that I'm having problem with machine it's not loading uh things properly but it is fine it is uh for the standard the next thing I try to manage which is something I forget a lot a lot of people in the PRS will tell me hey you forget to deal with the dark team okay okay so the Dark theme for that reason you have to add some kind of preview let me just add another preview here that will do default Dark theme so what I will simply do I will add this one in a dark theme of course but here you can see that I'm making a mistake actually let me just don't pass any modifier here I'm making a mistake because I'm not using this button within my theme so I will have to add the theme also I suppose this is perfect theme this one so that I can guarantee that I'm using the right theme here in the preview I need to do two things I need to do show background and also to True let me just increase the font a little bit and the second thing is that I need to add the UI mode this UI mode need to be uh what you call it configuration. UI mode night yes that way we are going to ensure that we are using this one you can see that there is a problem actually in this one right because yeah I need also to add this perfect composable here so I can guarantee that I'm using the right theme so for this reason I need to check with the designer I need to check with the designer because he didn't tell me what you should do on the dark thing whether this will be the same color whether the color of the text will be the same so I need to check with the designer because this is a designer thing but mainly here I need to refer to the colors from the theme actually instead of doing from static values like that right so this can be done this can be passed as a theme color but here for example I'm passing the color you can pass it like following uh what you call it material theme do colors and here you can pass the colors for example for the text for uh for the error you can add even your own custom design so I already made a video about that so you can add your own colors but this is the main idea you can for example I think there is error container color like that and then I I need to ensure that I'm passing this error color inside the theme actually so I going to take this error color let me just put this colors inside the color plate like that this is where the colors goes then I would go to the theme here in the theme I need to pass both colors for dark and for light okay so here for the error it will be error color like following and for this one I'm going to do just simple thing I'm going to do copy I'm going to change the Alpha maybe to 0. F like f all right so with this thing in mind I can ensure okay let me just do that okay this is error container sorry so it need to be error container and error container here now we should get those colors so using this approach I don't know why it's not working here for this case I think it shall work let me check for this one the error color is little bit lighter exactly because I said it lighter I think here in the theme it is lighter exactly the Alpa is less for this one I don't know why it's not working as expected even though we are using the theme but this is the idea I want to share is that you can add the theme you need to handle also the dark mode here in the colors and also inside the text for example this text isn't correct right uh we need to do something about it so you can go here to the text here and check with the style you can pass it via style or via the color like that and you can make on Surface like that so it shall it shall work okay this is dependent on the design of course so you need to make uh sure you are doing it correctly okay you can also create your own design system so you can pass your own colors as I said I made a video about it you can check it out this is actually the thing for this step The Next Step I try to do also related to previews which is I try to see how it would work in a different scenario or different environment such as RTL right or right to left languages for example if I try to use this button in an RTL in the Arabic word right I need to make sure that it's working correctly so you can do it like following you can also do it for Dark theme or not so what I'm going to do I'm going to delete it and I'm going to add default Arabic theme okay and here I'm going to write something in Arabic like that which is hello okay here let me set back the color to error right you see we also forgot how to do with the trailing icon we need to deal with the color here via ttin I think yeah exactly you need to do that we forgot that so this is uh actually the case so here you need to do local like following and simply you can paste AR exactly so from Arabic we read it like that so it will be swapped so we make sure that our UI is actually working correctly in Arabic mode also okay as I said this is from experience right I didn't know that in the beginning but with the experience every time creating UI get getting reviews from other people seeing problems in production of course you you are going to deal with that but this is the thing we try to learn from our mistakes okay that's it for previews in general next I try to manually test this UI simply what I try to do is only I run this one you can simply run a simple UI to check whether it is working correctly or not like I'm talking about the visual aspect you can run previews luckily with with compose so it will run here it won't be the best one but it is sufficient I can see that there is a ripple effect sometimes I try to drag I just want some kind of simple test to make sure that everything is working fine you can add some kind of listeners of course to make sure that you are actually doing with the listening parts so this is the manual test aspect you can even put it into some kind of UI for example pre-made screen you have in your application and test it okay manual test is really required all right while doing this thing I try also to open the inspector the layout inspector and I try to see if there are anything related to composition problem are going to see what about composition in a minute but I try to to notice what's happening in the beginning so if I try to click okay nothing is happening let me check if there are a problem with recompositions okay there are skiped recomposition this is fine nice so everything is fine so if I click on this one it should increase only that it seems like like it is fine for the moment there is some skipped recomposition which is cool thing but for the moment it seems fine are going to do another step which is to check the stability of the parameters being passed but this is for a moment what you can do with the manual test you need to make sure that you are doing things correctly of course while doing that you might not for example use this what we call it uh the layout inspector there are other means to check the composition and you can debug your eyes I already made a video about it you can also check it all right this is it for now the next thing I try to do is that I try to write UI test for this one okay so I need to make sure that the UI is displayed correctly maybe the colors the colors aspect is done via another type of test but I try to see the interaction and whether it is showing the correct thing especially if there are some logic inside so what you can do so simply press Alt Enter here and you are going to create a test junit 4 call it button UI test and press enter and you are going to put it there of course it will be put here you need the dependencies to run your test of course so I'm going to write a test like following but before that I need several stuff so here in the test I try to add the following rule which is create compose rule okay that's the beauty about compose and then I'm going to add depending on the type of test are going to write test button display correctly for example we can add this test name so you can try with compos rule okay what is happening here okay this is AI I hate AI for the moment okay so what is this bottom parameters can click alt and fil functions with values we don't care this one we need a label like the following the label can be hello okay let's make sure that there is hello here the background color for the moment I not interested with the background color so for the icons for the moment I can pass none that's fine and definitely I want to check the behavior of is enabled is working or not because this is my bottle I need to make sure about it so for the moment this can be fine I think okay I need to pass something true I need to test three things I need to test this one that it is displaying the things correctly I need to add another test to make sure that click Lambda is working correctly test test click Lambda on button when enabled and of course I need to make sure for another test that it doesn't work when it is disabled of course okay I'm writing three tests at the same time this is not a good thing actually but we can't test it like far all right okay for the first test it's fine for the second test I need to make sure that it's working so what I can do you can add test tag if it's necessary for your case you can add a test tag to the button so you can for example you want to add test tag to this one maybe you can do test tag so you can locate it uh in the test but for me it's fine I can locate it with name on this one what I'm trying to do I'm going to perform perform click okay for this one you can use mocks right you can pass a mocked Lambda and you can see whether it was invoked or not but I can do for the moment because I don't want many problems I will try to create a variable that is uh clicked buan for the moment is false if it's get here it will be true right and then what I'm going to do I'm going to assert true for the following for the click the test here isn't readable it doesn't tell that this what I'm trying to do well here from the test title I can see that this is the thing of testing but in term of asserting you asserting variable that it will require for the developer reading the code to understand it so this is little bit not readable but as I told you you can use mokito for that you can use m whatever you like okay same thing if it is clicked like following we need to make sure that this is the thing and I'm performing it and I need to make sure that this one is false okay usually I try to make my test fails so I understand that I'm testing the right thing but yeah let's just pass so this is the next action I try to do which is to check or verify my uis this would be dependent on each UI because for this button I need to check the click part I need to check uh the display correctly of the parts because it sometimes it has some logic so you need to test this logic test so this one will be dependent on your case so here are the tests running first button dis play correctly are going to click disabled button all the tests are passing okay awesome this is a cool thing I think we are fine we can push our code to the GitHub or something like that so that was for the testing the other part which include how the UI is represented like the edges the colors and stuff like that we need to add another type of test which is screenshot testing okay now screenshot testing would require some setup and we are going to make this video much longer so I invite you to check one video I already made it about this screenshot testing I use a library called shot you can check it there are many libraries regarding screenshot testing also Google I think released a new one we need to try that so what will happen is that you are going to do the same thing and you are going to give it a parameter so the UI will be rendered and then you simply call something called compare screenshot something like that this is uh based on the library for shot you can only do that so you can give it different variation of the different states you think your compos B will be in for example in my case it will be in the red in the green it will have uh big words for example smaller words it will contain training icon and leading icon so so there are different variations so I can ensure the consistency of this UI even if someone change it for example if he changed something here for example simple small DPS color stuff like that we can detect it okay this is regression testing so this is kind of a different way are going to do it for many things are going to do it for Arabic letters for example like RTL disabled and enabled and then I'm going to share the screenshots with the team in that PR so we can agree all of us that this is the correct state for this button so next time if anyone Chang something regarding that of course if it is from the designer then definitely are going to regenerate the screenshot otherwise we need to make sure that this doesn't change okay so this is part on how to create screenshot testing as I said I have separate video for that it's almost 25 minutes or so in that video I share all the details you need to know about screenshot testing so that's almost all of it for composable screens the next step is that we also something we learned via practice which is to have handle the stability okay because almost all of our composable need to be skipable and restartable there are only specific cases where your composable doesn't have to be restartable for example launched effect and stuff like that so this is kind of an optimization to the composable you are creating so it can skip recomposition so the compos one time sorry can skip recomposition for this one okay you can make sure that all your parameters are pretty fine for the moment I think they are all fine primitive this this one modify is not primitive but it is stable if you check it here are going to see this is a stable one right you can check color is also a stable class of course it is mutable so it is better than stable uh Boolean stuff like image Vector is stable right almost all of them are stable right lambdas are usually stable from our eyes you can see that this is fine but usually I try to get the reports from the composed compile okay you do it like the following I'm planning to create videos about stability check and stability stability improvements for compos so if this interest you let me know Below in the comments so you can go to this one project here and add the following if you have many modules it makes sense to add it here otherwise you can add it to specific modules you add the following task which is compos compiler stuff you are going to tell you to generate the reports right try to sync it and then you are going to run the following command from the terminal okay so it is gradal wrapper we are going to run this with the wrapper and it is Assemble usually it is release okay because you need to check that on the release part but for the moment I'm going to use the debug here and then I'm going to give the parameter which is compose compiler report and give it the value of true I don't know if this is visible for you but I hope you can check it run the command and then you need to notice what's happening here it will generate some report which has all the information you need about stability what the composed compiler decide so sometimes this is little bit tricky okay it's completed so you can switch here to the project and go to the app build compos compiler here the classes you are going to see the class here you only have one class here for the composable you need to go to your composable which is the new button for our case it is skippable and restartable here so this is fine we can go here also to make sure that are we are talking about same thing so for the new button the string is stable modifier is stable color is stable is enable stable all sa so the result will be this one is skipable and rest I don't try to check everything I check only the composable I'm creating so I can make sure that I'm creating the best compos out there so almost that's all what I try to do from time to time there are specific things I try to do certain composes but this is in a nutshell this is not a nutshell this is everything this is how I try to approach my U I try to approach my Jetpack composable because this is the thing compose is about lot of composable so if you try to make every compos B the best you can you will make the whole compose UI the best possible okay so that's pretty much it for this video thanks a lot for watching this video to the end you can also download this checklist I made the steps into some kind of checklist you can download it here in the uh description form thank you very much don't forget to subscribe to the channel and see you in the next videos for

Channel: Charfaoui Younes

Views: 706

Keywords: android interview questions, android development, android interview

Id: LY9bRCjDNb8

Length: 22min 40sec (1360 seconds)

Published: Tue Jun 04 2024