Latest / DevQuestions with Tim Corey / 168 What Is A Front-End Developer?

Transcript

168 What Is A Front-End Developer? · DevQuestions with Tim Corey

• 0:00
  SPEAKER_00: Welcome to the Dev Questions Podcast with Tim Corey.
• 0:03
  SPEAKER_00: Join us each episode as we tackle the questions you are asking about a career in software development, understanding the industry, and new technology.
• 0:12
  SPEAKER_00: If you're just starting out or you want to grow stronger as a developer, this is the place to get your questions answered.
• 0:19
  SPEAKER_00: Now, here's your host, expert developer and online educator, Tim Corey.
• 0:25
  SPEAKER_02: What is front-end development?
• 0:28
  SPEAKER_02: This is a question that gets asked a lot and also maybe not asked enough.
• 0:33
  SPEAKER_02: So we're going to cover this in today's episode of DevQuestions.
• 0:37
  SPEAKER_02: Now, if you have a question, go to suggestions.iamtimcorey.com, leave your suggestion there for your question, and hopefully you'll see it answered in a future episode of DevQuestions.
• 0:46
  SPEAKER_02: Now, front-end development is a very popular term.
• 0:49
  SPEAKER_02: It's one you'll hear a lot.
• 0:50
  SPEAKER_02: And if you Google front-end development, you'll actually get a lot of wrong answers.
• 0:55
  SPEAKER_02: So let's talk about what is front-end development because it's kind of a nebulous term, and it's one we should define a little more clearly because you may want to learn how to be a front-end developer.
• 1:07
  SPEAKER_02: Or maybe someone's told you, hey, you're good at this, you should probably be a front-end developer.
• 1:12
  SPEAKER_02: But what does that really mean?
• 1:14
  SPEAKER_02: Well, a front-end developer deals with a user interface and user experience.
• 1:20
  SPEAKER_02: So it's building something that the user directly interacts with.
• 1:25
  SPEAKER_02: Now, they interact with the entire application because let's say you're, you know, you're a simple CRUD application, an application that creates, reads, updates, and deletes data.
• 1:36
  SPEAKER_02: Well, they don't just deal with the UI.
• 1:40
  SPEAKER_02: When they use the UI, it's calling the business logic and the data access and all the rest.
• 1:45
  SPEAKER_02: But what the user sees, what they actually click on and drag and move and all the rest of the stuff, that's the front end.
• 1:53
  SPEAKER_02: Now, there's still a lot of gray area in there.
• 1:56
  SPEAKER_02: So let's talk more about what is user interface, what is user experience, and you know, what are some examples.
• 2:05
  SPEAKER_02: Before you go on, I do want to point something out.
• 2:07
  SPEAKER_02: And this is where I think a lot of, if you Google this, you'll get a lot of wrong answers.
• 2:13
  SPEAKER_02: Because when you Google it, you'll see just web examples.
• 2:17
  SPEAKER_02: You'll see front-end web developer, front-end developer, and it's all about the web.
• 2:22
  SPEAKER_02: And that's not the only thing that is front-end development.
• 2:26
  SPEAKER_02: You can be a front-end developer for desktop applications.
• 2:29
  SPEAKER_02: You can be a front-end developer for mobile applications.
• 2:33
  SPEAKER_02: So there's not just for the web, but the web is the most common thing when we think about front-end development.
• 2:42
  SPEAKER_02: And we'll talk more about why in a little bit.
• 2:44
  SPEAKER_02: But let's get some examples of front-end development because maybe you've seen some of these jobs or you've done some of these and you can relate to what they're talking about.
• 2:55
  SPEAKER_02: The first kind of grouping would be Angular, React, and View.
• 3:00
  SPEAKER_02: So these are JavaScript client-side user interfaces for the web.
• 3:07
  SPEAKER_02: And so those would be examples of front-end development.
• 3:11
  SPEAKER_02: HTML, CSS, and JavaScript, also examples of front-end development.
• 3:16
  SPEAKER_02: You don't have to have a framework in order to do front-end development.
• 3:20
  SPEAKER_02: But that's not all.
• 3:22
  SPEAKER_02: WPF, Winforms,.NET MAUI, these are all, this all can be front-end development tools.
• 3:29
  SPEAKER_02: So those are also examples.
• 3:31
  SPEAKER_02: Also, Blazor, MVC, RazorPages, these are examples of front-end development.
