a round of applause for Christmas money

too easy. Yeah. No, I’m excited to be here. I’m excited to talk about it. Um ah, yeah. I’m actually hearing you run for all the stuff I do and hearing how many times you said Vanilla Chet’s It’s called Casio. I am very on Brand,

Yeah, I get the whole, uh Oh. Is that another? Uh, another framework. I have to learn

which is fair. And I actually think it, um, as a phrase, it it started off as a joke. There’s this vanilla dash Js dot com website that, um, positions it like it is a framework, and it’s like, really dry sarcasm. And so a lot of people google it, find that and get really, really confused. So, um, if you’re not familiar with the term vanilla Js is a phrase used to describe coding with native built into your browser JavaScript methods and AP eyes instead of frameworks, libraries, um, etcetera.

It’s not another plug in its just using the javascript that comes with the platform. Yeah, and, uh, I have because I know a lot of people actually really hate the term because they’re like, That’s not a thing.

It’s just Java script. Um, but if you’ve ever tried to like Google, um, solutions and you want to exclude all the other stuff, you’re either doing like this really crazy kind of Boolean search thing where you’re excluding all the things or, you know, like I’ve found, even if you type like this is back in the day, like without J query, you’d get a whole bunch of, like, how to do X with jQuery kind of solutions because, you know, so vanilla jazz is like a nice filter to say, like, I don’t want all that other stuff

Yeah, and it’s like it’s admit, definitely confusing for beginners. But so are a lot of other Web terms. Like if you don’t know CSS stands for cascading style sheet, that’s confusing to, and then you learn it and you move on. So I’ve been on kind of let’s educate people, um, mission

Absolutely a couple of reasons. First of all, um, performance is for me. Hands down. The biggest reason the like the platform close to the metal JavaScript is always going to be orders of magnitude faster than any library or any framework. Even the ones that tout performance as a feature are still never going to come close to what out of the box JavaScript will give you in terms of getting functional content in front of your users that they can start interacting with.

If you run any sort of platform that makes more money when more people stay on your page, that’s an important metric. That’s something you should care about. Um, it’s even Maura cutely, um, important when you start thinking about lower bandwidth users, mobile users, especially people who are on lower and devices. Um ah, lot of folks who build for the Web work on nicer machines and have often but not always better Internet connections.

And that is not necessarily the people who are using the things we make, um, and for them way mawr than someone who’s on the latest iPhone, Um, or latest MacBook or whatever the performance penalty you get from loading all this extra Java script, Um, and then the layers of abstraction it throws on top. Just make the biggest difference in the world. Use

Yeah, and there’s two. There’s two pieces to it, so the first is the you know, like it’s ah, it’s a helper function that probably ties into another helper function that ties into another helper function that eventually gets down to the raw kind of code that the browser actually runs. There’s also the up front costs. So J query min ified Angie’s. It is about 30 kilobytes.

Um, same goes for the more popular libraries view. React. They’re about the same size, too, And just as an artifact of how browsers download and parse and render JavaScript, um, those even the 30 kilobytes doesn’t really sound like a lot, but it can add quite a bit of Leighton. See to the actual startup time of your app or your Web page

Yeah, and then on top of that, you know, you get 30 kilobytes of HTML. The browser gets it, it parses it. You get 30 kilobytes of CSS. It still has toe do a little bit of parsing with it, but then it can start painting it pretty quickly. But JavaScript is a really special kind of creature in the browser world, so it delays. Um, it blocks rendering, um, it also blocks downloading of other files because it often changes what’s on a page.

And browsers don’t wanna download stuff that’s just gonna get removed so they will literally stop all the things download the file run through it wants to see what’s in it and kind of compile all the pieces before they then run through it again and actually executed. And that doesn’t necessarily sound like a lot. But once you kind of put all the pieces together, especially if you’re on a not, you know, high power device.

