INIT

Episode 4: Stacks On Stacks On Stacks

Published: Tue, May 30, 2023

(Auto-Generated) Episode Transcript:

Seth Whiting: Hey, I am Seth Whiting. I'm a developer from Portland, Maine, and I've been programming for about 10 years now. And I am

Jake Pacheco: Jacob Paco. I am slowly but surely learning development. I from Maine as well coming from barbering and I've been coding for.

Seth Whiting: You know, it's hard to say.

Jake Pacheco: I, the, the, the first episode was six days, and then the second and third episode I realized that I've been coding in dog ears.

And and so basically time is moving much slower than I believe it is. So actually this is my about fourth

Seth Whiting: or fifth week in, in, in coding. So you went from less than a week to, to five weeks to,

Jake Pacheco: to less than a week, to five weeks to seven weeks. Six to four weeks, yes. I, I, I, I realized my mistake after I was like, oh my

Seth Whiting: word,

Jake Pacheco: like after two episodes I realized this mistake

Seth Whiting: and I messaged,

Jake Pacheco: yeah, I mentioned to Seth, I'm like, dude, like it's only been this long.

Cuz I looked back at our messages on like when I actually hit him up for like, asking questions about it originally. So yeah, hasn't actually been that long and it's been about four or five weeks. And I'm trying my best

Seth Whiting: ask for. Yes. You know. Cool. Well today we are going to go over, I guess like what people mean when they say full stack or just stack, like what is a stack.

And in doing so, we're gonna cover some of the topics that we've been saying that we've been wanting to cover since Yeah. The first episode. So so yeah. Yeah. But making up for lost opportunities there or whatever.

Jake Pacheco: Yeah. I, I, I definitely recommend going back and listening to some of the other episodes.

A lot of the stuff that we're about to talk about has been partially explained in the older episodes as far as like, what is a front end and what is a backend, what defines an app or a website, and Basically this, we're going to for right now, I am aware that there's this thing called no JS that runs in the backend.

I'm aware that there is react and

Seth Whiting: next js.

Jake Pacheco: And I don't know really what those two do, and I don't know how all of these things tie together Exactly. Are they written in the same console or what? So Seth is going to try to answer some of these questions cuz I'm, I'm quite curious about

Seth Whiting: that. Yeah.

Yeah. So do you want to take a stab at like what, what, like the, the million dollar question that we're talking about, like what is a stack if people say like, I'm working on with this stack, like, what, what does that actually mean? I mean, it, it. It kind

Jake Pacheco: of, I mean, in, in my mind what it would, w what it would be is like, I don't know, maybe it's, maybe it's a part to like on application or it's the full application on the backend or whatever, or yeah, I'm, I'm not really quite

Seth Whiting: sure.

But yeah, I,

Jake Pacheco: I would assume a stack would be basically a bunch of blocks and they create a stack, you know, that's kind of how my mind's working with it anyways. But I, that could be completely

Seth Whiting: wrong. Yeah. So actually just like random side note, mm-hmm. There is a concept in like computer science called a stack which is sort of like a data type.

But that's not what we're talking about here. So just. F f like disclaimer there, there's, there's sort of like two different kinds of stacks. And if you, if you go, if you Google any question about development, it will most likely take you to a site called Stack Overflow. Have you, have you stumbled upon that yet?

I've, I've,

Jake Pacheco: I've heard of it. I, I haven't like, looked into it because I, I didn't want to I. I, I, I know that sometimes I try to like dive in the deep end with things uhhuh and like try to like, like be like, oh, well, is this an easy way to do it? But I'm, I'm, I'm concerned that if I did do something like that, like say I wanted to just make my own app and I just Googled how, how can I do this and then like just copy and paste a bunch of stuff off of a stack overflow, I'm not gonna understand what any of that stuff does.

Right. Like any of the actual code, what it is doing. Yeah. And my real goal is to like, understand all that. So I haven't really delved into it though. I

Seth Whiting: have heard of it. Yeah. Yeah, for sure. Yeah, so all of that is just to say like, stack Overflow is one of the most helpful resources available to a developer and just any, any developer, you know, junior, senior.

Mid-level, anyone. But what they are referring to is the other kind of stack, which is like a data type and it can overflow if you, if you like, kind of like load too much onto the stack. So nobody needs to know that. All you need to know is like there are two different types of stacks that the one that we're talking about is the, the the other one.

Jake Pacheco: Okay. The, the one that is yet to be defined. Yeah.

Seth Whiting: So if, if you, if you consider yourself a full stack developer or if somebody asks you if you are a false stack developer, or if they say we're using this particular stack, what they're, what they're referring to is basically like the collection or like the, the group or like the package of.

Quote unquote technologies that they're using. So that can mean the language but more, more likely, it's more like the frameworks that they're using. So, mm-hmm. Back in the day when I started the most popular well at, at least like the most hyped, like quote unquote stack around like the, the most, the cool stack on the block was called the mean stack, and that's an acronym, M e a n, which is Mongo Express, angular and Node and all that, that means is, well not all that that means is to, to break that down.

Mongo is your database. So it's MongoDB is the, the database, and that's just the name of a particular database that people liked at that time. Hmm. And then Express is a backend framework written on top of Node. And then Angular was the front end framework. And then Node was, was the end. So M e a n, Mongo Express, angular node.

So that's, you know, you kind of get like a feel for like what, what people are referring to at that point. They're talking about backend frameworks, front end frameworks, databases and node itself is kind of, kind of falls into its own category in that it is considered a. Quote unquote JavaScript runtime, which just means that it's a form of JavaScript that runs on a server as opposed to your browser.

The, like, the way that it was originally intended, like the, the place where it was originally intended to run. Hmm. So then kind of, a, a bit later react kind of gained a, a huge popularity. So React is a front end framework. Angular is a front end framework and people started using the stack more, more often than the mean stack.

I, I don't want to, I don't want to generalize and say that as a fact. I, I don't know if like the, that stack really took off like and overtook the mean stack necessarily. But really all you need to know is the ME stack is Mongo express, react and node as opposed to angular and node. So yeah. So basically it's just like, what, what all are you using on this project?

Yeah. Like that, that's what the stack refers to. Does that make sense? Yeah. Yeah, that makes sense. So yeah.

