JavaScript Jabber

JavaScript Jabber is a weekly discussion about JavaScript, front-end development, community, careers, and frameworks.

Subscribe

Get episodes automatically

265

JSJ 265 Wade Anderson and Ramya Rao on Visual Studio Code


JSJ 265 Wade Anderson and Ramya Rao on Visual Studio Code

This episode is live at the Microsoft Build 2017 with Charles Max Wood and AJ O’Neal. We have Wade Anderson and Ramya Rao from the Visual Studio Code Team at Microsoft. Tune in and learn more about what’s new with Visual Studio Code!

[00:01:20] – Introduction to Ramya Rao and Wade Anderson

Ramya Rao and Wade Anderson are in the Visual Studio Code Team at Microsoft.

Questions for Wade and Ramya

[00:02:00] – Elevator Pitch for Visual Studio Code

Our vision on Visual Studio Code is to take what was best out of the IDE world (Visual Studio, Eclipse, IntelliJ, etc.) and bring what was best from the lightweight editor world (Sublime Text, Notepad++, Atom) and merge those two together. We wanted the lightweight features from text editors and the debugging capabilities of Visual Studio and Eclipse. We did general availability last year. We’ve been stable for a year. Additionally, this is Visual Studio Code for Mac, Windows, or Linux. It’s also built in Electron.

[00:03:45] – What are your roles on the team? Do you have particular parts that each of you work on?

Wade’s title is a Program Manager. He does more non-developer things but Ramya is an engineer on the team so she gets a lot more coding that Wade does. Everybody has a key area to own but nothing stops them to go into another area. We try to share knowledge between people but we always have that one key owner that you always go to.

Ramya is a recent addition to the team. She started out maintaining the Go extension, maintaining and adding features. She’s slowly branching out to the Emmet features of the product.

[00:05:30] What is Emmet?

Emmet, or Zen Coding, is a must-have tool for you. You can write, say abbreviations and that expands to really huge HTML to update tags, rename tags, etc. That is one of the features of Emmet and Sergey actually wrote the library. We have an in built integration in the product. I [Ramya] am currently working on that.

[00:06:28] Does Visual Studio Code make it easy to go to the parts that I need to customize on an HTML?

In that case, we have a multi-cursor software in Visual Studio Code, as well. You could place your cursor in different positions, and then, simultaneously edit things.

[00:07:42] Is Emmet an extension or does it come with Visual Studio Code?

Right now, it’s in Built. If you want to know more about Emmet features, you can to emmet.io. That has all the documentation that you need to learn about Emmet features. In Visual Studio Code right now, we’re looking at making into an extension. We pull it out of the main code and maybe more people can contribute and make it even more better.

[00:08:21] – What’s new in Visual Studio Code?

One of our main pillars for this year is to improve performance of the product. We’ve grown a larger team so we’re adding a lot more features every month. Last few months has been, “How can we get some stability on the issues coming in while making sure we’re reducing our tech load?” We really keep to those core principles that we started with at the beginning, which was, we want a fast, lightweight editor.

We built a few extensions that we call key map extensions. They are just a mapping of key bindings that you learned in Sublime Text. You don’t have to re-learn any key bindings in Visual Studio Code.

We also build this Welcome page where you can flip through and see features really briefly. In that Welcome page, one of the key things is an interactive playground where you can play with existing code in different sections. Additionally, as we’ve mentioned, we also put multi-cursor features.

Another thing is workbench naming. You can change the theme of Visual Studio Code but it will be restricted to the editor and not the rest of the workbench.

[00:13:40] – Do you know how Xterm.js works as it was one of the features that you’ve added in Visual Studio Code?

Daniel’s another engineer that’s here with us today. He was the largest contributor to the Xterm.js project. He built the integrated terminal for Visual Studio code so I can’t speak to the internals of how that works.

[00:14:12] – Are we going to start seeing Visual Studio Code integrated into web experiences with other Microsoft products?

That’s actually where we started. We were Monaco editor where you get this cloud-based editing experience. We’re getting people to use it but we’re only getting people who were already using Microsoft products.  When electron came out, we saw an opportunity of, “Hey, can we port this  Monaco editor to Electron and we could then, run it on Mac and Linux.”

[00:19:45] – What are the performance things that you’ve done?

One thing that we did recently was adding an ability to calculate the start time for Visual Studio Code? That’s one of our full steps to get more information from the user-side. How can you get a profile of what things are running? Which part of the process took much time?

We also need to identify what are the things people are doing that’s causing the editor slow down. An example is when you open a large file and things get laggy.

Another exercise we did was we looked at all of our extension API’s to see which one of those could be a malicious extension.

The difference between VS Code and Atom is that, we ask questions like, “Are we using good data structures? Are we managing our memory properly? Are we removing stuff we don’t need anymore?” That just comes down to all those little things you learn from basic textbooks that have been around for decades about how to write good code. That’s what we have been doing and that’s what we’ll continue to try to do, to try and improve the performance.

[00:25:55] – Do you have problem on the desktop? Are all the modules just load at once?

We definitely don’t load everything at once. Different parts of the editor is loaded differently. When you do the Require, we don’t do it at first load. We do it when we notice that the user wants to use Emmet. We don’t try to load all the library at the beginning and delay the whole process.

We try to lazy load as much as possible, even the extensions. We have a separate process called extension host that takes care of loading all the extensions. Whether the extensions are completed loading or not, that does not stop you from typing in a file. Simple actions shouldn’t be bugged down by fancy actions.

[00:28:25] – What’s coming next for Visual Studio Code?

Every month, when we plan our iteration, we create iteration draft plan. We put it out there for people to see. Performance and helping people get started are probably the top two for us. You can look at github.com/Microsoft/vscode, look for the label ‘iteration plan draft.’ So that’s the current work that we’re doing that month.

