RONGXIN LIU: Welcome back, everyone.
So for this session, we're going to talk about VS Code in the cloud with GitHub
Codespaces.
And my name is Rongxin Lu, and I'm the presenter at CS50.
So before we talk about what are VS Code in Codespace,
let's just briefly introduce what's Visual Studio Code.
Many of you are probably already using it.
Visual Studio Code itself is a pretty popular source code editor
available on many platforms, such as Linux, MacOS, and Windows.
So Codespaces.
So then, what is Codespaces?
Codespaces is a VS Code Code editor backed by Linux virtual machine
running on Microsoft Azure services and maintained and managed by GitHub.
So Codespaces has the full power of a VS Code Code editor.
So simply put, you can just think of it as VS Code running in the cloud.
So Visual Studio Code for CS50 is, then, a web app at code.cs50.io.
If you want to check it out, the link's here.
It's an adaptation of Codespaces for students and teachers.
The goal to create VS Code for CS50 is to standardize all the programming
environments so that teachers, students, they
are all running in the same IDE with the exact same programming environment.
So within the browser, it's just a full-fledged VS Code editor, including
a graphical File Explorer on the left, a code editor in the top,
and then terminal on below.
The terminal is actually connected to a Docker container
running our own CS50 Codespace image.
We customized this Docker image so that it pre-installs
all the necessary software packages, such as CS50 C library, Python library,
SQLite, HTTP server, Flask, and all that package
that a student would need to accomplish their problem set.
So we think this is crucial for students and teachers
because, especially for beginners, they don't
need to worry about configuring all this on their own,
troubleshooting on their end.
They could just open the browser, connect it to Codespace,
and dive right into the problem set.
And for students who are already familiar or using VS Code editor,
they could also connect to their Codespace container right
from the VS Code editor.
And the experience is just seamless.
So now let's talk about what a Codespace container is,
what's happening underneath the hood, how this all happened.
So when students visit code.cs50.io, when they click on that button, what's
happening underneath the hood is, we will create a devcontainer.json
file, which is a configuration file we place in the repository
because to launch a codespace, it requires a backing GitHub repository.
So this is the devcontainer.json file we are talking about.
As you can see, for example, this is one of the student's Codespaces' backing
repository.
For example, this is my test account.
And as you can see, there's a devcontainer.json placed right there.
This file describes the resources that the codespace would need--
for example, what Docker image to use, what editor
settings we would like to apply, and what
extension we want to pre-install for the Codespaces, and what kind of command
we want to run after the container is created.
And this is the four main thing we care when
we create this codespace container.
Here is just an example, like a shortened version,
of our devcontainer.json file.
It defines the CS50 codespace container.
As you can see, there's an extension attribute.
For example, we specify we would like to install a dock
debugger for our codespace container.
We would like to also install C+ tools, Python,
or other extension that the codespace container would need.
In the image attribute, we specify we would
like to use the CS50 codespace Docker image as the base image
for the container.
And it will also specify what kind of command we would like to run,
what kind of script we want to run after the container is started,
and what kind of editor settings.
And I want to point out the settings attribute specifically.
So as you know the VS Code editor comes with many powerful features.
But lots of those features, we think it's not suitable for early beginners
to use-- for example, code completion, because we
want students to build up their own muscle memory to write the code.
So we don't want those kind of settings enabled by default for students,
so we will actually disable them.
There are many, many more settings we will set in CS50 codespace
so the student will not be overwhelmed by the editor.
So now, once the student clicks on Log in via GitHub, the button,
there will be greeted by this screen.
So all this Linux provisioning is happening underneath the hood--
all the compute resources, all the image pulling, extracting happening.
So for a new student using a codespace, it usually
takes about two minutes for the codespace
to start, mainly because we need to pull the image and extract it.
So we hope we could improve this build time in the future.
But right now, this is the case when the user first using the codespace.
But after the codespace is built and when student reconnects to it,
it should take about 30 seconds to load.
Now let's just quickly navigate codespace.
Here is just an example of a student writing
a C program, compiling the source code, and then run it in the codespace.
Another example is student running Flask server.
For example, when they're doing their finance problems,
they will be able to run Flask server on their codespace.
And notice that there's a port step here,
because this is running on GitHub server,
so there's a port forwarding going on.
And what's neat about it is, they can change the visibility of the port.
For example, they can switch to-- so currently,
the student can only visit their own GitHub preview link.
But what if they want to share with other people--
for example, if they want to share with the TAs, teacher
to troubleshoot something?
They could switch the port to public so that they can
share with the TA and teachers freely.
Or they could even share with their friends and family
to showcase what they're building in codespace,
or what they're building with their assignment.
And this is just an example of that-- running finance problems on VS Code.
So new features are added via extensions.
So VS Code is famous for its extensibility model--
that people around the world can create extension and add functionality to it.
And we think this is perfect for our use case
as well, because we could also build our own extensions to further customize
our codespace and add functionality that we think are needed for students.
For example, we have our own sets of the extension that, on the surface,
it's just three buttons--
Launch GUI, Update Codespace, and Rebuild Codespace.
But underneath the hood, it actually brings in many crucial functionalities
to codespace.
For example, we bring debug50 to codespace,
and this is realized through the CS50 extension.
So when student runs debug50, it actually
dynamically generates a launch configuration file
for the VS Code editor.
For folks who have been using debugging on VS Code
before, if you launch a debugger on VS Code, you yourself,
you have to create a launch configuration
file, which is very overwhelming for a student-- even for me.
But this debug50 basically simplifies the entire configuration process
while just one command.
And this is achieved through the CS50 extension
because, basically, the debug50 program is actually
communicating with the extension, and the extension
will just call VS Code API to trigger a debug session.
Or, alternatively, if the student don't like debug50,
they could just use a dock debugger.
They can just talk to the debugger, and usually, the CS50 dock debugger
will respond with a very inspiring response,
so the student probably would get unstuck
pretty quickly if they check more.
People might be wondering how you can also develop your GUI-based program
on a web browser.
There's no display to connect to.
So to solve this problem, we actually use a software called noVNC.
So we bring it onto the codespace, and we also
grow our own plugins so that we can recreate the GUI experience even
in the web browser.
So again, there's a Launch GUI button on the C50 menu.
If we click on it, it will actually bring out another window or tab
that gives you a virtual display.
So this is just an example that I run a simple Python GUI-based program.
You can even run Turtle graphics on it.
It's actually animated on this separate browser window.
So I think by introducing this noVNC through the CS50 extension,
we add the missing puzzle.
You could now even write a GUI-based program even in a web browser.
We recently also developed another extension,
which its whole purpose is to install other extensions,
because in educational contexts, we really
don't want students to install all those fancy software
or packages or extensions that might potentially lead them
to the violating the academic honesty.
For example, there's many, many AI-driven code editing as extension
exists nowadays.
So it is possible the student can install this extension,
and it will finish their problem set right away for them.
So we don't want that to happen.
So we have this extension in place just to help
them don't navigate into that way.
Of course, with the VS Code Marketplace, you could even install more extension.
For example, you can specify the extension
you think you need for the student in the devcontainer.json
that I mentioned earlier.
You can further customize the codespace however you want.
Or, you can write your own extension and publish to marketplace,
and it will be available for other people to use.
So for example, we currently have two simple extensions on the marketplace,
so everyone can also install and use, not just on CS50 Codespace.
For example, I got people saying, there is no presentation mode
in this CS50 codespace, which used to be on the CS50 IDE.
So we think that--
so I did a quick search.
There's this presentation mode extension, which I can just install.
And right away, my CS50 codespace has presentation mode.
Another great extension that I found--
which happened to be developed by one of our good friends on GitHub--
is this workspace layout.
What this extension does is, it allows you to pre-configure or predefine
the layout of your codespace.
For example, in a lab situation, you would want a student
to automatically have a walkthrough tutorial on the left,
code editor on the right, and then a terminal ready for the student to use.
That's exactly how we recreate the labs experience in codespace.
So in codespace, we bring labs back via the Workspace Layout extension.
For example, here is a Mario lab example.
You can see the workspace on the left, editor on the right.
It's very simple layout for a student.
But imagine, if you want to write a more complex lab--
for example, let's imagine there's a finance lab.
This requires maybe two editor windows open, maybe two terminals open, even,
or maybe pre-run some commands for the student.
For example, student always forgot to ask for the API key
when they are running the Flask server.
What if this lab environment would be able to create a server and then run--
export the API key automatically for student, and bring up the Flask server,
and then have another terminal which serves as a client for testing?
So in this way, we can further define a more sophisticated lab
session for student, and student can just dive right in.
And you'll notice, there's some of the code line even being highlighted.
That's actually automatically highlighted,
because it's preconfigured.
And the configuration actually looks something like this.
Again, it looks similar to the devcontainer.json file I mentioned.
It basically describes what layout you want, what code lines
you want to highlight for students when this lab's being brought out--
what terminal you want to create, how do you want to name it,
what command you want to run when the terminal is being created.
So I would say, on Codespace, the lab would
become more powerful in the future, which is not possible in the past.
Of course, teachers care about collaboration,
or if they want to code with the student or want to just check out.
Or students, when they're doing group projects,
they want to collaborate on each other.
Again, via extension, VS Code has this extension called Visual Studio Live
Share, which is you will be able to share your codespace with other people
but just clicking on the Live Share button.
And it will generate a link, and you can send this link out
to other codespace users.
And for example, the screen in dark theme, it's my other user.
So we will be able to collaborate each other on the same problem set.
And the terminals even in sync.
People will be able to see what other people are typing
in the terminal, that kind of thing.
And it also supports audio chat, text-based chat.
I would say experience is just more--
student we get a better collaboration experience
on this versus the previous generation of the CS50 IDE.
And of course, lastly, all the CS50 too is, of course, available
on CS50 Codespace.
We pre-install all these CS50-specific tools.
For example, you can still run style style50, chat50, submit50, or render50
to generate a PDF.
And that's all with VS Code in the cloud with GitHub Codespaces.
Thank you.