Early Access PyCharm: PyCharm and the Web

In this episode, we talk to Andrey from the Webstorm team, and find out how the web has changed over his time at the Webstorm. We dive into how it’s like leading a product like Webstorm to how things are different from the jQuery days. We talk about how PyCharm Pro now supports everything from jQuery to React as well as languages like TypeScript and even CoffeeScript. Lastly, we talk about what the team is thinking about and working on now.


Nafiul: Welcome to Early Access PyCharm. I’m your host Nafiul Islam.
Today, we’re going to be talking to Andrey from the WebStorm team. And he’s going to tell us a little bit about how PyCharm’s web capabilities are built and what has changed over the course of his tenure as a member of the WebStorm team and what they’ve got planned for the future.
So Andrey, the only thing that I know about you is that you lead the WebStorm team. What does WebStorm have to do with PyCharm?

Andrey Starovoyt: There are two questions here. First of all, I want to mention actually, I am the team lead of the Webstorm team since the last year, a bit more. Before it was another team lead. So for me it’s some kind of new experience and it was so really interesting and challenging because it was the time of the lockdown.
Of course, we have a remote or distributed team, because some colleagues work in Munich, some in Poland. And also we have developers in Amsterdam and St. Petersburg.

Nafiul: Makes sense. So this is a new experience for you. WebStorm is actually our web offering. This is what we use to build our front-end technologies. Um, tell me a little bit more about how WebStorm came to be. And essentially where it is right now.

Andrey Starovoyt: It’s an interesting question, because, back then, WebStorm was a part of PhpStorm, as far as I know. And at some point that was the decision to split the team into two.
Like a PhpStorm team and WebStorm team, that will handle everything related to JavaScript development. And I believe it was a good decision, because now JavaScript is not only a front-end language or language for front-end development, but it is also a back-end language.

Nafiul: Yes, we have NodeJS. And, uh, also Deno. Do we support Deno yet in WebStorm?
Andrey Starovoyt: Yes, we have a blog and from Deno.

Nafiul: Oh, awesome.

Andrey Starovoyt: Yeah.
After that decision we started to work more precisely on JavaScript technology development. Some people said that it was really challenging back then, because when I joined the Webstorm team, front-end started to grow very fast. Like, we had a new framework every week and it was all about decisions.
Like, do we really need to support this framework in our IDE or it will die in a couple of months. If you talk about WebStorm at this moment or right now – it’s a different thing because now we have three major frameworks: Angular, Vue and React. Of course, some people can say that’s there is also Svelte. But, it’s not so popular yet. And everything that we considered to develop or to improve is related to these technologies and of course, to JavaScript language itself.

Nafiul: So tell me about the contrast between what’s happening now. Because right now you have to support Vue, React, and Angular.
And there are multiple versions of Angular and they come up with a new one all the time. So tell me a little bit about, you know, how it was like in the good old days of jQuery, when jQuery was the web development and now it’s not.

Andrey Starovoyt: Actually, I’m not sure. It was in jQuery times. Uh, I know how it was when I joined the team, it was.

Nafiul: When did you join the WebStorm team?

Andrey Starovoyt: Seven years ago.

Nafiul: Seven years ago. My goodness. You’re an O G.

Andrey Starovoyt: Yeah. The problem there was, there are too many frameworks. In 2014, ES6 standard wasn’t yet released. So we had some proposals, we had some features that can be a part of the standard. But, we weren’t sure about it.
And, there are a lot of languages, similar to Javascript. For example, CoffeeScript. Do you know CoffeeScript?

Nafiul: I personally used to use something called IcedCoffeeScript. It had something, it had two keywords async and defer. So it made handling callbacks a lot easier, but this is like ancient history.

Andrey Starovoyt: Yes. Yes. And it’s an interesting fact that CoffeeScript had several dialects, including Ice Script. And it was the same for all the parts, for the front-end development.

Nafiul: So back then, you know, everything was emerging. Everything from languages, dialects of languages, frameworks… I mean, do you remember CanJS and Ember.js and Backbone.js and all these different frameworks? Why do you think people kind of settled on React?

Andrey Starovoyt: Um, it’s an interesting question. Uh, one of the reasons, I believe, is that it was supported by huge companies like Facebook. And also each introduced a good concept that was really easy to understand and to implement. And let’s say, I think we can say about Angular, like you turned to use two very simple conceptions and it is also supported by a huge company. Uh, and it follows the reason why around that framework because the technology can be built by the good community.
But it doesn’t work all the time, but, I believe it worked for Angular and React.