Jake Pacheco: Yeah, that makes sense. So I guess a, a question then would be, if all I were to be learning was JavaScript mm-hmm. And

Seth Whiting: that does, you know, I next j or it, it does,

Jake Pacheco: It does react in the front end.

Mm-hmm. And then I still am like, What is next? Js and then it, and then it does no JS in the backend then Is that it's full stack or, or is there more that, more that goes into that? Do I need to know other languages to create a full stack

Seth Whiting: other than just JavaScript? I mean, well, so if you're doing backend development, I don't wanna say a hundred percent of the time, but like 99% of the time there is going to be a database involved.

Okay. And right now, I would say the most popular database around is called Postgres which is PostgreSQL. Mm-hmm. Which is just to, not to, like, don't worry if you don't understand this at all, but there are things called relational databases and things called. No. So relational databases are pretty much almost always going to be SQL databases, s ql, which sends for structured query language.

Okay. And that just means that you can, so SQL is the language that you use to query the database and through the use of sql you can relate different kind of entities in the database to each other in like a, a very, like in, in a way that you can grab like two separate things at a time and kind of relate them together.

So like, I want to grab all of the people. And at the same time, I want to grab all of their dogs and I, I want to know that this person has this dog, this person has this dog. And you just grab 'em both at the same time and then display them on a page, you know, with like pictures or whatever. Yeah. So so that's sequel.

And then there's something called no sequel, which Mongo, the, the old, the not old. It's not old. A lot of people still love it and, and use it a lot and it's great for a lot of different things. But back in the day it was like King and now it's kind of like sql. SQL actually was like super, super popular before No SQL databases came out.

And then Mongo and other No SQL databases kind of rose to popularity. And then sort of like a shift happened back towards SQL and people were like, actually these. These ones have a lot of value. Sql, I'm, I'm pretty sure SQL came first and that's like everybody was using it because the, there wasn't really an option.

Yes. And then once the option came, they were like, oh, yeah, yeah, let's jump on it. And then everybody was like, wait a second, let's think about it. And like, use, use the best tool for the job instead of just like the new flashy thing. The new thing. Yeah. Yeah, yeah.

Jake Pacheco: I have a question actually. Sure. And you know

Seth Whiting: when you say database Yeah.

Jake Pacheco: Like, do you mean like, like, cause in my mind when you say like, It when we're talking just coding in general. Mm-hmm. Or any of this. And you say a database, like I, in my mind I'm like, okay, so is it like a, like I, I I instantly thought like server farm or something. Yeah. Or, and, and then, and then, but like the more you're talking about it, the more I'm like, that's not it.

Like what is it? No, that's like what, what exactly

Seth Whiting: is a database? Great question. Yeah. What is a database? A really good way to think of a database is an Excel spreadsheet. Have you ever used a spreadsheet before? Yeah. Yeah. So you have rows and columns. Okay. That's, that's a database basically. Okay. So it's just

Jake Pacheco: a, a bunch of information and then it just like brings them to their pertinent information that's attached to it kind of a thing.

Seth Whiting: Yes. Is that kind of, so like you'll have like so if, so when you are working with data and you store it in a database, you will have. Different like collections. Some, some databases consider them collections, some consider them. I'm trying to think of like what post trusts

they might call it collections to, anyway, the, the point is you have like

an another way to think about it as an entity, like I said before. So like, you have users are all, all going to be in a database, so mm-hmm. Like when you sign in with your username and password and you have like your first and last name stored, that's your user record. You, it's gonna be like you have a user id, which is gonna be a number or like a string of characters.

Yeah. That's unique. It's always gonna be unique. Mm-hmm. And then you have like, A, a column for first name and your Rowe. Yeah. And that column is Jake. And then your Rowe for the last name column is Petco. And then your Roe for like email address is your email address. Mm-hmm. Okay. So

Jake Pacheco: it's, it's literally just a, a a, it, it really sounds

Seth Whiting: just like a spreadsheet basically.

It's like, it's it's just like if you were to information present it visually, it would make a lot of sense to present it in the form of like a table, like a, a Excel spreadsheet. It's stored I don't, I don't know exactly like that. Like it's stored as like zeros and ones, you know, but like, yeah.

Jake Pacheco: Yeah, because I, I mean, it, it kind of reminds me when like, I've tried to like rip my music off of like off of your iPod, which like my iPod. Mine. Oh, dare I. No, but like, I, I, you know, took some music from my friend and then like, I wanted it on my computer, so then like I had to like, go into the hidden files and copy and paste it.

Uhhuh. But the thing is, is every single song is just randomness of like letters and numbers. Uhhuh. And like, it'll be like, like song name artist. Everything is just random. It doesn't like, it's like jk F V tc and it's like, what do, what even is this song? You know? So it's like, it, so basically don't try to rip your music off your iPhone, but, but, but is it story like

Seth Whiting: encrypted form or something like that?

It

Jake Pacheco: must have been, but, but is that kind of What happens? I, I, I in general, like when I put my information into a computer, into Facebook or whatever, then does it then like, become encrypted in some way? So like someone else can't just read it

Seth Whiting: off of a database? Well, or, yeah. I mean, that's a good question.

And I, I, I don't know if I'm like like I don't, I don't necessarily want to assert a definitive answer, but Yeah, I know, I know that there are like SQL files, like sql, which like are is just your data in your database. Mm-hmm. And I don't, I don't think it's like usually stored like. Encrypted like that.

Hmm. But I, I could be wrong.

Jake Pacheco: Yeah, I, I, I was just, I mean, it doesn't really matter. I was just like, the way that you said that it, it would be like just some like kind of random characters or zeros and ones and stuff. Like, I was like mm-hmm. Huh. Is it, I wonder

Seth Whiting: if it's like that. Yeah. I mean, they, they could also encode it to make it like smaller, you know?

Mm-hmm. So that, that would make sense, but I don't, yeah. So I'm just, full disclosure, I'm like, in my day-to-day work, I kind of specialize in the front end, and I know I know enough about the backend to like, make an application, like, you know, like Yeah. Front to back. Like I, I, I know how to make an application, but I'm much, I spend a lot more time on the front end than I do on the backend.