Um, you can start to see delays of multiple seconds. Mhm. And yeah, it’s just it kind of sucks as a user when things, um, hang time out, don’t work, take forever, um, in a pandemic like we are right now, this problem becomes even more acute because bandwidth demands are much higher than they were a few months ago.

You know is everybody has moved remote. It’s like uneven mawr kind of pronounced issue. Um,

Yeah, so I did some. I did some math on this. So reactors, 30 kilobytes. Let’s say to render that one tweet, you wrote an additional 30 kilobytes of JavaScript, which seems kind of absurd. But let’s say you’re, you know, 60 kilobytes in, um, that raw HTML file is 140 times bigger and 200 milliseconds fast. It is just nuts. It’s absolutely crazy.

have more hair than May, so

Um, performance is only one piece of this, I think one of the other, the other kind of things here we could like do a whole show on just JavaScript performance and all the ways it screws it up. But one of the things I’ve really, I think one of the more compelling arguments. It’s really weird, Like getting people to care about users is hard because, um, there’s kind of this, this argument that happens.

People get really hung up on the like, the developer experience. So, um, Alex Russell is a developer on the Google chrome team who talks quite a bit about performance and back in 2018 he wrote this article called The Developer Bait and Switch, where he talked about this strawman argument he has with people all the time around frameworks.

And to quote Alex, it goes, uh, it goes, these tools let us move faster and because we can it a rate faster after we live better experiences. And so there’s kind of this, um, you know, this false equivalency of like, Well, you know, yeah, the performance. But we can crank out all these new features, so that’s better for the user. And we can use Mawr Java script that

like like yeah, and like the argument is just wrong. Like, it’s not like I used to be a little softer on this, but it’s just an objectively wrong argument for a whole bunch of reasons. Um, I think you can. For me, it’s two things. It’s I think the idea that frameworks equals better developer experience is, um, do be Is it best? It’s probably true for some developers and also very much not for others.

Um, not all developers or Js developers. There’s a lot of people who contribute meaningful things to a project who don’t know JavaScript. Nor should they be expected to on Beacon. Unpack that if you want. The other piece is I think you can clearly point to situations where just because you’re using these tools, um, doesn’t mean that the end result, even if it’s easier for you, doesn’t mean the end result is actually better.

For the user developer expediency isn’t the only thing that leads to like faster creation of stuff the users want more isn’t always better, Like there’s a whole bunch of us reasons why that argument just literally doesn’t make sense. Um, so we could go on a bunch of directions, tell me which way you want to go with this Java scripts

trying to select an object by a class was like

its’s. There are certain things I’m happy to use tools for, and I think just as a quick aside, um, I constantly hear this like quippy little like Oh, if you’re not using a library, you’re writing your own from scratch, and it’s poorly documented like but like no, Like I’m still standing on the shoulders of Giants. I’m not hand coating every single line of code and everything I create.

I just like I’m being more selective about the tools I use and Onley reaching for the tools when they actually help. Like I think we have is a problem this industry of, like just use, react or just use view. It’s like the old like nobody got fired for hiring IBM kind of thing. Applied toe Web development like, you know, getting in trouble for using react even if it’s the completely wrong tool for the job. It has a

right? Yeah, and it has its place. It’s just not for everything. Um J query. I love J Query in large part, not just because it was such an awesome tool back in the day. But so much of the modern Web development experience exists because jQuery, carved or paved the cow paths. They said, Here’s a better way that we could do things and eventually the browsers caught up, not always in his eloquent away.

Like I really wish query, selector and query selector all had a shorter syntax. Um, It’s kind of a lot to right, but things like toddling classes and selecting elements and filtering through a raise and jQuery showed us a much nicer way to do all those things.

Well, there’s one thing you mentioned that I think, um, has to kind of implications. You you talked a little bit about, you know, with the back end. Um, you know, your ruby PHP like frameworks and libraries air very normal there, Andi Just commonplace. And I think I think for me the the big the big difference between like, why is that OK? And PHP? And why is it a problem in Java script?

