Events Add an event Speakers Talks Collections
 
jsMobileConf 2018
October 26, 2018, Boston, MA, USA
jsMobileConf 2018
Request Q&A
jsMobileConf 2018
From the conference
jsMobileConf 2018
Request Q&A
Video
VS Live Share Can Do That?
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
81
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About the talk

VS Live Share is a free code collaboration service for VS Code. Think of it as Google Docs for your JavaScript files. Multiple developers can collaborate on the same project all within their own editors. This is not source control. This is you loading up someone else’s entire dev environment on your own machine. Seriously. Come take a look at how Live Share really changes the way that we think about how we work together. You might be shocked to learn what it can do, and how it can dramatically improve your workflow.

About speaker

Burke Holland
Principal Developer Advocate at Microsoft

Burke Holland is a front-end developer living in Nashville, TN; the greatest city in the world. He enjoys JavaScript a lot because it's the only way he Node to Express himself. Get it? Never mind. Burke blogs only slightly better than he codes and definitely not as good as he talks about himself in the third person. Burke works on the Azure team at Microsoft on behalf of JavaScript developers everywhere.

View the profile
Share

What happened Nashville? My name is Brooke Hyland. I work for Microsoft on me. As your team. I am a cloud developer Advocate which means that I work with JavaScript in the cloud to make sure that it's a great experience for you so that I bang my head on the desk so that you don't have to is really the idea in that process. I become very close with the vs code team. I've done a lot of work with vs code. I run a site called vs code can do that. Has anybody heard of this site several hands? Cool. Tell your friends

weeded out. This is a site that I run with some so my colleagues Brian Clark cancer drives near where we publish a bunch of small short videos on what you can do with the S code because we think it's just the greatest thing in the world. But even we don't know we don't work on that team. We just talked about it all the time and nobody told me to stop doing that. So I just keep on doing it. Alpharetta show called five things. Does anybody watch the show? Everybody every hand you can't see the screen. You know why? Stop plugged in yeah,

that's it. Yeah, so great. I noticed every hand went up when I ask a question. So that's that's awesome. Five things the show that we do where we interview at 1 guests each week. We give you five top five things about one specific topic. You should check that out. Fun fact five things is the number one show on YouTube in the less than a thousand subscribers category. So we're very proud of that. We have dozens of use my retirement plan Today we're going to talk about Visual Studio code and specifically Visual Studio code live share.

Stop it. You don't know live share was released still in preview, but was released several months ago to the broader developer population. The overall goal of lifeshare is to enable Google Docs like collaboration for developers. You think about it collaboration and we're documents and even spreadsheets is Trivial. Thanks to Google Docs. I have to say Microsoft Office 365. I'm compelled by law to tell you that so that's trivial but for us to collaborate and developers is still pretty hard.

It's still pretty hard. It usually consists with us either all standing around a screen pointing over each others shoulders or getting on a Skype call. I'm saying tell me we can see my screen tell me when you can see my screen and tell me right so we can still we don't really have a good tool to do that. And so Microsoft is trying to create a service or a tool. That fills this sort of huge missing after we have is Developers. Do the coffee before I kick it? Slap Watcher to the store today. We're just going to go through and look at live share and all of the different things

that it can do in the different ways that you can use it. Could you do I pair you have to install it? And you do that as an extension, everything envious code is an extension live share is no exception to that you find it here and see the large preview disclaimer at the top which means if something goes wrong, it's not our fault. We told you it was a preview. Did you check that out? There's also a live share extension pack here that you can check out the last year extension pack contains live share and it also contains what else is in here? It's got the audio extension

which we going to talk about and it's got an extension called teen chat, which were not going to go over but it does allow you to do chat inside of your coat in the show you a different station when I think it's a little bit more robust than that one, but you can do that and if you want to grab this, you can go to listen to you and go to AKA. Ms. Flash live share pack want to go ahead and install live share. And for those who do install live share. We will run a contest at the very end of the session you'll have to have lunch are

installed in the prizes are non-trivial kind of just saying they are substantial like this pic seriously. All right. So once you have last year installed. There are a couple different ways that you can work with it. Pretty much like everything Microsoft makes there are five thousand different ways to work with it inside of the UI. One of the ways is just to click on your name down here in the bottom. So you'll see your name. You can see that I'm signed in and if I click you can see I can start a new collaboration session. Join one sign out