Yeah. So just, yeah. Yeah. Sweet. So yeah, so Like I said, there will almost always be a database involved when you're doing mm-hmm. Backend development. So like, it's, it would be rare that you would use, like, react on the front end and node slash like, maybe express on the backend without having a database involved.

Yeah. So, okay. Yeah. Interesting. Yeah, and I mean, databases are like where you store everything and like Yeah. When you're building an application, you're gonna be storing a lot of stuff. So like you're, it's gonna be, you know, you're gonna be interacting with the database like all the time. Yeah. Now, is

Jake Pacheco: that, is that just because it's much more efficient than having to type a new line of code for every single new user or whatever it is?

Is, is it more efficient to like, you know, you write code for all of your, like, main functions of a website or whatever, and then like you'll have your database or database that's just like, This is just stored information instead of having to write out like full things for each individual, it, it can kind of just pull from that.

Is that

Seth Whiting: kind of why they do that or, yeah. So like you it, it's set up so that like, you, you don't have to write code for each like person, you know, like Yeah. Yeah. If you're, if you have somebody like making a, a, a tweet or a Facebook post or something, you know, that's, that's gonna be stored somewhere.

It's not, it's not like they're gonna send it, they're not gonna like text it to a developer to like, Hey, write this into the code. Yeah. You know, write this, write this person into our program. Yeah, exactly. Yeah, that'd be absolutely. So, so

Jake Pacheco: it just goes to a da a database Zoe, and just pull information from that instead.

Seth Whiting: Yeah.

Jake Pacheco: This

Seth Whiting: cleaner. Yeah. All right. Huh. That's interesting.

Jake Pacheco: I, yeah. Never knew.

Seth Whiting: Well, yeah, I mean, it's not even that it's cleaner, it's just that like you can. You, you remove the developer from that process, like altogether. So like the developer sets it up so that people can interact with the application and store things and retrieve things by themselves without like Yeah, they just, it kind of runs itself at that point.

Yeah. They write the code to say like, when a user wants to store something, here's how they do it and here's where it goes. And then let them, let them take off. That's interesting.

Jake Pacheco: I, I truly had no idea how that worked. And that makes sense now. Yeah. I, I, another question I was gonna ask, so is, this is purely just a shot in the dark, but is so is React a framework in which you put next to a node onto or something?

Or how, what, what, when you say a framework, what do you, what do you mean? Like, I, I, I'm not, I'm still completely

Seth Whiting: blind to that definition. Yeah. Yes. Good question. So, yeah, the, that kind of is another way to ask, like, it, it ties in very well to like, what is a stack, mm-hmm. Because next, like I told you about next because that's kind of like where I, where a lot of people are going right now and where like I mm-hmm want to eventually get you, but it might be sort of a distraction.

Because next is kind of a framework on top of a framework. So keeping it kind of like more basic. You have JavaScript running on the front end and you have JavaScript running on the back end, on the front end. The, the browser. And by the way, if people out there, I, I used the word the browser a lot on the first episode.

I should have been saying Chrome, or I should have been saying Safari or I should have been saying Firefox. Those are all browsers if you didn't know. So each browser is able to read JavaScript in order to be like an official browser. There are sort of like specs that you kind of have to meet, I guess.

And they all. And not all of them. So there's something called a rendering engine within the browser, which is like the thing that reads the JavaScript and the, the HTML and the css and just like spits the stuff out onto the page. And there are a couple different rendering engines, Mozilla uses or Firefox uses.

I think Mozilla might be the rendering engine. I could be completely wrong. Don't, don't yell at me if it's, if I'm wrong. Anybody listening to this. But I know that Safari, uses, uses or at least used to use something called WebKit. And I think Chrome used to use that as well, but now they use something called Chromium.

And I, I hope I'm getting all of this right. Mm-hmm. The, the point is they all kind of have different ways of like implementing, like. What shows up on the page and how they read the JavaScript. But they can all read JavaScript. That's, that's the whole point of what I'm saying. Every browser can read JavaScript.

And now you, as of, I think I, I got the date totally wrong on the first episode. I, I think no, JS came out in 2009. I think that's the official year. Mm-hmm. I said something like 2012 or something. I was way off. So now JavaScript can run on the front end and the back end. And you can kind of, the frameworks in general, like the definition of a framework.

If I were to offer a definition of a framework, it's a kind of. Pre-packaged set of JavaScript that like allows you to write JavaScript using kind of these like pre-packaged tools that frameworks give you. And

app applications generally all do a lot of things very similar to each other, like log people in and then mm-hmm. Like create content and then update content and delete content, that kind of stuff. So because people ended up writing a lot of the same stuff over and over, they offer like an easy way to do all of those things.

An easier way to do all of those things. And. Some, some do it in a way that they, they try to make it like really easy for you, but then you kind of like, you're doing it in their way. That's called opinionated. Like some frameworks are like opinionated in the way that they want you to do things, and then others kind of give you a bit more breathing room and say like, there are a lot of different ways, not necessarily, there are a lot of different ways, but the way that we're doing it is a bit, a bit less like heavy handed and mm-hmm.

Like, you, you know, you can still, like, if there's an issue with like the underlying JavaScript, you're not gonna have quite as hard of a time kind of like figuring that out. So, yeah, so basically a, a front end framework and a backend framework is basically just like, A way to write application code in sort of like a, a pre defined way.

So like you, you could write, you know, your whole application in just like quote unquote vanilla JavaScript, which is just JavaScript without any frameworks or without any libraries, without any help. But it would be, it would be like, you'd be kind of like reinventing the wheel a lot. Yeah. And writing a lot more code that way.

And like if you used a framework, you could shortcut a lot of that stuff. Yeah. Just because they've, they've done a lot of that for you. Now, does it

Jake Pacheco: do that by like kind of like auto filling and stuff

Seth Whiting: like that, or No? No. It's so if you think about When you're writing a function like you, you've written mm-hmm.

Functions, you've, you've gone over that. Yeah. Yeah, yeah. Yep. So if you're writing a function that function can run, you know, like you write it in one file, but you can reference that function in another file, right? Yeah. Yeah. So if you, if you say like you have a function that's like, you know, take these two numbers and add them together, you know, just for a simple example, yeah.