Another feature is the multi-root workspace where you can open multiple folders. When you look at the issues and sort by most comments, multi-root is the number one. The second one that is little paper cuts around formatting and auto-intending – just things that make your code prettier.

Picks

AJ O’neal

  • Breath on the Wild
  • Microsoft’s Intelligent Edge

Charles Max Wood

  • Boom Beach
  • Bluetick.io
  • Emacs key binding extension for Visual Studio Code

Wade Anderson

  • Kindle Paperwhite
  •  Twitter @waderyan_

Ramya Rao

  • Open source
  • Twitter @ramyanexus

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

Javascript Jabber

JSJ 265 Wade Anderson and Ramya Rao on Visual Studio Code

WADE:

We’re at Build, Microsoft Build 2017…

[Music]

[This episode is sponsored by hired.com. Every week on hired, they run an option where a thousand tech companies in San Francisco, New York and LA bid on Javascript developers providing them with salary and equity upfront. The average Javascript developer gets an average of 5 to 15 introductory offers and an average salary offer of a $130,000 a year. Users can either accept an offer, go right into interviewing of a company, or an item without a continuing obligations. It’s totally free for users and when you’re hired, they also give you a $2,000 bonus as a thank you for using them. But if you use the Ruby Rogues link, you’ll get a $4,000 bonus instead. Finally, if you’re not looking for a job but know someone who is, you can refer them to Hired and get $137,000 bonus if they accept the job. Go sign up at hired.com/javascriptjabber.]

CHARLES:

Hey, everybody and welcome to a live Javascript Jabber. Well live-ish, we’re at Build…Microsoft Build 2017. AJ is also here on our panel.

AJ:

Always coming at you live.

CHARLES:

That’s right. Now, I can actually see you in person. I’m Charles Max Wood from Devchat.tv and we have two guests. We have Ramya Rao. You want to introduce yourself real quick?

RAMYA:

Hey, my name is Ramya. I am in the Visual Studio Code Team at Microsoft and I’m psyched to be here.

CHARLES:

Awesome. And we also have Wade Anderson who’s been on the show before – last year at Build.

WADE:

Yeah, last year at Build. I had enough fun, I decided to come back. Well, I was excited to be invited to come back. I also work on the Visual Studio Code Team.

CHARLES:

Awesome. Yeah, we’re going to talk about Visual Studio Code. We’ve kind of had Visual Studio Code discussions a few times on the show. We talked to Chris Dias at Microsoft Connect in November. I don’t know that we necessarily need a long introductions to what it is. But you want to kind a give the two-minute elevator pitch, one of you, as far as, what it is for people who are new to the show and just haven’t heard those interviews?

WADE:

Yeah. I can do it. Visual Studio Code, our vision was to take what was best out of IDE world, which is like your Visual Studio, Eclipse, IntelliJ products. And bring what was best from the lightweight editor world, which we’re describing like Sublime Text, Notepad++, Atom, and merge those two together. We wanted the lightweight features from text editors, with the IntelliSense, the code navigation and the debugging capabilities that people had in Visual Studio and Eclipse. So that we merged those together and we’ve been going for two years now. We did general availability last year. We’ve been about stable for a year, I guess, the way I look at it.

CHARLES:

Nice.

RAMYA:

Another key things you add there is dev cross-platform, as well. Not only Windows but Mac and Linux users are almost welcome too.

CHARLES:

Yeah, we keep hearing about Visual Studio for Mac. And this is Visual Studio Code for Mac, Windows or Linux. If you want to know more about how it’s built because it’s also built in Electron, with Typescript, I believe…

WADE:

Yeah, that’s right… Typescript.

CHARLES:

And so if you want to hear more about that, we’ve interviewed Chris Dias twice. Once we have him on with Erich Gamma. And the other time, it was just him, like I said at Connect. And we talked to Wade. This is our fourth or fifth interview about this. So if you want all those details, go listen to that. We’re just going to talk a little bit more, I think, about what’s going on with it now, what’s new with it, how you kind of envision people using it with the new things that are coming out now – that sort of thing. Does that work for you, guys?

WADE:

Yeah.

RAMYA:

Sure.

CHARLES:

Yeah, first off. I’m a little bit curious. What are your roles on the team? Is it just developer and everybody touches everything? Or you have particular parts that each of you work on?

WADE:

Yeah, we’re a pretty small team so lots of us wear different hats. My title is – I’m a Program Manager. So I tend to do some more non-developer things. Ramya is an engineer on the team so she gets a lot more coding than I do.

CHARLES:

Then we like her more.

WADE:

Yeah. I do too, yeah.

RAMYA:

Yeah. As far as everybody gets to play in different areas, everybody has a key area to own but nothing stops them to go into another area, say, fixing a bug here and there. We try to share knowledge, as much as possible, between people. But then, we always have that one key owner that you can always go to, you know, the go to person in that area.

CHARLES:

Right.

RAMYA:

Like, for example, it could be about snippets, or there’s one person for extension.

CHARLES:

So which area are you in?

RAMYA:

So I started out… I’m a more recent addition to the team. I started out maintaining the Go extension. For quite some time, I’ve been maintaining and adding features to the Go extension. And slowly, I’m branching out to the Emmet features of the product. I don’t know but if you’ve been doing web development – HTML, CSS. Emmet, or Zen Coding, I believe it’s what it’s previously called. It’s something that is a must-have tool for you. You can write, say abbreviations and that expands to really huge HTML. You can have HTML shortcodes to do, say, update tags, rename tags and a lot of HTML and CSS goodness.

AJ:

So is that a type of thing where it looks like you’re typing CSS, and then, you hit tab, and then, it builds out?

RAMYA:

