Zero to Production Node.js on Amazon Web Services Exercise 6: Building a Rich Client

Transcript from the "Exercise 6: Building a Rich Client" Lesson

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

[00:00:04]
>> Kevin Whinnery: Now, what I'd like you to do is we'll take at least a half hour of this time cuz this is gonna be a little bit trickier. Both of these issues that we had before, which is updating the client side code in our application in a couple key ways.

[00:00:22] The GitHub issues for these are tagged as exercise six. And the two that I will ask of you are a couple media tasks. The first is to actually start persisting the completed status of a to do item using the REST API that we've set up on the back end.

[00:00:44] Now if you remember, we yesterday updated our application to accept a completed attribute in addition to the title. So our API and our backend is fully set up to support this. But our front end still doesn't do anything about this. So our task would be to update the view JS application to persist to that completed attribute as well as the title.

[00:01:12] So that would be issue number one. And then issue number two, if you get through that is to use some data binding features in view to add a feature to the application which it doesn't have today. The concept I had was adding a light and a dark theme to the Todo list.

[00:01:33] So what I would like to do is maybe underneath the Todo list, add a UI element which is essentially a chooser of some kind, which will let the user switch between a light theme and a dark theme for the CSS on the Todo list. So the a way that I imagine this will work, although feel free to riff if you would like, is that there will be some component, some HTML links or radio buttons, or whatever.

[00:02:02] Underneath the Todo list, you click one of them and it'll either toggle between a light and a dark by adding a CSS class to the container element for the entire Todo list application. And you also have to write the CSS to power a different theme for the application.

[00:02:22] So whether it's a different background color, different fonts, or whatever, adding an alternate theme to the Todo list application. For bonus points, if you want to, after the user selects a theme, save that in local storage as a user preference. That I think would also be a pretty nifty feature.

[00:02:43] So you can peel off whichever of those you feel is more interesting, or do both of them, which would be even better. And as I said, I think we'll take at least a half hour to work through those. As for many of you, this will be the first time that you're really digging in to view in any great detail, so take some time and see if you can knock out one of those.

[00:03:08] If you only choose one, the REST API one might be the more instructive of the two. But if you get through that pretty easily, the light dark theme will introduce you to a few more features of view that you wouldn't be exposed to, otherwise.
>> Speaker 2: A couple of questions.

[00:03:25]
>> Kevin Whinnery: Yeah.
>> Speaker 2: What's this in the scope of the view object?
>> Kevin Whinnery: This is going to be the view component object itself. So the actual instance of the view component, that's what this is. And also incidentally, it's why when in our handler code so if we look at the view here,

[00:03:56]
>> Kevin Whinnery: We don't usually, for the methods, use the arrow syntax for the function here because we want view to be able to set this in the scope of the function, to refer to the actual component instance. So yeah, this refers to the actual view component instance. The other question was is viewed the primary framework.

[00:04:20] We use a Tooleo my team does use view in our little chunk but it's not the only framework and you said like in the developer console. They are now just like star and introduced a lot of reaction stuff. There's also a lot of hand written JavaScript in there.

[00:04:40] But the two primary ones in use that I know of are view and and react this point. We're the only ones using view though, probably, because of me. But yeah, a lot more of Tooleo is now being written in react as well on the front end.