Nafiul: I see. So, what I found interesting about the whole React and Angular thing is that it was a move towards single-page applications. But that meant like typical frameworks, such as Django in the Python world, Flask in the Python world… You know, they were mostly making APIs.
So you saw a rise of back-ends, just making APIs that were simple layers over the databases, right? They provided authentication. They provided rate, limiting tags, all that good stuff. And the front-end, it still had the NodeJS server because you still need to serve these files. Right. But you were working with single-page applications.
So why is it that things are slowly coming around back to server-side rendering, after all this time?

Andrey Starovoyt: Oh, actually, I don’t know. We can guess that, or just very simple for front-end developers or to understand how it works and you can focus on the technologies or you don’t need to think about the back-end at all.
It’s just an API for you. And you can build ever since that you need to own the front-end site.

Nafiul: Makes sense. But you know, now that server-side rendering is slowly coming back. I think there’s hot wire. I think, React also made some leeways into having server-side rendering. Does it feel like it’s just what’s in fashion or is it that? There are benefits and people are like, you know what, maybe single-page applications involve just too much work.

Andrey Starovoyt: Right now it works, the ways that you use server-side rendering and still use all single-page application conceptions. So we just a way to speed up the rendering at the first time. And after that you can work with a rich application.

Nafiul: You’re kind of getting the best of both worlds.

Andrey Starovoyt: Yeah, definitely. If I talk about server-side rendering for front-end development, it’s usually done also on the NodeJS side. And you don’t need to invest time in studying other technologies. So you can do everything using JavaScript and React, for example.
And it just will work.

Nafiul: Makes sense, but you know… One of my pet peeves about frontend in general is that it’s very complicated. And I know that’s a subjective way of looking at it, but you know, you have pre-compiled languages like TypeScript that have their own map files. And then you have this thing called webpack, which is a monster in and of itself.
How do you keep up with all these tools that are popping up every five seconds? Because the front-end isn’t simple anymore. Back in the good old days… Well, I think it’s the good old days… You just put a script tag in your HTML, write some jQuery and that’s it. Now you have a pre-compiler.
You have PostCSS, you have this, you have that. How on earth do you get the time to actually make tooling for all this?

Andrey Starovoyt: Actually, if we talk about onboarding… Like you want to build an application, you can just use “Create React app” and it just works. So you don’t need to think about all the details, like how webpack works or React translated into the JavaScript code and so on. And actually, I believe the same problems there are with all peak languages, like let’s call it peak. If we talk about Java, there is Spring Boot, that is just a framework that solves almost every possible problem about web development.
And you cannot just understand how it works. It’s magic. If you start to learn to work, if you start to use it, it’s magic for you. And it’s the same tool for all frameworks. If we talk about Java, we can also mention Hibernate or something like that.

Nafiul: So basically you’re defending the complication of everything. It’s like, Hey, we do everything. So it’s okay. If it does everything.

Andrey Starovoyt: But we understand why we do it, why we need webpack, why we need TypeScript. Because it solves some problems and here they are set up in general is a part of magic because you don’t understand how webpack works. But, uh, you know, that webpack builds for you to optimize it, to call towards that includes everything that you need and so on.
And yeah, it helps.

Nafiul: Yeah. In webpack we trust. So, um, you’ve been building new features in WebStorm like crazy. I’ve been looking at your release notes. A lot of these things are coming over to PyCharm as well. Tell me about, you know, what are you going to be focused on next? What is your next big thing for WebStorm?

Andrey Starovoyt: As I mentioned before, we don’t have a lot of frameworks that we need to support, because JavaScript development is not splitted, like it was before. Right now we have three major frameworks like Angular or React or Vue. And we want to improve the overall experience for the users of the frameworks, like introducing new inspections, introducing new fixes, introducing integrations for the frameworks. It’s one of our focuses. Of course, we need to support new versions of languages including TypeScript and JavaScript, something that has to be done by default and also we think a lot about onboarding. We have a lot of features, a lot of refactoring fixes and so on. And for a lot of these features a lot of our users just don’t know about the features. Very sad for us.

Nafiul: We have the same problem in PyCharm. We do a lot, but not all the features are discoverable. So on that note thank you so much for joining us and we’ll hope to see you again soon.

Andrey Starovoyt: See you soon. Bye.

image description