This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "Day Two Agenda" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kevin Whinnery: Today, we're gonna look a little bit at starting off with kind of a deeper dive on the front end part of our application. So we sort of hand waved at the primary tools in the front end tool chain a little bit. But I wanted to dive in a little bit further and kind of explain some of the things that are going on there, and some of the tools we're bringing to bear.
[00:00:25] Did you have a question mark or-
>> Speaker 2: Yeah, fill [INAUDIBLE] to see an example of how to properly stores credentials in S3 like we suggested yesterday.
>> Kevin Whinnery: Yeah, yeah, definitely. I don't have that in the materials, but maybe over lunch, I can whip something up to show that.
[00:00:49] It's really just a matter of creating an S3 Bucket, uploading a credential file there, and then accessing that S3 Bucket from your instances. But that's essentially what it is, and there are different ways to accomplish that, but having an S3 bucket with restricted access such that only members of a certain, kind of like we do with our [INAUDIBLE] such that only members of a certain group can have access to that bucket.
[00:01:20] So in theory, you can you can configure it such that an administrator creates credentials, creates the connection strings. That administrator uploads those values to an S3 bucket. And only the instances running in production have access to actually read that S3 bucket. So me as the developer, I never know what those values are, and when I deploy my application I read in those values from S3 because I only have access to that bucket in production.
[00:01:49] And that's that's kind of what we do with our production environment and our ops team. They provision the credentials, and they give our production instances access to that bucket, and then we read in those credentials from there. So at a high level, that's how it works. But yeah, I'll see if I can do a specific example, but that's essentially what it would it be.
[00:02:13] Provisioning an S3 Bucket, and giving permissions to the Node app to read from that bucket, but only in production. So again I think what we're gonna lead off with today is driving a little bit more onto the front end tool chain. We'll start off with a little look at BrowserFI and Sask, kind of the two primary tools we're using for JavaScript and CSS code pre-processing.
[00:02:43] We'll dive into a few those features, do a few little tweaks to our TodoMVC++ application with those tools. And then we'll spend a good amount of time this morning. We might extend the workshop time a little bit, since it'll be a new framework for most of you. I'm talking about Vue.js.
[00:03:03] Maybe it's Voo, maybe it's View, I don't know, I always said View. I thought it was just a clever way of saying view. But we'll be extending Vue.js with a few more features that we've been lacking in the todo application, like actually persisting the state of a todo item to the database.
[00:03:24] And also playing a little bit with some of the capabilities Vue has on the Vue model. And hopefully getting a little bit more familiar there. We'll also do a kind of an extended live code walk-through of some of the key features of the framework just to give people a taste of of how it works.
[00:03:40] After that we'll dive into adding some real time features to our application. Again, we'll do a little bit of a code walkthrough on how Socket.IO works at a high level, and then we'll add a specific realtime feature into the TodoMVC applications. So we can see how we can maybe update that to do list in real time as folks are adding more items to the list.
[00:04:08] We'll take a little break. We may or may not start Socket.io or finish Socket.io before break, we'll kind of play that by year. And then this afternoon, we'll talk about a couple of tools that we use in our production applications. For load testing, I will take a quick look at a tool called Locust which will help you do some load testing on your on your web applications.
[00:04:32] And then we'll have you in the exercise actually integrate a tool that we found really useful called rollbar, which is a service which tracks exceptions that are raised by your application, and allows you to send out notifications with that information. So we'll actually integrate that into our TodoMVC application as well.
[00:04:55] And then we'll wrap up with some web analytics basics. Google Analytics is a tool we use all the time, and I think it's sometimes poorly understood by developers, or maybe developers feel like there's nothing that you can glean that's useful from this tool. So we'll talk a little bit about some of the information that you can get from the tool.
[00:05:20] I'll try to equip you with a couple skills within the Google Analytics UI that you can use to track effectiveness of your web applications. And then we'll look at the technical implementation side, and add a couple analytics tracking features to our to do application. And then we'll wrap up with some Q and A.
[00:05:39] And if there are specific topics that we want to dive deeper on, maybe we can look at that. Yeah, maybe we can look at the S3 Bucket bit there. Maybe do some live coding there. But yeah, that's kinda what we're gonna do here on day two. And it's gonna be a lot of code.
[00:06:00] And I hope you enjoy doing it as much as I do.