Nitanshu Kumar

Hello, everyone. So this side, I'm from here. So, yeah, let's just start, uh, with my, uh, carrier introduction. So I am working, uh, I'm working for 5 years in this corporate one. So, basically, I'm working in a brand enterprises private limited as a senior developer. So here, I'm responsible for the, uh, working in integrating new features, solving bugs, and stabilizing apps. So, basically, I have worked on, uh, I worked on stabilizing the apps on, uh, Windows, macOS, iOS, and Android as well. So we are supporting multiple platforms about whatever local local platform. Then, uh, I do a lot of r and d here. Uh, like, uh, I had to integrate this live location tracking feature. So did R and D and implemented that. Then, uh, I have to like, I did R and D on offline execution execution of the transaction. So, basically, I used a hybrid database, and, uh, I was just loading whatever the user was in transaction in in our local database. And whenever they check, uh, connectivity happens on the app, so I was making sure, k, whatever the data I just stored, uh, it should go back to the API and complete the transaction. So it takes a lot of r and d and everything, which I completed. Then, uh, I implemented many other features like, uh, chatbot integration, then letter block, uh, at many places I have implemented for the statement admin tool. Then I used to solve bugs and, uh, stabilize the app and everything. So yeah. Then, uh, yeah, it's about this current organization. Then yeah. Before this organization, I was working in TCS, uh, as a system engineer. So there, I was basically working on, uh, working on web application using this classic ASP, uh, HTML CSS JavaScript. So I was deployed to client site, uh, under Punjab National Bank where I was directly reporting to the client, and then, uh, I was working for them and generating reports, uh, and creating features for the pension earlier to be done and everything. And then I got the chance to lead a team of core members also. So, yeah, that's all from my side.

Yeah. Whenever we are working on any project, So the documentation plays a very important role because it's not you, uh, who will be using the, uh, app. Let's say you have developed the app and, uh, in the next, uh, like, next few months or next few years, some other developers come in. Uh, want to check the code or, uh, there is some bug, and they want to. So they need to know, like, uh, what is happening. They they just can't know why looking in into the folder. It's like, uh, it's like a hectic task if you are just looking at a code. So documentation played a very important role where everything is mentioned, like, what API is doing, what, how we are integrating that this API and everything. So, yeah, whenever we integrate the API, we maintain that. Like, uh, uh, basically, what we actually do, we write the comments on the API on the top of the API. So what it looks like, uh, if any user in the future is coming to check, like, what API to it he he can read the comments like, uh, and can know easily, like, yeah, this API is working, these things, and maybe this can, uh, solve my problem. And then, uh, we have this, uh, HTTP package and then d o package, which we use to integrate the rest API into that. And then with the API, like, uh, we have we have models elsewhere where, like, whatever the API is returning, we have to store it, uh, somewhere in model end of which we can't directly use the API result. We have to store it in model and then, uh, use it in the UX file. So that model should also be documented like, uh, what what it what this model is storing, what that model is storing. Like, uh, there can be, like, a nested model. You can check if there is a user model, uh, since the user model will have this personal information model, education model, experience model. So, uh, we have to create, like, uh, let's say, if I am creating 5 models for 1 API, so everything should be documented and, like, uh, what this thing is doing, what that that thing is doing, and how we are fetching that data from that API and where we are restoring and how we are using. So in this way, we integrate the API, and we document each and everything so that, uh, user whenever the user come, yeah, they can know, like, what what they can know what is this, uh, what is the functionality, and they can go in. Thank you.