You have that file in like one place, and then you can reference that in a completely different file. Yeah. Th there's any, any like, JavaScript package out there is basically they, they've written this thing so that you can use it. And you can just kind of download it and use it in your own application.

That's, that's like sort of like what frameworks are doing. I mean it is, but like on a much larger scale, like way, way, way bigger. Yeah. So it's like, like we have this function or like we have this way of like writing your code that like we take and basically like spit out like the planned JavaScript for you and mm-hmm.

You know, it does something like very functional, very useful. So I'm trying to think of like so, so,

Jake Pacheco: so with that then, would you just basically adjust the

Seth Whiting: different like. Names

Jake Pacheco: inside of the code and stuff like that to make it so like the we, is it kind of like, Hey, we present you with this code, that a hundred percent works, you just have to adjust it.

So if it's your need

Seth Whiting: kind of a thing?

Jake Pacheco: Yeah. Or is that more of something Because, because like when I think of like I don't know I guess like Stack Overflow or something like that mm-hmm. I thought that those were kind of repositories for code

Seth Whiting: that

Jake Pacheco: like, oh, if I need this code to be written, I can just copy and paste it and then adjust it here.

But now I'm thinking that

Seth Whiting: framework is that kind of Yeah, it's that's a good question. So Stack Overflow is you, you can just ask questions about anything and people will answer your questions. Oh, oh, sweet. That it's, it's basically just like a forum for like, I need help with something. Who can help me out and, and people will be like, that's cool.

You know, here's, here's like, how I would go about this, or like, here's what you're missing. Like I, I can see, you know, the problem is on line 16 or whatever, you know? Cool. Yeah,

Jake Pacheco: you're, you're my stack overflow currently.

Seth Whiting: Yeah. And I appreciate it. Yeah. Or like, here's like the underlying concept that you're like, not grasping, you know, that kind of thing.

Yeah. So you can ask questions about like, Hey, I'm working in this framework and I'm trying to do this thing this way. And they're like, oh, within that framework you need to do it this way. You know, this is the way that they want you to do it, huh? Yeah. Huh. So, so, so a framework kind

Jake Pacheco: of lines up a set of rules for you to play by within

Seth Whiting: your code?

Yes. Yes. Okay. Interesting. Hmm. Yeah. So react. When it back in the day when, when people were talking about react, like it is, they, you use it as a framework, but a lot of people were like, it's technically not a framework, it's more a library cuz like they just give you like a a, so the difference between a framework and a library is like a framework gives you a framework more or less to work within.

It's like mm-hmm. Here's like the set of rules, here's like you know, like how you would write your code within our framework a library is more just like, like I was saying before so like, I'm kind of contradicting myself right now. A library is like a set of functions, like pre-written blocks of code that like you can just use.

So like mm-hmm. A good, I a good. Example of that is something called load dash, which like, you don't need to know, but like Load Dash just gives you things like like little, little blocks of code that like are really useful that you, you need to use. Like you could very easily just end up writing your own, like you probably could, like if you're a good, if, if you've been developing for a while, you could, you probably don't need load dash because you can just kind of like figure out how to, to write the same things.

But the, it's, it's just like little helper functions that like save you several lines of code here and there. Hmm. So like how, how would I write this to make it like delay for five seconds before it triggers. Yeah, that kind of thing. And Lodash is cool. Like, oh yeah, we got you. Like, just put in like your function and write five seconds and like, we'll take care of the rest.

So that's pretty sweet. Yeah. So that's, that's more like a library. A framework is more like it, it, it has a lot to do with like, not just your JavaScript, but also your HTML and your, and your css. So it's like mm-hmm. You can kind of inject JavaScript into your html. So like in, in, so there are several frameworks in which you write HTML and then kind of enhance your HTML via JavaScript.

So it's like you write out your HTML and say like, okay, but this block of HTML I want to like, Loop for every user. I want to have like this, this like block of html saying like their name and their like occupation and, and their address or whatever. And then I want that to loop over for every user in my system.

Hmm. So, and before I go any further, those frameworks would be more like Angular, which I mentioned before in like the main stack. Mm-hmm. That was, that was like kind of the original big, like ubiquitous JavaScript framework. When I, when I was starting out, like before that there were like libraries and like other like quote unquote frameworks that kind of.

They helped a lot, but nobody went as far as Angular did back in the day. So Angular and, and then another framework called View which is a, another popular JavaScript framework. They, they have, you write the HTML and then kind of like enhance the HTML for you. Like, by, by giving you like useful ways to, to like inject things into your html.

Hmm.

Jake Pacheco: That's, Yeah. This, this is all like, super interesting. I didn't know, I, I had no idea of any of this. Yeah. Right. So, so yeah. That's, that's interesting.

Seth Whiting: Yeah. And when, when you like, start getting into like, learning the frameworks, it'll, it'll, you know, obviously it'll make a lot more sense, but it'll be kind of like, oh wow, you know, like, this, this is super useful.

You know, like, I, I can definitely make a lot of use of this framework, you know? Yeah. I,

Jake Pacheco: I, I guess I didn't know that there was so much kind of helping you coat Yeah. Like I, I, I guess in, in my, you know, very baby, like, coding brain. Yeah. It was, it was just like, it, it was like, no, you just have to write a ton of code.

Right. And you make up your own rules. You can write a function like this, this time and then like this the next time. Yeah. And stuff like that. I didn't realize that there was like kind of it almost reminds me of like a like a I don't know. It, it's It kind of keeps you like, or gives you like rules to live by.

Mm-hmm. A, a framework sounds like it does anyways. It's like, it gives you like rules to code by and then, and it's, they give you the rules because they're like efficient and effective. Yeah. And, and yeah, I just, I, I, I guess I didn't know that. And then about like libraries and everything too. I, I didn't realize that it was, that it wasn't just, you know, if I wanted to make an app or something, it wasn't just me like sitting down and writing.

Mm-hmm. Every single line of code, the whole thing. Mm-hmm. Yeah. Yeah. Okay. That's

Seth Whiting: cool. Yeah. So it's cool. Interesting. It's sort of like, like if you're like building a house, it's like, People tend to like these kinds of windows and like this size wall and like you know, this shape of a roof. But like, we'll give you a couple options for each of those things, but not too many options.