You touched on one piece of that, which is, um, kind of the control in the front end. Like, not all browsers behave the same way. And you know some of the problems there are not just not all browsers behave the same way. But, like in a back end environment, you control the server. How much You know how much bandwidth it has? Um, how big it is, what the i o support there is. And in the browser, you have no control.

You have no control over the bandwidth of your users. The devices they’re using, the computing power the browser like it’s just all out of your control on DSO. For that reason, it’s a much riskier environment to code in than the back end. Um, but the other piece of it is, um you could use 100 libraries in PHP, and it has no real impact on the front end performance for your user, assuming you use them correctly.

And, yeah, but every extra bite of code you use in a client side app is a cost. You pass on to your user for your own convenience, and so it becomes a very different kind of thing. It’s an extra bite that they have to download that consumes data against their their data plan. Um, an extra bite. The browser has to download in, parse and run and do something with, um And so in that way, it’s a very different thing on guy.

I think the analogy to the back end is really appropriate, because from me, it feels like this obsession with frameworks and libraries doesn’t start with Jay Query. I think in the J Query era people were very cognizant. I shouldn’t say era because it’s still around today. But in Jail quarries heyday, people were very cognizant of how much JavaScript they used in general, how much code they kind of sent down the wire because It was a much more bandwidth constrained time than today.

Um, and there’s data to back this up. Remember seeing recently kind of, ah report done by Tim Catholic on the true cost of frameworks. And he didn’t analysis and found that sites that use J query sent way less JavaScript overall than sites that used other libraries and frameworks. And, you know, there’s natural performance implications as a result of that.

Um, for me, the kind of the rise of frameworks really coincided with the rise of the full stack developer, um and no, no disrespect to full stack developers because, you know, they do awesome things. But, um, I have personally found that a lot of full stack developers had a back end background first and moved into the front end because that’s where a lot of kind of the business demand happened.

Or, you know, businesses would say like, Oh, hey, we want to do all this stuff in the front end now, you know, code, you go write it. And you know we don’t wanna hire more developers.

and so naturally is these folks move over into the front end. You bring a lot of these. Well, this is how we do it with a key or in Ruby. So let’s, you know, let’s you know, let’s replicate that in the front end and it’s not. It’s a reasonable thing, but it had a lot of kind of trickle down effects that I think have been bad for the front end on. Don’t fault anybody here.

Yeah, I think you know one of the other pieces, Thio. I found a lot of folks like, if you were If you’re used to a library or a tool, that’s where you started off. You don’t necessarily realize how much the native out of the box web just kind of gives you for free. And I very much am a fan of learning with whatever tool gets you from I know nothing to Oh, shit.

I made something that actually works like as quickly as possible because I think learning momentum and like seeing that excitement of idea to execution is really important, you know? So if if jQuery or view or whatever makes you feel like you can do really cool stuff, having not known how to do anything before, like by all means.

But, you know, if you do do that, you sometimes, um you know, you don’t necessarily realize like, Oh, there’s actually a native method that does that to That’s just a simple to write, you know, for example, like, people talk about JSX all the time and react, you know, making it really easy toe create kind of html from strings and variables, but, um, modern Js template liberals give you a very similar syntax.

Um, with the same level of these, you know, I kind of went off on a little bit of attention here, but, you know, Thio kind of circle back a little bit. Um, there’s that whole. Like, if it’s good enough for Facebook, it’s good enough for me thing that happens with react. Um, and I think the react was built to solve a very specific problem that Facebook had with their very specific garbage. You I’m sorry, not garbage.

Why no offense to any Facebook developers there? Listening with their very specific

If you really want to be like, Oh my God, that is horrific markup. No disrespect to any Twitter developers who listened to the show, but right click on the favorite button. Tweet on bond. See how Maney nested layers of gives take you to this not actually a button button in the U I. Um And so if you have that many layers of HTML, a framework that uses a virtual dumb probably does actually give you some performance benefits, because the amount of dipping that has toe happen to get that many layers deep is pretty big.