Yeah. This letter, uh, like, when the letter had come to this market, it it has its large community support. So the large community support means there are many developers also which developing, uh, some library for us either input link, either in Flutter itself or Java, which will work in Flutter. So it plays a very important role in integrating those. So let's say you want to integrate the biometric support, uh, in Flutter. So you can't be like you can go to the native code implementation and, uh, you have to check each and everything, how everything is working, then you have to override the functionality as well because the native code works for the biometric support. So you have to override the dependency and each and everything, uh, and then you have to use for biometric support. But this we're about to let it, let's say, provide the local or package for the biometric support. So, basically, with this local auth package, you can directly use that package and implement the biometric support for the app. So whenever the app launches, uh, you can let's say you want user to verify the biometric. So it's just a package which you will be implementing and then, yeah, it will work. So it makes a lot of easy for us to implement that. Then, again, if you come with drafting, let's say, you have to display some sort of graph, paragraph, or pie chart or everything. So if you go with, like, uh, custom code implementation, so you have to take care of each and everything. You have to create some container, and then uh, you have to maintain a state and you have to make sure, like, what data is passing and, uh, how you are, uh, maintaining that custom, uh, custom container, which is showing some bar graph or, uh, by pie chart anything. But with the Flutter, third party library which, uh, which is supporting, let's say, with, uh, this is supporting that, uh, bar graph. So you just have to import that package. It has its own constructor. You have to pass the value in that constructor, and, uh, yeah, it will work in a very simple way. So, actually, the 3rd party third party library makes the, like, much more easier in Flutter. Like, uh, you don't have to write custom code for each and everything. And I also think we also don't need to write custom code for each and every conditions. Like, uh, unless, like, if there is extraordinary requirement, like, which requires some input to be handled by a standard. In those scenario, we need to write a custom code for us. Otherwise, like, there are a vast of, uh, third type third type third type that is present, uh, in the market. So we can easily utilize them, and, uh, we just need to import and use that, and it will work. So yeah. Thank

Yeah. Whenever, uh, we are doing network request, uh, like, uh, with the API call, with the post call or anything. So but it's the main thing, like, you have to make it in asynchronous. Like, you don't want user you don't want user you you should wait for something or it should block their task or anything. You want key it should do some network request and, uh, give us the data whenever it's percent. In the meanwhile, I I can do the other things. So that can only be possible with the asynchronous way of dealing network request. So, like, uh, let's say if, let's say, like, uh, you have the smaller payload where API is taking, uh, very small fraction of time there, you will not get the difference. Like, you just called the call the API and, uh, yeah, it gives the result immediately, and it does not feel likely you have called any API. But there is when the network which is dealing with large payload, it obviously will take it's going to take some time to call the API and give give us some data. So in on those scenarios, uh, you have to, uh, like, you don't have to block the current execution. You this one key, this API also run-in the background and in the meanwhile, I can do other things. And whenever the data again, it should reflect in the UX accordingly. So asynchronous programming, we use in those scenarios which of which, uh, obviously, optimized of letter app and, uh, gives a smoother user experience, uh, to the user. Then, like, uh, when you are dealing with large payload, so, yeah, you have to create a DTO file for all of them. So, like, uh, creating like, if it has a larger payload, then, obviously, it has will have a different different models inside that. Like, let's, uh, I was giving example of this user below. So this user information will have personal education, professional, something like that, uh, information. So we need to create model for each each one of them. So we don't want to, uh, complex the app like, uh, we are passing data and we don't know, like, uh, what we should pass, what we should pass. Like, we got confused. This will not happen. So you should be knowing key days professional professional model, which will handle only professional data. There should be a personal model. This should be handling personal data only. And we are restoring all all those data in the user model at one place. And in the API, we are passing that user payload, uh, in the network gateway. So, yeah, modularizing the model, uh, also working optimizing letter FA intermix the code more reusable and more, uh, readable. So these two things are there. 1 is asynchronous, and the other is this model. Thank you.