• 3:38
  SPEAKER_02: So if you want to be a front-end developer, you could use any of these tools and do front-end development.
• 3:43
  SPEAKER_02: You don't have to be locked into, for example, just React.
• 3:47
  SPEAKER_02: There's a lot of different options for front-end developers.
• 3:51
  SPEAKER_02: But I want to be a little more clear here because this is where the next bit of confusion comes in.
• 3:58
  SPEAKER_02: There is often frameworks used in front-end development, design patterns that are used with front-end development.
• 4:05
  SPEAKER_02: For example, the MVVM design pattern or the MVC design pattern.
• 4:10
  SPEAKER_02: In fact, Microsoft has a project type called ASP.NET Core MVC.
• 4:17
  SPEAKER_02: That's for the design pattern model view controller.
• 4:22
  SPEAKER_02: So is that full stack development?
• 4:25
  SPEAKER_02: No, that's front-end development.
• 4:27
  SPEAKER_02: Even though there's in theory three, I guess you'd call them layers, three different sections, that's still all presentation layer.
• 4:36
  SPEAKER_02: That's all still talking about getting something in the hands of users, showing them something, getting information from them, and so on.
• 4:44
  SPEAKER_02: So MVVM, MVC, these are front-end design patterns.
• 4:49
  SPEAKER_02: Okay?
• 4:49
  SPEAKER_02: So I think maybe that clarifies a little bit more of what a front-end developer could do.
• 4:55
  SPEAKER_02: But let's talk more about, you know, I said it's not just web.
• 5:01
  SPEAKER_02: Well, web is probably the easiest thing to identify as this is front-end development, and it's probably the most likely to be just front-end development.
• 5:11
  SPEAKER_02: If you are a React developer, you're probably just a front-end developer.
• 5:17
  SPEAKER_02: And I said I'm not saying just as in putting you down, I'm saying that's the category you're in, is front-end development.
• 5:25
  SPEAKER_02: And I've hear a lot of people say, well, I'm a full stack developer.
• 5:28
  SPEAKER_02: Well, a full stack developer would talk to databases, would write business logic not just in React.
• 5:34
  SPEAKER_02: You'd have to be behind an API.
• 5:37
  SPEAKER_02: That's the back end.
• 5:38
  SPEAKER_02: So usually what happens is you are just in the front end with the React code.
• 5:44
  SPEAKER_02: There's a lot of complexity there.
• 5:45
  SPEAKER_02: You can even write some business logic inside your React code, but that's still just presentation layer, which would mean just front end.
• 5:53
  SPEAKER_02: Same with mostly with Blazor WebAssembly or other things.
• 5:58
  SPEAKER_02: However, you can also mix things together.
• 6:01
  SPEAKER_02: And that's why mobile and desktop, especially, aren't necessarily known for being front-end tools, because more often people are doing full stack development with them.
• 6:14
  SPEAKER_02: So they are not just writing the UI or building the UI in the presentation layer, they're also building the business logic in the data access.
• 6:22
  SPEAKER_02: And sometimes they're doing it all in that front-end project.
• 6:26
  SPEAKER_02: That's a mistake, but for small projects, it's fine, but it really should be something that's separated out a little bit better.
• 6:33
  SPEAKER_02: So that's why we often think of web development when we talk about front-end development, because it's a much clearer separation.
• 6:41
  SPEAKER_02: Because with especially client side with Angular React View, Blazor WebAssembly, these tools they rely on APIs.
• 6:50
  SPEAKER_02: So it's a very clear boundary because they have to have their data from somewhere else.
• 6:55
  SPEAKER_02: They can't get it directly in almost any case.
• 6:58
  SPEAKER_02: Therefore, that's all front end for the Angular React, Blazor WebAssembly View, those kind of things.
• 7:06
  SPEAKER_02: Whereas the back end would be the API and back.
• 7:11
  SPEAKER_02: So that's a little more clear.
• 7:12
  SPEAKER_02: Whereas with a win form application, I can't tell you a number of times I've seen a WinForm application where the code behind calls the database, which means it's technically full stack development.
• 7:24
  SPEAKER_02: We're going to talk more about that in two weeks.
• 7:26
  SPEAKER_02: But it's just a mess.
• 7:28
  SPEAKER_02: That's messy development, is what it is.
• 7:29
  SPEAKER_02: But when it comes to talking about front-end development, that's why we talk mostly about web development because of that clear separation.