And like you can build out a whole thing a lot faster, you know, because like we've given you, like you, all you need to do is say like, which wall you want and we'll just give you the wall. As opposed to like hammering any nails or anything, you know, just Yeah. Yeah. All you can do is yeah. Having to hammer

Jake Pacheco: type in

Seth Whiting: every single thing, right?

Like hammer one wall into the other wall as opposed to like all of the studs and then putting up the drywall and all that stuff.

Jake Pacheco: Yeah. That's kind of that's kind of mind blowing to me actually right now. Yeah. Like I'm, I'm a bit mind blown at that. Like, that it's like that, that there's things that are that helpful that makes sense, that there would be mm-hmm.

But it, I guess I, I guess it didn't it didn't dawn on me that there would be something like that, I guess. Yeah. You know, it's,

Seth Whiting: and it's, that's, like I said, it's all just because like people had been writing. Very similar code for a long time, and, and they're just like, we could shortcut a lot of this, you know, and just like, yeah.

You know, write it for people and just have them use the way that we wrote it, you know? That's, yeah. Yeah. That's cool. So, huh? Yeah, so frameworks like Angular and View have you write the HTML and, and CSS and, and then inject the JavaScript into those. React kind of took a different kind of spin on it and used something called jsx, which is not, it's, it's kind of confusing, I guess.

Mm-hmm. Like, don't, don't worry if you don't understand it, but like, J S X is just Ari a, a way to write your your HTML and CSS via JavaScript. Hmm. So instead of writing the HTML and CSS and then injecting JavaScript into that, it's like, no, we're just gonna write it in JavaScript and then turn it into HTML and CSS later, kind of thing.

So like, it's, they, they kind of spun it around and just made it all like JavaScript centric which had a lot of useful benefits that like a lot of people ended up loving and now react as kind of like the, the king of frameworks. So JSX is not exclusive to React. But React definitely popularized it.

Like, no, no question. It definitely popularized it and like, Made a lot of, you know, like huge use out of it. And now there are like other frameworks kind of popping up that use jsx. But like I said, Javas react was kind of the, the original and that's it, it's like the main reason why people are writing jsx.

But React allows you to write jsx like pretty easily, but it also gives you like a lot of other helpful tools to, to kind of, you know, help you out ar kind of like around the jsx. So they have different things called, like every, every framework has what's called a life cycle method where like, and that just means when you render a page.

What happens first, and then what happens after that, and what happens after that, and what happens after that. Mm-hmm. They give you like useful functions to kind of like hook into all of those events basically. Hmm. So yeah, that's, that's sort of like a, a taste or like an idea of like what, what people use frameworks for.

Yeah.

Jake Pacheco: Yeah. I mean that, that, it makes sense. I like everything you said, like, hit like, I, I get what you mean. Cool. Huh. Yeah, I mean, I'm gonna be thinking about that for a while. Yeah. When was it, like, right off the bat, did you learn about all this, like in bootcamp or was this like something you learned after the fact and was your mind as well?

Like, was it blown also when you found out that there's like, such helpful, like tools or something? Or, or were, were those tools

Seth Whiting: around as much? Yeah, so in, in bootcamp the frameworks, we weren't taught the front end frameworks. And on the backend, like, I quit before we got to the backend, but we weren't using JavaScript on the end.

We were using, they, they were using something called Ruby on Rails, which was really, really popular. Yeah. I've heard back then. Yeah. Mm-hmm. And it's, it's still popular today, but not, not to the extent as it was back then. Mm-hmm. But, I didn't get into frameworks until I started working with Kenny.

Like mm-hmm. Go back and listen to the last episode. If you, my whole history,

Jake Pacheco: if you dunno what he is talking about, then what are you doing here? Get outta here.

Seth Whiting: Get outta here. Go listen to the last one. Yeah. Actually listen to the first one and then come back all the way through. Mm-hmm. So on my first project, basically like actual project, building an application I, we were using, I guess primarily and almost exclusively, we were using something called jQuery.

And a lot of developers might be like laughing right now because jQuery was huge, huge, huge back in the day. Mm-hmm. And jQuery is a library like I was talking about with like lodash giving you like helpful functions. jQuery was like that on steroids where it was like, here's, here's a helpful function for like, everything and mm-hmm.

You know, like basically they, they took like vanilla JavaScript and made it like a lot more accessible. So like you were still writing a lot of code and kind of like still, still writing kind of like the, the base stuff that you don't need to write in frameworks, but writing it more efficiently, basically just like saving you a good few lines for every line that you write, if that makes sense.

Hmm. That's awesome. Yeah. So we were using Jake a and then. This framework called knockout js, which was like, probably came out around the same time as Angular. I, I would assume. I don't know that for sure, but it was, it was a, it was a legit framework, but we kind of, Ken Kenny just used it because he had like, heard of it and I think he had probably heard of Angular as well, but didn't really know the difference quite as well.

Cuz he, like, like I said on the previous episode, like he was more of a backend guy and I, I don't know how much like research he was doing as far as like, what should we use on the front end and that kind of thing. And I certainly didn't know any of this stuff. I, I, I just knew like HTML and CSS really like pretty well and then, A bit of JavaScript.

So I was just like, you know, what do you want to use Knockout? Fine, let's do it. So Sounds good. Yeah. So we started using that and then I think Kenny like found Angular and then he was like, oh, we should, we should be using this. So like, I think we like had just switched to that before I left. And then so like I got a little bit of experience with it and then started working on the next project where I was doing like full stack that I was using the mean stack.

So I was using Mongo Express, angular and Node. So obviously Angular is in there. And got like some pretty decent experience with it. And I like once I started using that, I don't know, like what my reaction was. I think I was still kind of like, I didn't know enough to be super like impressed I guess, cuz like, yeah, it was still like, I don't, I don't really know what I'm doing, but like, it, like this is definitely, you know, allowing me to, to be faster.

Yeah, so I, I mean I, I was probably, I I think I was like impressed by everything back then, so, yeah. Yeah. Yeah. I think that's pretty much the stage that I'm,

Jake Pacheco: I'm not on that stage cuz I'm no front end, but like I, I, I'm at the stage where pretty much like anything that helps I'm like stoked about, I'm like, oh man, and that helps me too.

You know, like just cuz I need all the