Yeah. So this, uh, Flutter block package. So what actually Flutter block is like, uh, it's a state management tool. So what do we get by state management is, like, when when a app is smaller, it's like you can create 1 or 2 page and, uh, you can, uh, show them to you can use the status state and everything. You can do with those tasks. So that will be easy. But what if our app is larger where there are lots of functionality? So how we are going we can't use set of state everywhere in a single UX file and maintain, and we have to call that API also and everything. So are these, like, uh, we have this concept, like, uh, model view mode controller or model view view model we already know in other left handbags. So why teach model view control? Like, we have this model, which is, uh, not but a repository, uh, which is giving data. This repository is getting data from some API call, and it's assorting that data in the model. Then we have this view. View is nothing but the UX that is getting shown to the user. Then we have this controller. So controller acts like a middleware between the view and the model. So what is happening, like, the controller, it's getting data from the model, sending it to the view. View is utilizing the data and showing it to the user. And let's say user is performing some actions. So what is happening? A, uh, controller is getting that event from the user, from the view, calling some API something, and then, say, uh, then getting again the model. Like, whatever the API call feed, it stored data in some model. So, again, getting that model and sending it to view. So this is a concept of m b m b c or m b b and what whatever we say. So, similarly, this letter block works in this way only. We have this state. A state is nothing but what UX do we want the user to be shown. Whether you want user information, personal information, we can categorize it as a state. And then we have this, uh, event. Event is what user wants to do. Like, user is clicking on some delete list item. So that we can consider as event. So that delete the that delete, we can create event and call it in the block. Then we have this block. So block acts like a controller here. So a block is maintaining the event, checking which event is getting called, performing some actions like calling API, getting data from the model, or doing some other logical operations, and then emitting state. Then whatever the state being emitted by block, that decides what UX we want to like, what view we want user to to be shown. So that is control by double lock. And, uh, yeah, it actually improves performance and maintainability. Like, uh, in the UX file, uh, you don't want, uh, lots of logical operation to be done like unclicking of on place something. You don't want key. It should perform some, uh, complex operation and then give the data. So that we leave it on the block. So So the block performs all those operations and emit the state. So, yeah, it actually improves the improves the code, also improves the performance, also maintains the readability of the code. Yeah. Thank you.

So yeah. So, like like, letter b, usually, what we do, like, we are lot lots like, we are lot of dependent on this 3rd 5 3rd party library. So everything anything we want to do, like, any if we want or anything we want to implement, we check for the is there any library present? Or, uh, let's say, we are using this database also Hive or ISRA ISR something. So we are using that, uh, we are using the third party library for that. So when we we are dealing with that too, so, obviously, these things came in my my mind key, uh, if the user's data is secured or not. Like, uh, it it's not getting breached or something. So for that, like, uh, the one thing, if we are restoring, like, if we are restoring like, if there is a API call where we are getting data from the API, then, obviously, like, uh, uh, it's not a big problem. Like, we are not storing any sort of data. So, uh, we are getting from the API and displaying, but when we are restoring in the local cache like Hive or shared buildings, So it becomes necessary key. Whatever the data we are storing, like, a user photo we are storing or user some login credentials, We need to encrypt that data. So it become very essential key. We should be you know, whatever the user is entering, it should be encrypted first, then it should get stored somewhere in the application in some cache, like, wherever the cache is getting stored. So, uh, if we are maintaining data, we make sure key data, uh, we are like, data is not getting placed and some other library is can't access those data in.

Actually, I'm not working on this widget testing part, so I'm not sure how we are going to do that.

So whatever, like, uh, whatever the app we are creating, it should be responsive. Like, uh, if we are creating, like, uh, whoever the UI developer it it is. That's the main problem of every UI developer in this quality. We have to make the UX, uh, responsive, like, uh, whatever the screen side it suits for, like, whether, uh, in the web application, also, screen can be minimized. Or in the mobile application, this mobile application has different size come, and then this tab also is there. And when we talk about, it's also macOS Windows also. So, uh, this responsive design is a major concern for any UX, uh, developer. So in later, like, what we do to adapt multiple screen size, it's like, uh, uh, we use this media query, first thing. So what media query does key? It gets, uh, a bit context or height context key, whatever the level's height per gender for for that context. And we have to, uh, we use media query to determine the height and width. K. What height should we take according to, like, ratio, let's say. K. We are taking the ratio of that height and width. K. If if the screen, like, uh, we want to take 9 we are not defining key. We have to take, uh, be it equal to 900 or something. So we want key 90% of the width should be taken by this container. So what we do, k, we create this media container, uh, media media query. It determines the size. And then, uh, gives the use key use 90%. So whatever the screen, it's get displayed. So accordingly accordingly, it takes the 90% of space of that, uh, container in a b s. Then we have this flexible and, uh, expanded widget as well. So what's the definite with difference between flexible and expanded is, like, flexible takes a minimum space. So it will expand if the data will expand. Otherwise, it will take max minimum space. At expanded HQ, whatever the app label is space is present, it will take those space and try to, uh, try to wrap try to wrap all the data in that. Then we have this, uh, wrap widget also which tries to wrap the like like, say, we have containers. So we we want according to the container, we in a row, we want 3 containers to be 7 or 4 or 10 or something. So we'll be in rapid in rapid. So these are the base where we are taking care of the responsiveness on the UX and that is playing it to the India.

