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 HTML, Javascript and friends. We want to create a new project.
0:09
We can actually hit the new project one and now we get a whole bunch of rich front end framework type of projects,
0:16
Angular, Bootstrap, express HTML node, react, react native in vue as we saw you can start
0:23
from those or you can just start adding files and bringing in pieces as we did We saw the javascript editor is first class just as much as PyCharm.
0:34
Python editor is the integrated web storm. Javascript editor is fantastic. It has re factoring dead code detection and here we're seeing
0:43
the code intentions whereas you know using var that's kind of old school use 'let' or 'const' and we'll do that for you automatically.
0:51
If you want to write better javascript you may well want to do this with typescript so we can write typescript and use it in a very nice way here.
1:00
And of course this does not run in your browser, browsers don't support other languages than javascript.
1:06
Don't get me started on that rant but they should, they don't, they don't support typescript. So what we have to do is transpile this into javascript.
1:17
This may happen automatically depending on the version of PyCharm using what you've set before The current one that I'm working with does not.
1:25
So at the bottom you can see it says typescript here and if you click on
1:28
that it'll open up the typescript settings and then you can make sure that recompile on
1:34
changes is checked as soon as you do that everything will be compiled and you'll have your Javascript ready to run, You know,
1:41
have this Javascript file which is the much more messy tricky version to.
1:46
Right than the typescript version and you can just include that Javascript file and basically forget
1:51
that it exists but include it back into your HTML and you're good to go if you want to work with a rich front end framework like vue or Angular.
2:00
There's great support. We saw the incredible support for vue.js how it has integration back into the model and auto complete for the model with
2:09
inside the HTML and all kinds of neat things. I'm a big fan of 'less' and how it makes designing nested CSS style representations and
2:19
variables within CSS much much better. So you can see here we're doing a little bit of less and we would like
2:26
this to turn into something we could use in our browser again rather is only support CSS not other things we're going to transpile this as well.
2:35
So we got this question about a file watcher, you want to enable file watchers and let them run in order for this to work
2:42
We have to make sure that we've got 'less' installed. We do that through npm. See the command here at the bottom once we agree
2:49
to that and we have 'less' available to PyCharm then we get our 'less' file compiled into the CSS version that we'd prefer not to write and notice.
2:59
It even does cool things like include a source mapping mapping file so that when you go to the browser and it says,
3:05
where is this style from that can actually relate back to the less file, not to the CSS file. So super, super neat there.