Mastering PyCharm Transcripts
Chapter: Client-side web apps
Lecture: Concepts: Client-side web apps

Login or purchase this course to watch this video and the rest of the course contents.
0:01 Let's review some of the core things that we learned
0:04 about working with client side, Javascript and HTML
0:07 and projects in general with PyCharm.
0:10 So we can come over here and say create a new project
0:13 if we're doing a pure client side HTML thing,
0:16 chances are you've created like a Pyramid or Django or Flask app
0:20 and then you're working with these features in there,
0:22 but you can't come over and create an Angular CLI app
0:25 a traditional Angular JS app foundation, HTML 5,
0:29 Node, as we saw, this is the server side express web framework
0:35 and this even have this option requires the Node JS plug-in
0:39 that we installed during the demos previously.
0:42 We also have the various React ones, Twitter Bootstrap
0:45 and even the Web Starter Kit.
0:47 So some of the inspections, the code intentions
0:50 were that we can upgrade our Javascript statement
0:54 so not everything has to be a var,
0:56 we could have constants, we could have let, things like that.
0:59 Remember for this to work you have to go into your Javascript settings
1:03 and basically change the target Javascript version
1:09 we changed it to ECMAscript 6 and these features turned on
1:12 but by default it was I think 5.1 which did not have that feature,
1:16 so be a little careful around that, but it's really helpful you get all this
1:21 code intelligence and refactoring around Javascript.
1:23 We also can work with TypeScript if you like TypeScript
1:27 or working with a framework that requires you to work with TypeScript,
1:29 there are some really nice features there,
1:31 as soon as you create the first ts file,
1:33 it will ask you do you want to compile this across,
1:35 and then if you do, you'll have this sibling or child Javascript file
1:40 that is the transpilation version
1:42 so you work in the app.ts, make all your changes there,
1:46 every time you save it, automatically you get the app.js
1:49 and nicely PyCharm sort of links these together
1:52 so you can collapse them down.
1:54 And if you open up the TypeScript file
1:58 you can also open up the Javascript file side by side
2:01 and look at those and see what you're actually getting on the Javascript side.
2:06 PyCharm has support for the various Javascript front end frameworks,
2:09 here you can see Vue JS, so vue-if, vue-for, vue-once,
2:14 in our demo, we actually worked with Angular JS
2:17 so many of the popular frameworks are supported
2:20 you may have to go get a plug-in for it,
2:22 but you should get pretty good intellisense there.
2:24 We saw that LESS like TypeScript is supported
2:28 so we can work in LESS which is I think a nicer style of doing CSS
2:33 and then once we do this, of course we get
2:36 do you want to enable the file watcher, yes, of course you do
2:40 and when you do, you get just like before,
2:43 you have the LESS and you get the transpiled CSS file over here on the right,
2:47 and the LESS maybe is a little more verbose at least in this example,
2:52 but it is definitely more maintainable especially for large projects.
2:55 Now, for that to work, you have to npm install LESS,
2:59 remember, LESS is not the command, it's LESS C
3:02 so you want to definitely make sure that you don't put "less" there, but "lessc"
3:07 and if you don't have lessc, you probably need to npm install LESS,
3:10 but once you do that everything compiles
3:13 and you get this transpiled CSS that is based on the LESS file,
3:17 edit the LESS, include the CSS in your HTML.
3:21 Finally, we can even add Electron support with just the tiniest bit of work
3:26 once you have that Node JS plug-in
3:28 then if we want to do Electron JS to build desktop apps, that's totally easy,
3:32 so make sure you have the Node JS plug-in installed
3:35 and then you can figure it annoyingly by going to the hidden bin folder
3:40 and this is not a field where it says Node interpreter
3:43 you can't type in that, you have to browse to that.
3:46 So that means you need some mechanism to go in here and select that
3:50 on Windows I know you can say show hidden files and it's pretty easy
3:53 I don't know that you can do that in MacOS in the file open dialogue.
3:57 Anyway you go in here you saw the way I did it was
4:01 I went to the terminal, I went in there found it and typed open
4:03 and then I could drag and drop it over here,
4:06 and then you set the working directory in the Javascript file
4:09 and once you run it, boom, you will have full on
4:13 debugging and development of Electron JS apps.