all the different things that you need to do. Now the first time you install it is going to ask you to sign in but you don't have to actually sign in manually. You can just try to start a session. It will ask you to sign in matter. What you doing live share. It's going to ask you to sign and you'll go through that process with your Microsoft account, right? Everybody's got to my stuff account or your account right account. That's when I use Microsoft Microsoft account. I don't know you sign in and then you can start a new collaboration

session which is exactly what I'm bringing to do here in a second. The other thing that you need to know about here in Visual Studio code for live share is the live share Explorer view, which is over here on the right hand side says call the activity bar and you can view the live share Explorer of you here. Now, you'll spend a lot of time here. This is a very cool place because you're going to see everyone that's connected. You can share Terminals and servers and poured some all sorts of stuff from this view right here. This is where I usually hang out the last

place that you can get. It is from the command palette. So if you just do command shifter control shift pee and then live stream or live Syracuse me, you'll see all of the different options there. So just different ways to all do the same thing. One thing that I do is IMAP a keyboard shortcut to the live share Explorer view on map with command L, which allows me to just quickly toggle. So if I'm in the Explorer I can just do command L and that drop me over to the live share Explorer review. So it's a handy little tip that you can use. You can just add a keyboard shortcut and that makes it

easier to move back and forth. Who starred in collaboration session here? I'll do that from right here. And going to share my workspace and it's going to give me a code that I can now send her URL rather that I can send to other people and they can join my lecture session know. I should Works across visual studio and visual studio code anybody in here using visual studio couple hand so you can use this to and you can use it between visual studio and visual studio code. So I'll be in after somebody's using vs. Cody you're using visual studio. You can still use live so you can still work

together. This does not work any Clips or webstorm. Sorry people vs only. Wow, it's Jesus everybody anybody using what else? We got? Anybody any webstorm people here one right there Adam. couple Adam people any Eclipse people All right here. All right, man. There's a support group. We're going to go later. Will do that when they will do the SharePoint support group. Yeah, exactly. Alright, so now that we have this we want to send this link to people. So what we're going to do so you can watch me do this as I've got two

different isolated environment running. One of them. Is this one over here on the left, which is my machine my Mac and then the other one is over here on the right, which is a virtual machine. This is Windows. Now, these environments are completely separate from each other. They cannot talk to each other another word. There's no shared networking. None of that. None of that is happening between these two machines don't want to do here is I'm going to come over to last year here and say joint collaboration session and paste in our URL. And then you will see

here in just a second that I will join over here and left hand side. So I'm this is not Burke. Okay, this is Berk. This is not clear now noticed that is asked me when I started the session whether or not I wanted to make this session read only by default last year sessions are read right? So when you share the other person can change your code. It's a good idea to share read only by default. I think that this is something they should probably change will see if they do just from a security point of view. You only want to allow people to

write if you're very very sure about that. So really it probably should befall to read and then ask if you want to make it right now notice if I say make read only. I said too late someone already joined. You can't change the status of the collaboration sessions too late now. So just know that once you will actually join you cannot switch from read to write or back and forth. It is what it is for the duration of the session now get the products and preview. So this may change. In fact, they released things all the time and is sending emails in like, please stop working on the product because

I have a presentation I do and I have to change my presentation every time you had features. There's a lot of features that have rolled out even since I prepped this presentation here. So we'll be okay and now we are in your life sharing and come over here. Let's open a file on this side hear something exciting. Maybe let's do index. Yes that works and you can see on the right. I don't know if you saw what I did that but the person on the right here actually follows me. over to where I'm going to be and

can't change my code. and if I save this should show up here. I'm in a different file here. I need to be you know, what if I clicked on the sidebar. Thank you very much. Go over here to index every guy was so if I change this they can now say it not one of the things that you might want to do. In addition to making it read only is you could get in a situation where you share your session with someone and then you forget and you leave it open and you go to lunch and if the person has read write ability

on your project, they can just come in and like change one letter in your database connections training and then laughs as use the next 4 hours trying to figure out how your life has gone. So terribly wrong. Also one of the other things that you can do to make this more secure is sort of change the default join Behavior. Let me show you how we can do that here. I'm going to come over to my user settings, which is Commander control, and then we can do live share and we're going to do let's see here. Let's do guest approval required ever going to set that to True. Okay.

