The conversation in this week's episode was inspired by a blog and video from Chris Ferdinandi. He talked about converting jQuery plugins and Vue components into vanilla JS, and recording himself in the process. He also tried this conversion with a React demo app. While discussing all the new things one can do with the web, we ended up discussing a fundamental question: What is the difference between a language and a framework?
You can find Ferdinandi's post and video here.
12 years ago, back when Stack Overflow was a brand new site with just a few thousand users, someone asked a basic question: What is the difference between a framework and a library?
FreeCodeCamp has its own take on this question with a pretty interesting answer. "When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed."
There was no Lifeboat badge to call out this week, so we honored a Lifejacket winner instead. Shout out to Andreas for answering the queston: Are byte arrays initialised to zero in Java?
Ben Popper The greatest jazz trio of all time, just improvising.
Paul Ford Just gettin' it done!
BP Just scattin' our way through the code.
[INTRO MUSIC]
BP Couchbase is a modern, multi-cloud to edge, SQP friendly, JSON document database for building applications with agility, performance and scale. If you're new to Couchbase and would like to learn more, the couchbase developer portal is the best place to start. It's loaded with tutorials, videos and documentation, as well as best practice tips, quickstart guides and community resources, including the Couchbase developer community forum. Ready to get started developing on couchbase? Visit couchbase.com/newtocouchbase.
BP Hello everybody, and welcome to the Stack Overflow podcast. I'm here with Paul and Sara.
PF Hey Sara! Hey Ben!
SC Hey y'all! Hey Paul. Hey Ben.
BP Hey everybody. So this week, we're gonna chat a little bit about an article that Paul dropped in our Slack. I thought it was pretty cool. It says, converting the react to do app demo to vanilla js. Paul, what did this bring to mind for you? Like what, what kind of conversation would this spark?
PF Well, alright, so React is a framework, React is a way to create apps in a browser. And then there's React Native, if you want to sort of translate the React idea over to mobile, etc, etc. And so what this article is arguing that you could, and it's mostly a video, it's a good tutorial, you can do lots of React things without React, you can do things in regular old JavaScript. And you can do them in like a nice functional way. And you can sort of do all the web stuff that you need to do without invoking this relatively large framework. And I always think this is very interesting, right? Because like, this is a classic conundrum, you get so much for free with React. And by for free, I mean, like, I would like a incredibly robust charting component, that if I give it data that comes out of any relatively sensible API, and I say, here's the x&y coordinates will dynamically draw the chart. And when I change the data, update the chart, right? That used to be like three weeks of work.
02:11
SC Yeah, you either use d3, or you're doing something crazy.
PF But even if you're using d3, you're thinking a lot. Once you learn the basics of react, boy, do you have to think a lot less, which I mean, certain computer scientist types are hearing me say that and going it just like throwing this podcast in the river. But then here's the flip side, like I'm working on a little project. Now what I want to do is embed some dynamic elements inside of classic HTML web pages. And React kind of makes that possible, because what I want to do is make it possible to have components inside your CMS with just a JavaScript plugin. Because it's just hard to do.
SC Oh so like someone's using the CMS and they're just like dragging and dropping components in are these like components of the CMS?
PF Just like almost like a little template language, like little basic math and sliders and things like that, right?
SC This is your jam, this is your favorite thing to do. Like create your own little layer something.
PF Why? Because it still, it drives me banana cakes, that I can't do computer things when I publish articles. It's like I can't, I can't put a little calculator inside of an article. Even though that might be really good. I can't put a little chart without doing a lot of song and dance. And so playing with that--
SC Well, that's why, that's Jupiter notebooks. So you're making your own little React Jupiter notebooks.
PF But Jupiter notebooks require you to really think in the world of Jupiter notebooks, I just want to I want to add two numbers and move a slider. That's all.
BP You want to lure people into that world by dragging and dropping a few of these onto--you both always, somehow, we wind up back at Jupiter notebooks. So walk people down that path.
03:45
PF Journalists are not gonna publish Jupiter notebooks, right, it's just not their thing. The wall that I keep hitting is like react is like, ''Hey, we're gonna we're the Document Object Model inside of inside of JavaScript, inside of the web.'' React is like, ''It's there. It is what it is, but we're gonna make her own. And when we need to, we'll go ahead and update that. But that's not your problem. That's our problem. So let's just keep everything really abstract.'' And as a result, you get this nice hierarchy of components, and you can push state down it. And you can have just like 50,000 little elements when you screen all updating, talking to each other. And that works really well. So that used to be really, really hard. But on the flip side, boy, as I'm messing around more with classic vanilla js, it's so powerful. Now you can do everything. It's got like 20 programming languages built in. And you know, like XPath is in there. If I want to query my nodes through XPath and then operate on, whoa, I can. So that is a hell of a thing. That's like having SQL inside the browser.
SC Yeah, I think React when you start to think of these things living together at the same time, like I'm not a React developer and the other day I was talking to someone that was and my mind was blown by hot loading in React because basically, because of how React manages state, there has to be very purposeful updating of elements in JavaScript on your components. And so that, to me is like, the beauty of JavaScript is just updating things like mad and not caring and just having a completely dynamic environment. But because of how React works on top of JavaScript, stuff like that becomes more difficult. So it's a real trade off when you're thinking about adding something like React.
PF Let's go meta like, when do you decide to use a framework and a framework can be Ruby on Rails, Django, ASP.NET and React, you know, can be on the front end as well. I mean, what actually, what is your definition of a framework, Sara?
SC Well, when you're talking about JavaScript, that's such a good question. Because like, what's the difference between a framework and a library? I think a framework changes how you fundamentally write your code in general, like a library adds functionality to your code. But a framework makes you rethink how you're writing whatever particular language you're writing.
06:10
PF That's right. Yeah, I think that's right. No, I think you nailed it, because I don't, libraries don't have opinions. For the most part. They're like, yeah, you know, you, you want to do a thing or like a library. I mean, they have lots of opinions. But a good example would be, you want to add two dates together, I get it, here's some code for you. To make it easy to add dates together and subtract dates and format dates and do all that stuff. There might be different kind of trends. Like, like in JavaScript world, there was a library there use a library called Moment that was is for deep translation. And it's very, it's kind of stateful. Like, it's hard to know what's getting updated all the time. And then now there's luxan, which is very more modern approach, and more functional in its approach, but it's still I'm still dealing with dates, and so on. And I plug that in, and I can kind of plug it into anything I'm doing, that's the promise with the library doesn't matter what I'm doing. If I want dates, and I wanted to, you know, could work with jQuery or work with all these other libraries. When I get to React, what it's saying is, you are going to organize everything you do under these sets of principles, the principles are, you will have a virtual object model. And we will update that. And then we will track the changes to it and track the lifecycle of each component and update the actual object model based on what's inside. And so that's, you're not thinking about that all the time, you can still use all those libraries. But you are thinking about that component lifecycle and where components live, and where the state comes from all the time when you're programming in React. And so you import those libraries, but you're still thinking that way. And so it's about a mindset, right? Like if you organize things this way, many things that used to be really hard or break all the time will not happen. That's always the promise.
07:52
SC Yeah. And it's funny when, like when you think about when to use these frameworks, or when to opt in something I think, is really interesting. And tangentially related is if you think about, I always am very, fairly close to bootcamp education, and curriculums. And when they switch over from teaching JavaScript to teaching React, for example, up you get a whole new generation of developers who aren't thinking about things this way. Like, I wonder how many people that saw this blog post and video, were familiar with vanilla js, and how many were like, well, this is a weird thing to be doing to your React, you know, your React component.
PF I think this is real people come in through the frameworks, and then only, incidentally, learn the languages underneath them. And so frameworks have an enormous amount of power, like a lot of, I think a lot of people learn react now. And they learn or they learn Angular, or they learn View. And then they don't necessarily have a lot of reason to dig in. They use package managers to get their libraries, and they use Webpack to kind of build everything and they cross their fingers. And you don't, you learn the language when things break. And JavaScript, I gotta say, JavaScript is a very tough language to learn, because there's so much of it. It's like 20 languages. It's prototype based and object oriented and functional and imperative. And it's C and it's self. And it's small talk. And it's scheme. And it's, it's just like, with a little dose of Java. And so like, how do you get your head wrapped around that? Plus, it's not things execute asynchronously. So that's really hard. You don't know what's happening when. So you know, you can retreat into this framework, and it's a lot safer.
SC Yeah. Especially if you're comfortable.
PF That's right, once you get there. And so that that part's really hard. I mean, what what is, you know, the scale and scope of JavaScript these days, and the things you can do with it is really stunning. Like, the more I mess around, and the more I'm like, ''Wow, they added that!'' just feels like it's all in there anything you could ever want.
09:50
BP There's a pretty interesting thing here on Free Code Camp. Tell me if you think this sounds right, Sara, the way you were describing the difference between a framework and a library is pretty close to like the Stack Overflow answer that I found. But Free Code Camp has like a very sort of elegant way of putting it. I don't know if this is right, though. ''The technical difference between a framework and a library lies in a term called inversion of control. When you use the library, you are in charge of the flow of the application, you're choosing when where to call library, when you use a framework, the framework is in charge of the flow.'' So that makes it like a nice, neat little definition of how they stand in relation to one another.
SC Yeah, that's great. I think that's exactly what we're what we're saying is that, you start to fundamentally rethink how you're writing your language. And so, yes, now the framework is kind of controlling how you're designing your app instead of, instead of you.
PF I mean, it's a trade off, right? Like libraries, essentially, the we're gonna keep talking about their library doesn't ask you to change your behavior, it just gives you something that you presumably want. But a framework says if you, you're going to have to learn this, you'll have to do a tutorial. And at the end of that, you will be seeing the world in a new way. And because you see the world in a new way, you will be able to get more and better work done. And it's like anything, like hard things still remain very hard. So what frameworks do tend to do like react does and rails does and Django does is they create all those things that you used to spend days or weeks sort of scaffolding and building out per project. They're like, no, that's not your problem anymore. We're gonna do it.
BP There's a question on Stack Overflow, which is 12 years and one month old. So this This question is from like, the beginning of Stack Overflow, what is the difference in a framework and a library? And the funny thing in the answer is it says ''At the time, Wikipedia calls framework, a ''buzzword'' in air quotes.'' So apparently--
SC That's amazing. That's that's where it caught on.
BP People didn't know if it would last.
11:44
PF Well, it's, it's also very like, it's yet another we're terrible at naming things in our industry. Everything has like five names. You know, API could be a web API, a desktop API, an API description it just like it never. So framework is one of those very vague terms. But I think that it is probably still a buzzword after 12 years. But really, what it means is, we're gonna bundle it all up for you. Welcome to the new world. And then what happens is, they wear out like, React has got enormous force behind it, because I think it just solved, it solved a problem with JavaScript where lots of people were collaborating. That seems to be where frameworks truly matter, I think they they come in on a wave of acceleration, they're gonna get you good to work a lot faster. But where they thrive is if they let people collaborate and understand what the other people are doing and split up tasks more efficiently and React by making everything, these little components that manage their own state does a pretty good job of that.
SC Yeah, like managing state in JavaScript is an absolute nightmare. And so React really, I mean, that's like you said, in the beginning, they're the best as far as doing that. And so that kind of justifies the work that you're going to do, kind of getting to know the framework in order to make an order to understand it, and to build with it, that inversion of control.
PF They kind of back you into a functional style to it's like, yeah, you're gonna use a lot of map and reduce. And, like, you know, when you look at the errors that come out of React, it's basically don't have any side effects. Those are the that's the I don't know, side effects for you keep everything as functional as possible, and you keep sort of evolving it that way. So I think that's another big part of it is it's backed people into a very specific kind of way of programming and thinking about state, which I mean, I don't know, I actually find it pretty good to stay pretty functional, when I'm working, because I don't miss I++ suddenly blowing something up, or off by one errors showing up in my world, which used to happen a lot.
SC All the time.
BP So I think at this point, we can definitely pick out a question or we could talk about Bitcoin because--
PF Oh, let's talk about Bitcoin! Sara, this is your Christmas gift.
SC Yeah, thanks!
PF You get to talk about Bitcoin on the Stack Overflow podcast. [Sara chuckles]
SC Yes, it's going up!
BP You're the resident expert.
14:01
SC Am I?
BP Why so up? Why is it so up?
SC No one knows. There's lots of there's lots of hot takes. One of them is that the stock market is not unpredictable, but it just keeps going up. And so if people are like, ''What else can I invest in?'' And this thing is kind of hanging out there. I think so one thing that happened recently is PayPal is going to start accepting and allowing you to pay for things in Bitcoin. So I think, as these larger companies and these, the workflow catches on using Bitcoin, becomes easier to spend.
PF I mean it's PayPal Hey, here you go.
SC When those things happen, you start to get more trust in the platform.
BP That makes a lot of sense. Yeah. Every time you know, the Shopify, the PayPal, they get it in there. You think ''We're just that much closer to consumer adoption!''
SC Yeah, I'm ready!
BP It's hard to price because so much of it is speculators. That's that's the one issue with Bitcoin, right, is that it's the the demand for it doesn't come out of like an increase in usage so much as an increase in attention.
PF And the United States government. The United States government is also a major hot hodler.
SC Yeah, I think that's right. But I think that's what, like places like PayPal are trying to change right? Like, they're trying to make it easier to use it.
[MUSIC]
BP Alright, y'all, it's that time of the week where we shout out a lifeboat, I don't see any new one. So this week we're gonna change it up, shout out life jacket.
PF Yay!
BP Lifeboat, life jacket. Answer score of five or more to a question with a score of negative two. And the question of the week is: ''Are byte arrays initialized to zero in Java?'' So thank you to default locale, that was awarded 21 hours ago. Thanks so much for tuning in. I'm Ben Popper, Director of content here at Stack Overflow. And you can always find me on Twitter @BenPopper, or email us podcast@stackoverflow.com.
SC Great, and I'm Sara Chipps, Director of Community here at Stack Overflow. You can find me on GitHub @SaraJo.
15:56
PF And I'm Paul Ford, friend of Stack Overflow, check out my company Postlight.
[OUTRO MUSIC]