Check out a free preview of the full Organizing JavaScript Functionality course:
The "Secure Phrase Generator" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Kyle spends a few minutes demonstrating a simple application he built that combines client-side and server-side JavaScript. He talks about the architecture of this application and outlines what piece he will be building throughout the remainder of this course.

Get Unlimited Access Now

Transcript from the "Secure Phrase Generator" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kyle Simpson: This code that I'm going to show you is a full stack JavaScript application that is it's doing both the middle end stuff and what we would consider backend stuff, all in one piece. In fact, it really isn't much of a backend. So, I'm not dealing with anything with databases or whatever.

[00:00:21] [COUGH] By the way on the topic of data validation, the greatest part about data validation rules is, you don't just write them once. You don't just write them twice, you actually write them three times. You write them once in your application code, once in your JavaScript and then your database guys is I don't trust them at all.

[00:00:37] I'm gonna rewrite it and stored procedures and now you have three Copies of your data validation rules. Anyway, that's just a side topic. So, what we're gonna look at essentially is a way to just in a very simple integrated way, write some code in a Node application in the Node slash IO whatever application.

[00:00:58] That serves up the backend, if you will, the backend and the middle end of our application. And it tries, in whatever ways possible, to share some code with what's gonna happen in the front end, okay? So the app that I'm gonna show you, let me just show you the finished version of it.

[00:01:14] Cuz it's actually a little mini site that I launched. Nobody's gonna care that much about the site, but its a little mini site that I launched called securephrase.io. I don't know if any of you have ever heard. Hopefully. I haven't tried it today. So hopefully it's not dead.

[00:01:30] Have any of you ever heard of diceware? It's an algorithm for generating secure passphrases using random word generation. Passphrase is being not like your passwords, but the things that you would do. Yeah, this doesn't seem to be loading. I'll triage that in a moment on a break or something, but I can.

[00:01:53] Is it a connection issue, probably it's a connection issue. It's why you always have a local of something right? It's like I've done this a few times. So this my little secure phrase generator thing, it's just a toy site. But I did it because I wanted something to generate these phrases for my own purposes, and I thought hey, that's a great thing that I could teach with.

[00:02:13] So a week ago I said, I've got this workshop coming up. I want to teach some people some of these ideas. I'll just build a site. So this has been built in the last week. It's rough. It's not nice or great, or whatever, but it does illustrate the concepts that we want to go through.

[00:02:27] And this is just, it's a silly application, but you tell it how many words you want in your phrase. It generates the phrase and it gives you some nonsense phrases to use as your passphrase. So there's a couple of things to observe about this application. Actually, give me just a second.

[00:02:51] It appears to be,
>> Kyle Simpson: Actually, it's kind of fortuitous that it's working, and notice that it's working. But if you look closely, every time I click that it's actually doing a full form submit. Something about my client side, JavaScript, isn't working correctly and I'm going to have to check into what's going on with that.

[00:03:18] Which I'll look at over at break but. Basically, what this is doing is, it's illustrating the idea that I want the server side to be able to do this work exactly the same as I want the client side to be able to do the work. I don't want to have to rewrite this logic for generating past phrases in both places.

[00:03:37] So, in the fallback case which is what's happening here where my JavaScript is somehow broken for some reason. In that fallback case, I want it to be able to just gracefully fall back to calling back to the server and running the exact same code on the server, and on I wasn't intending to show you that, but it's broken in some way.

[00:03:55] With JavaScript's not getting served up correctly and it still falls back to sending that request across the wire and working the way that we'd expect.