Yes, that’s exactly what it is. It makes use of your selector knowledge – the jQuery selectors, and the CSS selectors. You can use that to write HTML. So that’s just one of the features of Emmet and Sergey actually wrote the library. We have an in built integration in the product. I’m currently working on that, trying to make use of newer API’s and giving more goodness to people.

CHARLES:

Super cool. One question that I have about that feature and talk a little bit about what’s new in Visual Studio Code. Let’s say that I have, sort of a repeated type of code snippet. Maybe I need to add a class name, or you know, in HTML, I need to add a filename, or something else. And then, I add the same thing again somewhere else, so I need some other text inserted in the middle of that. So I just… when I insert it then I can go through those parts. Does it make it easy to just kind of go to the parts that I need to customize on that HTML?

RAMYA:

In the case that you’re talking about, I think what would be more helping is the multi-cursor feature that we have. So have you used multi-cursors?

CHARLES:

Uh huh.

RAMYA:

Oh yeah.

CHARLES:

I’m an Emacs user so…

RAMYA:

Okay. We have a multi-cursor software in Visual Studio code, as well. You could place your cursor in different positions, and then, simultaneously edit things. But Emmet is more of, when you’re writing HTML from scratch. Emmet expansion, at the least, so… Yeah, that’s that.

CHARLES:

You’re making me happy.

RAMYA:

Really?

CHARLES:

These are all features that I really use all the time in my development, typically with Emacs, just because… depending on the situation, a lot of times, all I have is the command line. And so having a command line tool level, a tool like Emacs, is kind of a nice way to go but yeah.

RAMYA:

I think one thing you might like is this feature on Emmet, saying “go to the next edit point.” Then, you keep using that command and have a shortcut for that. Then, it keeps going to the next open tag, next empty attribute, and so on and so forth. That could make you happy. You should check out Emmet.

CHARLES:

I should. Is it an extension or does it come with it?

RAMYA:

Right now, it’s in Built. But if you want to know more about Emmet features, you can go to Emmet.io. And that has all the documentation that you need to learn about Emmet features and that’s just in Built. In Visual Studio Code right now, We’re looking at making into an extension so that it’s a little bit… we pull it out of the main code and maybe more people can contribute and make it even more better.

AJ:

How do you spell Emmet?

RAMYA:

E-m-m-e-t.

AJ:

Okay.

CHARLES:

Alright, well, let’s dive into what’s new in Visual Studio Code. We talked to Chris, I said, in November. So what’s happened since then?

WADE:

One of our main pillars for this year is to improve performance of the product. So as we’ve grown a larger team, we’re having a lot more productivity. A year ago, our team was about half the size of this now. We’ve hired a lot of engineers in Redmond and really double the team size. It’s led to… we’re adding a lot more features. We’re kind of have a few months leading to Connect and we’re adding new things every month.

Last few months has been, “How can we get some stability on the issues coming in, make sure we’re reducing our tech load, and really keep to those core principles that we started with at the beginning, which was we want a fast, lightweight editor? It’s really responsive. And then, you can add these other features in. So this is where Emmet comes in. Does it make sense to pull that out of the product? That’s probably the overall strategy of what we’ve done for the last few months. Maybe you can help me think about a specific feature that’s been there.

RAMYA:

I think there’s one thing that you did, the key map work that you did. You can talk about that.

WADE:

Oh yeah. One of the things that I’ve been invested in is trying to understand people when they come from a different product to VS code. How can we make that easier for them? One of the barriers is: you learn key bindings in Emacs or you learn it in Visual Studio, or Sublime Text. And when it comes to VS code, “Hey, we have our own key bindings.” We have to learn these new key bindings. So what we did is we built a few extensions that we call key map extensions. They are just a mapping of… Okay, you learned this Sublime Text key bindings. Now, when you come to VS code, you don’t have to re-learn any key bindings. You just have to use your Sublime Text key bindings.

CHARLES:

Right. I’ve actually used that – the Emacs key bindings with Visual Studio Code. They work really well. It’s nice because, like, I don’t even think about it. If I add anything in a text file like Notepad because I moved my development environment from Mac to Windows. It has to be completely seamless. It doesn’t flow for me, right? I want to Ctrl+X, Ctrl+S, or you know, Ctrl+C, Ctrl+F to open a file. And yeah, all of that worked flawlessly for me. At least the common things for Emacs have worked right for me over the last few months so that’s been really nice.

WADE:

One other addition that I’ve thought of too is, as we’re thinking, people coming from other products but also people just coming, maybe they’re new to coding to get into this new product for them. They’ve never… they’re not sure to get accustomed to the different features. We built this Welcome page.

So when you’re brand new to VS code, you’ll see this Welcome page. And it will show you… think of it like an onboarding experience for mobile apps, something where you can flip through and see the features really briefly. We’re trying to see if we can make that even better but this was our first attempt of “Can we help people, new users to our product have a better experience in getting going?”

RAMYA:

In that Welcome page, one of the key things is an interactive playground. So even before you have your own code, maybe you can go to the playground and play with the existing code in the different sections. “Hey, try this out.” And then, there’s a small section that you can actually try it out. We hope that helps people.

CHARLES:

Nice.

WADE:

Lot of what we put there too that’s interesting is some multi-cursor, which you’re familiar with, and AJ’s probably familiar with too. We think that feature’s really handy. And a lot of experienced devs are like, “Oh I can’t live without that.” Other users weren’t finding it. So we really have to try to educate them in that interactive playground. So that’s the first feature we show you, “Hey, there’s this handy multi-cursor feature. This is how you use it.” So, we kind of… he’s a dozen, or so, features that if you know these, we think you’ll have a good experience in the product.

CHARLES:

Right.

RAMYA:

I think another fun thing that we recently did was workbench naming. You can write extensions, you can change the theme of VS code, and everything, but it will be restricted to the editor and not the rest of the workbench. Yeah, have fun with that.

WADE:

It’s probably good discussion point too. One of the things we did, we took what was different with say, Atom. For example, we were more restrictive with our extension API. We did that with the initial principle: because we want people have a consistent experience no matter what extension they install.

When we talked to Atom users, they’ve felt like, “I just don’t know the quality of these extensions. They could really bug down my editor.” We took a different approach where we said, “We’re going to be pretty tight there and we’re slowly going to open it up slowly in a controlled way.” So that’s what we’ve done ­­­here in the workbench thing. And I think that would be a thing you’ll see in the coming months as we’ll start to see if there’s other ways we can open up the extension API.

CHARLES:

So I could set up a Legend of Zelda theme and it would do cool stuff with the layout and the colors, background images, and stuff?

WADE:

Yeah, you could do that.

CHARLES:

Nice.

AJ:

One thing I saw in the presentation, the keynote today was their using Xterm.js in the web browser for setting up Azure, with the bash and stuff. And I know that one of the features that you’ve added in Visual Studio Code is to have the little bash thing. And I saw in the Xterm website that that’s what you’re using in Visual Studio Code. Do you understand how that’s working or what that implementation has been like?

WADE:

Yeah. It’s a shame we didn’t get Daniel to come. Daniel’s another engineer that’s here with us today. And he was, if not, the largest contributor or main contributor to the Xterm.js project. And he built the integrated terminal for VS code. So I can’t speak to the internals of how that works. But he was heavily involved for both of those – in that project, and then, in bringing it to VS code.

AJ:

So my next natural question out of this is, are we going to start seeing VS code integrated into web experiences with other Microsoft products?

WADE:

That’s a good question. If you go back to the very beginning of VS code, that’s actually where we started. We were a Monaco, it was the Monaco editor where this cloud-based editing experience is. And then, when Electron came out, we did that, it was fine. We’re getting people to use it but we’re only getting Microsoft people to use it – people that were already using our products.

And when Electron came out, we saw an opportunity of, “Hey, we can port this Monaco editor to Electron and we could then, run it on Mac and Linux.” We kind of reach people that aren’t traditionally Microsoft customers. So that’s an interesting question because it kind of what actually this be, going full circle and circling back to what we’ve already done.

AJ:

That’s an intelligent add, right?

WADE:

There’s no specific finds I can speak to today of plans to do that. Definitely, we’re keeping our eye on, if that makes sense. There was some, like, serious network lagging and things that were difficult. And we really felt like, desktop running it on your machine, and not on the cloud ended up being better for most people for editing experience. But if you may have seen… what’s the product? Sourcecraft?

RAMYA:

Yeah.

WADE:

Sourcecraft – They’ve recently forked, or using VS code for their product, as well. It’s a read-only experience but they’re using VS code. It actually looks a lot like VS code in the browser.

CHARLES:

Interesting. AJ’s point, I mean, my 11-year old has been doing school at home. And so we bought him Chromebook so you can install Visual Studio and code on the Chromebook. You know, that experience, even… well, I guess if it was a terrible, slow and awful experience, maybe not. But it would be really interesting to see something like that in my cloud where it’s, “Okay, here’s your coding experience.” And I know that Tim Caswell, we’ve had him on the show to talk about his solution to this, but it would really be interesting to see, “Oh, okay. I can actually do Visual Studio code stuff in the cloud, you know, where I’m at.”

AJ:

I’m not even thinking like, in the cloud, as in remote, but in the browser. You know, I think, like for example, the case of…

CHARLES:

You can serve it locally?

AJ:

Yeah, you can serve it locally. It’s the decision with Electron’s doing. But in the case of something like the Azure platform, all of your stuff is, you know, it’s running… where is it really running on your computer? But you have access to some additional things that are remote that you’re able to modify. I don’t think of it like editing code remotely, like SSH into my machine and edit code remotely.

RAMYA:

Speaking to that, I think if you go to the portal for Azure, say, you’ve deployed a website. I think there’s a provision where you can, in the browser, edit some of the files that were there. And that is using Monaco behind the scenes. That is one example. Another case is, if you’re using VSTS, that’s Visual Studio Team Services, and you can open it on the browser. You can browse through your code. And what you see there is Monaco, as well. You can edit it online. And that’s Monaco, as well.

CHARLES:

So, are these two separate code bases that are forked or are they staying in line with each other?

WADE:

That’s a good question.

RAMYA:

Monaco code-based is reused in Visual Studio Code, as far as I know.

CHARLES:

That was the impression that I got talking to Chris, as well.

RAMYA:

Yeah. I don’t think we maintain two separate forks because that would be a maintenance nightmare for us.

WADE:

I’m not sure where the … somewhere in the stream, separate, comes back and we have two engineers on the team that do check on the Monaco code-based. And I don’t know if they’re pulling stuff of what we’re doing in VS code. I’m not sure exactly what’s going on there.

CHARLES:

Well, my understanding is that Monaco is like syntax highlighting, code editing, and things like that. And then, a lot of the other user features that they kind of go to UI-like Visual Studio code.

WADE:

Yeah, those come out of other themes.

CHARLES:

Yeah, that makes sense.

WADE:

Monaco is just kind of the basic, here’s your code editor, you get the highlighting, and you get the basic features that will allow you to edit the code. And then, all of the other stuff, your tray on the side, your folders and all of that stuff, that’s all built around it.

RAMYA:

Does it all on the workbench.

AJ:

Okay, you’re saying Visual Studio Code is the shell integration with the operating system, like the chrome of the application?

CHARLES:

Yeah. It’s just very richly featured and very nice to use.

AJ:

Okay.

CHARLES:

So I have two things I want to go into and I think I want to hit the performance thing on the head again. So you mentioned, okay, we’re looking at, “what do we pull out? What do we keep in?” But are there other performance things that you’ve done, things that you’ve looked at and said, “Oh okay, if we write this code this way, then it makes it faster or if we…?” How much of it were refactoring versus actually saying, “You know what, not everybody wants this. We’re going to pull it out so it doesn’t have execution cycles.” How do you actually optimize performance on something like Electron versus like for the browser?

RAMYA:

Taking one step back, one thing that we did recently was adding an ability to calculate the start time.

CHARLES:

For Visual Studio Code?

RAMYA:

Yeah. So you can run Visual Studio Code with certain flags and time shows up. So that was one of the things we did because sometimes we heard users saying that, “It’s really slow. It takes like 5 seconds.” And then we wonder why because for everybody else, “It’s runs one second or something. It works with my machine!”

WADE:

It’s kind of a first step of… can we get a baseline?

RAMYA:

Yeah, so that’s one of our full steps to get more information from the user-side. How can you get a profile of what things are running? Which part of the process took how much time, and so on and so forth? So with that information in hand, then, one of our engineers in the Zurich team actually, he works closely with the Electron usage in our product so that’s information he’s been using to identify which area needs more work. Where are we spending more time, and so on and so forth? So we’re using telemetry for that at the moment. As to the rest of your questions, personally, I can’t answer that because I don’t work in that area.

WADE:

There’s a few things going on. We need to identify what are the things people are doing that’s causing the editor slow down? So one example is, you open a large file and things get laggy there. Now, we can take a set of strategies to try to fix that. Right now, for example, we could say, “This is large file, we’re only going to load a portion of it.” It’s viewable in the view port. And we’re only going to syntax highlight that. And as you scroll, we’ll start to syntax, highlight and load the rest of it. So this is kind of, lazy loading approach. That would be one approach to, say, that’s the use case. This is how we’re going to speed it up. So probably, right now, we’re in this process of, “Can we catalog this? Can we prioritize this as how big the problem it is?” And then start knocking him out. That’s probably where we’re at.

RAMYA:

Another exercise we did was we looked at all of our extension API’s to see which one of those could maybe be a malicious extension abuse. Say, for example, you have the API where an extension can give you all of those suggestion items, completion items which you see in those. Is there any way that could be overloaded? That was one exercise we did recently to just make sure we’ve covered all our bases. There are checkpoints in place to a wide certain situations. But apart from that, I think, one of our teammates could talk to more on that.

WADE:

There is a decent hacker news thread. It’s probably six months ago now. The discussion was, “What’s the difference between VS Code and Atom, speed-wise?” Atom is a great product and they’ve done a lot to improve their performance but I thought the comments that someone chimed in that made a lot of sense for the Zurich team is he said, “There’s nothing magic that VS Code has done and it’s gets to, ‘what are we going to do?’ It’s just strict engineering discipline.”

It’s like, “Are we using good data structures? Are we managing our memory properly? Are we removing stuff we don’t need anymore?” And that’s really a… it just comes down to all those little things you learn from basic textbooks that have been around for decades and decades – about how to write good code. That’s what we have been doing and that’s what we’ll continue to try to do – to try and improve the performance.

(00:23:23)

[This episode is sponsored by Ruby Remote Conf. Ruby Remote Conf is a 2-day completely virtual conference hosted by, none other than, Charles Max Wood. If travel expenses are an issue where you just can’t afford to be away from home for 2 days. Then, join us! It’s virtual. This conference is focused on people who are new to programming who want to learn what the pros know, or just get a leg up, and getting a job, and getting into the programming community. We will have speakers from all over the programming community to help you stay current in a Slack room where you can connect with speakers and other attendees in real-time. We’ll also have a live round table video chat for attendees and speakers. Plus, we’ll provide the top recordings to you within days from the conference.]

CHARLES:

One of the things with performance is I tend to notice there are about two or three levels of performance. Right? And so you’ve talked about, like, “Oh well, the editor is slow.” And that’s one level, where it actually interrupts my flow because of the speed, right? And then, there’s the other level of performance where it’s fast enough to where it doesn’t interrupt my flow but if it were faster, I could go faster, if that makes sense. And I don’t know if I necessarily always notice those. And so, I wonder sometimes if you evaluate things and say, “You know what, this is something if were a little bit faster, it would just get further out of other people’s way.”

WADE:

It’s definitely like, this is the pillar and there’s a lot of different ways to look at it – the start up time, even like, how faster are the key presses, is that showing up quickly? Those are the things when I said, “We need to catalogue those.” Those are the things we’re trying to understand. What are the users’ stories? And how can we, then, go to start and fix those at the right, most efficient way possible.

AJ:

So in the work that I’ve done, I’ve done a lot of work with ARM with Node, and VM compile time is horrendously slow. If you load Indiegogo.com on iPhone and Chrome, where it’s necessarily using the same native engineer, maybe, they switched that over iOS 9, but the page takes forever to load. It downloads 1.3MB of Angular modules and da da da da da. And then, it VM compiles. So it’s not the bandwidth that’s slowing you down when you load that page, it’s actually the VM compile time. And I don’t know if you really get that problem on a desktop. But when you’re talking about like, modules and extensions, first thing I’m thinking is, with the work I’ve done in Node and ARM, “Oh my goodness, if you try to just use Require?” It will take seconds for something to open. Do you have that problem at all on the desktop or are you lazy loading them all the modules? Or all the modules just load at once?

WADE:

That’s a good question that I don’t know the answer to.

RAMYA:

We definitely don’t load everything at once. Different parts of the editor is loaded differently. Like one person experience, I can say, since I was talking about Emmet, Emmet library itself, when you do the Require, we don’t do it at the first load. We do it when we notice the user wants to use Emmet. So the first time, you say, you’re an HTML file, you type something, tab, that’s when we load Emmet for the first time. We don’t try to load all that library at the very beginning. And then, delay the whole process. That’s like one example I can give.

WADE:

That’s good example.

AJ:

I’m guessing the VM compile time on my desktop is noticeable too, then, for things like Emmet.

RAMYA:

Yeah, if you would wait for all of the modules to load, then, definitely, there would be issues. We try to lazy load as much as possible, even the extensions, for example, right? We have a separate process called extension host that takes care of loading all the extensions. Whether the extensions are completed loading or not, that does not stop you from typing in a file.

AJ:

That’s good. There are so many apps these days that are built with… the problem is, this mobile first, cloud first world, wherein people don’t design for: “I’m not from San Francisco on a high speed connection so if I can go and open up my Gmail app on my phone, it takes forever because it tries to ping all the servers and everything, and all that.” It’s nice when you can get to the point of doing some action typing or whatever without having everything loaded.

RAMYA:

I think that was one of the major design decisions the team did, way, way back. We don’t want extensions to bug down the very basic features of an editor – opening a file, saving a file, scrolling and other basic things that you do, for which you don’t need any extensions to begin with. It’s just simple editor, even Notepad can do that. So simple actions shouldn’t be bugged down by fancy actions, to say it simply.

AJ:

Amen.

CHARLES:

Yup, absolutely. So what’s coming next in Visual Studio Code?

AJ:

What can you tell us?

RAMYA:

Before we go to, “What can you tell us?” I’d like to point out that as much as possible, every month when we plan our iteration, we create iteration draft plan. We put it out there for people to see. There are no secrets or such. Our roadmap even, our every three months, six months…

WADE:

So we have these pillars for our roadmap. And then, each month, we plan for that iteration.

CHARLES:

So when you say pillars, what do you mean?

WADE:

Pillars like, I’m using it in a sense of category of work that we think is important. Performance is a pillar. It’s like, performance, and helping people get started. Those are probably the two top of mind, for most of us. Those are two pillars that we work on, iteration after iteration. Each month we kind of figure out what’s the most important to do for that month. So what’s coming next? What is our May plan show? I can’t remember all the details but that’s what’s coming next. It will be something within either performance or helping people get started. And then, there’s a few hits, base hits we’re doing in some of these extensions, too.

CHARLES:

Is that something I can look up on my phone?

RAMYA:

Yes. There are two things you can look up. When you go to github.com/microsoft/vscode, look for the label ‘iteration plan or ‘iteration plan draft. So that’s the current work that we’re doing that month. And also in the wiki in that Github repo, I think there’s a page called roadmap’. So that talks about, “Hey, what do we think about the next 3 months, 4 months, and so on and so forth?” I think, one exciting thing that we’re currently looking into, here in the exploration stage, is the multi-root workspace. Yay, that’s a good feature to talk about. So right now, in VS Code, you can open a folder, right? You cannot open multiple folders.

AJ:

Yeah, because you have to have multiple VS code instances.

RAMYA:

Yeah. We’ve gotten feedback that, “Hey, we’d like to open two separate folders,” which don’t have the same answers totally with a single root. So the multi-root workspace is something that people and the team are currently looking into – looking into what it takes to get there, and what are the challenges that we have to see, and so on. That’s the current hot exploration that’s going on.

WADE:

We’re just looking up the iteration plan. I know the thing… you can see where we’re going is you can look at the issues, sort by most comments and that’s a good indication of we want to… what people want, we want to try build. This multi-root workspace is one that’s really high on there. I think that’s number one, actually, right now. And then, the second one that is a monster issue right now, just little paper cuts around formatting and auto-indenting – just things to make your code prettier. We have some solutions there that this issue was just some… just whole bunch of corner cases put together. Then, there’s the thing like, die by a million paper cuts. So that’s one issue I think that we could probably really start to dive into and try to solve.

AJ:

There’s a problem with… that it can’t fold functions, I think.

WADE:

Oh, yeah. That might be a good one for the formatting. We call that our formatting monster issue, just a whole bunch of different little things.

AJ:

Yeah, we got a developer that started working on some of the … and changed all the commas. I’m not sure if he is actually using VS Code at that moment or if he was using Sublime or what he was using. It looked like VS Code from over the shoulder but, you know, they looked kind of similar until you start digging in.

RAMYA:

Why did he change the commas, too?

AJ:

So, I do comma first for alignment for human parsing because as a human, you can tell if a comma first is missing but you can’t tell if a comma last is missing without actually… because you know… It is the alignment that your eye has to track and trace. So I have always been a comma first person because it is just bit easier to read and catch mistakes sooner but computers don’t always like comma first. Got to find the balance of both beneficial to humans and computers.

RAMYA:

I mean just digressing a bit since we are talking about commas. I think Go language has an interesting spec there. There when you like say, I think unique array object, you always have to have a last comma at the end after the last item as well. So you…

CHARLES:

Oh, you do? That’s interesting.

RAMYA:

That’s one of the interesting things I found when I started working with the Go extension. You, so… If you have three items in the array or…

CHARLES:

Collection?

RAMYA:

Pissing some Go users out there but sorry if I’m getting any of these wrong but I do know that if there are three items, you need to have three commas.

AJ:

I think that’s good. And JavaScript can work that way except that sometimes you get undefined elements. So if you do that in an array, you’ll get undefined elements. If you do that in an object, it will complain if you try to use it as Json but it will be fine if you’re not… So it was always like these Edge cases. So I… When it comes to the point whereas like these seven simple rules and you’re never getting it wrong. And just like put the freaking comments, “Do you go over there?” I put it there every time.

