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