[00:00:05] SY: Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host, Saron, and today we’re talking about the new wave of front-end developer tools with Chris Ferdinandi, author of the Vanilla JS Pocket Guide series, and creator of the Vanilla JS Academy training program.
[00:00:24] CF: I can remember early in my career when I was able to talk about responsive web design and concerns around mobile and best practices and usability. There were developers who were a lot more senior than me, who were a lot less versed in this sort of thing, and it put me in a lot of conversations I wouldn’t have been in otherwise.
[00:00:42] SY: Chris looks back at being on the CodeNewbie Podcast in 2020 and what he’s learned since then. He talks about how he sees front-end development changing in the next few years, what new tools are on the rise, and why leaning into these new tools might help you in your future job search after this.
[00:01:06] SY: Thanks so much for being here.
[00:01:07] CF: Saron, thanks so much for having me on. I’m always happy to come on the show.
[00:02:30] SY: Yeah. That’s a great way to describe it, fun, wild, and scary. Yeah. Particularly the scary part.
[00:02:35] CF: Yeah, for sure.
[00:02:36] SY: So why the focus on Vanilla JS? What does that mean to you?
[00:04:28] CF: I do. I’ve probably mellowed a little bit with age, but a big part of my passion for Vanilla JS is that, well, two things. One, if you author what you create in mostly Vanilla JS, you ship a lot less code to your end user, which means they’re using less bandwidth, which is particularly important when you’re working in developing areas or areas where wide access to broadband is not readily available. But a lot of times the actual process of building things is easier too, at least if you’re at a certain point in your career. I know for a lot of mid-level to senior engineers, tooling can make work a lot faster and easier. But for a lot of people who are earlier in their career, tooling becomes a barrier to entry. And so for me, understanding kind of the fundamentals and really kind of focusing on the platform means that you can open a text editor and open a browser and just start coding. And you don’t have to worry about opening up a terminal window and installing a bunch of things and running a build tool and then starting up a server. You can throw all that away and just start working. And even as a more seasoned developer, I still find that a very enjoyable experience. I do think tools have their place. I do think they’re an important part of what we do as a profession, especially as the things we build become more complex. But I also think that as an industry, we sometimes over prioritize them.
[00:07:05] SY: Yep. Yep. Absolutely. And what is server-rendered HTML? What does that mean? So to answer that properly, I think maybe the easiest way to answer that would be to juxtapose it against what things like Vue and React do.
[00:07:17] CF: Okay.
[00:08:26] SY: So we talk about the trend of server-rendered HTML with sprinkles of client-side JS. What actually is the trend that we’re seeing?
[00:12:59] SY: Now why would I want that? Why do I want HTML compilers?
[00:14:13] SY: Interesting.
[00:16:05] SY: Wow!
[00:16:05] CF: Decreased page load time by 30%. So just huge wins all around for the user with the same exact authoring experience that he had before.
[00:16:14] SY: Very cool. Very cool. So how do you feel this will affect front-end development in terms of the process, the steps. How would it affect what we do in front-end developer roles?
[00:16:27] SY: Yeah, there’s a few different views you could take of this. One of them is the short term, one of them is the midterm, and one of them is the long term. So in the short term, I don’t expect much will change. I think learning things like React and Vue are still great skills, especially if you’re looking for a job. You can roll into a job with those like right now, today. I think tools like Astro make the transition from, “I know these things,” to, “I’m doing it this new way a lot easier because you can take the tools you’re already using, make a few changes and go.” So they’re not necessarily huge changes. I think in the middle kind of range, looking out a little bit, we will likely see a few things happen. I imagine tools like React and Vue, just in their raw form, will become less popular over time. I don’t think it’ll ever go away. The same way that people still build sites with jQuery today and jQuery is still a huge presence on the web, even though it’s not necessarily the modern or new way of doing things. And a lot of what it does can be done in the browser. I still see a lot of jQuery. So I imagine same thing with React and Vue. They won’t go away. So if you learn those things today, you can continue to use them. But in the longer term, I expect that a lot of what we use libraries for today will eventually make its way into the browser. This is a trend that we see happen kind of a lot where this same thing happened with jQuery, where a lot of what jQuery could do was in the browser, and then you had these kind of transitional tools that bridged gaps for a little while, and then eventually the browser kind of fully caught up and we moved on to the next thing. And so what I’m not sure of, I think for me the big question mark is, “Are tools like Svelte and Astro transitional or will they be tools that are going to stick around for a long time?” My hunch is they will stick around for a while, but I’m not entirely sure. The other angle here, especially because I know we have a lot of listeners who are earlier in their career, learning some of these newer approaches, learning how to use compilers like Svelte and Astro, probably not a huge, like, “I need to know this right now for the job I’m looking for today,” kind of thing, but potentially a very powerful thing to know one to three years from now. I remember when I started working in the industry, responsive web design was a buzzword and it was very new. And this was the time where everybody used to have separate mobile and desktop sites and they were all set to a fixed viewport size. And if you went to a browser on your phone, you’d get redirected to like the m.myawesomewebsite.com version of the site, if you were lucky. Other times it would just be oriented for a desktop. And I can remember at the time, every interview I went on, I’d ask like, “What’s your approach to mobile design?” And you’d get a lot of folks who they viewed it as this thing that was going to come and go. I remember one interviewer in particular told me, “Oh, mobile’s a trend and one that I think is mostly done. Nobody wants to do this stuff on their phone.” [00:19:20] SY: Really?
[00:19:22] CF: Yeah. And like they were very obviously very, very, very wrong because mobile is not only not gone anywhere, it’s exploded.
[00:19:29] SY: Yeah.
[00:19:29] CF: But this shift I think has the potential to be not as big as mobile I think, but it has the potential to be like that because I can remember at the time I was this newer developer who was not super, super great at the way we were doing things today, but I had a much deeper understanding of responsive web design than a lot of the more senior developers did. And a couple of years down the road, that put me in a really good position to be kind of more of an expert on certain stuff than some of my peers. And so right now, today, I think we’re at the start of another shift, and if you invest some time into learning some of this stuff now you have the potential to be seen as the expert in the room in a year or three amongst people who maybe have a little bit more experience than you, but were ignoring some of this stuff to focus on the way things work.
[00:20:21] SY: And that was the question I was going to ask next is what timeline are we talking about? And you kind of just answered it, one to three years. Is that the way you envision kind of these trends really being front and center?
[00:20:33] CF: Yes. Although, I’m trying to think back now to how things went with like React and Vue because I remember React and in in particular Vue kind of showed up a little bit late to the party. Angular was like the elephant in the room for a minute. And it was weird. It was like a trend that started to grow very slowly and then suddenly it was everywhere. But yeah, if we’re talking about from today, one to three years feels like a pretty good bet. I’ve been seeing more conference talks around using some of these tools and how you can work them into your existing workflows. And so I think it’s going to be one of these things that we’ll start to see more awareness, more awareness, and then it’s going to be like the big thing and it’ll almost feel like unavoidable. We’re not there yet, but I think we’re headed in that direction.
[00:21:18] SY: So where does this fit into your general thing of being the Vanilla JS Guy? Yeah. How does that all fit in?
[00:23:37] SY: Coming up next, Chris talks about how we’re going to see another shift in how we build websites and whether or not it makes sense to start looking into new tools now after this.
[00:24:00] SY: So I want to leverage some of your HR experience and kind of bring that into this context. If you were looking for a front-end job right now, and let’s say you gave yourself three months to prepare, three months to get your stuff together, to prepare to apply, how would you spend your time? What would you learn and what would you do?
[00:24:21] CF: Yeah. So if I was learning this today, if I only had three months, today, I would focus on, it depends. So…
[00:24:31] SY: Okay. Assuming you’re going for a front-end role, yeah.
[00:24:34] CF: If you’re just going for blanket marketability.
[00:24:37] SY: Okay.
[00:24:37] CF: It’s really hard today to go wrong with React. It is just very clearly… I don’t want to call them like market leader. I don’t know if that’s the right word, but it is the tool that you see come up the most often in job descriptions, in, “We’re looking for someone with experience with,” especially at newer businesses or job descriptions that are trying to attract up-and-coming developers. It’s just one of those phrases that you can throw on a job description and you know you’re going to get a large applicant pool. So it pains me to say, but it’s hard to go wrong with React, if you’re looking for a job today. The other kind of angle here, I think the reason why I said it depends is because there are still a lot of websites and web apps that are built with and use jQuery. One of the things, I’ve talked to a lot of WordPress developers who have told me they haven’t bothered moving away from jQuery because It’s already there. It’s already loaded in the UI in WordPress apps.
[00:25:37] SY: And that’s really used too.
[00:25:39] CF: Yeah. They’re already paying the jQuery tax, so they might as well just lean into it. So depending on what you want to do, if you’re someone who’s drawn to, say, the WordPress community and the WordPress ecosystem, and there are a lot of businesses that run on WordPress, there are also a lot of legacy applications and I don’t use this in a bad way, but like boring technology at boring industrial companies that still run on jQuery. And that can be an awesome career choice too because they often pay well, have really flexible work arrangements. They’re not kind of the hustle and bustle of an agency or a startup. So if work-life balance is really important to you, that’s not necessarily a bad move either. So depending on kind of whether you want a lot of change and the newest tech and a lot of excitement, React. If you’re looking for something maybe a little bit more boring and slow paced, and again, I do not mean that in a bad way, jQuery is not a bad choice either because it is still very much on the web and very much in use. And that’s if I only had three months. And that’s just from a technology side. There are a whole slew of other things I’ve been doing in conjunction.
[00:26:45] SY: Would it be valuable to learn any of these emerging new tools, these trends we talked about? Or would it make more sense to wait a few years and kind of see where these trends land to start learning them?
[00:26:58] CF: So it depends on how long you have. So if we’re just talking like, “I’ve got this three-month window,” I think going either deep on React or splitting your time between React and jQuery is personally the way to maximize your… I’m putting myself in the position of, “I need a job now. I need to pay the mortgage or rent, keep the lights on,” what have you. If you had a little bit more time, if you’re giving it six months to a year, I think learning these emerging tools now is a good thing to do because I’d say sometime in the next… if your company’s not or the company you go to work for is not already having these conversations, they will be in the near future. And being able to confidently speak to the pros and cons of different approaches you might use to building the new thing or updating your existing code base is a really great thing career-wise. I can remember early in my career when I was able to talk about responsive web design and concerns around mobile and best practices and usability. There were developers who were a lot more senior than me who were a lot less versed in this sort of thing, and it immediately positioned me as an expert on a thing that put me in a lot of conversations I wouldn’t have been in otherwise because of that. And while it’s probably, I don’t even want to say premature, I just don’t think you’re seeing lots of places in the industry immediately jumping to these tools, but I’m seeing more and more of it. And so I think at some point, these conversations are going to come up and it’s a really great thing to be able to speak about them.
[00:28:34] SY: Absolutely.
[00:28:34] CF: So, yeah, I would, if you have the time, if you were talking about a slightly longer term view, I think now would be a great time to start looking at these tools as well. Especially if you think about something like Astro where you can learn that in tandem with React, where you can do some React stuff and then bolt it into Astro and kind of convert your React app into an Astro build. It provides you a way to kind of run those things side by side and maybe learn these two different approaches at the same time, or at least one after the other.
[00:29:03] SY: Yeah, that makes sense. So for folks who do have the time to learn some of these tools, where do you start? Where do you begin?
[00:29:11] CF: Right. So I actually have not seen a lot of tutorials around either Svelte or Astro yet, which is probably a note to myself that I should…
[00:29:22] SY: You should do it.
[00:29:23] CF: I should consider.
[00:29:23] SY: Yeah.
[00:29:24] CF: Consider putting some stuff out on there. For right now, the websites for these different tools, they do a relatively good job of getting you started. So svelte.dev for Svelte or astro.build for Astro are probably good places to start. One other thing that folks might consider is heading over to Netlify and looking at some of their boiler plates and their starter demos. They have a really robust developer experience team that puts together a lot of kind of demo projects with these tools because they can be built and run on their platform. They have some things that might be worth poking around at, if you want like a project in progress that you can make some changes to and break some things on. That’s a good way to go. But Svelte in particular has a really nice tutorial section that walks you step by step through going from like a very simple hello world to adding some interactivity and it all just runs live in the browser, so you don’t need to download anything to get started. So that could be interesting for folks too.
[00:30:30] SY: Now at the end of every episode, we ask our guests to fill in the blanks of some very important questions. Chris, are you ready to fill in the blanks?
[00:30:37] CF: Yes.
[00:30:38] SY: Number one, worst advice I’ve ever received is?
[00:30:41] CF: That you need to have a five-year plan.
[00:30:44] SY: Tell me about that.
[00:30:45] CF: Yeah. So I’ve just always been bad at five-year plans and I’ve always been pushed heavily to have them. But one of the really nice things about our industry is that things change so dramatically in five years that having a five-year plan doesn’t always benefit you. By the time you get there, the industry had potentially moved on to a very different direction.
[00:31:06] SY: Yeah. Yeah.
[00:31:06] CF: Yeah. So if you’re someone who’s like, “I want to manage people,” awesome. If it’s more specific, like, “I want to work on this very specific technology,” well, that technology might not exist in five years or have gone in a very different direction.
[00:31:18] SY: Such a good point. Absolutely. Number two, best advice I’ve ever received is?
[00:31:23] CF: To start blogging every day.
[00:31:25] SY: Oh! Nice! Tell me about that.
[00:31:28] CF: Yeah. So I used to blog intermittently and I had a business coach a few years back tell me that I should start writing every day, which I thought was ridiculous because I figured no one’s going to read that much stuff. For me, it doesn’t seem like a lot. But one of the things that happens when you start doing that is your articles start getting shorter just out of necessity. And it means a lot of stuff that you previously considered too small to write about, you just write about anyways.
[00:31:53] SY: Oh, interesting. Yeah.
[00:31:55] CF: You discover that a lot of other folks may have had questions or not known about this thing that you just recently discovered that you thought was too small to share with other people, and it opens you up to this whole new world of people who are interested in a lot of like similar things to you, it also creates this amazing trove of like brain dump stuff that you otherwise would’ve forgotten about. And I’ve lost track now of how many times I’ve done a Google search and found a thing I wrote a few years back that I forgot about.
[00:32:23] SY: That’s cool. Yeah.
[00:32:25] CF: Yeah. So writing every day has been absolutely transformative for me.
[00:32:29] SY: Wow! Very cool! How long does it take you to write every day?
[00:32:33] CF: It depends. I generally try to keep it to under a half hour, so it’s like just a thing that I do while I drink my coffee in the morning. So I aim for about 15 minutes. Sometimes if I have like a big thing that I need to share, it’ll take longer, like 30, 45 minutes, which I know is not realistic for like a lot of folks. But yeah, I generally try to keep it to like 15, 20 minutes.
[00:32:53] SY: Nice. Nice. Very cool. Number three, my first coding project was about?
[00:32:58] CF: It was actually an HR blog. That’s what got me into coding in the first place.
[00:33:00] SY: Oh, cool!
[00:33:02] CF: I had this WordPress site. I wanted to have more control over how it looked and worked. So I started digging into the code and that’s what kind of kicked this whole thing off for me.
[00:33:11] SY: That’s really cool. Number four, one thing I wish I knew when I first started to code is?
[00:33:16] CF: That most folks are actually self-taught and mostly figuring it out as they go. I can remember when I started, I was under the impression that most people in our industry had computer science degrees and knew all this stuff and felt really, really like I didn’t belong. And after talking to a lot of people, I learned that most folks in our industry are actually self-taught or went through a bootcamp, and everybody’s just kind of figuring out a lot of this as they go. So there’s a lot of knowledge sharing and a lot of asking questions and not to feel so bad about not knowing all the answers.
[00:33:49] SY: Right. Right.
[00:33:50] CF: That was a really big light bulb moment for me that made me feel a lot more comfortable doing what I’m doing and really kind of made it click for me that yes, I do belong here.
[00:33:59] SY: Right. Right. You do. You do belong here. Well, thanks again so much for joining us, Chris.
[00:34:04] CF: Saron, thank you so much for having me. It was a real pleasure.
[00:34:14] SY: You can reach out to us on Twitter at CodeNewbies or send me an email, firstname.lastname@example.org. For more info on the podcast, check out www.codenewbie.org/podcast. Thanks for listening. See you next week.Copyright © Dev Community Inc.