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 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.


Talk Python's Mastodon Michael Kennedy's Mastodon