Seth Whiting: help I need. Just keep getting help. Yeah. Yeah. Yeah. Ah, yay. Yeah. So, so switch gears from front end frameworks, unless you have any other.

Jake Pacheco: Questions. I mean, that's, that's pretty much what my questions were. Do backend frameworks work the same way, I guess is one

Seth Whiting: question.

Sim similar, but like they, I, I want to say obviously, but it might not be obvious. They don't have anything to do with HTML or css, you know? Yeah, of course. It's pretty big difference. So what they do do well is allow you to interact with your database really well, really efficiently. Yeah. So the same, same kind of concept, like on the backend, if you're writing, backend code and saying like, Hey, get this data from the database and then send it off to the front end.

Like, you could write that with just JavaScript using Node as like your JavaScript runtime. But because, because. Everybody pretty much does that in a very similar way. Backend frameworks just shortcut a lot of that for you and say like, okay, grab, grab the data and send it to the front end. You can write that in like, I don't know, a dozen lines of code as opposed to like three dozen or something like that.

Geez. So you know, and, and I'm just totally para paraphrase those numbers up. Yeah. Paraphrase. Yeah. Yeah. But basically they just like give you useful functions and, and useful ways to, like, useful rules to follow and, and all of that kind of thing. In order to, to write your back in code, which has a lot to do with storing and retrieving data and sending it back and forth.

To and from the, the, the browser, like to and from the front end. Yeah. Yeah. Huh. So, and express. Yeah. So is sort of like the, the king of backend frameworks. It's been around for a very long time and, and, and I, I should definitely been masters there. It's the king of backend JavaScript frameworks like node frameworks.

Mm-hmm. There are so many other languages that you can use on the backend. So like, now we're in the territory where like JavaScript is just one of many, you know, potential languages and expresses one of many frameworks that you could use within JavaScript. Mm-hmm. But each language has their own frameworks, mm-hmm.

And they all, they all do similar things, you know, they're all about like storing and retrieving data, sending it back and forth to the front end. Yeah. I, I guess, yeah,

Jake Pacheco: I, I, I guess this is the time in the podcast where we remind everyone we are focusing on JavaScript, and if he says that something is the best one he's talking about with JavaScript.

Yes. He's, and is in his experience, he's not talking about the best one over, like for Python or anything, but he's Yeah, yeah,

Seth Whiting: yeah. I'm not even necessarily talking about the best one. It's more just like the most popular, like Yeah. If you're talking about like backend JavaScript development, there's a very good chance that you're gonna be using Express yeah.

As, you know, the, the way to kind of like write your backend code to, to store and retrieve data. Yeah. Apart from the storing and retrieving data, like there's a lot that you can also do on the backend, like, and, and it's really good to do on the backend, like processing data, like get this data and then like, kind of like sort everything together.

And present it in like a very nice way to the front end so that once they get it, they can just use it without having to like sift through and sort through on the front end. Yeah. And it's faster to do that on the back end than it is in, in your browser. Just Yeah, yeah. Yeah. As like, is it because the, the,

Jake Pacheco: is it because the browsers are pretty lightweight and the computer has a lot going on, otherwise I think that's, versus a server just has one job kind of a thing.

Seth Whiting: Yeah. But also like the, the browser is also having to worry about like rendering stuff. Yeah. Like it's kind of multitasking a bit more. Mm-hmm. Whereas like on a server, it's like you don't see anything. So it's just like processing things, you know, is, is just like, yeah.

Jake Pacheco: It has one mission. Must to put kind of a thing.

Seth Whiting: Yeah, yeah, yeah. Hmm.

Jake Pacheco: So I guess, so I, I, I'm getting like the frameworks and stuff now. How is. Like h h how is the front end tied to the back end? Mm-hmm. Like in the sense of like, you know, cause you don't have like your JavaScript code in, in, in your front end and everything, and you can have your, you know, HTML and css, which is what it mostly what you see and stuff.

Mm-hmm. But like mm-hmm. How does it send for information from the backend? You know what I mean? Yeah. Like, like, or, or when does it, does it like, is it written in a lot of code? Okay, go retrieve this from server xj, whatever. You know what I mean? Yeah. Like, how does that, how's

Seth Whiting: that work? Yeah. Yeah. So let me, I guess, like, walk you through verbally, like what your code does.

Mm-hmm. So like you have a button, so you'll have like a form and a button on, on, on your screen and like, The form is just like an input field where like you, you tap into it and then the little like cursor starts blinking and you start typing, and then what you're typing shows up inside of that, that little box.

Mm-hmm. That's called an input field. So let's say you just have a form that says like, what is your, what is your name? And, and it's, it's just like one box that you type in and you just type in Jake Patco, and then press the button that says like, save. So mm-hmm. You've typed that in and you press that button.

And like, as far as like the framework goes, it, it could like, You know, do do all of this stuff in like a uniform way like, and, and do it in like the React way or the Angular way or whatever. Mm-hmm. But like at the end of the day, it's just like a JavaScript function is going to say like, okay, grab the value of whatever is written in that box and then send it off via a request quote unquote, to the backend.

Mm-hmm. And that request is usually, so they're like a couple different ways to, to kind of like work with front end to back end communication. The, the most popular, I think still is called rest, which is R E S T, which stands for represent Representational State Transfer. I, I believe. So the R and the E stand for representational and then s and the T stand for state transfer, that all of that means is like, it's like a standard way to kind of like send off a signal to a two, your backend code, which is going to be on a server somewhere.

So, and it'll, it'll have basically send data to a particular url. Url. So like a URL is, you know, like google.com. But some URLs are just like a a bunch of numbers with dots. Like an IP address. Mm-hmm. Yeah. So you could send it off to an IP address or if you have like a, a nice url, you could send it off there.

So you. Like, just for the sake of like the example, you could send it off to like my website.com/api/users/ad or something like that. Mm-hmm. So that's going to basically say like, you send off that person's name to this particular url. Like you, you, you kind of like ping this URL and that knows that, that it's going to a particular server and once it hits that server, your backend code is going to kind of like intercept that signal and say like, okay, I've got this request and the body of this request is a person's name.