So, yeah, so minimizing the app size is key. It should uh, like, if the app is smaller, it will take less time to launch, and it will be faster. So what we can do for minimizing the app size is we are not we are making sure key in the ad sets or data file. We are not storing many data, like images or everything. We try to get those data in from the network request. Then, uh, we are trying to be an author using local cache as well, very much like a local cache. So we use for the minimum task. So, like, uh, uh, something like a some splice screen getting started. The screen is getting shown to the user, but it's not be shown every time. So we stored in the local cache. So, like, very, very small attacks, uh, we have to make sure key. This only should be stored in the local cache, and not many files should be stored in the assets folder of that. And then, uh, yeah, data sum up of the approach to minimize.

So letter f CICD pipeline, uh, uh, like, uh, in CICD pipeline, what happens? Like, whenever we are pushing pushing some code, so it should be like key. It should not break the other functionality. So integrating the Flutter FCIC CD pipeline in source, we are not, uh, pushing some, uh, unexpected changes, or we are mean or we can do more we can be more in sort of key. Best practice would be followed. So what is happening? Like, k, we have this, uh, semantics. So semantics have, uh, this level. So in the letter CICD pipeline, we implement the testing of widgets using the semantics. So what happens, like, it checks for the semantic level for each widget for them. And if any semantic level is absent, it will give some error before pushing the code to the main branch. It will give key it is not getting passed because of this reason. And with the semantics also, it will also check with the label. It check key whatever the widget is getting from that label is presenting that, uh, UX or not. So if attack label is not present, uh, it will again, uh, create data. Then, uh, we can integrate this. Sorry. So we can integrate some quality quality code also. Like, uh, we are not not using some, like, uh, if a container we are using and keeping only size and width. So Flutter says key use, uh, side box in instead of Flutter. So that improves the performance of the app as well. Then, uh, for improving the performance also, yeah, like, uh, if we are using const, uh, variable. So letter says key, like, uh, make it at a const variable. So in this, uh, this kind of quality check, we can add in the CICD pipeline. So whenever we check, any constant value is there and constant keyword is not used or any letter warning warning is there which is not being addressed or any container is used, uh, on which place size box can be used. So we can add those quality check also and integrate it to the CICD pipeline. So it will ensure it will ensure that key, uh, a good quality code with all the test case, uh, is getting passed, and it is not breaking anywhere in the screen, and, uh, it works good. So in this way, we can with letter CICT pipeline, we can ensure. Thank you.

Yeah. Actually, I have not seen, like, uh, any open source flutter projector. But what I like, with the medium articles and other articles, I used to read blog. So, uh, I used to read key what is the best practice of letter. So this const keyword, I used to know from the medium articles key. Whenever we are using the const keyword, let it note key. It is a constant, and they will not u they will directly use it in the run time without calculating it. So it improves the performance of the app. Then, uh, this state management, also, I got to locate, uh, when we are using, uh, what is the benefit of using block over a status state. So but status state, okay, it reveals all the widgets per day in the widget tree. But what blocks do is key, whichever the widget is getting revealed, getting changed, We are rebuilding that and, at least, we are just displaying. So these things, uh, I'm getting to know from the articles, uh, or some block or then, uh, there some other package as well, uh, I got to know, like, uh, then, uh, this Flutter support, like, they are supporting, uh, iOS native UX, uh, in the Flutter latest version. So this I got to know from the Flutter document documentation itself. They are they are, uh, working on this adaptive feature scheme, like, tell the dialogue box or there is a date time picker. So in Android, it looks, uh, different than the iOS. It looks different. So they have given this, uh, and they have given this adaptive approach to implement the UX so that I got to know from the blog itself. So I used to read articles like what are the best practice, how how we can create a good letter project, uh, and what's the benefit of using library library. And everything, like, many other libraries, how like, uh, what are the other library also which we can use? So we use those, uh, in our app. So these things I get to know and apply it in our code. Yeah. Thank you.