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