Effective PyCharm Transcripts
Chapter: Client-side web apps
Lecture: Front-end javascript frameworks
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well we wrote some very basic Javascript. What about the really rich front end frameworks?
0:07
We've got Vue.js we've got React, React native, Angular all these things that we might
0:13
go and use to create better front end single page application or spa apps. Maybe even progressive web apps that mostly work offline.
0:22
No I'm a big fan of Vue and I'm going to show you some examples with that. But we also have angular and other things built into PyCharm very very
0:31
quickly if you're not familiar vue, let me just give you the super high fly over.
0:37
So the idea is you create one of these apps and the app targets some part or all of your page based on.
0:44
'id' And then you can give it data like a message. It has some value and that will actually data bind here.
0:51
So this is not like Flask or pyramid or something where it renders it once and then out it comes. They stay in sync.
0:57
So if encode you change data.message or just app.message that will actually change what is happening on the page.
1:06
We can also have methods like reverse message. We can have other types of things. Say where it's like a computer property just like Python property.
1:16
So here if I click this you'll see up here we're actually binding to the button click and how does this work?
1:23
We have all of these different features like v-on-click do this thing. There's also ways to do greater bonding binding through what are called models.
1:33
But down here we can say that the v-model is the message and it will just bind over to that and much more interesting and holistic ways.
1:40
Okay, so this is the framework that we might theoretically let's say we want to use this to build our front end application.
1:48
There's a lot of specific stuff for Vue Js. A lot of these sort of V dash commands and whatnot. Actually have a simple little example.
1:57
I'd like to show you over here in PyCharm. Look it has a V model right here, it has V4 for a loop another v model here.
2:07
It's doing just the text data binding and so on. Does it look good? What do you think? Attribute V model not allowed here. If I type v dash uh yuck,
2:19
I'd hate to write vue in this thing or what I know. So there's two things we have to do in order to make sure that we can
2:26
turn on better support for Vue Js in fact fantastic support. The first one is you need to get the plug in the Vue Js plug in
2:34
go to the market place up here, search for Vue Js and enable it. So that happens. The other thing is down here says make sure you have Vue
2:43
Js listed in your project dependencies in package.json What does that mean? Here's some frontend world for you.
2:52
That is the way you specify the javascript requirements for your project using NPM.
3:00
So what we're gonna do is we're gonna use Node.js and NPM nodes pip to install and register Vue Js here.
3:06
I'm gonna go over here and open this specific spot in the terminal. What we're going to type is npm install.
3:16
vue It used to be a Vue Js but now that's deprecated It's just vue. Okay, so now if we look here, we now have these files and some node modules,
3:28
let's go have a look at that. And our package Json we're using vue. beautiful. And here we've got our vue,
3:36
we've got our dist and then here's all the bits that we're going to need. So let's go over here and actually say we have a script node modules,
3:48
vue dist vue.js. There we go now. Right away. The page looks better. Just look better. Remember all these things that were not allowed there now,
4:01
not just allowed, but they even have this purple amount here. And if I go and type V- we now have V model V-bind V-on V-slot,
4:12
all of these things that you would have to do to program the front end with vue.js. Fantastic. But it's way more than this.
4:20
Watch this. If I hold down the navigate feature, this is over here. I showed you this app, we're defining data fields like this.
4:31
These are purple, not just because they're in the quotes here, they're purple because over in the app side of things,
4:37
we have our data piece and it has a name currency from from convert to an amount. So for example if I go over here and I take this way and
4:48
I put them out to my error, What's wrong with it over on your app? Guess what? You don't have an app to this?
4:56
Integration is super super impressive. So it actually knows that these are the fields that
5:02
were allowed to work with and these are the computed properties. I'll go back and I'll type this away a little bit like oh yeah I want
5:09
to bind the was an amount, the price, the final of the currency. I'm out there. It is bam that's the amount we want to buy into.
5:19
Okay, so down here we're gonna loop over some stuff and what this does is it's going to basically take some amount of money,
5:25
an input currency and output currency and tell you what the conversion is down here, we're including our app.js let's look at that real quick.
5:33
So we've got our data which has name currency convert to and from an amount and
5:39
the computer properties. And then any time any of these things that are involved in
5:44
it changed. Well then we're going to re compute this property which is just kind
5:48
of straightforward manuel. So if we're going to go from whatever we're converting from. Is that GDP, is that
5:55
USD. In the morning to convert say over €2. Well, here's how we compute it And then you go to the bottom or going
6:00
to return that as a formatted number so that it doesn't have like 0 $1 or something weird like that. All right, well let's go and run it.
6:10
See what we get here. We have it. We've got our amount, we've got our dollars.
6:15
Look at this. It's already bound do this data right here founded those I want
6:23
to go from USD to € and here's the calculation if I start putting values in here just as I up arrow or however that value changes.
6:34
It's triggering that amount of change which triggers the computer property to be re computed.
6:40
So yeah, vue.js is pretty awesome and that's how it works. But the takeaway is not so much this app, the takeaway is, wow, look at this integration.
6:47
Like look at this that it knows that the stuff to find over in javascript in that data area is this right?
6:55
These are all turning purple and that you get pretty good auto complete for the keywords and so on. So if you're working with something like this,
7:02
it's really, really got fantastic support Also we've got similar things for Angular JS and
7:09
other frameworks as well. If you're working with Vue or one of these front end frameworks be sure to learn how to set it up.
7:16
So PyCharm works like this, it gives you all the support you need.