S22:E1 - The new wave of frontend developer tools are on their way (Chris Ferdinandi)

To welcome back our show for Season 22, we talk with a familiar face to the CodeNewbie Podcast, Chris Ferdinandi. Chris is the author of the Vanilla JS Pocket Guide series and the creator of the Vanilla JS Academy training program. On today's episode, Chris talks about what he's learned since coming on the show in 2020, how he sees the future of frontend development evolving over the next few years, and what tools might help in your next job search. Show Links Partner with Dev & CodeNewbie! (sponsor) 11ty API Angular Astro Browser Native JavaScript CSS Client-side vs. Server-side DOM Go HTML JavaScript jQuery Lodash Netlify Next Nuxt Petite Vue Preact React Ruby Static Site Generator Svelte Umbrella Underscore Vanilla JS Vue WordPress

Transcript

Printer Friendly Version

[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.

[MUSIC BREAK]

[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:01:10] SY: Yeah, absolutely. So Chris, give us a little background about yourself. I know we talked to you before and I know that we talked about how you changed careers from being an HR professional to JavaScript expert, which is really, really awesome. We had that conversation back in 2020, but I’d love for you to give just a little bit of context for people who may not have heard that episode.

[00:01:30] CF: Yeah, absolutely. I’m known on the web as “The Vanilla JS Guy”. I didn’t coin the term, but I do spend a lot of time evangelizing JavaScript using browser native kind of stuff, and I help people learn JavaScript. My whole ethos is that there’s potentially a simpler, more resilient way to make things for the web than what a lot of modern best practices might look like. And so I spend a lot of my time creating courses and eBooks, running workshops, and every weekday I send out a short newsletter with some developer tips straight to people’s inboxes. You did mention the career change thing. So I actually started my career in human resources, did that for the first five or eight years of my working life. And then I made a career jump. So I’ve kind of got this really weird and unique background where I know what the hiring process looks like behind the scenes. And I’ve also gone through that process of just giving up on a career you were in the middle of to go do something totally different, which was really fun and wild and scary.

[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:02:41] CF: So the focus on Vanilla JS kind of happened by accident. I originally came into JavaScript development via jQuery, which was the way to do JavaScript on the web at the time, but I kept failing the JavaScript portion of front-end developer interviews, and I felt like I didn’t know what I was talking about most of the time. I had huge imposter syndrome. And so I decided I wanted to learn how a lot of it worked under the hood so that I could be more confident going into those interviews. And along the way, I discovered that as I was converting a lot of stuff I had written in jQuery to using the stuff baked into the browser, my sites were also getting a lot more performant. Things were running faster and there was just a better experience for the people who were potentially using the things I was making. And so that kind of really is what hooked me in the web performance angle, which was something I cared deeply about. You asked what Vanilla JS means to me. For me, it generally means an absence of dependencies. So it’s using the things that are built right into the browser. So browser native JavaScript methods or APIs rather than using libraries or frameworks. There is a bit of a caveat here because a lot of people think that means I write every single line of code and everything I build from scratch. I do make use of a lot of different libraries. I just tend to look for ones that aren’t dependent on another library themselves. So if I was looking for like a photo gallery library, I would look for one that just stands on its own rather than having to integrate with something like React or Vue or some other type of library.

[00:04:10] SY: Yeah, that makes sense. So you had pretty strong opinions about Vanilla JavaScript last time you were on the show a couple years ago. Do you still have those opinions now? Do you still feel that Vanilla JS really benefits developers and needing to know it should be a priority? Do you still have those feelings today?

[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:05:53] SY: Yeah. Yeah. That’s very well put. So I want to get into the trends that you’re seeing in the front-end world. So I know that JavaScript tools like Vue and React are very common, very widely used. They’re definitely on the list of things that people should look into. They make that list very frequently. But you say that there’s an emerging trend around server-rendered HTML with little sprinkles of client-side JavaScript, kind of sprinkled around in there. So before we get into that trend, let’s break down kind of some of those basic definitions. So what does it mean for JavaScript to be on the client side?

[00:06:28] CF: When we talk about client-side JavaScript, we are talking about code that actually gets shipped from a server to the browser where it’s run. All of the front-end libraries that we use today are client-side libraries. So something like Vue or React. When someone opens an app that’s been built with those is generally downloading Vue.js into their browser or React.js into their browser and then running a bunch of code that calls functions that React has or supports. And so the client is just another fancy term for the browser.

[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.

[...]

Original source