GitHub, Travis CI – Lecture 9 – CS50’s Web Programming with Python and JavaScript

[MUSIC PLAYING] BRIAN YU: Hi everyone. Welcome back to Web Programming
with Python and JavaScript. Today we’re joined by some special
guests from GitHub and Travis, which you’ll recall
we’ve been using in order to do version control and CI and CD. And they’ll be here today to continue
those conversations about what we can use version control and CI and CD for. And so first up, we
have John from GitHub who has joined us today to talk to us
about how we can use GitHub in order to work on our web applications. JOHN BRITTON: I’m looking forward
to spending some time with you, building some cool features. So just an overview of what
we’re going to do today, I’m going to walk through
the development flow that we use at GitHub to
work on web applications. So we’re primarily a software
as a service company. We build web apps. So I’m going to walk you through what
a typical day would look like for me in working on some Ruby on
Rails code for GitHub Classroom. So GitHub Classroom,
as you probably know, is an application for
teachers and for students to use GitHub for learning how to code. And I think you’re using it in
CS50 already, or in this course. So yeah, let’s get started. The first thing that I’m going
to do is just hop into GitHub and go to the repository. This is the GitHub Classroom repository. So it’s an open source
code, Ruby on Rails app. You can see there’s different
stuff going on here. You can watch it. There’s a bunch of stars. All the code is down here. And then you can check out the Read Me. If you’re interested in developing,
getting involved in open source, I chose this project because
it is an open source project. I’m a maintainer on this project. And if you’re interested, you can
send a pull request, open issues, and I’ll be able interact with you. Also, it’s great because
it’s open source, I can easily use it as an example here. This code powers a website, GitHub
Classroom, which, if we log out here, is just a tool for creating
programming exercises and distributing them to
students, or people in your course to do coding exercises on GitHub. So what we’re going to
do is we’re going to walk through the process of developing a
feature using Git, making a branch, running our unit tests,
sharing with our peers, getting feedback via a pull
request, deploying to production, and also doing something that
we call feature flipping, which is an approach to bringing out features
to a live production application and slowly rolling them out
over time or to specific people. So the first thing that we need to do– and you can kind of
follow along with this. I’m probably going to move
too fast for you to keep up, but I want this to be kind
of a tutorial like what you could do on your own time. So the first thing to do here is in the
top right-hand corner of the repository there’s a Fork button. And if you go and
click that, it will let you create a copy of the repository
in your personal account. I’ve already done that, so if I go to
my browser and just type in my username here, you’ll see that I have a fork. It says forked from education classroom. So this is the public open
source main repository. And I have a copy of this repository
in my personal GitHub account. Then what you would do from there is
go to this Clone button right here and click on that, and just grab the
URL and hop over to your terminal. In your terminal, you would do
git clone and paste in that URL. So now you can get a copy of the
repository on your local machine with all the code for the app so you
can run it locally and get started. I’ve already cloned it, just
for the speed of this demo. So if I move into my
source repository location, we can go ahead and run git status. And you can see that I have the
master branch, everything is working. And if you want to look
at the files, there’s all these files and gems
and cool stuff in here. We follow a pattern on our
repositories of scripting everything. So we want it to be, for a new
contributor coming to our project, really easy to set up. So within the project, there’s actually
this file in the Scripts directory. So in here, we’ve got script. And inside there, we have
a file called bootstrap. You run that and it will just
set up your entire machine. The only prerequisite for this
app is to have Docker installed. So you install Docker on your
machine, you run script bootstrap, and you should be off to the
races to get this running locally. In my case, I’m just going to
go ahead and run script server. So after you’ve set everything
up, you launch the server. You can see Docker is booting
up the different services and different containers. And then if things go well, we’ll
have a locally running version of the application. Takes just a moment. So there we go. It says it’s done. It’s starting the Docker services. Connection succeeded. And if we switch over to our browser– I’ll put this over here,
put the browser over here– we can do HTTP localhost 5000. Once that finishes loading up. You can see the different services
running and putting out their output. And then the Rail server is running. Now it’s loading. Great. So we have a locally running
copy of the application. Doesn’t look like much right here. It’s just the landing page. So we go ahead and sign in
and just see how it works. You can see a lot of stuff happening
in the background in my console, but basically what’s happening is
it’s connecting to my GitHub account, and it’s logging me in as my user
on GitHub on this application. And it shows– this is kind
of what the teacher sees when they’re using GitHub Classroom. It’s kind of overview
of all their classrooms. It shows them what students they have,
what assignments they’ve created, who submitted what when. And we’re just going to add
a really simple feature. We’re going to go ahead and add a link
to Harvard CS50 in the navigation. So we’re not going to do
any actual programming. We’re just going to add
a little bit of HTML as a sample of how this process works. Now, once we dive into the code,
we’re going to use a feature branch development strategy. So at GitHub, and commonly on teams
that work on software as a service web applications, it’s very common to
take your project, make a branch, do a little bit of development off to
the side just on one specific feature, and then merge it back
into master, where the master branch, the main line
of development for your project, represents production. That’s what we do on GitHub Classroom. The master branch is
what’s in production. We do a single feature branch, and we
go off to the side and we do some work, and then we merge it back in
and we deploy it right away. So this is the idea of
continuous deployment. We can deploy
hundreds of times a day. We use the same flow on,
but I use this as the example because it’s open source. A different way of doing this is
kind of release-based development. And I think this is really
common in desktop applications or any kind of software that goes
in a package and is shipped out. Something you might
see, like version 1.0, version 2.0, version
3.0 of the software. And generally what
happens in those cases is you have a main line of development. You branch off for a new release. And you’ll say, this is the 1.0 branch. And your developers will be just putting
lots of stuff into the 1.0 branch. And eventually, that 1.0 branch
might get merged back into master. But in the meantime, there
could be a 1.1 branch started so that you can simultaneously
be working on the upcoming release, and like maybe one release down
the road for six months later. But in our case, I’m going to focus just
on this feature branch development mode where we just make one
branch for each feature or one branch for each bug report, and
we merge that in and just kind of keep going. So I’m going to open
up another terminal, and you’ll see that I have my
repository clone down locally. On the right-hand side
of my terminal, that just says what branch I’m on and the
current status of my repository if I ran git status. So every time I do something,
that will automatically update. And the first step here is
to get onto another branch. We need to make a branch
to work on the side. So we’ll use the
command git checkout -b. git checkout allows you to select
a branch and make it active, and the -b flag lets you create
the branch at the same time. So I’ll just call this Harvard. I’ll make the branch. You’ll notice on the
right-hand side, it’s updated. I’m on the Harvard branch. The next thing that I’m going to
do here is open up my text editor. So I’m using Atom, which
is GitHub’s text editor. And I’m going to open up
a file called header.html. So this is on every page of– let’s see here. On every page of the site,
you’ll see we have this header. And it has like a GitHub Education
link, a link to our forums, a link to some video tutorials,
different stuff up here. And all of this is
contained in this file. So I’m going to make a change that. What I’m going to do is just
copy this GitHub Education link, and I’m going to just paste another
copy of it and save it and refresh. And so now you see I
have the link twice. We’re editing the local
development environment. I’m going to go ahead
and call this Harvard, and then I’m going to
link to Now obviously, this isn’t a features
that we really want in the app, but you can imagine that I’m making some
new feature, like the ability to grade assignments, or the ability to invite
people, or different kinds of things. The important part here is that
we’re doing some kind of development on the app in its branch on the side,
and that we can discuss it and share it with people on GitHub. So I go ahead and save that. And the next thing that I’m going
to do is go back to my terminal and do git status. git status, I know you’ve covered
some of Git in this course already, but git status, just as
a refresher, tells you what’s going on in your working
directory and in your staging area, and what kind of the
next thing you should do. So it gives you some pointers. It says, right here, use git add file
to update what will be committed. So what we need to do here
is we need to use git add, and then app views shared
header partial dot html dot erb. So what this is saying is I
want to put this file that I’ve modified into my
staging area and prepare it to be committed as a new commit in
my repository on the Harvard branch. So I do that. git status reports that it’s modified. And then the last step
here is to do git commit. When you commit, you include a message. And I’ll say, add a link to Harvard. I should probably check and make
sure that the link actually works. If I click it, it does, in
fact, take us to Harvard. All right, so now we’ve made our first
commit on this new feature development that we’re doing. And I want to show you a little bit
about how to switch back and forth. So the first thing we
did, we made a branch. We moved over to that branch. We made it active. We can, at the same time,
use the command git checkout and specify a branch master to go
back to our main line of development. This is the thing that’s currently
in production that everybody’s using. I do that and I refresh this page, and
you’ll see that the link to Harvard disappeared. It’s not on this branch. If I go git checkout Harvard and I
refresh, it’s now on this branch. And this is pretty accurate as to
how I would be working normally. I would make a branch, do some stuff,
run in development, see how it’s going, and just keep checking things
as I go until I get to the point where I’m like, yes,
this is the thing I want. I want to push it out to production. It works. Now I need to get code review and
run some unit tests to make sure that what I’m doing is right. So again, we started by
forking the repository and we had it in our own account. And so what I’m going to do is
I’m going to push it to my copy. I’m not going to push it to
the main GitHub Education copy. I’m going to push it to my copy. So what I’ll do is say git
push johndbritton harvard. And in this case, johndbritton
is the name of my remote that represents the repository,
my fork of the repository. So it’s here. It’s this one. So that’s what that means. So I’m going to push to that. And I’m going to push to
the branch called Harvard. So this branch, I’m going to push it to
a branch with the same name remotely. So you can see it pushes the code
up to GitHub on my repository. And if I refresh the page
on GitHub, you’ll see that– let’s see here. If I go to the homepage. There you go. This yellow box says that
less than a minute ago, I pushed a branch called Harvard to
GitHub on my personal GitHub repository. And I can click this button
here, Compare and Pull Request. So I’ll do that. What a pull request does is it lets you
start a conversation about some code, about some changes that you made. So in this case, I’m just going to
say I want to add a link to Harvard. And up at the top,
because this is a fork, you’ll see it saying, I want to merge
from my version of the repository on the Harvard branch to GitHub
Education, the official version, on the master branch. I’m going to change this
just to be my own version. So I’m going to merge my Harvard branch
into my own version’s master branch, just because I don’t actually want to
deploy this to our production instance. So I’m going to add a link to
Harvard, like that, and just say, this is a simple example of
a feature branch development for the Harvard course. And I can just say, create pull request. What happens is it
automatically starts a build. So it goes off to Travis and
it says, John made this branch. He made some new code. I want you to run all the tests. So what does that mean? Let’s look at our test. While this is kind of doing
some stuff in the background, I’m going to hop over to my editor. And if we go here and go to spec. So in here, we have– let’s zoom in. Within our repository of this folder– So it’s a Rails application. We’re using RSpec. All of our specifications, all of our
unit tests are within this one folder called spec. We have all these
different kinds of specs. We have controller specs. We have helpers. We have background job specs. We have model specs, service specs. And each one of these things–
so if I say, for example, I’ll go into my model specs. And I’ll go in here and I’ll check
like the deadline specification. What this does is makes
sure that when a teacher sets a deadline that we close down
assignment submission on the deadline. And if somebody tries to
submit, it gives an error. So there’s all these different checks. In our case, our change was very minor. We just added a visual change. But we could have
accidentally introduced some kind of bug, some kind of error. And so by running the tests, we’re able
to guarantee that nothing has changed, nothing has broken. Nothing important has broken
anyways, because we have tests for everything that’s important. So there’s hundreds and
hundreds of these tests. They’re all running. And if I go in here and click on the
Travis CI link, and I go to our build, it’s building on different
versions of Ruby. So I’ll open up this one. And you can kind of see it’s setting
all of our environment variables, it’s installing all kinds of– all of our different– oops. There we go. Yeah, what it actually
says here– we’re not going to go through every one
of these tests, obviously. But it’s running all the tests. And then you can see as they
run that they’re passing. It’s kind of live updating. So this takes a couple of minutes. Once that’s done, I’ll get a green
status update on my repository on the pull request saying that, yes,
in fact, this did pass all the tests, so you should feel very confident
about deploying this to production. In the meantime, what would commonly
happen is my coworkers would come in, or other people on the
open source project would come in and review the changes. In our case, the change is rather
trivial, so I’ll just come in here and just say, this looks great. And I will zoom in on that. This looks great, let’s ship it. Add a comment. And so we can collaborate on that. What would be pretty
common to see here is say you did something that
might be a security concern. Somebody from your security team
could come in and give comments about what you need to check, make sure
that you’re following best practices, kind of give you a second set of
eyes so that you end up in a position where you’re writing
the best code you can. It’s going to take a couple of minutes
for this to run, so I want to jump to– jump back to the code. So we’re going to cover a few things. We did branches. We made a pull request. We’re doing automated build. We got some review. And then we’re going to
talk about deploying. So every setup is different, how
you’re going to deploy your project. In our case, we use our chat tool. So we have a shared chat,
kind of chat room thing. And every time we make a change, those
changes get propagated to our chat tool as kind of a notification. And then we can run a command
in our chat client that says– we have a bot. His name’s Hubot. And we tell Hubot, Hubot, go deploy
GitHub Classroom to production. And we can even specify,
go deploy this branch of GitHub Classroom to production. So I could say, for example– where is my– here we go. So for example, in here
I could say, for example, deploy classroom/harvard to production. I’m not going to run this
right now, but essentially, if I wanted to deploy
this out to production, that’s exactly what I would do. And as you can see from before, I
deployed classroom, the master branch. Hubot replied to me
that I was deploying. I got a success option. And then it said it was finished. Let’s check in on Travis. OK, our build– wait,
this is not the right one. We had one build fail
and one build pass. I don’t know why we failed. This one will restart. All right, so anyway, we go back to– where did our thing go? Oh, I have to press the back button. I lost my tab. So if we go back here, anyway,
this pull request build passed, so let’s check that one out. So ultimately, we ran all of the tests. We’ve seen them all passing here. So I feel pretty
confident that the change I made by adding a link to the
navigation, I didn’t break anything. So I could go ahead and merge
this in, into the master branch, and be totally happy. However, this is a common path to take
when you’re doing smaller features. You build it. You test it. You make sure it works. You get code review. You put it out there. But what happens when you’re
doing like a really big feature? If you’re doing
release-based development, you might lump all of those changes
together into one big release and say, this is the new release that
supports this new thing. But when you’re doing continuous
deployment with a web application, you can’t really do that. Diverging from the production
version is your enemy. The longer you have a branch open where
you’re making changes, making changes, making changes, and not
re-integrating that back to the main line of
development, the harder you’re making your life for the future. So what we like to do
is use feature toggles. So we’ll create kind of
a break, a logical break in the code, where you can choose two
code paths based on certain variables. And that allows us to deploy new
features to the public production version of our website or our app
without impacting all of our users immediately. So practically speaking,
what does this mean? This means that I want to be able
to deploy this new feature that links to Harvard to production, but
I want it to be disabled by default. So I want nobody to see it. I just want that code to be
in production and ready to go whenever I need it. And I want to be able to enable
it for one person at a time. So I want to be able say, when
John accesses his web page, then it should show the Harvard link. But when anybody else
accesses it, it should not. So that’s called a
feature toggle, and I’m going to show you how we build those
and deploy them into production. So I’ll go back to my header. And it’s pretty straightforward. We have one line here, this line
number 7, which links out to Harvard. What we want to do is add
a conditional around it. The conditional should be
based off of the current user, and it should be based off of if the
Harvard feature is enabled or not enabled. So the first thing
I’m going to do is I’m going to use some Ruby syntax
to say, I’m writing logic code. And I will say, if
current_user.feature_enabled question mark, and then I’ll call
the feature Harvard. Simple IF statement. If the feature’s enabled,
I want to link to Harvard. And that’s it. And then I just say end
to end the statement. If the feature’s not
enabled, do nothing. OK, so I’ll save that. Now if I go back to my browser
and go to my local copy, you can tell that this is
my local copy, because it’s got this red bar across the top, which
is kind of development mode for us. And you can see the
Harvard link is here. If I refresh this page, it’s gone, OK? That’s because the
feature is not enabled. Up here in the top, there’s
this Site Admin button. This links into a backend for
developers who work on this app. So if you’re a developer working on
the open source version of this app, you would have access to this
through your copy of the app. Or if you were a GitHub staff employee
working on the production version, you’d be able to access this as well. Within this interface, we link
out to this thing called Features. And Features, this tool, is actually
an open source Ruby gem called Flipper. So it’s GitHub Flipper. So here’s the gem. If you’re interested in building
apps that have feature flippers and you’re using Rails, this is
definitely a thing to check out. It’s probably too in-depth for me
to go into all of how this works, but we didn’t build everything that
I’m showing you uniquely for this app. Every Rails app that we use has the
ability to do this feature flipper thing through a third party library. In JavaScript, there are
other libraries that do this. Different frameworks have different
libraries for this kind of thing. So it’s a common pattern in deploying
production web applications. And also desktop applications. We do this in some of
our desktop apps as well. So anyway, I’ll click
on the Features toggle. And it says there are no features. You need to add a feature. So I’ll go in here
and click Add Feature, and I’ll call it Harvard right here. And then click Add Feature. And now I have this nice interface that
shows me ways to enable the feature. I can enable the feature
for a percentage of actors. That means if you have 100 users,
enable it for 1 in every 100, 2 out of every 100. What’s interesting about
the percentage of actors is that that is based
off of the fact that when a feature is enabled for a given
user, it stays enabled for that user all the time. It’s very important that if somebody
goes your website and the feature’s enabled on one page and they navigate to
the next page, it shouldn’t disappear. So you can think about this as
taking a numerical ID for the user and doing like mod something. And if it has a remainder
or not, it’s enabled. So for a given user, it will always
be enabled or not be enabled. The other option is percentage of time. This allows the feature
to be enabled, basically, for every request, 1 request out of 100. So for the same user, it
might be enabled sometimes. It might not be. It just depends on what
you’re implementing. And then lastly, there’s individual
groups and individual actors. So I can enable a feature just for
one user or just for one group. Since this is my development
environment, I know my user ID is 1. So I’m just going to
table this for user 1. I’ll just enter this in here. Click Add Actor, and now the
feature is partially enabled. You can see it’s yellow. And if I switch back– where did my thing go? Oh, I have to go back here. If I switch back to my local
host and load the page, you’ll see that now the
Harvard link is here. Now, I’ll open up a separate
window, incognito window, and I’ll go localhost 5000. And this time I log in
as a different user. Uh-oh, what’d I do? Oh, it was disable this feature. Let’s do this. I’ll log in as a different user. And then in this case, I just have
a student, like a test account. I’ll authorize this. So now I’m logged in in
this browser window, which has the gray bar, as a different user. Go back to my code and fix that. And for this user, you’ll notice
that the Harvard link is not enabled. But for this user, the
Harvard link is enabled. So I basically have a
feature toggle in there that allows me to specifically
say which users get what. Why is this useful? This can be very useful if you do– when you’re making new features, you
can enable it just for your friends, or you can enable it just for
people who work at your company, or you can enable it
just for beta testers. So what this means is
like the problem we were trying to solve before
is that you can diverge from your main line of development,
and the longer you stay diverging and you keep spreading apart, the harder
it is to reintegrate your code later. This means that you can
add a feature toggle, put in an unfinished
feature, or a beta feature, merge it in, and every time you improve
it, just make a new pull request, a new branch, doing it bit by bit by
bit, and you’re always re-integrated. So you never have this big
scary day where you say, we made this huge new
feature for the app. Now we have to integrate
it with all the other work all the other developers
have been doing. It’s been integrated all along,
so now you just click a button and it’s enabled. Then once you’re happy with the feature
and you know it’s been working well, you can delete the code that
lets you choose two paths and let it just have one path. So if we go back to our feature
toggle board and click on Harvard, I’ll disable it for my user. And instead, I will
enable it 50% of the time. So if I go to my private
user and I refresh, it’s not there the first request. Not there the second request. Oh, there it is. Now you see it showed up right here. If I refresh it again
it might disappear. Eventually comes back. So 50% of the requests. And that’s true across all users. So if I go to my normal account,
it would do that as well. Put it to zero. And then ultimately, you
can just click Enable here and it will enable for everybody. All the time, enabled for everyone. So now we’re able to create a feature
flag, push it out to production, and see it in action. So here we go. In my case, what I want
to do is look at the code. We’re happy with this feature toggle. Then we say git status. We have modified this file with a
git add app views shared header. And then git commit, which says enable
harvard feature behind a feature flag. All right, and lastly, I’ll say
get push johndbritton harvard. So this will push it up to my
forked copy of the repository. And that will run the builds again. It’ll run all the unit tests
again, make sure it’s good. Now, I’m also going to
go ahead and push this. I’m not going to create a pull request
for this on the main public project, but I do want to show
you how deploying works. So what I’m going to do
is I’m going to say git– I want to do this in here. I need to add one more thing. If current user and. So I need this line, because
you saw the error I got before. Because I was logged out,
I wasn’t a current user, so I caused the app to crash. I don’t want to cause our
production app to crash, so I’m going to add this if current
user and if the feature is enabled, then do this thing. Otherwise, if there’s nobody
logged in, don’t do anything, or if the feature’s not
enabled, don’t do anything. So git add– what’s it called? git status, git add app
views shared header, git commit -m, check for
current user, git push harvard. And I’m also going to
git push origin harvard. So in this case, I’m actually
going to push the change up to the real production
application’s repository. And then what will happen is if I
go in here, you’ll see in my chat– so this is really important to
the way GitHub works and the way we work with teams. You can see I created the branch and
I got a notification in the chat room. All of the other people on my
team also got this notification. And they’ll see it in the chat room. What’s interesting is like I’m doing
all this work on my command line. You can all watch and you can
see because I’m screen sharing. But my coworkers can’t see any
of the commands I’m running. The reason we have all of this stuff
publish out to our chat channel is because it gives
visibility into what commands we’re running to the entire group. So by using Hubot and
using a chat tool, we’re able to have a shared command
line where people can see what’s happening in the deployment process. So in our chat tool, I can run
CI build classroom harvard. And what that’s going to do is it’s
going to say, go to my CI tool. Uh-oh. That’s not good. Well, it runs automatically as well. education classroom. If I go here, now you’ll
notice this is not the forked version of the repository. This is the actual
version of the repository. I can go to this branch and
I’ll see the Harvard branch. And you can see the build
is pending on Travis. So I can click this and
see what’s happening. Once this build finishes, I’ll be
able to actually deploy this out to production and try it out. So while this is building,
does anybody in the audience have any questions while
we wait for this for a sec? Yes, in the back. AUDIENCE: When you said your command
line was pushed out to the chat, I didn’t see what you meant
by the command line, what– JOHN BRITTON: Yeah, so the
question was about my command line being in the chat tool. It’s actually not that the
command line is in the chat tool, but what I wanted to show is that
while I was working on my command line, all my git commands,
they were private to me. Nobody could see them. But when it comes to deploying
a product, deploying a service, it’s important for the team to be in
communication and know what’s going on. So we don’t actually deploy
from our command line. We deploy from chat. So I’m about to demonstrate that
as soon as the build’s finished, but I’ll be able to
go into our chat room. Actually, I could do it with the
master branch while this builds. So I can go to our chat
tool and I can say– OK, you can see the
build was successful. But I can say, for example,
deploy classroom/master. So I’m going to deploy the master
branch of my app to production. And so now when I do
this, everybody on my team can see that I’m currently
doing deployment. Nobody else can deploy. The deploy queue is locked, and you
can see that my deployment is done. It went out to production. I literally just deployed the app
to production as we were talking. But everybody else on the team
can see that I’m doing this. Does that answer your question? AUDIENCE: Yes. And how would you set up– were
those hooks that were set up? JOHN BRITTON: Yeah, so this
is all set up via Hubot. So it’s an open source tool you could
use to kind of set up your own thing. There’s also this
thing called the GitHub app, which it’s a Slack integration. You could enable this
for your Slack, which is giving us all these notifications. All right, so now we can see right here
it says, Travis CI build successful, education/classroom – ref harvard. So this is the branch that I– this Harvard branch is
the one that I just made. So we can actually deploy it now. So I’m going to go ahead
and deploy it to production. So deploy classroom/harvard. Now, hopefully I don’t
break the whole thing. It’s deploying. And then once it’s
finished, I can actually go to the public GitHub Classroom
website and take a look. Presumably nothing has changed
because we didn’t actually change anything in the– we didn’t turn the feature toggle on. So we just put some code
out there that’s now integrated with our codebase,
but it’s not publicly– it’s not running for anybody. And then we’ll go and enable it
and kind of walk through the steps. Takes the moment. So in the meantime, while it’s doing
that, I’ll kind of walk through– oh, it’s finished. There we go. John’s production deployment
of Harvard is done. Great, took 80 seconds. So I can say App is running. It’s not broken. I can sign in. I can see my normal classroom. There’s no link about any of this stuff. Because I’m a staff member, I
can go in here and click on this and go to the features thing. You can see we have some
real features in here about deadlines, student identifiers,
different kinds of features we’ve been adding recently. I can add a feature called Harvard
and I can enable it for user 1. And now if I go to, you’ll see– did I break it? Maybe I’m not user 1. We’ll enable it for staff instead. Oh, no. The live demo failed
for this, but I will– you should believe me, it does work. We saw it work in development. So I’m just going to go ahead
and do deploy classroom/master and put things back how they were. So that unlocked production. It redeployed the
master branch out there. And this is actually like
the demo didn’t work, but it’s a very similar experience
to what would normally happen. I would test it on my local environment. It would work. I’d have my test run. The build would succeed. I would deploy it. I would go out and test it,
make sure nothing is broken. If something’s broken,
I redeploy master. I go back into my
development environment and try and figure out what’s wrong. I don’t know what I did wrong, but
I’m not going to debug that right now. So that’s basically
the standard flow going from just taking an open source project
or a project working on with coworkers, doing a feature branching
model, committing that stuff, sending it up to GitHub,
and then deploying it. I think what we didn’t do in the case
of deploying to production, which I just wanted to reduce the amount
of noise for my collaborators, was normally what I would have done is
made a pull request in the production repo, had a discussion
about the feature, but then that would create
noise for the hundreds of people who are on that repository. So I just kind of went around
that for demo purposes. But like we did on my fork,
we can do a whole conversation about what the features
were and how it worked. So that’s what I had for that stuff. I wanted to go and
offer up the opportunity for some questions around this flow,
why we might choose certain things. So I’d kind of throw it out to you all. No takers? There we go. AUDIENCE: Can you recommend
a good resource for– I see there’s a lot of components
in here, a lot of setup. JOHN BRITTON: Yeah. AUDIENCE: [INAUDIBLE] all of this– JOHN BRITTON: Like the end to end thing? AUDIENCE: Yeah, is there
like a book or does GitHub– JOHN BRITTON: So I
don’t know about a book. I would point to Travis, which
you’re going to hear about next, as kind of the go-to place. I mean, there’s other tools. I like Travis, but there’s
other tools out there. But go to them and you can basically
see how to set all this stuff up. What’s cool about it, too, is I’ll just
show you my Travis CI account for this. So I can go to my Travis
CI account and basically I can list all of my GitHub repositories. And I just click a checkbox and
it just automatically works. If you have any of the
standard frameworks, so say you’re using a
Rails app, or a Node app, or basically every language framework
combo has a testing system, if you use the standard thing, all you need
to do is have one point of entry to run the tests. So in our case, we do
everything in scripts. And we have script CI build. And that’s just– if you have that
one file that will run the test, then Travis can figure
everything out automatically. And you don’t have to
configure GitHub at all. You just log in to Travis,
you click the button, and Travis configures GitHub for you. And I think that’s the best way to get
started is like go through their guides on CI/CD. There’s also– and I guess
I should plug this as well– So if you want to be a bit more
sophisticated, I know a lot of teachers are using this stuff for
customizing the way that they have workflows for their students and stuff. But if you want to use this for your own
projects and you want to customize it, you can just go to Check out the API docs, and specifically
this section here on the webhooks. What that does is it
gives you basically a way to listen to events happening on and respond to them. So the most common event that
people listen to is the push event. Anytime somebody pushes
code to GitHub, GitHub will send a web request
to a URL of your choosing and notify them of what’s changed. And then you can build an integration. It does all kinds of stuff. So that’s like if you
want to get more custom, I would start on If you want to have
just standard thing, go to like Travis or another
one of those services. And I should repeat
the question, I guess. Or is– the question
that that answered was, is there a resource
where I can get started? Yeah. AUDIENCE: Just trying to understand
your deployment flow right there. You are sending a message
from Slack to Hubot which is running some
kind of a script which is kicking off your test in
Travis and then deploying– JOHN BRITTON: Well, the
test happened first. So the question was, I want to
understand the deployment flow, like what are the steps
and what are the pieces? So first we write the code and
we get the code hosted on GitHub. Then when the code
gets pushed to GitHub, GitHub uses webhooks to trigger a build. That’s all automatic,
I don’t do anything. Once the build is finished, or
even before the build is finished, I can go into our chat channel. And that’s actually one
channel, education ops. It’s all about this education stuff. And I just say, period deploy
and the name of the app. And we have Hubot in the
room listening to commands. So any person who’s
authorized to use Hubot, if they type a command in the channel,
everybody can see it and Hubot sees it. And when Hubot sees it, that
triggers a flow for Hubot. Hubot doesn’t actually do the deploying. So this app in particular
is hosted on Heroku. So what Hubot does is it tells Heroku
to get this new version of the app and have it be deployed into
our production pipeline. So Hubot is kind of like a
little bit of glue there. And the part we need Hubot for is so
that we can do it in the chat room. I could do this without
being in the chat room. I could do it automatically
when I deploy. And in fact, if I made a
pull request with the changes and I just clicked Merge and I
didn’t talk to anybody about it, as long as the build passed, it
would get deployed to production automatically without
even talking to Hubot. When I said that you can actually deploy
before the build passes, what’ll happen is if you type in deploy the app name
before it passes, then what will happen is Hubot will wait
until the build passes. If the build fails, Hubot will
tell you, sorry your build failed, fix your problems. Or your build succeeded,
I’m deploying your app now. So it kind of always does that. Another kind of interesting
component about that whole flow is GitHub is getting
to be a larger company. There are a lot of engineers there. A lot of people working on There can be a limitation
on the number of people that be deploying at one time. So we’ve kind of
developed like a queuing system, where it’s like you get
in line for your deployment. So basically, GitHub is constantly
being deployed, like nonstop. Just deploy, deploy, deploy, deploy. Whenever the first deployment finishes,
Hubot notifies the next person and starts their deploy. And there’s just a whole process. They’re always getting out
there as fast as possible. Do we have any other
questions from folks? All right, well then I think that we
may be finished up a little bit early. But thank you very much. Do you want to come up? BRIAN YU: Yeah, thanks so much. JOHN BRITTON: Thank you. [APPLAUSE] BRIAN YU: We’ll go ahead and take
about a 5 to 10 minute break. And then when we come back, we’ll
have Anna from Travis talking to us. OK, welcome back. Next up we’re going to be talking
a little bit about Travis CI, which you may recall from last week when
we talked about testing in CI and CD for a bit. And so we have Anna
here from Travis, who’s here to speak with us about Travis CI. Turn it over to Anna. ANNA NAGY: Hi, I’m Anna. I’m a product manager and heading up
involved in our education initiative. So I’m here to talk about
continuous integration, which if you are involved in software
already, you certainly probably have come across this. And I hope to go into enough
detail that it’s useful. If you haven’t, we’re going
to start from the top. So I work at Travis CI. We are a leading continuous
integration platform. It’s essentially a tool
for software engineers to maintain quality and collaboration. We started in 2011 in open source,
moved to paid and enterprise over time. It’s entirely GitHub-based. So your GitHub repositories talk to
Travis if you would like them to. A bit of a side note. Microservices, Ruby Go,
Ember.js, it’s cool stuff. You can find us also on Also, we do have an education
program, just to plug it real quick, If you’re on the GitHub Education
pack, which you all should be if you have a dot edu, go sign up. We have an organization club. Contact us. And there was a question earlier,
there are a couple of docs down there for getting started,
kind of background and stuff. So all that stuff is there. But, it’ll
get you all there eventually. We also are involved in
other education initiatives, so through Rails Girls Summer of Code
have like a paid fellowship for women and non-binary engineers
getting started. So highly recommend. Some general stats about us. We are smaller than GitHub,
but it’s pretty cool. So right now, 101.3 million
repositories have built on Travis. About that many CI jobs, and
that much compute time per month. So what exactly is
happening in all of that? So to back up, why do you need CI? So imagine you have a project where
you have to implement some stuff. Maybe it’s homework. Maybe it’s a product you’re working on. You get this feature request. OK, we need to write this. You write it all at once. You try and fit it back in. And it always goes great,
everything merges, it’s fantastic. Generally there’s some
testing that needs to happen. Generally you end up with checks. Maybe you end up doing more and
more shorter and shorter components, especially if you have multiple
engineers working on a codebase together. Everyone’s changes happening
all at the same time is totally not a recipe for chaos. So this is where CI comes in. So continuous integration, integration
being like let’s get our changes in. Continuous being happening all the time. That said, as I go
through this talk, there’s a bit of phrase overloading here. So CI is both the process and the
concept of continuous integration, like the best practice of moving
stuff into the codebase over time, as well as like literally the tool. So when we say this project
has CI, they probably follow CI best practices
using a CI tool. So it’s a bit of conflated
terminology, but both refer to kind of the same thing. The biggest thing about CI that you
talked about last week is testing. So I’m going to talk from
an industry perspective. John Britton showed a little bit before. But testing. So code is tested, or it should be. If it’s not, please write tests. It helps. It’s a good idea. Or my favorite is the YOLO merge,
where you just sort of send it to master and hope. Also good. But all modern testing
language, in fact, even Fortran have testing frameworks. So use them. In JavaScript, there’s Jasmine,
Mocha, Jest, a bunch of others. Python has unit tests built
into the standard library, but there’s an interesting test runners. Nose test is one I’ve used. py.test is another. All sorts of good stuff. Many languages go, have tests built in. Ruby has RSpec. They all exist, so you
can go and find them. Also, look up Fortran. It’s kind of neat. So types of tests– you can look at it from
a few different angles. And I am going to compress
all of quality engineering into about five slides, so apologies to
any quality engineers in the audience. It’s a great spot if
you’re into automation, so your tests can go both into
automated or manual tests. I’m going talk about automated tests,
functional versus non-functional tests. Functional being like, we’re
going to test a function. Nonfunctional being like, reliability,
security, sort of operational things. So automated– the machine follows
a script that you’ve written or someone on your team has written. And you assert an expected result and
verify that the assertion is true. Sort of like a programmatic
version of checking a hypothesis, only unlike physical
and social sciences, we’re going to go back and change our
results until we get the hypothesis. Please don’t do that, except here. So we’re going to set like, oh,
this string, this output is true, we expect it to be true. It’s not true, I’m going to go
and fix my code until it is true. So we’re checking– we’ll
write tests beforehand or after– beforehand’s a
good idea to check that things are working the way they should. As a side note, manual tests,
this is literally someone manually going in and checking. Good idea to do it at
times, but CI is really concentrated on automated testing. Then functional tests also are broken
down into different categories. So the root word function here
is like programming functions. We’re going to test a function. So there are subcategories, unit tests,
integration tests, component tests, others too. This is a classic diagram I just
felt like I had to throw in there. You start with your unit tests. Fail fast on the unit tests. And then work your way up,
such that a component test tests like a package, a
module, a larger part. Integration test tests
how things work together. And end to end is like an entire flow. So if you’re writing a testing suite, a
good idea is to start with unit tests. Does this method work the way I expect? So examples. Here’s a method out of our front end. I will look at it later. It’s generating the build status badge. I’ll show it to you, but
literally, the build is passing. Let’s make this into a markdown thing
you can put into your GitHub read me. That’s our method. Here’s our test. In a great irony of
software engineering, the test is longer than the method. But it’s good. What it’s doing is saying,
OK, here’s the assertion. It generates a markdown image with a
particular string that looks like this. If this is changing, then we’re
going to fail for whatever reason. So if this test passes, we
haven’t broken anything. This is great. If it hasn’t, then maybe we
need to go back and take a look. Good things to test for,
just backing up in general. Things work the way
they should, like a user can see the things they are
supposed to be able to see. The string is generated the way we
want the string to be generated. Or things fail the way
they should be failing. A user can’t see the stuff they’re
not supposed to be able to see. That’s a good one to keep in
mind, because users should not be able to see admin
things and vise versa. So the idea with testing is stuff should
change only when you intend it to, and you update the tests accordingly. So if you write your
tests beforehand, this is a whole framework called
TDD, Test-Driven Development. Lots of folks use it. So that way you know
the code you are writing matches the output you
are expecting out of it. Just a general statement
is, it’s really important to keep in mind that unlike student
work, or unlike personal work even, software engineering
tools are for teams. So the testing is to help engineers keep
stuff from breaking things that impact other people, breaking production
in unexpected ways so that when the deployment goes, we don’t–
this side issue has happened. It can also function as
a kind of documentation. This is what I did. This is what this method
is supposed to do. These are the results we expect. And this is the stuff you can rely on. So if there is no documentation
in a repository, shake your head and go read the tests. So separating out– so after
we’ve gone through tests in– tests happen when we’re
doing a software build. So we’re going, I have this code. I’ve written it. I’ve written the tests. We’re going to then build this code,
compile it maybe, prepare it, and turn it out to the world. So this is just– the next section just
on builds and building. Any burning questions in the meantime? OK. So builds and building. Build can both be like a verb, like
build this source code into something. And this is really interesting, and
I’m going to skip over this a lot, but compiled versus
interpreted languages. So some languages need to be turned
into a source code that is executable. Others it’s less clear cut. So builds versus interpreter languages
may jump straight into testing. Sometimes there are
optimizations that happen first. This is some really cool
stuff in computer languages. This is also true. So builds can get rather long. This is the classic XKCD and I
felt like I had to include it. A build is also like the end result.
So the build from yesterday was broken, but today the build passed. That refers to all of the change
that happened between now and then. So we can say the build as the
end result of a build process. So we went through the 10 minute build
process, and then we have the build. It functions as a kind of audit log. So here you can see me going back
and forth with our technical writer, talking about– like this is actually a
documentation discussion in which, apparently, I had a really hard
time with the passive voice. So it was thought to look great. There, in specific, it’s highlighting
the GitHub status checks. So when we post to GitHub, we’ll
see both the positive status, like yes this passed, the
negative status, no this did not. And it functions as kind of like a
yes, this is what this commit did, this is with that commit did. GitHub is really nice
and gives this in our UI, but the general concept stays anyway
that builds are highlighted and you– the statuses are highlighted. You can see where it changed. And I think the last one
was a merge into master in which we also fixed a hyperlink. So why CI in general as entire
systems as opposed to like, why don’t I have a single machine that
just sort of we test on every so often? It’s to solve this problem. Hey, it works on my machine. It’s going to be fine. It’s always fine. And there are many different
flavors of this problem. So reproducibility. Standard environments mean we can
eliminate special customizations and hacks from influencing the results. So maybe you’ve installed
additional dependencies, maybe you have special scripts that
when you know one thing happens, go do the other thing. If someone else doesn’t have that, or
even if your production environment doesn’t have that, then what? Software is built on top of the entire
ecosystem of dependencies below it, so if those things
don’t exist, you might have a failure in production
that’s really hard to debug, because it works on my machine. It also helps people
check other people’s work. If we know the environment
is standardized, we have this clean installation, we know
the environment is standardized, oh, this build failed on this separate
machine, it must be the code or how we’re working with this
clean environment, which we can fix. As opposed to, say we’re
working on an individual laptop. Oh, let’s all crowd around
and try and figure it out and hope it works in production. So reproducibility is a
big deal around CI systems and why do we have external CI systems. Also just a shout out–
collaboration is really important. Because if we have these environments
that we sort of can trust, or at least can predict, people don’t
need access to the exact same things. So I can go and work from wherever. I can go and work from headquarters
in Berlin, or I can come back here, or whatever. Because we’re not necessarily looking
at the exact same installations, we have some reasonable,
predictable environments, other contributions can be included. Also, this is a big deal in
open source and corporations, because of this wide distribution. I also touched on it, really tidy
deploys are a big deal for CI. So a standard environment that looks
like the production environment, or even a standard environment that
we can configure the production environment to look
like, any flavor of that, it gives a better view of what will
happen when the code is merged in. You don’t actually want to test
on production most of the time. It’s one thing to feature flag. It’s another thing to do real
live tests on production. We would rather get our testing
environments as close to production as possible, as opposed to
just, say we have customers, hope that they don’t see the problem. It also helps, again, prevent
forgotten customizations. Oh, I had this machine. Before the last Mac update, I
installed this Ruby environment. This happened to me. I updated my operating
system, now it’s all gone. Thank goodness I have another– I’m not testing on my own machine. Otherwise that would have taken forever. We also see things like faster
development with CI systems. So this was a really interesting
study that we heard about, which is that CI both
improves confidence in the code in an application and
the pull request submitted to it. So people, when there is CI,
people feel better about the code they are maintaining and they
feel better about the pull requests they are receiving. So projects with CI will release about
twice as often and pull requests are accepted almost 2, but 1.6 hours
faster, which is a big deal both in open source– that means people
can contribute better– as well as in business. That means you can move things along
and people’s valuable time is– you can get more distance from it. There’s a link there. There are a lot of other interesting
studies on CI out there as well. My email is at the end of the slide. I would love to send links
later, but that’s a good one. Also, CI will then function as
kind of this automation hub. So I have this big, long
list here of coverage tool, of different things that will happen. Code coverage being like, how
much of our code is tested? You may or may not
want to test all of it. Some of it is illogical to test, but
some of it really should be tested. Other things, linting
does this following the best practices for syntax. Some languages will let you get away
with syntax that you shouldn’t, but it does make it harder to
maintain and harder to read. Language run times– does
this run on Python 2.7, does this run on Python 3.6,
does this run on Python 3.5? For libraries, this matters a lot. So I have a library of Python tests. Going to make sure this works. Everyone is using everything in Python
3-whatever, so I’m going to test that. I’m also going to
backport it and just make sure this runs on 2.7,
because maybe someone’s on it. So you can do a lot of that with CI. Then dependency management,
configuration management, these are all kind of, again,
the libraries you’re building on or the deployments you’re
doing, and various other things. I threw in some
documentation generation. There’s some really cool
frameworks for that. Demo generation, really
cool frameworks for that. So this is where we start hooking up CI
to CI, which we’ve talked about more. So CD being either
Continuous Delivery, this is ready to be deployed whenever,
or Continuous Deployment, this is deployed all
the time, GitHub style. One way or the other, you
need CI doing regular tests, because if we say every commit
is deployable, conceivably, we could deploy every commit. And if it’s untested, we’re back to
the YOLO situation where we just hope. That’s the CI/CD interaction. Also, CI jobs will often spawn
automated deployments, right? So hey, this passes. I like it. It’s on the branch that we allow
to deploy, let’s just go an deploy. That tends to be more in the
continuous delivery category. So tests ends up being
really, really important. If it’s deployable every change
or if it’s deployed every change, we want to have high confidence
in the deployments we are doing. So a couple examples, and you
will see some familiar faces. These are just literally
some build configurations I pulled out of open source so we
can have a look at what exactly is happening. So CS50 manual, it was a fabulous little
Travis YAML configuration to look at, because OK, you can see the merge here. David was merging in pull
request about last week, I think. And it was passing. And this was the Travis YAML. You can see the language,
what version we’re on, any sort of caching that’s happening. The script is building that, making
sure that the Jekyll build runs. And does this Jekyll
project properly turn into the web page it’s supposed to do? If it works, we’re going
to do a deployment. We’re going to go to Elastic Beanstalk
using this deployment process. We’re going to use these use secrets,
which you can’t see because it’s open source and it’s hidden. We’re going to use these
secrets to this part of AWS. App is named this, like the whole thing. And then in the last bit, we’re
going to notify a Slack room. I assume there’s a deployment Slack room
or some interesting Slack room in which everyone is cheering on the manual. So we see CI both being like, hey,
do this build, make sure it works. Do this deployment, and
also tell people it’s done. This is one of our projects. This is one of the biggest
Glue projects at Travis. This is Travis Build, which
takes this Travis YAML– this being a YAML configuration. YAML is like this sort of key
value configuration language. So we’re going to take Travis YAML
and we’re going to turn it to Bash. Bash being a shell language which
the build is actually executed in. This is a big, long Ruby repository in
which a bunch of things are happening. This is the key part of this build. So if we go back here, we have
these three different tests. We’re going to deploy it to And then there’s an
additional check these rate tests that happens after that
sadly didn’t fit on my slides. So again, here we’re
going to run these tests. Beforehand, we’re going to
precompile and clean everything. We’re going to run the
test, the spec tests. Do an additional validation test
that we’ve written ourselves. And after deployment, we’re going
to send it to a Code Climate. Code Climate being another tool for
checking the health of your code. There are all sorts of awesome
tools out there, by the way. I’m shouting at this one
because it’s in our repository, but go find there’s some
awesome ones out there. And then before the deploy,
we’re going to clean up. And then ultimately,
we end up deploying it. So we have this project that goes from
these individual steps, test test test, to you clean up and get ready,
deploy if it’s the right kind, and take it from there. So I have a quick demo next. Any questions before we get started? OK, and let me make sure this works. I thought I could only do one thing
at a time, so I prerecorded it. So I can pause if anyone
has questions along the way. So here we see my Travis account,
my open source account. I’m going to go and enable
my demo Travis web project. So I did this cooking show style
because the build is a little bit long. So here’s the beginning
of my pull request. And there’s the pull request itself. I’m adding features. I’m adding an emoji to the string here. So you can see the first project. I actually updated
the test first, again, so that I could know what the output
was supposed to be right there. There’s two tests needed that updated,
because they’re checking the string. Take it from there. I’m going to go back, see
if I’m remembering my demo. I’m going to go back and head
back over to my editor there and actually update the code. So now that I’ve done the test, I’m
then going to update the code and say, this is what is supposed to happen
when you generate a markdown string. You’re supposed to also have that emoji. And I pick tools because
we’re building things. And see what emojis I like. And now that we’ve done
that, we’re going to save it. And I’m going to come
over to my terminal. That is my branch status. You can see what’s happening. I’m going to add that file I
have a terrible habit of get add dot, which adds everything
in the current directory. Don’t do that habit. And then I’m going to commit it with
a, hopefully, clear commit message. I’m going to push that up. This is just sort of the general commit,
git commit and git management tools. There are desktop apps. I like my command line. We’re going to take it from there. And now the build is going to run. Build is running. See my pull request. That’s my active branch. There’s my build history. Apparently, I like
gesturing with my cursor. And it’s coming in. Travis will show the build in this
current page once it has started. So right now, the build is going from
like a request coming into the Travis, beginning of the pipeline, being parsed
through things like Travis Build, until the worker’s ready to start. And we take it from there. And here is the build coming in. So the first thing it’s going
to do is pull get chrome stable. Like Chrome for the browser,
but in headless browser mode so we can test like that. Taking a while. And then it’s going to set up assets
where we turn this source code. This is our entire
front end, by the way. If you go to
Travis-CI/travisweb on GitHub– Travis-web on GitHub,
I forked that project and have done this on our
open source front end. So now it is building the
front end, downloading the build archive, which is the– some of these modules,
some of these node modules that were set up in the prior build. There’s a whole concept of,
if you have dependencies you can rely on, let’s send them up
to somewhere stable, in our case S3, and pull them back
down for the next build so we don’t have to pull it every time. Now we’re getting the
Node version we need, which is the underlying
language here for this build. Getting Node 5. Installing the NPM modules, the
Node modules that we need again. And now we’re linting. So we’re checking, does this
exist the way it’s supposed to, is the syntax correct,
all that good stuff? Does it match the best practices? And now we’re building
the website into something that we can test
automatically in the build. So it is going from source
code to testable situation. We’re doing that. For better or for worse,
I picked Travis Web because it is a nice, clear JavaScript
project you can go and look at. It does have a fairly long build,
so it will build for a little while. For some background
history, we picked Ember because it works really well with
our Ruby applications on the backend. And we have this nice Ember project. There are a lot of great
JavaScript frameworks that have come out
recently, more recently. Embers need to feel like Ember. Highly recommend all these things. Again, these are all ways of
building applications, building JavaScript applications,
performant web apps in the browser. So now we’re generating– yes, question. AUDIENCE: So are you a contributor
to Travis Web [INAUDIBLE]?? ANNA NAGY: Um, let me pause real quick. Oops, too much of a pause. And we’re back to being– I’ll figure it out. I contribute in different parts. So I’m on the product and support side. So odds and ends pull requests. I do a lot of reading our code, because
I end up explaining it to people. So I pull request it to different
configuration things I’ve set up, different infrastructure
things with people. But I personally don’t work
on the Travis Web project. A lot of cool people do. But I’m happy to try
and answer questions if you’ve got questions about it. So, yeah. AUDIENCE: If your project was not
on GitHub, can you use Travis? ANNA NAGY: You cannot use
Travis without GitHub. Though you could if you have
another source control project, you could add a second
remote and you would then be testing off the GitHub remote. It’s a little iffy, but
that is a way to do it. But right now it is a continuous
integration for GitHub projects. We actually grew out of the
GitHub open source community, so we’ve stayed super true to that. Other questions? Otherwise I’ll try to find my spot. OK. Let me see. And I think it was like half way. Oh, wow, that was pretty good. So we’re linting, going back to linting. The next thing it will do is
it will run all of the tests, or after it builds it
will run all of the tests. I think I counted about 800 plus tests
for all of these different things in this entire front end. I’ll skip a little forward. Oop, backward. Sorry about this. Let’s skip to the end. So I’ve skipped to the building step. The dots here are the
tests that ran and passed. The stars are the ones we skipped. Sometimes you want to skip
tests, because whatever reason that component’s still under work. It’s not the best practice, but it is
something that happens every so often. So now we are building all these
tests, all 847 last I checked, and taking it from there. Yes. AUDIENCE: So here your
[INAUDIBLE] is not actually Travis and you’re using some tests [INAUDIBLE]. ANNA NAGY: Travis running the tests in– like running the NPM
tests, the Node tests here. There is a test runner that
is executing these tests. We are automating
calling that test runner. OK, so I’m going back
to my pull request. I’m saying it worked. I’m checking it, all
my checks have passed. Because this is an individual pull
request, I’m going to be wild and crazy and merge my own pull request. Highly recommend you get a review. But I added three emoji. It is OK. It will survive. So there is my pull request. And went pretty quickly. But in review, builds and testing
in general, so the main goal is to provide a way for tests to
be run as development progresses, rather than at the end. CI came in as a theory in
the ’90s, but it’s still a best practice that is being adopted. So we want tests to be
run as the project is going so that we don’t get to
these great merge days where we go, OK, let’s see if everyone’s
code fits together. Oh my goodness, it doesn’t
fit together, now what? Let’s go back to the drawing
board and figure it out. You have all that time
that both requires, like we need to figure out this
problem, but also, we did all this code and maybe it needs to be changed. Maybe it needs to go away. If you do these small
increments, test them as you go, merge them in as you
go, it’s much more– you don’t waste time
in quite the same way. It’s much easier. You can also predict what
other teams are going to do, because if you know everyone’s
tests are going to pass or they’re not going to merge it
in, then you know that there’s a– side effects are
generally under control. New features are tested with
assuming the best practice of writing the tests with the features. And historical builds become a
kind of living audit log for tests. So yes, my build last month did this. This is what the output is like. Oh, we’ve changed it a lot,
let me go back and compare. Or the last build that was successful
did this, that, and the other thing. My tests, my project no
longer is successful. What specifically has changed here? Let’s go back and compare. When were these things done? Which commits had what status? There’s tons of good data,
tons of good information. And again, as you’re
doing your build, there are lots of different
types of tests to include. So like the unit tests at the
bottom, these are individual methods. Component tests, integration
tests, working your way up until you’re testing the
bulk of an application. Oftentimes people, again,
will start with unit tests. If the unit tests don’t pass, you
know particular methods are wrong. Go and look at those. And then it connects back into
CI and CI/CD, both in open source and in business and in industry. So CI and CD are getting
more and more common. They are more or less
considered a best practice, though of course, every
individual environment, every individual corporation,
every individual project has different requirements. So I don’t want to be like CI is for
everybody, but CI is for everybody. So it’s both like a trend
and a best practice. If you know your code is
reliable at any given point, and is tested and under
control at any given point, you can do all sorts
of interesting things around deployment, continuous
deployment, other types of deployment, changing around infrastructure,
especially in cloud native and all these cool stuff. So teams will use CI and CD
for testing and deployment, also just general productivity. CS50 is posting to a Slack room. They’re also all getting emails. They could be posting somewhere else. They could be notifying other things. We could be going back
and saying, oh, we had an incident on our infrastructure. This is not happening with the manual. But say in another product
we did an incident. What happened to the
tests most recently? Can we fix this? Oh, we need to fix this really quick. Let’s push this feature,
make sure the test passed before we end up with an
incident on top of our incident. So CI and CD are really
deeply connected in that way, either by making sure
you can deploy whenever, or deploying always on
passing CI, like CS50 does. So any questions? This was like very high level, but
I would love to talk more about it. Questions, concerns either
about Travis or– yes. AUDIENCE: Is there a particular reason
that you rebuilt the environment every time a new commit is pushed versus
keeping something hot and ready to go? ANNA NAGY: Yeah, so we do a bit
of a mix of that with the caching. But the rebuilt environment
every time does deal with changes to those environments. So either– like from
our infrastructure side or from like your
libraries and dependencies? AUDIENCE: Infrastructure. ANNA NAGY: Right. So we actually have a fairly continuous
infrastructure project, infrastructure deployment, so we do that. It also works so that as we are
changing our infrastructure, as we are changing– like we’ll change
infrastructure and Travis Build at the same time, Travis
Build being the runtime side. So if there’s a change
to infrastructure, we need to change Travis Build. And so we have pretty
continuous deployment. We do have pre-built images. So we kind of have these catch-all
images of like ci-garnet covers like– I don’t remember off the top of my head. But it covers half a dozen
languages and their various types. ci-amethyst covers all the stuff
on the JVM and their various types. And so we will kind of have
these catch-all images. And then when you select a language,
we’ll pull in all the specific stuff to it. It also lets for better
community involvement. So we’ll have like the D language
contributes to Travis Build. I personally have never written
D, but it’s a supported language. Other questions? Yeah. AUDIENCE: We’ve had some issues,
we also use a different CI. So basically, if you make a
change to say a read me file, is there a way for Travis to know, oh,
that’s not going to break any tests, so we shouldn’t really be running all
the tests based on this [INAUDIBLE]?? ANNA NAGY: You can do like– it depends on the workflow. So with Travis– I’m going to speak from Travis. From Travis specifically, you
could just skip the entire thing by adding bracket skip space
CI to the commit message. So you could skip the entire thing. You could set up a matrix build where
you would set the environment variable. So this type of change would
have these kind of tests. And then if we don’t see any
change or we want to pass it along, we could do something different. You could also get rid of it out of
the read me on your pull request, and then just– or get rid of it out of the
Travis YAML in your pull request and then put it back. I would still say run the
whole test suite though, because you don’t know what changed. So different stuff. But also, it will depend on project. So we can talk more too afterward. Other questions, other
concerns about testing CI? Other things? I can talk a little bit about how we use
Travis at Travis, which is kind of fun. We’ve had different situations
where in order to fix the builds we have to pass a build,
but the builds are stalled. That’s really fun. Highly recommend that situation. We dog food all of Travis, both
Travis open source, close source, and enterprise. So you can’t push a change to say Travis
Build unless your Travis build passes. So if you’re changing it around,
it gets super interesting. Questions, concerns? Otherwise I can call it early. It was fast. BRIAN YU: OK, well,
thanks so much to Anna. [APPLAUSE] And with that, we’ll wrap up for today. And next week we’ll dive
to talk a little bit more about scalability, and thinking
about taking the web applications we’ve been building just
on our own computers and how we might scale them
to be larger applications used by some number of more users. Thank you so much.

4 thoughts on “GitHub, Travis CI – Lecture 9 – CS50’s Web Programming with Python and JavaScript

  1. Interesting insights into Github but flipping windows every 30 seconds gives me a hard time to know what just happened, what's going on in this lesson, and what the next explanation will be. I was kind of waiting for the next explanation in the hope that it was going to be clearer in the next steps. And as the Github instructor (John) speaks as fast as he flips pages, the whole learning becomes even more difficult. From lesson 1 to lesson 8, there was less "page-flipping" and I could follow easily the explanations. It's hard to absorb the content now.

Leave a Reply

Your email address will not be published. Required fields are marked *