Um, but for most you eyes that are built, I call them, maybe more sensibly, irrationally. Maybe you still want state based to you. I, for example, like you probably don’t want to use vanilla Js for that. You don’t wanna, like just code your own state based to you. I think I did that once. It’s totally insane. Don’t do it, Um, but like if you’re going to do that, pre act is a really nice alternative.

That’s only three kilobytes. And even after the initial render, it is still orders of magnitude faster than react for most user interfaces like, if you’re not crazy, levels of nested dibs, deep reactions to user interactions are somewhere between three and 10 times faster and pre act than they are and react, and the overall file sizes smaller and it uses the same modern A p I and I could go on. You know

that’s a very good point. Um, similar Thio. It’s not exactly we were talking about, but something you just said kind of made this click in my head. Um, the other. You know, we talked about a little a little while ago. The kind of this idea of tools letting people move faster on. Do you know these frameworks and libraries air really helpful for, um, kind of the developer experience.

That is true for some developers, but these tools also have a really negative gate keeping experience for a lot of other folks. I found the developers with a bit more experience. Often times feel like react does a lot for them and developers who don’t often feel like react This really complicated beast that makes no sense and is really difficult to learn.

And if you’re building an app entirely and react and you’re also using, like CSS and J s, So now you have to write your CSS and JavaScript to, um it means people with, like, deep expertise and CSS, but not javascript can’t contribute accessibility experts who don’t know how to write JavaScript can’t contribute the way they used Thio before. And there’s like a really tangible example of this with, um, wordpress eso back in 2018.

Their accessibility consultant are sorry. Their accessibility lead re in right field, resigned from her position, Um, and documented wind this really detailed article? Yes. So it sounds like you guys already know this story, but for those of you who haven’t, um, haven’t heard it at the time, WordPress was rewriting their their content editor, um, with with reactive Project Gutenberg and because neither Rian or anyone on her team had react experiencing because they couldn’t find volunteers in the community, they could no longer go in and make accessibility fixes themselves.

And this is like an entire rewrite of the u I. So this is not just nudges and tweaks anymore. This is, Hey, whole new you. I we need to fix any accessibility issues, and

Yep. And so as someone who is, um, not I’m inaccessibility enthusiast, but I am by no means an expert. And so being told, you need to do this to fix the accessibility and then being able to actually implemented correctly and not screw up other things is sometimes way harder than it seems like it might be on the surface. And if you are a engineering team that is also trying to crank out all these like features related to a new product, accessibility fixes air.

Now just kind of another thing in your cue that you’re gonna push aside because it works for me quote unquote. I’m not saying you should do this, but realistically, that’s what’s gonna happen and, you know, re in and her team used be able to just go in and fix these things. Now they can’t. Um, So she ended up resigning. Gutenberg goes live, And in May of 2019 and accessibility audit of the now live Gutenberg editor was conducted.

The report ended up being 329 pages long with a 34 page executive summary documenting 91 accessibility related bugs. Um, that

Yes, she waas uh, she did a really detailed analysis of all the issues in the report breaking them down. Uh, real time is, she read the report on Twitter, which is really awesome.

I did not realize she was on the show. Okay? Yeah. So if

heard that episode Go back and listen to it Because she Rachel is amazing. Um and yeah, but so I think this is a really clear example of it’s good for some developers. Not good for others, because the a lot of the accessibility folks were developers, just not javascript developers. Um, and it very clearly resulted in a worse experience for at least segment of users. Can you this ambiguity

sorry in this context, I mean, frameworks like the idea that these tools create a better developer experience and automatically and therefore also create a better user experience.

Yeah. And so full disclosure here. I did not invent the term Thomas folks did. Um, he used it a couple times on Twitter, and I just felt like it really kind of resonated with the way I think about building things for the web. So I co opted it and always make sure that I give him credit because he coined the term. Um, But for me, um, the lean web means, um uh, it’s it’s a maybe more e feel like at this point in Web development as a profession, we’re very focused on developer experience. Um, and tooling Can you define

