Zero to Production Node.js on Amazon Web Services Building with Vue.js

Transcript from the "Building with Vue.js" Lesson

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

[00:00:03]
>> Kevin Whinnery: We talked a little bit about some of the tools that we used that are sort of a framework agnostic to enhance what we can do in our front-end JavaScript and CSS. Now we're gonna dive a little deeper into the the core front-end framework that we're using to drive most of the interface for TodoMVC in this example, which is Vue.js.

[00:00:28] And Vue.js, if you remember from yesterday I'm fond of talking about spectrums to kind of place different tools inside them. When you're thinking about sort of building a rich front-end, there are frameworks that do quite a lot for you up on the right. We have AngularJS which with version 2.0 and in previous versions, really demands a lot of you as a developer.

[00:00:55] You really have to buy into the angular way of writing applications and you're probably gonna write your entire front-end to be an angular web application, and the same is true of react to a lesser degree. It is possible, I think more possible and I shouldn't say, it's impossible of annular, but I see react employed more frequently as to provide dynamic features to a component of a web application more so than I do on the angular side.

[00:01:26] But again, you're kind of buying into the framework whole hog and writing all of your code to kind of specifically cater to that to that framework. And then on the sort of other end of the spectrum, you can write write JavaScript yourself. You can write jQuery plugins that do all the fancy stuff on your page without really any any set structure imposed by a framework or you can use something like backbone, which is quite a bit less opinionated and just provide sort of a minimum for how you can write the JavaScript which runs your front-end.

[00:02:03] And I think Vue actually, one of the reasons I like it is a kind of sits in the middle of these approaches. It's something that is fairly easy to add into any page whether or not you're already using Vue as a library itself. It's reasonably lightweight, but it also provides some of the key features that make a reactive angular useful like reactive two-way data binding, a JavaScript object model that you can use to update your data and keep your data out of the Vue.

[00:02:39] So I think Vue kind of setting in an interesting middle ground between a large framework which kind of takes over your, can take over your front-end code and these other libraries which you used to implement parts of your logic. So some of the key features, again, the two-way data binding is definitely one of the highlights and the object model is like the Vue models that you're interacting with to update the data which drives your user interface is just a plain JavaScript object which I've always done.

[00:03:17] There's not like a special scope object or any kind of fancy affordance by the framework. You're just interacting with a plain JavaScript object to update the data of your Vue. It also provides much like angular if you've used that before, HTML directives which you can add into your markup to assign event handlers or bind event handlers to methods on your Vue.

[00:03:48] And you can build fully compliant component oriented applications much like you can with reacted angular using Vue as well, if you decide to use it in that in that capacity.