Let's come back over here and go ahead and disconnect from our session here and then we'll connect again once the extension loads. Goodjoin. and this time when we join What we'll see is we'll get a prompt over here on this side that asks me whether or not I want to accept or block the person know this is important because if you forget to close down your last recession, you leave it open this person cannot automatically get back in right? They cannot automatically reconnect also know that if you reject and block the person they

are blocked for the duration of the session so you will not be notified if they try to join over and over and over again, but something else I recommend doing Just requiring your approval before you allow people into your code. Good idea. Book of Acts are code here. The default behavior that we have inside of us code is what we call a follow Behavior. So follow Behavior means that if I'm following someone Go back here and just collapsed this if I'm following someone I will always be in the same file

as they are now. We've made a change over here to this file, which means that we are no longer following. So if I actually come here what we might be since we disconnect and go back. Let's see if we're following. You're not supposed to act at CVS. So we are not you'll notice you're not following any more if we were falling what would happen is we automatically be taken into the app. ES file as well. Just give me a really confusing last year is trying to guess which workflow would be easiest for you in terms of do you want to always be following the other person you're working with or are you

working in different files? It's very hard to know. So what live share does is when you connect it automatically put you into follow mode. If you make a change to the file, then you are no longer and follow mode and you will not see what the other person sees exactly will not be in the same place. Just give me super confusing because what I've noticed what happens is that people started last year session, they're both working on a file then they get in separate files and one person will be saying like look at mine 18 and we'll talk about line 18 and the person they're working with peas and

entirely different line 18 cuz they're in a different file. Set the pics that we want to do something do something called focusing followers. So it's come back over here to our action bar and you can see up here at the top. We have a focus participants look like this right here. And that is when you focus the other people that are on the last recession automatically, so if I'm in if I join someone session and they focus me, it's going to remove me from whatever I'm working on and drop me into their file. And now when I scroll they scroll were following each other exactly. Now

there's a couple different things that you can do with this. The first one is you may not be keen on the idea of having live share rip you out of your contacts. So you're working on a file and someone focuses you and it's just going to fix the tear you away from that dropping a new father can be super annoying. So what I would recommend to do for that is to come to user settings. And go to live share and let's do. Focus behavior and you can see we have except or prompt. We're just going to change that to

prompt and then what will happened here to come back. Let's make a change that we no longer follow mode. And if I try to follow myself again here with this fictional person, it will ask her, has requested you to follow them and then oh, actually, you know, what an added on the Rocks. I need to add it over here and able to do it if it'll prompt you. Focus Behavior prompt Braum's Here we go. Wouldn't say that. It's Focus again. And then it will ask you do you want to follow the person or do you want to ignore them? This is sort

of a solution to follow ripping you out of your context. You can add this setting to your settings file and they will ask you before you do that. Alright, so that's sort of the default lifeshare behavior and some settings some tweets that you can make to live Journal. Let's talk about actually using last year. Obviously live share is great for code. All right, but code is just text. Lifeshare also works with things like the bugging. So for instance this application here is an Express app and I can run

it this And it will run hopefully. And let's go ahead and open up the terminal here. what you are debug output Every gal you can see that it's running on localhost 3000. So if I come over here to localhost 3000 Go ahead and hit refresh here. And now we can add break points on this file. So could the index file that a breakpoint. And hit refresh. Where's my debugger? And what you'll notice is that this person on the other side actually will go into the debug as well. So you can see that I'm actually attached here

on this side. So the debug session is shared between the two different instances of u.s. Code. Now you can actually start a debug session from this other side as well to so right now the way that we have it if I click play here you can see the host doesn't allow starting to be buggered you can change that so that the host can start the debugger so we come here we stay live share. Allow guests about control. What's that? That's a true. And now it should. Go ahead and kick off a new debug session. So I've actually started the debug

session from this side. Okay. We still have a problem here. The problem that we have is that the debugging is really only applicable to this machine on the left because the the the site that we need is localhost 3000. So it's available for me here. But not here. Okay. I can't access it cuz they're two different machines. Watch this like to live share open up and say share a server going to share Port 3000 set for app is running. We can give it a name and now we've shared the port and what's this? So you

can actually debug like you are on this person's environment you are now on their localhost. You weren't out in their code debugging stepping through doing all the things that you need to but Skip a little bit more interesting. Sharing ports is not restricted to just the browser. You can share any process. That is exposed by a TCP like a database. suppressants I have over here. This is the cosmos DB extension Cosmos DB is a and Azure nosql database, but what's interesting about