• 7:38
  SPEAKER_02: So let's talk about what do you need to learn to be a web front-end developer?
• 7:43
  SPEAKER_02: Because, okay, you know, if you want to be a front-end developer for Winiforms, WPF, those type of things, well, you need to learn C sharp.
• 7:52
  SPEAKER_02: But and you also need to learn that UI like XAML or something like that in order to do the display work.
• 7:57
  SPEAKER_02: But when it comes to the web, what do you need to learn?
• 8:00
  SPEAKER_02: Well, you need to learn HTML, CSS, JavaScript, not frameworks first, HTML, pure HTML, pure CSS, pure JavaScript, source control.
• 8:12
  SPEAKER_02: Then you need to think about do I need a framework?
• 8:16
  SPEAKER_02: Probably, because frameworks usually do a lot of the grunt work for you, a lot of the groundwork to kind of allow you to build on something that's already there, an existing foundation.
• 8:26
  SPEAKER_02: Be careful, you don't have to always use a framework.
• 8:29
  SPEAKER_02: You can get by just fine with HTML, CSS, and JavaScript and build something powerful that's a lot simpler, which is better.
• 8:37
  SPEAKER_02: But once you get to a certain complexity level, a framework's gonna be a definite help, which means you'll probably need to learn Angular, React, Vue, Blazor, MVC, Razor Pages, one of those or more, but you need to learn one of those.
• 8:50
  SPEAKER_02: And then you'll need to learn the system for getting third-party packages.
• 8:54
  SPEAKER_02: For example, NPM, if you're talking about JavaScript, or NuGet, if you're talking about C sharp, and so on.
• 9:00
  SPEAKER_02: So that's a lot of stuff.
• 9:01
  SPEAKER_02: HTML, CSS, JavaScript, source control, framework, and then the package manager.
• 9:06
  SPEAKER_02: That's six things you have to learn.
• 9:08
  SPEAKER_02: That's a lot.
• 9:09
  SPEAKER_02: Now, the upside of being a front-end developer is that it's a very popular thing to do.
• 9:15
  SPEAKER_02: And so because of that, there's a lot of support out there.
• 9:18
  SPEAKER_02: You can get started pretty easily because there's a lot of tutorials out there to get you started.
• 9:23
  SPEAKER_02: And there's even some good job opportunities because of the fact that this is a very popular thing to do, is to have web front-end development as a whole job.
• 9:34
  SPEAKER_02: So there's a lot of opportunity out there.
• 9:36
  SPEAKER_02: There's a lot of tutorials out there to help you get started, and it's a pretty popular thing to do.
• 9:42
  SPEAKER_02: Now, the downside, whenever you hear something's popular, well, the downside is there's a lot of competition.
• 9:49
  SPEAKER_02: So, especially when it comes to getting started, there's a lot of people that have also said, this is a popular thing to do, I'm gonna do it too.
• 9:56
  SPEAKER_02: And so they're also starting from the same place you are.
• 10:00
  SPEAKER_02: So there's a lot of competition to keep up and make sure that you are putting yourself ahead of others when it comes time to apply for a job.
• 10:08
  SPEAKER_02: There's also the downside of you have to rely on others because you know you have to rely on API being built and how it's built and so on.
• 10:17
  SPEAKER_02: You have to rely on somebody else to do that for you because you're focused on presentation, which means you really have to work in a team environment or build on top of an existing API.
• 10:27
  SPEAKER_02: It's not really as easy to do solo development because of that.
• 10:32
  SPEAKER_02: So now the downside also is there's lots of languages to learn.
• 10:37
  SPEAKER_02: Like we point out six different major categories to learn.
• 10:41
  SPEAKER_02: So that's a lot to try and get any depth on.
• 10:44
  SPEAKER_02: And again, you're trying to compete with a whole bunch of people who are also doing the same thing.
• 10:49
  SPEAKER_02: So having depth is going to be important.
• 10:52
  SPEAKER_02: And then change happens quickly.
• 10:54
  SPEAKER_02: I I have seen a lot of people that say, I know HTML because they know how to write a div tag or an H1 tag, and they've not kept up with the latest in HTML5 and all the things there.
• 11:05
  SPEAKER_02: Or people that complain it's so hard to center an item on a page on the web.
• 11:11
  SPEAKER_02: And that's that was true, sure.
• 11:14
  SPEAKER_02: But now with CSS3, we have multiple options to do it very, very easily.