Now I'm gonna take that name and I'm gonna send it to the database and store it. Mm-hmm. In this particular, Collection under this particular column. So it'll be like the user's collection and the, the column name will be name basically like the, the title of that column or the, you know, whatever. And it will associate it with an id And if, if you're creating a person, then it will generate an ID and associate it with that name, like with that, that data and the data being that, that person's name.

So it'll say like, user five or User X, Y, Z has the name Jake Pacheco. And it's there, like, it's stored there until somebody deletes it or edits it or, or whatever. And if they edit it, it'll still be there. It'll just be different. So, and then later on and, and by later on, it could be like a split second.

Later on, you could have front end, your front end code, say, okay, like I just sent off a signal to to store this data. And there are different kinds of requests. And so like when you're, when you're creating something, you use a post request. And so I just sent off a post request with this person's name to, to hit the backend code.

And the backend code said to store it in the database. Now on the front end, immediately after, if you wanted to, you could say, okay, now I've got this table right below the, the form fields with the button that I just clicked. And on this table there are like, Five users, and now I want my sixth user to be this new one that I just created.

So I'm gonna use what's called a get request and do the exact same thing. And, but instead of sending off the person's name, I'm just gonna say, get all of the users. So you send off a signal to your backend code, and the backend code says, like, it intercepts the signal and says like, okay, they're requesting all of the users.

So I'm gonna call the database, like, make a call to the database to grab every record in the user's collection and s and then send it to the front end. And that the get request will then receive in response in the like response object of that signal, the list of users. And then it's gonna say, okay, I have this list in the form of an array, quote unquote, and we'll get to like arrays later.

Mm-hmm. But I, I know that you've already covered arrays. I've just started, yeah. Yeah. I just, in some arrays. Yeah. So we have an array of objects, and I, you probably covered objects. I've just started objects. Okay. JavaScript objects. Yeah. So yeah, you have an array with objects in it. Mm-hmm. So it's basically like a list of objects, which, which will we'll cover, like what arrays are and what objects are.

Yeah. But, so I have this list, and now with this list I'm going to, if you're on React, I'm going to create some HTML that takes all of the different properties of those objects and injects it into some markup that's going to turn into html. And then it's going to display in the form of like a table.

Yeah. Does that, does that make sense? Yeah. That, yeah, it makes

Jake Pacheco: perfect sense. So it is just, it's, it's literally just like a for lack of better word, like a code runner in the backend. So basically like I, I'll put in like whatever my username and when I hit send, it will come out of my computer, send out as like in the form of code, username, Jake.

And then the, when the backend receives it, it kind of goes, oh, this says this code that I'm familiar with, and username Jake. Okay, now I need to store that. Mm-hmm. And then say, I put my email in there too. Then it'll be like, oh, and he put his email in here, so send him welcome email and, and it pushes that out from the back end.

To my email and or to, and to the, to the

Seth Whiting: webpage I'm viewing or whatever. Yeah. So like, in addition to like storing the data, you, you hit the nail on the head. It could also Yeah. Do other things like send emails or, or like do something with the data, like, you know, like jumble it up or whatever, and then send it back.

Yeah. Whatever you want us do, but, yeah. Hmm.

Jake Pacheco: Yeah. Well, yeah. My mind is sufficiently blown, but it all makes sense. It makes perfect sense. Why, why all of this stuff does these things. It's just, it's just one of those things where if you've never thought about it before, you know? Yeah. It's like, oh. Oh, and it, it, yeah.

You, you until humans made it, cuz it makes sense kind of a thing. You know

Seth Whiting: what I mean? Yeah. Yeah. And like once, once you, like, once you write your first code, that's, that sends like a backend request. Mm-hmm. And, and receives a backend response like that. That's. That's like a big thing, like a mm-hmm. A big mm-hmm.

Like kind of like milestone I guess in like your coding journey or whatever. But like, once you do it once, it'll, you know, you'll be able to do it a hundred times and like that's mm-hmm. That is how you communicate between the front end and the back end is like sending and receiving requests and responses and Yeah.

You know, like I, like I could tell you, but obviously like, once you just do it, it it'll, it'll make even more sense. It'll more sense. Yeah, of course. Like you'll do it at some point. I don't know if they have it, have you do it in Code Academy, but like, it, it, like, I. I could show you a bunch of code where like I'm doing it or somebody else is doing it.

Mm-hmm. And, and like, yeah. Yeah. You could probably like make sense out of it, you know, after, yeah. After me. Like telling you, you know, what I just told you, like how, how it works. You could probably look at it and be like, okay, I can, yeah, I could see that, you know? Yeah. Yeah. This

Jake Pacheco: is, this is it retrieving the code and this is it sending

Seth Whiting: code and Yeah.

Yeah.

Jake Pacheco: Yeah. That makes sense. Yeah. Yeah. I mean, but the way you put it was pretty well stated well enough that like, I think I understand it.

Seth Whiting: Cool. So now that we've talked about like backend of front end and vice versa, communication and like what a backend framework is, what a front end framework is, I wanted to just briefly go over what next is, because we, we've talked about it a few times and, mm-hmm.

Like, people might be kind of confused, but so next is just sort of like, An aspirational thing of like where I want you to get because what next is, is sort of it, it uses React as it's it, so, sorry, let me back up. Next is like, their kind of goal is to be like a full stack framework, meaning like, they give you a nice way to write React code on the front end and a nice way to write node code on the back end.

And a nice way to kind of like set up your like URLs and stuff on the front end and the back end. So like, like I said, like when you're hitting, when you're calling out to the back end, you're calling it out to a url. So, basically it's, it is just like, Th they kind of like scaffold your whole project for you so that like, here's where your back end stuff lives, here's where your front end stuff lives.

And it's like very like makes a lot of sense of like, mm-hmm. Here's how I kind of like, navigate my entire project from, from front to back. And and on top of that, they give you like useful tools on the front end and the back end that are like, like I was saying, like React gives you like their, the kind of like reacting like helpful functions and stuff, like different things to hook into and stuff like that.

Next has like another whole other layer of helpful things on top of what React gives you. But at the end of the day, you're writing React code and you're writing node code on the back end. But like, Within the context of a, a next framework. And you can also kind of reach out and grab any of the like, react tools that are super helpful whenever you want to.

Hmm. So, yeah. Interesting.