this extension is it also connect to mongodb which I have attached earlobes Ali. This is just my local instance of Mongo DB over here on this side. I do not have mongodb installed at all. You can see that if I expand their season two different databases that I have in here or is everybody needs a database a horse. If you want to know why I need a database course, I'll talk to you about that after the session are going to connect to our local host when save and quit next and of course this won't work because I don't have mongodb installed and running on the right hand side. It is

not there. I have the tool their tamago TV isn't even there. But because this is just the port 27017 we can share this just like we shared a server go ahead and share it 27-0 17 What's colic mongodb? now be here to New Connection Manager connections. Here we go. Couldn't connect to the phone. Now you can see here's my system databases and this is the horse database. So I'm actually accessing the mongodb incense on this machine from this machine. So not only do I have access to all the debugging I have access to

all of the the porch that this person gives me so they're localhost our local sites and their local database, which is really nice no more. Like let me upload this file so you can bring it down and then put it in GitHub and I'll pull it in and I'll run in and create a base on my side and this is why developer product collaboration is so hard because we can't just share files. We need to share our entire environment and that's what life's your help us do. Hear something a little bit more interesting. You can also share servers. She's me terminals. So right now

by default its shares your terminals for you so you can see her I'm sharing a terminal and you can see that terminal over here. So if I was to come back to my terminal here and do is come over here to do like in p.m. Install you can see that I can see it over here on the on the right hand side, but I'm read only I can't actually make any changes cannot edit a read-only terminal you can change that. You can come here and say chair terminal shareit read right and now I can do

right sharing terminals is extremely dangerous. Extremely dangerous you can do that. And sometimes you do need to do this. Sometimes it's just helpful for the person to get in on your terminal and type. But again, I mean you are really giving the other person a lot of power. Hopefully people won't do that. I'm going to enter there that would have been really bad. Maybe do something like this instead. Reminder they have full access to your terminal from their side. So you can see here. I mean live here is

not just about sharing code. It's about sharing your computer the whole thing. And with a lot of power comes a lot of responsibility as the overused Spider-Man quote goes Art, let's talk about. communication one of the first things I see people do. When they come in to live share the open up a new last year and they'll be like that still do this. Come over here and I'll be like hey, I'm in your code. Hahaha, right people immediately began communicating by a comments in the code.

This is I've seen you lose all the time. This is not really how he is last year was designed to be used not supposed to be a chat tool. The reason for this is you probably already have a chat tool that you use you don't need another one and I'm trying to reinvent chat tools here. That's that's complex. And so what we can do instead if there's a couple of different plug-in that you can use and the one that I am recommending currently is called code Stream So Cold Stream you can get from the extension Gallery here. decode stream right there

and you can use black right inside of vehicle code. So let's do this. Let's come here to our index file and Let's do let's do this taco code stream here. Thing is he coaching will come out and this is at Microsoft. We have a Spike Channel called add your advocacy. These are all the different channels that we have and then all of the people that are actually in flag with me here. You can see them all. These are all the people that are online so I can pick someone like I was he stares around with

Peter earlier. Are you there? So this person doesn't actually have to be envious code right there. She's in flak, but she can see this. This will actually come into her slack Channel and she can see this and she can type back. I'm not sure if she's there think she's traveling this week. Another thing that you can do is not only chat here, but you can start a live session last year's session from here as well. So you can use Flash live share. It will automatically start a live service

share session and drop that link inside of slack there. And then that person can join you just like that code stream also, does this weird thing? I'd have to feature where you can highlight blocks of code and right click and say add coaching comment and it will put it. In in Flack, right and then it actually and it tastes it out to the side so I can have a comment here. What what the heck is all of this. And so she's here. There's a year so I know why she's going to type in the comments.

Right. So there is now a New York. She's inside of my coat here, but Another thing you can do besides just communicating and slack is you can also communicate with your voice like it's 1985. You can still do that. Did you know that it's still possible to call people on the phone. So while Visual Studio live chair is not trying since you type in the comments, I told you the first thing everybody does I think I might break your demo. That's fine. Go ahead. Say I just say go ahead. the demo sucks anyway