CHARLES:

Yeah, that makes sense. So, yeah, Wade helped me find the iteration plan. I didn’t see anything in here that I was dying to ask questions about but I will point out, I didn’t realize it was under issues so if you do issues and then the tag is…

RAMYA:

Everything is an issue.

CHARLES:

Boy, isn’t that the truth. Anyway, so you’re going to ship in early June. Do you do iteration plans just like… will we see another one before this release of this particular iteration plan?

RAMYA:

So currently, we just shipped the April iteration like a week ago. So currently, what you are seeing is a May iteration plan and then say four weeks from now, you may see a draft for the June one. So by the time we…

WADE:

We run our monthly sprints.

CHARLES:

Nice. Okay, that makes sense.

WADE:

We do three weeks of dev work. We do a week of release and then we do a week of dev work on the end.

CHARLES:

Oh nice. I like that.

WADE:

Yeah, it’s a good … for us. My monthly release cycles work that well.

RAMYA:

Yeah. We call the fourth week the end game.

WADE:

End game. Yeah.

CHARLES:

Nice. Well, is there anything else that we should talk about related to Visual Studio Code that we haven’t covered or…

WADE:

No. If you haven’t tried it, give it a try and would love to hear your feedbacks. So just try to make it awesome.

RAMYA:

Yeah, and we’re open for… You can reach us at twitter. Reach us at Twitter @code.

CHARLES:

I love that twitter handle.

RAMYA:

It is awesome.

WADE:

Yeah, we are lucky to have gotten it.

RAMYA:

What else? We have our Github repo. Take a look at that if you have any issues, problems, you can log it there.

WADE:

Yeah, the entire team, we all spend a ton of time working through those issues and … everyday. So, that’s it. That’s an important part of our development is always talking to people, to our users.

RAMYA:

That’s an interesting thing for me when I joined in this team. What I found was different is, I’m no longer just a developer. I am a developer. I am a tester. I am the person talking to the customer. I’m customer support and everything. I initiate … That’s insane. I might be getting randomized all the time but it is so much fun. The fact that you get to see feedback right then and there. You get to talk to people who use your product and well, that’s the dream for me.

CHARLES:

That’s awesome. That’s awesome. And just to clarify a couple of points, you can get it at code.visualstudio.com and it is free. So there’s no reason to not try it.

WADE:

Yeah, at least try it. Download it.

RAMYA:

Yeah, it’s free. It’s lightweight. It’s cross-platform. I can go on.

CHARLES:

Ramya has got a little spark in her eyes right now, so glowing.

WADE:

Yeah, big smile.

CHARLES:

Yep. Yeah, I mean the thing I like about it is basically that it has everything that I like about the text editor that I typically use with the features that I like from the IDE without totally bugging me down with all the extra stuff.

AJ:

So I want to go back to something that you said earlier which is a problem that I’ve had. You used Emacs because sometimes that’s all that’s available on the machine that you’re doing work on. Now, this morning, when I saw with the Azure stack stuff and Visual Studio, not Visual Studio code, was there is more integrations unlike here’s where the codes actually running and then I’m going to debug it where it is actually running and I’m going to work on it where it’s actually running. Is there any road … stuff in Visual Studio Code for like…? I mean I would imagine lots of types of people that are doing Visual Studio Code, and other types of people that are developing their little home server in a raspberry pi or something like that. I … like, make it so I don’t have to use them. That I could use Visual Studio Code for all the things that I want to do.

WADE:

…some explorations around there and our colleague Chris Dias who… you guys have talked to before. He just probably just finished his session presentation showing how you can use VS Code with containers. And we’re pretty interested in how containers… where you can take not only your code base but also your run time environment and how does can work well together. I think that’s closely related where it’s like okay well the run time environment is in production and it is at the same as where my code editor is living. There’s no hard plans there right now but definitely we’re interested in that. We’re trying to see where VS Code can play in in that space.

RAMYA:

Yeah. Anybody who’s interested in that area, do check out the Docker extension we have. And I think there’s also a few videos out there. I think one was from Docker last year where they showed debugging say a simple application, a known application. It’s deployed in a Docker container out there and you can debug it using Visual Studio Code. They did use Visual Studio Code to do that. So as long you have the setup, you set up all the ports correctly, you can debug containers.

CHARLES:

Yeah, I think they showed that off at Microsoft Connect last year.

WADE:

Yeah, that’s right. Chris has been doing that a lot.

CHARLES:

Yeah, I don’t remember who is Chris or Scott Hanson but one of them showed it off. And so if you want to check that out too, I’m pretty sure the talks are available online. Now, we’re running out of time on our room so I’m going to push this towards the last portion of our show which is picks.

[Have you ever felt that you are falling behind? Or that the programming world is moving so fast but it is impossible to keep up? Then there’s the issue of where to go to make sure you’re up-to-date. The answer is to join the community dedicated to discuss to you the latest in Javascript. I mean wouldn’t it be nice if you got Javascript Jabber all day? Well, you can! Kind of. We created a Slack community for Javascript Jabber. That means you can connect with our listeners and guests on a platform you’re most likely you are already using. Plus, we set up a keeping current channel that pulls stories from across the web to help you know what people are talking about. And coming soon, we’ll be holding monthly webinars and round table video chats to connect with experts in the community and with each other. So come join us in javascriptjabber.com/slack.]

CHARLES:

I’m going to make AJ go first. And then I’ll go, and then will let you two go.

AJ:

‘Kay. So, I’m pretty sure I already picked Breath on the Wild before but I could pick that everyday all day long. In fact, sometimes I pick it a little too much then I have to put it down. Or fortunately, the battery will run out and I realize that I’ve definitely been playing it too long.

RAMYA:

You need to tell me what Breath of the Wild is.