Jake Pacheco: Yeah. Yeah. So that's, so, so it, it kind of ties it all together to make it so all of it's cohesive with each other.

Seth Whiting: Yeah. No way. Yeah. And, and it's, it's also like, it gives you like good, good tools for like making your application. Like, there, so there's something called, there's a big concept in web development called user experience, which just means like how well things function like, and how, how, like how quickly it functions and like how easily people can like, navigate things and find things, and that, that's all kind of like part of user experience, but like a big part of user experience is like the speed in which things happen and next kind of gives you some useful tools for like, making things kind of like feel really good as you use them.

So that's, that's, yeah, that's a lot of it. Or like a big thing for them is them trying to, yeah. Yeah. And then there's another thing called developer experience, which is like, how easy is it to write an application and next just happens to do both things. Like they, they, they happen to like focus on both things and like really try to make, make the experience of developing an application like delightful for the developer, but also the application itself delightful for the user.

Yeah. Like make it easier for developers to give those good experiences to Yeah. The users. So, so, so they're

Jake Pacheco: kind of so Njs would be kind of like the architect in a building project where you want to make it work for the, you know, the consumer, the person that wants a house. Mm-hmm. But also you don't want to make it absolutely miserable for the designer or the engineer.

Mm-hmm. That's actually create, that's building the house and will be like, Hey, this, you know, this concave roof doesn't work. You know what I mean? Like, yeah. So like they're, it's kind of like the architect that kind of gives you the tools to be like, Hey, like this is kind of a better way to make these two things talk to each other.

And this will make it a better experience for the user because they won't have such like long load times or whatever. And this will be, and, and here's this, which will be better for you to write it, it won't be you're, you're, you're pulling your hair out for. For this, basically. Yeah. And this is much

Seth Whiting: easier to do.

Yeah. Yeah. You could, I, I, yeah, you could look at it that way. Yeah. So, yeah, just, you know, that's, that's that's just like what next is. And there are other like, quote unquote full stack frameworks out there, like one that's called Meteor, which is awesome, but like, doesn't quote unquote scale.

Well, that's sort of like, it's downfall, but like, it, that may even be like a miss judgment, I guess on a lot of developers'. Mm-hmm. Parts. But midyear makes the developer experience like even easier than next does. But there are like other trade-offs where you're not writing, you kind of write it.

In the Meteor way and like there are sort of like good things and bad things. So that next is basically just like write your React application and your note application will kind of tie it together in a nice way and then also give you useful tools on top of that. So next is kind of growing and like gaining a lot of popularity as sort of like a desirable thing to to know and to work with.

And a lot of like companies like when they're doing their research are like, oh, it seems like next is like a good thing to use. We're we have this project starting up, we should probably be using next and we should probably look for people who know how to use next. And so it's, yeah, that's like a good reason to know next and that's like why I want to kind of like steer you in that direction eventually.

But first you kind of have to get your head around react and know. Yeah. In order to kind, kind of tie them together with next. Yeah. Yeah. So yeah,

Jake Pacheco: I, I guess to summarize, learning JavaScript in React for the front end mm-hmm. Node for the back end. Mm-hmm. And these are just frameworks or rules to live by when create, when writing my code.

And then next JS ties those two frameworks kind of together? Yes. Or, or helps you, helps you

Seth Whiting: tie those two framework together. Be the only like caveat there is note. Note is just the, the run time. So it's just JavaScript note is just JavaScripts on the background. Okay. But the framework would be like express.

Express, yeah. Yeah. I remember you talking about that. Yeah. Yeah. So I think, I think next kind of removes the need for express. It, it kind of interesting, like I think you can probably still import. Quote unquote export into your next project. Mm-hmm. If you like, really need to. But a lot of what Express does has to do with like, quote unquote routing, which is like setting up those URLs for you.

Mm-hmm. And, and like making those URLs do something when, when somebody like sends out a request to a particular url, then triggering the code that re that relates to that URL next kind of has its own way of doing that so that you don't really need express. Like, I think you could use it, but you don't really need it, because next kind of like serves as a replacement for that on the back end.

Interesting. Okay. All right. So I think I got it now.

Jake Pacheco: Yeah. Yeah. So, so basically next yeah. Kind of removes the, the. The whole point of having a backend framework anyways, it is the backend framework kind of a thing. Yeah. But it also helps tie in to the front end. Yes. So it's not just a backend framework.

It does a bit more than that kind of a thing. Yes.

Seth Whiting: Yeah.

Jake Pacheco: Yeah. That's awesome, huh? Yeah. Interesting. Yeah. I've, I've, now I think I understand frameworks to a point, you know, like, which is pretty sweet. I mean,

Seth Whiting: that's, you know, that was the goal thing of this episode. Yeah. Yeah. Hopefully, hopefully other people were able to follow that.

Yeah. So, yeah. I, I, I, I, I think, I

Jake Pacheco: think you did great

Seth Whiting: teaching. I appreciate us, Seth, as always.

Jake Pacheco: I appreciate it. All righty. Well yeah. Signing off. Thank you for listening. Have a good

Seth Whiting: one. Yeah. And just like I, I said last time, the, like, my sign off is always just gonna be, keep going, you know, keep like it's, it's, I know it's tough.

It's, it was super tough for me. It's super tough for Jake right now, but just keep going and like, we'll, we'll be here. Yeah. And also like we, we haven't said it yet. I haven't said it yet, but like, you know, if you're listening to this and you have any questions, you know, reach out to me. I'm sure I'll, I'll like have like some sort of like, outro thing eventually.

That's, yeah. Yeah. Or, or like maybe you will do the outro. Doesn't matter. Yeah, we'll have something, we'll have like a, some kind of like Twitter handle or something, or like a discord or something where you can like, reach us at. And I, I'm happy to, you know, field any questions and especially like questions that you would want to say, answer like on the podcast, you know, that's like just giving us.

Material. So that's great. Yeah. Yeah. That's, that's always fabulous.

Jake Pacheco: Yeah. Yeah, so as always, I do appreciate it very, very much, Seth. Yeah. And I am keeping going. It's so, sometimes it's hard, but I appreciate it. Yeah. And cool. Like I said, thanks for listening and have a good night.

Seth Whiting: Yeah. See you next time.

See you.