So, let's see. I don't know if Sarah has alright, of course. So, let's see. If I don't know if she has the live. There's a live share audio extension that you can get. the song called live share audio Right here like your audio and then you can start anew call Sophie come here. I can stay audio start or join call. So I'm just going to stay start call. And then I don't know if there is God at the audio system installed if she does. Yeah, you can access the microphone.

Come back over to her coat stream. I see you have audio installed. She's making me a new demo. What is this? My face is in the How did she do that? What in the world is going on here? I know what in the world. Arthur that doesn't I don't think she has the audio plug-in installed it she didn't you would hear her voice just come right out of your your laptop. All right. So it's there's no ringing. It just promise it will prompt her on her side if she has a plug-in if she doesn't

Alaska to install it and then she can just join the call and you can just chat this saves you from having to fire up a Skype session share your screen or have Skype running at the same time that you're running live share. Everything is just for his self contain. What is she doing now? I don't have that many directory. So that is too many directories. All right. So that is code stream everybody a round of applause for Sarah drasner. Coming coming in from New York. I think she's like in an airport or something. All right. I'm going to kick her out and watch this.

Sarah All right. So we've gone over some of the major features of Life share. A lot of people always ask me cool, but I'm not exactly sure where I would use that. I need some valid question. The first thing is is that the behavior that we recruit over the years is really to fire up Skype and do things the hard way. So what I would recommend is the same thing, I recommend that people say, how can I get better at Via code? My answer that is whenever you go to do something to be a code. If you reach for your

mouse, ask yourself can it be done with the keyboard shortcut answer is yes, I guarantee you the answer is yes, look it up. It's going to take you a minute look it up and then use that but you have to be deliberate but your brain is really really good at optimizing. So once it realizes that the keyboard shortcut is faster, it would it will be faults that same thing with live share you need to use it. You need to train your brain a little bit there a couple other use cases where this is helpful instructors. Okay, you can have up to 30% the pens at one time in read-only mode secret teaching

a class. You can give everybody a link and they can follow along with you right on their machine. Another one is new hire set up. Right? So if you have somebody that you're standing up easy to just live share and get in there and help them out directly. And of course the canonical use case is like get in and put a picture of my face with a I don't know. What is that sign called in the toolbar my cut. I still wonder how she did that doesn't make sense. Does he work? Arielle yes, it was supposed to picture my face.

All right, so that being said let's play a game. Let me come out here to the web. Just go to AKA. Ms. And let's do a new live show session here. So we'll start a collaboration session. And then let's create a new link here. Let's put it here and the vanity name will be what? What's a Boston winter Boston Station, Boston, Boston? Make that link active how it works. All right. So now you can go to AKA. Ms. Boston. Nobody can see this. Hey there, and if you do that. it should bring you over here

into my life share session should You make sure that works Yep. Looks like it. and the first four people That join my last year session get an open-source ninja sloth. Now. These are Priceless. Let me tell you why Microsoft thought it would be a great idea to have when we have Tony Dan. Who else did I miss someone? Were there two people before the state reject Dan reject Tony Alexander Alex, you can't compete Alex. Oh, man, there's too many. Alex and Ed Alex Ed Dan and Tony

Alright, so we got one in just lost for all of you here. Ninja floss is we're not supposed to give these out anymore because. Because they had this idea that that they would make fun of we would make fun of ourselves, you know, because Microsoft is so slow to open source that we would like to sleep until somebody marketing would like we should be self-deprecating and make his floss and then but it's like that is the worst idea ever. What are you trying to tell people that like are clouded flow? So we're not supposed to do this out

anymore, but I don't listen to instructions there for people now have Ninja sauce. That is all I've got for you today. There are more features envious. I share that you can check out and explore it for yourself. If you have any questions, or just want to chat, I will be up here are some. Thank you so much for going.

Cackle comments for the website

Buy this talk

Access to the talk “VS Live Share Can Do That?”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “jsMobileConf 2018”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

November 9 - 17, 2020
Online
50
27
future of ux, behavioral science, design engineering, design systems, design thinking process, new product, partnership, product design, the global experience summit 2020, ux research

Similar talks

Brandon Satrom
Director of Developer Relations at Particle
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Ignacio Fuentes
Solutions Architect at AWS
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Tara Manicsic
Angular Developer Experience Engineer at Netlify
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video
Access to the talk “VS Live Share Can Do That?”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
868 conferences
35378 speakers
13487 hours of content