Effective PyCharm (2021 edition) Transcripts
Chapter: Client-side web apps
Lecture: Concept: Client-side web apps

Learn more about this course
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.