• 11:19
  SPEAKER_02: So you need to keep up with that.
• 11:22
  SPEAKER_02: So you have to keep up with the HTML5 changes and the CSS three changes, which these are ongoing changes, by the way, but also JavaScript and how it's changing as well.
• 11:32
  SPEAKER_02: And then if you've chosen a framework, you have to go even more in depth to learn all those changes because those changes usually happen yearly.
• 11:40
  SPEAKER_02: So now you've got all these different things happening at once.
• 11:43
  SPEAKER_02: You've got to have to track six different areas to make sure you know what's going on and keep track of those changes as well as continuing to go deeper.
• 11:52
  SPEAKER_02: Now, that may sound like a hard thing to do, and it is, and change happens quickly, but it is possible and you can definitely do it.
• 12:01
  SPEAKER_02: And I would definitely not want to discourage you from doing it.
• 12:04
  SPEAKER_02: I just want you to go in eyes wide open, knowing these are the things I have to do.
• 12:09
  SPEAKER_02: So, as a front-end developer, your goal is to have a large breadth of knowledge.
• 12:15
  SPEAKER_02: So you have to know about a lot of different technologies while at the same time trying to be as deep as possible in that wide range in order to keep your skills up to date, in order to keep yourself relevant, in order to keep moving you forward in a very crowded market.
• 12:34
  SPEAKER_02: So that's what a front-end developer is.
• 12:37
  SPEAKER_02: That's how, you know, that's what they need to know and how they need to work.
• 12:41
  SPEAKER_02: Now, what I'm gonna do is on Monday.
• 12:43
  SPEAKER_02: So normally we have on YouTube, I have two videos that come out a week.
• 12:47
  SPEAKER_02: Monday video, it's usually a coding video or something around coding.
• 12:50
  SPEAKER_02: And then Thursday is the dev question video, which is also a podcast.
• 12:55
  SPEAKER_02: So if you're listening to the podcast, well, there's also a video of this.
• 12:57
  SPEAKER_02: And if you're watching the video, it's also a podcast of this.
• 13:00
  SPEAKER_02: But what I'm gonna do is on Monday, which is a coding video, I'm gonna cover how to become a C sharp front-end developer.
• 13:08
  SPEAKER_02: So we're gonna go over the different types of front ends, what you might want to learn and not learn, and how you can make the most of your time to become the deepest so that you can be as uh skilled as possible and as desirable as possible to employers without just kind of burning out.
• 13:28
  SPEAKER_02: Because there are some shortcuts, some things you can do that make your life easier, especially if you're a C developer.
• 13:34
  SPEAKER_02: Because we can use things like Blazor instead of using a different front end or a different framework so that we can reuse existing skills, which allows us to have deeper skills right away in our front-end framework of choice.
• 13:51
  SPEAKER_02: So learn more about that and how to go deeper and kind of practice that as well.
• 13:55
  SPEAKER_02: So we're gonna do a practice as well where we have a challenge.
• 13:57
  SPEAKER_02: We're gonna say, hey, if you think this is for you, here, try this out, build something with just a front end.
• 14:03
  SPEAKER_02: I'll give you a challenge on Tuesday, and then on Friday, I'll show you how I did it.
• 14:06
  SPEAKER_02: And we'll do the same thing the next week with back-end development and the following week with full stack development.
• 14:13
  SPEAKER_02: So those are coming up, but this has been front-end development.
• 14:16
  SPEAKER_02: I hope it gives you a good kind of overview of what it is, but we're gonna try and get our hands dirty a little bit in just one part of front-end development to see if this might be something that you're interested in or interested in learning more about.
• 14:29
  SPEAKER_02: All right, so until then, thanks for listening.
• 14:31
  SPEAKER_02: And as always, I am Tim Corey.
• 14:33
  SPEAKER_01: Thank you for joining us for this episode of Def Questions.
• 14:36
  SPEAKER_01: Tim is committed to making it easier for you to become a developer.
• 14:40
  SPEAKER_01: If you would like to help make more content like this possible, please like, subscribe, rate, and share Dev Questions.
• 14:47
  SPEAKER_01: You can also send your questions to questions at IamTimcorey.com.
• 14:52
  SPEAKER_01: Until next time, remember, you are too smart and your time too valuable to waste it making all the mistakes Tim did.
• 14:59
  SPEAKER_01: When you're ready to learn to think and code like a professional developer, head over to imtimcore.com and enroll in a course.