Angular Interview Questions - Difference between JIT and AOT Compiler

foreign welcome back to my channel Kumar programming today from the series of angular interview questions we are going to cover what is the difference between jit and aot compiler this is a very basic interview question and I'm pretty much sure this is being asked by most of the interviewer okay so first of all we will see what jit and aot stands for and then we will see what are the major differences we have and after that we will see all those differences in the Practical demonstration so you would be able to understand it thoroughly now let's understand what jit and aot stands for in angular We have basically two type of compiler jit and aot jit stands for just in time compiler and aot stands for ahead of time compiler ingestion time compiler it compiles the application in the browser at runtime okay and in aot compiler it compiles the application at the build time itself okay what does it mean if you see this left side snapshot here we have two environment build environment and runtime environment in the build environment we are having the source code okay we are not compiling it here okay we are sending code to the browser and this runtime is happening at the browser side and at the browser side just in time compiler compile the code and then convert it to the JavaScript code in order to render that okay so if you see here in the image also this is the execution time and this man symbol represents as a compiling the code okay so here execution and code compiling both are doing at the same time okay in the browser itself that's the behavior of just in time compile okay but on the other hand if you see we have a aot compiler where our angular code is going to be compiled at the build time itself okay and once it's built then after that build code goes to the JavaScript browser in order to render that okay and here you see this man is the building this is this have been already built and then after that we are rendering it okay and that's the behavior of aot ahead of time okay now we will see further what are the other major differences we have in jit and aot compiler okay so other major differences we have as in the previous slide we have already seen just in time compiler compile at runtime in the browser and aot compile at the build time itself okay the second one just in time compiler have the larger angular bundle file size okay and aot compiler having a smaller angular bundle file size why because of ingesting time compiler we are sending the compiler along with the code to the browser that's the reason it's having the larger bundle size but in case of iot we are having already compiled build time itself and then we are sending the code to the browser okay and the third one is detect template error later at run time because compilation is being done at the browser side at the runtime that's the reason our any error at the template side is detecting at the runtime okay but in case of aot any error in the template is getting detected at the compile time itself okay here it's having a slower rendering in case of just in time compiler because we are having the compilation as well as rendering both at the same time but in case of aot we have a it's a faster rendering because it has to just render only the compiled code okay the fifth one is in just in time we have a more asynchronous request okay and in case of aot we have a less asynchronous request I'll show you in the Practical demonstration how it's having a more asynchronous request and its aot is having a less asynchronous request okay the sixth one just in time is having a less security because our code is exposed to the end user right so that's the reason it's having a less security but in case of aot compiler it's having a better security because code is not exposed okay and ingesting time compilers having a less performance the same it's having a compilation as well as rendering at both at the runtime that's the reason just in time compiler is having a less performance in comparison to aot compiler okay and the good thing is just in time compiler is used for the development okay and aot is good for the production after angular 9 there was a render engine introduced as a IV render engine okay so they found this detecting template error slower rendering and less performance which was causing more time consuming to the development okay so they have introduced a new render engine as a IV render engine in angular 9 version okay and before that they were using the view engine to render that okay I'll make a separate video in order to differentiate in between IV render engine and view render engine okay now we will see all these differences in the Practical demonstration let's flip to the visual studio so now here I am using the same application where I have created for the web component let me open the terminal here let me make the two part of this terminal okay here I will execute NG sub and here I will execute NG build so simultaneously we can see the differences okay so I'll just execute Ng so for just in time compiler and at the right side I will use NG build iPhone aot for the iot compiler okay so now NG service started now NG build also started so if you see NG server has been already completed now and now NG build also gets completed if you see the total file size here we have 2.44 MB okay and now if you see here at the aot side NG build we have 98.40 KB only so you can see how the file size is is significantly reduced okay and here you will see the number of files is only 7 okay and here we have only five file size if you see here we have we have here output hashing after the file name so we will remove that um output hashing hashing as a none okay now it's building once again now we will we will we will be seeing the file name as it is the NG server okay so it's building now okay so see now the files file name is same as it is we have as a NG server okay if you see here here we have total five as of a total file number of file as a five and here we have total number of file h 7 okay and file size if you see is significantly reduced okay now we can run this application in our local browser this is the component which I have already created in my previous video so let me just open some fighter search so this is search for the fighter and if you have not watch that video please go to the my playlist and you can find this video for the angular web component Standalone in a single Javascript file okay now I will deploy this code to my local is in order to execute it okay so let me just go to the dist folder this building is being done in the dist folder so I'll take this build and then I'll put see I need Pub ww root and then I will paste it here okay and then I'll go to my IIs and here inside website I'll create a application and that would be a web component and let me give the path for this so we have C and it Pub W root web component okay and we will set it as okay okay and now this application has been created now we can run this application if we try to browse this application it's not going to execute okay because of if you see here let me open the view Source here we have base riff as as a slash so this is the root okay so this is not going to work because as of now we are using as a web component right so what we will do in our deployment here we will set as a base href as a web component okay so I'm just building it once again yep so it's built now let me take the file once again from dist and paste it to the root folder place this yep it's done now now we can run this it should be working fine yes it's working now here we have this is this is running for our NG serve and this is running for our NG build okay let me make it separate okay and open the developer tool for both let's open the developer tool for this NG build as well okay now let me refresh this and refresh this as well okay so friend if you can see here here total number of requests asynchronous request that we are talking about the differences here we have total 11 request and here we have only eight requests okay and if you see here the file size here we have 233 bytes here we have 234 by 235 but here we have just if you see that it's just half of the size okay 143 bytes 143 and total transferred here total number of KB transferred it's 2.5 KB and here we have only 1.4 KV and the the significant difference you will see that the two point eight MB resources downloaded and in this case only 571 KB resources downloaded okay so this is the major difference because here we have our just in time compiler along with the code but here we have only compiled code okay and this got finished in 1.0 seconds and this got finished in seven 14 milliseconds only okay and if you see here the dam count Dam content loaded was one second and here it was 659 milliseconds only and it took load time as a 1.04 second and it's 6.9 and it's 693 milliseconds only so friends you can see here how significantly the performance is being improved in case of aot compiler okay so friends I hope that you have understood about the differences in between just in time compiler and aot compiler and if you have learned from this video please don't go without subscribing this channel your each and every subscription gives a lot of moral support to make more videos for you you can like you can subscribe and you can share to the others who really need it and if you have any questions or doubt please write the write in the comment and I'll try to respond as earliest as possible and you can follow me on my Facebook and Twitter ID my IDs KY programming that's all for the day I'll see you in the next video and thanks for watching bye thank you foreign

Channel: Kumar Programming

Views: 7,877

Keywords:

Id: nq5z5YZHAKE

Length: 14min 28sec (868 seconds)

Published: Sat Mar 04 2023