All You Need To Know About Frontend Engineering (Web Development)

what's up everybody how's it going in this video we're going to cover everything that you need to know that front-end engineering what it is exactly how hard it is and whether or not you should do it so sit back relax be on the lookout for when you're gonna want to smash the like button in this video and let's dive into it one thing to clarify here when I talk about front-end engineering I'm specifically referring to web development or the type of engineering that uses the same tech stack that you would use in web development like javascript CSS HTML so I'm not necessarily referring to mobile development using swift or Objective C for instance web development ok so let's start by looking at what front-end engineering really is because there are a lot of misconceptions about it out there especially if you ask back-end engineers or engineers who've never worked on the front-end they tend to butcher it or to tell you things that aren't super accurate so I will give you a clear picture of it I like to define front-end engineering by splitting it up into four broad categories of work that you're likely gonna do at one point in your life if you're a front-end engineer keep in mind these are broad categories so I might not be capturing every single piece of front-end engineering work that exists out there but hopefully these categories are broad enough such that they can encapsulate everything the first category is styling CSS the thing that we all know and hate okay maybe I am the only one who hates it I can't be the only one who hates it CSS styling is admittedly a large part of front-end engineering now here's where things get interesting though and this is where I've very much surprised a lot of people in the past when I've told them that when I was a front-end engineer at Google as effectively a front-end engineer because I worked purely on the front-end for my two years and two months there I never wrote a single line of CSS during those two years or maybe I wrote like five lines at most how is that possible I bet a lot of you in the comments are going to be very surprised it's possible because depending on the type of project that you're working on you may not need to write CSS the reason I didn't write CSS at Google is because I worked on the Google cloud platform UI and if you've ever seen the Google cloud platform UI specifically the Google cloud platform console you've likely noticed that the UI is for all the different Google cloud platform products look very very similar and that's done on purpose because Google wants the Google cloud platform to be very homogeneous and to look like it's basically a single suite of products not a bunch of products that happen to be on the same platform and so they want everything to look the same they want all the buttons all the tables all the lists all the drop-down menus everything to look the same to look very cohesive and so what that meant was that as a front-end engineer I wasn't actually responsible for styling any of the stuff that I was putting on the page I was given these pre-made puzzle pieces so to speak that I just had to put together and wire up add some logic into them to make them perform now of course this is in stark contrast with a type of front-end engineering work that we do on algo expert for example by the way if you're preparing for your coding interviews or your systems design interviews check out algo expert yo my company use it from a code Klebsiella am for a discount on the platform but so on algo expert since we created the entire website from scratch we weren't given these pre-made puzzle pieces we had to do a lot of styling we had to do the entire styling on the website so we wrote and we continued to write a lot of CSS on algo expert and by the way there are a lot of different levels or degrees of CSS this applies to all aspects of software engineering but particularly so to CSS you can do basic styling the kind of styling that you need to have a proper presentable website and that's just normal CSS but then you can do a lot more advanced CSS if you want really cool little animations or pieces of artwork on a website so for instance here I'll point to systems expert we've got a few really cool animation on the system's expert homepage and I'm not gonna take credit for them it's the other person who's working on the front end who did that but the point is they involve a lot more complex CSS they're the types of projects that take a lot more time you typically will treat them as their own little featurettes and that's just a next level of CSS above just normal website styling the second type of friend work is gonna be what I like to call layout this is really gonna be just HTML putting elements on a page this is gonna get a little bit more complicated once you start to work with front-end frameworks like angular or react because if your template in your HTML is gonna be a little bit more complex there might be a little bit of framework specific stuff that you're gonna add to it but the point is layout is a very core part of front-end work contrary to CSS I would say that no matter what you work on you're gonna have to do some bit of layout because at the end of the day with front-end engineering work you are putting stuff on a page so it's very rare that you would do front-end work with absolutely no layout no HTML but the way that I like to think about layout is it's really just the glue that puts everything together in front of engineering then the third category of work in front end engineering is what I like to call state management and this is where things start to get very tricky this is something that I think a lot of people who haven't worked on the front end might not think about when they think of the front end state management is basically the way that you manage State in your application if you're not familiar with State if you think of a web application at any given point in time that web application is in a particular state for example maybe a drop-down menu is open maybe a credit card is written in a purchase form may be a question on algo expert is marked as complete that is the state of the application and you need to manage that state how do you manage it by writing JavaScript by using frameworks like react and angular this is where you can actually start to show off your skills as a friend Nehring by writing good code modular components sensible state management this is where things start to get much more complicated and this is something that like I said a lot of people either aren't aware of or they take for granted for example take a website like algo expert in the top right corner we have the little login text and if you're logged in it says welcome and your username this is the kind of thing where a back-end engineer someone who's never worked on the front-end might assume that because if they see the username of the user in the top right corner of the screen there that anywhere on the page you should have access to the username you know they might think that oh that username is up there so if we wanted to we could display the username also somewhere lower in the page not necessarily depending on how you've designed your application you might not have access to that particular part of the state meaning the username elsewhere in your applications that makes sense if you've worked on the front end you know exactly what I'm talking about and I'm hinting at stuff like Redux for instance but if you've never worked on the front end this might be very confusing to you you might take this for granted think wait what what do you mean you have the username it's up there why can't you like display it lower on the page well because of state management and then finally the fourth part of front-end engineering is what I'm gonna call dealing with a synchronicity when you're writing a web application you are almost certainly gonna be interacting with a back-end with an API you're gonna be making network requests these network requests are gonna be asynchronous meaning you're not gonna get the responses from these requests instantly and you're gonna have to deal with that that can go from being very trivial you just make one Network request you get a response and you do something with it too very complex because maybe you're gonna be chaining five different network requests maybe you're gonna have to handle a bunch of different potential responses a bunch of different errors maybe you're gonna have to do some state management within those responses to these asynchronous actions the point is dealing with asynchronous city in JavaScript and in front-end engineering is pervasive gonna have to do it and it can get very tricky it can get very complex and it's also very fun this is the part of front-end engineering that I enjoy the most but so that's front-end engineering in a nutshell I would say that most engineers who work on the front-end are gonna have to work in all four of these categories or at least they're gonna have to be well-versed in these four categories but depending on your situation you may work a little bit more in one category or the other for instance like I said I just didn't do any styling when I was a front-end engineer at Google because of the product that I worked on it's possible that you might do the opposite as a front-end engineer maybe you're gonna be working on a project where you're focusing most of your attention on CSS on styling on making a really cool animations maybe going to those really high levels of CSS and less so on the asynchronous aspect of front-end engineering or on the state management aspect and of course if you're dealing with a very static website that doesn't really deal with an API then you're gonna have a lot less of that other stuff now how hard is front-end engineering I would say that it's relatively hard obviously the more you practice it the more you do it the easier it gets but I would say that it tends to be underestimated or when people say that it's very difficult they might think it's difficult for the wrong reasons for instance I think that now it's very common to hear people especially back-end engineers say things like oh yes the front-end is very hard so they'll concede that the front-end is very hard they'll even say stuff like front-end engineering is more difficult than back in engineering but then they'll justify it by saying because it involves a lot of like art or UX design because you're styling stuff and I think that's misguided that's misinformed that assumes that as a front-end engineering not only are you gonna be doing styling but that you might even be the person deciding on what website looks like which again might be true if you're working on your own business like us on algo expert where we come up with a UX design but if you're at a big company like Google you're certainly not gonna be coming up with a UX design as a front-end engineer so I think that's an incorrect reason for which front-end engineering would be deemed hard what I think is more accurate is that front-end engineering is deceptively simple a UI looks easy to build but it can actually be very tricky to build behind the scenes the canonical example is the saying I don't know if it's a real saying but you often hear people say it which is that oh it's just a checkbox no you have a feature on the UI that's a checkbox and someone will say oh yeah that's just the checkbox or you haven't implemented that feature yet and they'll be like don't worry it's just a checkbox but it turns out it's not just a checkbox it's actually really complicated we had a perfect example of this at Google a few months before I left we had this feature that our back-end team had been working on and they told us on the front-end they were like oh don't worry about it this will have very little UI ramification it's just gonna be a checkbox literally they said that it's just gonna be a checkbox we were you know cautiously giving them the benefit of the doubt but then it turned out that that checkbox had so much logic behind it because checking off that checkbox had you issue some API calls but in order to issue those API calls you had to have like three different permissions so we had to check if the user had permission to check the checkbox how do you set for permissions you make API calls so we have to do like three different API calls but then for some of these API calls there were prerequisite permissions that you needed so we needed other API calls this complicated a bunch of stuff and there was error handling state management oh but wait you need access to this piece of information here but we're not in the same part of the UI where we typically have access to that information point is it wasn't just a check box it's never just a check box front-end engineering is pretty hard and that's that but then on the final note as far as whether or not you should work on the front-end I would really say that it's a matter of personal preference I personally love front-end engineering even though I always like to joke that I hate CSS so that I dislike CSS even CSS can be fun I think the package of those four categories of work that I described is very rewarding it's very challenging it's a good mixture of different types of skills and what I love the most about front-end engineering work is that you can really see visually so the outcome of your work I'll give the example I'll go experts putting aside the fact that with algo expert were actually building our own business but it was so rewarding and it continues to be so rewarding to see all this work that you put into the code suddenly turn into a website that people can actually interact with that has functionality that looks really good and so on and so forth so that's why I love front-end engineering that's why I think a lot of people love from engineering that's why I think you might love front-end engineering if you're not already into it let me know what you thought about this video in the comments below don't forget to subscribe do it now if you haven't already you know you want to smash the like button and I'll see you in the next video

Channel: Clément Mihailescu

Views: 166,849

Keywords: front end engineering, frontend engineer, front end engineer google, what is front end engineer, what is frontend and backend, what is front end development, is front end development dying, is front end development a good career, how hard is front end development, frontend vs backend, should i be a frontend or backend developer, front end code, what is the front end of a website, what is front end web development, all you need to know about web development, web development

Id: Gc0msPEmGjA

Length: 14min 18sec (858 seconds)

Published: Wed Feb 19 2020