Yeah, So I see this term used often, and the way I think about it is, um, uh, focusing on making it as comfortable and convenient and efficient as possible for the developer to write code. Um, the the kind of the unspoken piece there is over the user experience. Like if you had to choose one over the other. I feel like we, as an injury have put more of a priority on how efficient developers are to the expense of the user.

And I think the lean web represents a shift to the other direction. Um, which is not necessarily to say, make it inconvenient for the developer. Because I actually think in many ways, um, or simple, back to basics experience could be better for developers to, But it really puts more of a focus on the user on performance on picking the right tool for the job on it’s almost like development minimalism.

Eso, uh, which is the first time I’ve ever used this phrase. So I’m going to kind of think out loud on this one a little bit here, But, um, uh, you know the idea of using just what you need to achieve what you’re trying to dio when nothing more Um S o you know, that manifests in a couple of ways. That means doing things like embracing the stuff the platform gives you out of the box as much as possible.

Um uh, but not necessarily like breaking your back trying toe like so we talked about animations a little bit. I think that’s a perfect example of our visualizations, rather because you could do a lot of really cool animations with CSS these days. But, um, visualizations if you’re doing visualizations unless you are a real glutton for punishment or you just wanna learn writing your own like raw data visualization code is maybe not the best use of time.

You know, at that that case, I absolutely would recommend, you know, reach for a library unless, like, you have a real passion for Do you really want to dig into it like I’ve done things like that before and then end up using my own tools over and over again because I like them.

But, um, you know, if you’re not crazy like me, um, it’s okay to reach for third party tools when we do reach for third party tools, I would love if, as an industry, we started being a little bit more mindful and deliberate about the tools we chose keeping them or small and modular grabbing the spoon instead of the multipurpose tool, Um, or just the scissors or, you know, to use our earlier analogy.

Ah, hammer, not a wrecking ball. Um, you know, if you’re doing data visualization, um, something like Chart V s chart Js Rather is going to be a little bit smaller than D three is in some situations, Not all. If you need state based you, I, um, something like pre act or spelt are going to result in a smaller footprint than react or view or angular.

Are not that those tools or bad? Um, but they have a very narrow use case compared to kind of some of the other things. They include a bunch of stuff that you might not need, most notably the virtual Dom. In most cases, um, and I think the other piece here is bearing in mind that the web is for everyone.

This is maybe more of, like, a mindset thing, but it applies to both the way we build, remembering that not everybody has the Not everyone who’s gonna be participating has the same skill set that you dio or the same level our expertise and so things that feel easy to you might not be easy to other people who are going to be meaningful contributors on a project.

And from a user perspective, not everybody has the the same equipment, the same bandwidth, the same ability to kind of download all this code that you want to ship for the thing you built on Bond. If you think about that, um, you know, if you kind of keep that as a focus, it really changes the way you build things for the Web.

God help you efficient out of date dependency, right? Yeah, I’ve got

yeah, and I don’t mean to take away from the developer experience like it’s important. No, it’s just not know, you know, you hit on it already. It shouldn’t be

to get analogy.

way watch. We watch cooking shows at home, and it’s like every every chef every time they need a little more salt. It’s just like the thing. Every developer to

Thank you guys so much. I really had a great time chatting with you both. Um, you know, not so much, Aaron, but what could you dio eso? Um yeah. So for anybody who kind of enjoyed this, Andi wants to dig into it a little bit more. Uh, go make things dot com Every weekday, I write a short little email with code snippets, tools, techniques, interesting stuff from around the web. You can find that at go make things dot com.

And if you had to gomakethings.com/drunkenux. I have put together a huge list of links and additional information from all the stuff we talked about in today’s show. So if you wanna, like, really dive in, that’s probably the best place to go. You can also find my contact info and you want to email me and tell me what an idiot I am. That’s there too. So, uh, what’s the drunken

Dude, this is it’s editing laziness. I don’t know how you the hour long episode with a guest is