AJ:

Yes. So, Nintendo has Zelda and they’ve done lots of different styles of Zelda over the years and I’m told by other people that this one is similar to Skyrim. So people are… I don’t know if that’s PC game, MasterRace, or Xbox, or Playstation or what that is.

CHARLES:

It’s a PC game. I think you can play it on Xbox too.

AJ:

Okay. Because I’m not a gamer at all. I’m a Nintendo person and I think there’s a distinction between Nintendo people and gamers. Gamers might have a Nintendo but a Nintendo person probably doesn’t have anything else. Anyway, it’s their latest Zelda game and it just takes elements from the other Zelda games that worked really well as well as elements I’ve seen in other people when I’ve been exposed to them playing games and brings it all in to this… This incredibly addictive huge open world where you can explore and you have objectives but the annoying thing is on the way to one, you’re going to find ten more and it’s just… It’s seriously one of the best games I have ever played so I’ll pick that.

And then I’m going to pick … I love the keynote this morning. It is all a lot of cool stuff. I made reference earlier to some joke about the Intelligent Edge but I actually really like MIcrosoft’s idea about the Intelligent Edge meaning that you get rid of the idea of the cloud. It’s your running code and that code runs anywhere. It might run on the client, it might run on a hybrid cloud system, internal, external, on Azure, whatever. I think that’s really cool.

CHARLES:

Nice. I’m going to jump in and pick a couple of things. The first one that I’m going to pick is just a game that I’ve been playing on my phone. It’s called Boom Beach. If you play Clash of Clans, this is made by the same folks. Just a fun way to kill about 5 minutes of your time while you go take over another island. But yeah, I’ve been enjoying that.

And then I’m been using a system called Bluetick to follow up with people. It’s in beta. If you go to bluetick.io, you can sign up to basically get a demo. You can’t get a sign up unless you talk to Mike, who is the guy that’s putting it together. And I’ve known Mike for a few years but I used… I can’t even tell you how many CRM’s over the last year. And none of them do what I want. I was going to say, “They all suck”, but they probably work for some people just not for me. But anyway, so it’s basically a follow up system, hooks into your Gmail account, and I have been super, super happy with it. So yeah, that said, I just… I can’t say enough good things about it.

Yeah, it integrates with Zapier so a lot of stuff that you would wind up doing as far as automating people, … sequences workflows, and … sequences and workflows, , you wind up doing with Zapier. And so it works out pretty well. And I’m really enjoying that. And then, yeah, I’m going to pick the Emacs key binding extension for Visual Studio code because it worked for me. I mean, you know, some of the plugins I have for Emacs, you know, obviously those key bindings don’t’ exist in the plug-in but, you know, the really basic ones do. And, yeah, all that muscle memory. It just… It just doesn’t interrupt my flow when I use it and that’s a nice thing for me. So Wade, you have some picks for us?

WADE:

Yeah, I’ve got one so I really like to read books and… So I’ve been… As I’ve moved a few times over the years, you slug around these huge cases of books, you know. And so this Christmas, I finally pulled the trigger and jump on the Kindle bandwagon. So I got a Kindle paper white and I tell you. I have been so impressed with the product like it took me a long time. Because I knew I would like it because I wouldn’t have to carry around the books but I always loved the books, you know, like they just feel good. And there’s just something about reading a real book. But they have done a really good job at Amazon on building this Kindle. And the thing that I was most surprised of that’s helped me around the most is, it is really easy on my eyes. So that was why I would like reading books before out on my phone, out on my iPad, but so I’m like a total convert to Kindle paper white being a great way. I would say it’s 90% there of covering like the … and things you love about a paperback or a hardbound too. I mean, it is skinny and stuff so you don’t get exactly the same tactile experience but the eyes. It was really good. It’s just really nice to see in my eyes so I picked the Kindle paper white.

CHARLES:

Nice. Alright, Ramya. You got the idea.

RAMYA:

Yeah, I do. I don’t have any tools as such to speak about at the moment but since you said something that makes your life easier/happier/just goodness overall.

AJ:

You’re just going to pick Code again aren’t you?

RAMYA:

No. So one thing about me is I’m fairly new to open source as a whole. So before joining Visual Studio code which was about, I think, 9 months ago. I didn’t do a… of open source. I just knew. So that’s the cool thing that I should try but I never did. After joining the Visual Studio code, after maintaining the domain of Go extension, I just have to pick the whole open source community. And the way things work as something that’s really made me happy. You know, this whole concept of working with perfect strangers to build something that somebody can use is… I mean that just blew my mind. Even though I knew what it was, but in the actual when you actually get into it. And you work with total strangers. And get a good thing out there. That’s my peg.

CHARLES:

Awesome. Yep, we’re fans of open source here that’s for sure. Alright well, if people want to follow you guys on twitter, or, you know, kind of see what you’re up to these days. I mean good places to do that, a blog, like us on twitter.

WADE:

Twitter’s good, yeah. waderyan_ is my handle. I don’t know what Ram’s is.

RAMYA:

Mine is ramyanexus. Do you want me to spell that out?

CHARLES:

Yeah, you should spell that.

RAMYA:

That’s ramyanexus. That and you can find me on github. That’s how you know what I’m doing.

CHARLES:

Alright. Very cool. Well, thank you for coming.

WADE:

Thank you for having us.

CHARLES:

Yeah, I love digging into the stuff. That’s really, really interesting. But yeah, thank you for Visual Studio Code. I know a lot of people using it. They love it.

RAMYA:

Thank you for having us.

CHARLES:

Alright. We will wrap this one up and we’ll catch everyone next week.

[Bandwidth for this segment is provided by Cachefly. The world’s fastest CDN. To view your content fast with Cachefly, visit cachefly.com to learn more.]

x