edWisor | Web Developer Mock Interview Session | Shishir Arora (Senior Developer @ Walmart Labs)

hi hi yeah hi this is Rishabh and I'm a mentor in advisor so uh one thing about the project I would share some areas of strength which I really appreciated was that it is responsive it was clean the organization without a custom module as it was is very appreciated what I did not other and what was missing when you refresh the screen it shows error why was that yeah yeah actually in my localizer that problem is not there but after deployment on live environment it is not reloading and I searched about it and I got some reasons I used the lazy loading and in some answers I got that we need to configuring some server environment as a property route router so what you majorly work on more on us later on the backhand side which you are most more comfortable in in you I said angular can you share share your screen and show me that back page where you are doing lazy loading yeah you once they already and we will come back to that just make it ready oh I'll go on with the other areas so other than that error what I felt was you have managed to write a functional code but at many places was very imperative so when I say code is very imperative do you understand anything about your code now what is imperative and what is functional sorry I'm getting the word imperative yeah so what is functional functional programming means functional programming I am getting T okay what is a declarative declarative imperative of your thought of any of these yeah okay what them I might use in project but currently I'm not a style of coding which is really popular in any frame of the choose the style of coding is something like I'll are you ready in your project side by side right yeah yeah I'll be looking at that screen which where you have this posted anon so just make it ready so coming back to yeah so when you write your code like for I is equal to zero I less than if-else and yeah that is all considered as procedural imperative style or not style why because until and unless I read through the body of your of your functions I won't realize what your function is doing right but when you leave some methods which es6 teams for example reduce filter or if you something out of our X J's operators okay then that becomes functional because you don't say how to do the things you just say that you do this way your beer speak what you are doing right your codes are smaller and it has almost no steps it's completely abstract right you could have used some rotors and transitions to make it smoother otherwise I like the complete implementation I can move in two separate categories now for review but before that I want to see your page if it is ready yes I can see sorry it is it low condom yes first can you show me the levy and loading partner so if we observe in source [Music] and when we navigate to other page that water will be loaded here in source can i demo in local because I can it yeah so this is the local one yeah so here we can see the modules initially this the sorry is what is the Navy loading yeah so in lazy loading we can load modules ever our demand for this project initially very slogging page right and signup page so we need to just load user management module where which contains the login and sign is model model is the container of four components and ServiceNow hundred sorry a Java squid fine right yeah javascript file but it contains the collection of components and services on demand you're loading new JavaScript files yeah so an open network panel okay open dev tools all right go back to the dev tools yeah yeah so go to the network panel beside network besides most this one is the network panel and a in network panel we observe we can observe the Falls from client to server and response from servitude application anything sorry if anything load so my server will show you right yeah yeah so can be over here okay then show those modules loading them yeah yeah I don't understand why do you want to go to sourcils anything which notes from server will be shown in network ID yeah show them okay so this we can say this first call for logging is done and this one is for meeting called that meeting call yeah sorry network panel we can observe all the HTTP calls the communication between client and server and also show me any other model other than this import media which will still loaded lazily when you open that page you have any any other module other than this dashboard any other URL yeah so there are two dashboard right for one for admin and another for normal user so both models are separated so when you log in as an admin so only admin what will will be loaded not user 1 and if user will log in as a normal user then admin model will not be loaded only no okay I'm presenting now next part which let me know if you see the screen you can see the screen yeah I'm writing some code yeah let me know the output of that so you have put on the output of this plus you have to explain how it will run in the context of event loop in browser okay it will display ace will print 0 to 4 set set a time up set a time out is basically generally used for to wait for the function suppose if we said one second for two seconds then it will wait for one second or two second and then execute again that food but but here zero is said so so I'm confused about the zero what will be it zero because I generally I used to set up with some non zero some positive values no no okay so at each 10 milliseconds also consulted block will execute after each 10 after each 10 it will execute what do you mean by each 10 - 10 milliseconds each 10 milliseconds means one zero and then after 10 milliseconds one and then after with 10 milliseconds to it like that what do we know on the first first impression when the value of j is 0 this set out term will execute right and it will loop in for that iteration itself so it will not go for next iteration j is equal to 1 because set item will execute in loop so for J equal to 0 it will look a infinitely so be this so on the first iteration itself it executes in infinite loop so for J is equal to zero so every time it prints zero okay you have to read about this more because it's basic thing so you have to read about set timeout in and also you have to read about how event loop runs because here the output would be 5 times 5 and why it is because the reason is this is how event looked walks in browser that all these callbacks are put into a queue and one by one they are executed after current stack finishes that means for loop finishes after that all these will be running okay so when these patterning by that time J is already 5 so it will it will run 5 times 5 because first one it's this code is actually equal to writing this code okay like this okay it is the same thing this will execute first and then in browser loop these look these callbacks we'll keep going inside one after the other 5 fallbacks people like this and and those will start executing these all paths one by one okay okay and obviously if it does that is 5 by then in angular I comfortable in angular yeah yes so have you ever came across a particular error which says that expression has been changed it was checked yeah it's sand early when we communicated between two components so suppose we pass some value from one component to another from parent to child component and using input decorators or so when the value has been changed of the input value of the component then the lifecycle book of component detect the change and at that time it returns some error how in light cycle book all right how do you correct that of them so we can use the let's take a look on change event on change of the component and check the value and correct if the value has to change this particular thing when when angular comes across when it finally needs to find out what has changed and what is not how does it detects these changes first it looks into parent or a question looks it to child and then its parent how it happens whenever the changes happen across complete angular that how does angular go inside and check out and check if we have changes that have happened because you are understanding how much performance intensive this work is yes so and angular continuously checked all the components values and if any change detect then it will set that new value or that component elaborate more of what do you mean met continuously checking what what's a check for dirty check if it continuously keeps checking don't you think that it is waste of resources here but that is the advantage of angular that it is responsive and fast responsive and detect all the changes at runtime and two-way binding it provides two-way binding so any change is detected it will reflect on dome and that is the functionality and usage of angular I think so if you have to make any such such normal JavaScript application and if you continuously keep checking all your objects yeah don't you think it will be very slow and in fact doing it with normal JavaScript would be faster than doing it with angular because angular is continuously checking all the objects which ever got changed it has to update being based on that yeah but and I think angular has some functionality that if some value are not change then it will escape that value and only focus on some values that are changed so if by doing that manually it can be possible but we can to put upward lot so I did never happen that you change something but it did not reflect on speed change in Queens your model somewhere by the Flecktones pin has it ever happened yeah why is that because sometimes I use two or three component in one component and the changes are done from another component then that child component didn't get the updated value suppose I used some dashboard and in dashboard I've used calendar component and in calendar there is another component for meeting that handles the updation of meeting and creation of meeting so if I change some value in meeting component and then the the whole HTTP calls done by the dashboard component but the value displayed in the calendar component so the miscommunication between the components so after the latest fall get from server it will not change in the charge component value so see if everything remains in the domain of angular then angular will definitely manage it but there are some situations like if you are using jQuery and you are mainly using a component which is made in jQuery yeah and angular is at that time not looking at jQuery objects changing right so if you have to say anything to angular angular won't automatically reflect anything after reading from your jQuery component yeah so that is one instance where it can happen that because something outside of angular will affect this particular case that it is not able to reflect at that speed in which you are changing your objects with my outside of angular is control yeah okay you do you have any questions yeah I have one question that first you have writes that when we reload on live environment it you can saw in the local environment yeah this is in local environment right so when I reload it works you yeah so what works according to meet was walking in your production right it was working there awesome reload reload was not working yeah I did that in local it works yeah so i facing some deployment issues in development environment route route angular route is not working so what is the based your if the only endpoint exposed in your server is the base then all your other see it generally happens when you have that route in your client but you don't have that route on your server okay in case of angular you are giving first screen in every poll right yeah so if it goes to server whenever you hit a URL on screen it first goes to server if one has no such route yeah it will give you another so you have to through a intermediate proxy or nginx you have to route all those URLs your base URL only so that your your base code can be served okay okay so what you are trying to do is actually what we call is are isomorphic apps okay and they support routing both on the client as well as on the server okay isomorphic yeah isomorphic route so you can search first in that case so see when you reload the page client router doesn't work there have to be noted on the server for that yeah that particular out should be open and existing on the server it should be a valid route and that route should give out all your basic whatever just chunk like making your doing layer layers eroding I guess so whatever that the out requires all those lazy loaded components which that route requires has to be served from us from there from what appears like is on that route you are not serving all your lazy roted components the the JavaScript switched pictures of is not getting some okay yeah so you have to either route all your all your cover requests to base your or you have to make make a circle so you this is the only method actually you have to route all your URLs to your base URL on server we have to make an engine X layer in between which means route those Falls Oh base URL page yeah and I have such an Stack Overflow or something else I could one answer that we can configure for every time I've got for no for right so we can configure for not for two already said when all you have non existant of all your routes to your base world zero four so four zero four because it does not exist on your server so yes to all those URLs to your base you are a dentist okay okay the basically issue is this only he either either you so if you give your page made on the server which we village actually you're not doing but if you may make your page rendered from the server then all your pages all your routes should exist on the server and then all the HTML initial estimate files will be different for different rocks okay on the server itself that's something which to polish server-side rendering although you're not doing that you're doing client rendering model okay and the base URL in egg index.html yeah it has to know in localhost by default it is slash yeah and localhost all those URLs are move are 22 your server yeah so the same thing in your back deployed URL oh no in deployed didn't work and I remove the slash and keep blank string and then it work like you remove this Nash yeah you show me maja so the basic idea is the whichever route you're hitting should exist on server okay yeah so I remove the dist folder I think so so base URL will be existing fee folder I think so but we on the side here yeah but we need to configure all the routes to debase yeah if you configure all the routes to your base that is the easiest way to do if you have to deliver a different chunks on different routes then you have to do that that thing in your server also then all your all your routes will be serve different content from the server itself okay okay so here you when you're showing layers eroding when you click on speed and goat water page new new chant loads okay but yeah when you refreshers these same thing should have to some server also yeah if I go for unloading then that problem will not be there right yeah yeah if you don't know for lazy loading it's it's normal then yeah yeah I was appreciable I would suggest because I have not seen that done in any of the volatile thank you yeah and actually when I faced that problem reloading program it was the last day of submission and so time I have noted that and it's really good because I do not in that done anywhere else at East it is half done here at last day I thought that I remove it lazy loading at a later on so lazy loading otherwise recommends would be lazy or needed yeah but it was too late to submit it last thought so I just submitted then with lazy loading because I learnt the lazy loading and I want to show that skill what I learned from this ok then I took all the points that's it thanks a lot ok thank you

Channel: Edwisor

Views: 24,735

Rating: 4.8308458 out of 5

Keywords:

Id: sSuDX8l69jw

Length: 29min 8sec (1748 seconds)

Published: Fri Jun 28 2019