Effective PyCharm Transcripts
Chapter: Client-side web apps
Lecture: Concept: Client-side web apps
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's review some of the core concepts we saw for client side development with PyCharm
0:03
Html, Javascript and friends.
0:07
We want to create a new project.
0:08
We can actually hit the new project one and now we get a whole bunch of
0:12
rich front end framework type of projects,
0:15
Angular, Bootstrap, express html node, react, react native in vue as we saw you can start
0:22
from those or you can just start adding files and bringing in pieces as we did
0:26
We saw the javascript editor is first class just as much as PyCharm.
0:33
Python editor is the integrated web storm.
0:36
Javascript editor is fantastic. It has re factoring dead code detection and here we're seeing
0:42
the code intentions whereas you know using var that's kind of old school use 'let' or
0:47
'const' and we'll do that for you automatically.
0:50
If you want to write better javascript you may well want to do this with typescript
0:54
so we can write typescript and use it in a very nice way here.
0:59
And of course this does not run in your browser,
1:02
browsers don't support other languages than javascript.
1:05
Don't get me started on that rant but they should,
1:08
they don't, they don't support typescript.
1:10
So what we have to do is transpile this into javascript.
1:16
This may happen automatically depending on the version of PyCharm using what you've set before
1:21
The current one that I'm working with does not.
1:24
So at the bottom you can see it says typescript here and if you click on
1:27
that it'll open up the typescript settings and then you can make sure that recompile on
1:33
changes is checked as soon as you do that everything will be compiled and you'll have
1:37
your Javascript ready to run, You know,
1:40
have this Javascript file which is the much more messy tricky version to.
1:45
Right than the typescript version and you can just include that Javascript file and basically forget
1:50
that it exists but include it back into your HTML and you're good to go if
1:55
you want to work with a rich front end framework like vue or Angular.
1:59
There's great support. We saw the incredible support for vue.js
2:02
how it has integration back into the model and auto complete for the model with
2:08
inside the html and all kinds of neat things.
2:12
I'm a big fan of 'less' and how it makes designing nested CSS style representations and
2:18
variables within CSS much much better.
2:22
So you can see here we're doing a little bit of less and we would like
2:25
this to turn into something we could use in our browser again rather is only support
2:29
CSS not other things we're going to transpile this as well.
2:34
So we got this question about a file watcher,
2:37
you want to enable file watchers and let them run in order for this to work
2:41
We have to make sure that we've got 'less' installed.
2:44
We do that through npm. See the command here at the bottom once we agree
2:48
to that and we have 'less' available to PyCharm then we get our 'less' file
2:53
compiled into the CSS version that we'd prefer not to write and notice.
2:58
It even does cool things like include a source mapping mapping file so that when you
3:03
go to the browser and it says,
3:04
where is this style from that can actually relate back to the less file,
3:09
not to the CSS file. So super, super neat there.