SPEAKER 1: All right.
Hello, everyone.
And welcome to the CS50X Educator Workshop.
Can everyone hear me OK?
So nice to see everyone again.
Only two sessions to go.
Today, of course, we'll be joined by CS50's own Brian Yu for a look at CS50W
or CS50's web programming with Python and JavaScript,
the new and improved version for 2020 and beyond.
Tomorrow then will be Brian, again, introducing us
to CS50 AI, an introduction to artificial intelligence using Python.
Before we dive in as usual, please feel free to say
hello and where you're from in the chat, particularly
to any new faces and names.
Might anyone be comfortable saying hello on camera as well to everyone?
Rampur, do you want to start things off today?
SPEAKER 2: Yeah.
Hi, David.
SPEAKER 1: Nice to see you.
Do you want to tell us a little something about yourself
that you haven't told us already?
SPEAKER 2: Yeah.
Yeah.
Sure.
Yeah.
I love programming.
I have been teaching web programming from Boston three, four years.
So I'm very much excited to look at what is programming
that you are going to cover today.
SPEAKER 1: Great.
Well, likewise.
And for those who are new today, where are you from?
Oh, we lost you.
SPEAKER 3: Professor, this is [INAUDIBLE]..
I did your HPAC program, EDSS class.
Glad to be here.
Thank you very much.
SPEAKER 1: Yeah.
Nice to see you, the whole family, too, I see as well.
SPEAKER 3: Yeah.
He's learning CS50 as well.
[LAUGHTER]
SPEAKER 1: That's great.
Nice to meet him as well.
Rampur, shall we come back to you, since everyone
is dying to know where in the world you are, I think.
SPEAKER 2: I am from [INAUDIBLE].
SPEAKER 1: Wonderful.
Thank you.
Sorry for the muting and unmuting there.
SPEAKER 2: I teach engineering graduates.
SPEAKER 1: Excellent.
Excellent.
And let's see do we have any other hands who would like to get things started?
OK, Ramon.
The floor is yours.
And do give us a really enthusiastic transition to Brian.
SPEAKER 4: Hello, everyone.
My name is Ramon.
I actually was an information systems major.
But then I dropped out to work as an English teacher
and focus on the translation of the course.
And I'm really excited for Brian's session today.
The CS50 web programming was the second course I took.
And let's get started.
Let's jump right in.
SPEAKER 1: All right, Brian.
I think the floor is indeed yours.
BRIAN YU: All right.
Thanks very much.
Welcome, everyone.
Good to see familiar and new faces today.
So today what we're going to be talking about, as was mentioned,
is CS50W, which is CS50's web programming with Python and JavaScript.
This is a class that picks up right where CS50 leaves off.
So at the tail end of CS50, students are introduced
to a little bit of web programming using Python to write Flask web programs
and introducing students to SQL to be able to create databases as well.
So CS50W web programming with Python and JavaScript
takes a deeper dive into the design of web applications
and looks at how to build them and how to think
about organizing databases, how the different languages and frameworks can
interact with each other, and looking at some modern tools and libraries for web
application development, as well, to hopefully give students the tools
and resources that they need to then go forth and build web applications that
are interesting to them, for example.
So what I thought we'd do, just to get a sense for who you all are
and whether you some of you may have taken the course before--
so the course itself is available as open courseware
and is also available on EdX.
I'll paste the link for that course in the chat, too.
But I thought I'd ask each of you, if you could,
to fill out this poll, that if you open up the chat,
I'm about to paste in the link to a poll.
Curious to hear if you've taken any of CS50W before.
So if you've ever started any of the lectures
or started any of the projects, there are actually
two versions of the class, a 2018 version and a 2020 version
of the class.
So if you could just fill out that poll, it would just be useful.
It looks like everyone so far has not taken the class before.
All right, so in that case, hopefully today
will be a good introduction then to tell you
a little bit about what the course is, what it's about,
and what it is that students learn in the course
and how you, then, could potentially teach this course and this curriculum
to your own students as well.
So we'll give people another couple of seconds
to answer the poll, because it looks like about half of people
have answered it so far.
Give people a couple more seconds.
And all right, so it looks like vast majority of us
have not seen any of this course before.
So hopefully today will be an opportunity
to get a little more familiar with the curriculum.
And we'll start just by talking about the syllabus and diving
into what the course is all about.
Definitely at any point today if you'd like to ask a question about anything,
feel free to raise your blue hand in the participants' window.
And I'll call on you and you can ask a question.
If you'd like to ask questions in the chat,
as well, I'm keeping an eye on the chat all throughout today's session.
So if you have any questions about the material, what we teach,
why we teach it, and how we teach it, definitely feel free to ask away.
That's what this session is for.
So with that in mind, let's go ahead and start talking about web programming
with Python and JavaScript.
And just to set up some context, if you look online,
you will see two different versions of the class.
The class was first offered in 2018.
So we had one version of CS50W that was released then.
And more recently, over the course of the past couple of several months,
we've been reproducing and recreating a new and refreshed version of the course
as well, so CS50W 2020, so two different versions of the course
that you might see.
I'm going to be focusing today on the latest
version of the course with the latest material and the latest curriculum.
But if you're curious about the differences between the two versions,
between the web programming class as offered in 2018
and this year's version of the web programming class as well,
the new version of the class focuses primarily on Django as the web
framework that we use with students.
And I'll talk a little bit more later today on what that is
and why it's useful.
Whereas in 2018, we focused on two different Python frameworks.
We focused on both Flask and Django.
The 2020 version of the course just focuses on Django as its backend
for designing web applications.
And that lets us spend more time to go into more detail into the features
that Django offers.
And I'll talk about some of them there.
But it includes things like making it easier
for students to create forms, which are quite common on the internet
if students are creating applications that let users fill out
information and submit information or data to your application,
creating forms very quickly and easily can be quite helpful.
The 2020 version of the course also spends some time introducing students
to modern front end libraries.
So libraries are in frameworks like React,
which is a popular framework now for building
very dynamic and interactive user interfaces.
It's a framework developed by Facebook, quite popular all across the internet
now for just being able to quickly create very interactive user
interfaces where things are responding to new data,
things are responding to user input, and it's a common paradigm for programming
now as well.
And then we introduce students to some more newer tools as well.
GitHub Actions is a more recent tool offered by GitHub.
It didn't exist in the same form back in 2018 that we now introduce.
And the projects are all new, too, in 2020
and that are very much inspired by the types of web applications
that are quite common in industry that students might encounter or use
on a day-to-day basis, things like websites like Amazon or Gmail
or Google that are very common.
We ask students to think about how those applications might be implemented
and to recreate a smaller version of those sorts of websites
that have similar features, just to give students a better understanding for how
those web applications might work, how they might be designed,
and ultimately, how students might be able to create
similar things of their own, too.
So those are the big picture differences between the two versions of the class,
if you happen to see those two versions around.
There are also some smaller changes.
In particular, there's some code from the 2018 version
that was a little bit outdated, APIs that no longer worked over
the course of those two years that have been refreshed and updated.
So the 2020 version of the course is the version
that you should be looking at if you were interested in taking or teaching
this particular class.
So with that, I don't see any questions so far.
But we'll go ahead and dive right into the syllabus.
I'll talk you through what it is this course talks about,
where it picks up from CS50, and what the new things are.
So the first topic that we cover, the very first lecture
and the first project introduces students to HTML and CSS.
So if unfamiliar, these are two languages that are commonly
used for creating web pages.
Where HTML is used to describe the structure of a web page,
defining where the paragraphs are, where the images are,
maybe if there are tables on the page, or if there are videos on the page
or other content on the page.
And then CSS, or Cascading Style Sheets, is another language
that is used in order to be able to style those web pages,
to be able to create things in different colors, different fonts,
laying things out with the appropriate spacing.
So they work very well together where we use
HTML to describe the structure of the page
and then CSS to describe the aesthetics of that page,
to describe how each individual element inside that page should be structured.
I see a question in the chat.
Is React used together with Django or interchangeably?
We'll talk about React a little bit more in a bit.
But as Shristi answered, which is absolutely correct,
they can be used interchangeably.
Because we draw a distinction between what the backend frameworks are
and the backend code of the application, so
the code that might be running on a web server,
like Google's web servers or Amazon's web servers, for example,
as contrasted with the front end of the web application.
So that's the part of the application that really is what's
showing up in the browser window.
It's maybe the JavaScript that has users interacting
with various parts of the page.
And so Django is what we might consider to be a backend framework.
It's a framework that helps us to build out the structure of the web server
and describes how the server is handling those requests.
React, meanwhile, is a front end framework.
So React describes how elements will appear on the page to the user.
And so these two can interact with each other.
So React on the front end can communicate with Django on the backend,
or really with any other backend framework, so things like Ruby
On Rails or Node.js are other backend frameworks,
if those are familiar to you as well.
Those can be used with React, too.
So a lot of these components and ideas that we show students
can be mixed and matched.
They don't need to use the entire same set of tools
that we show in the course.
But we give students one possible set of tools
that they can use to do both the backend and the front end.
But more on that, certainly, when we get to it.
All right, so we first introduced students to HTML.
This over here is what HTML looks like, if you're
unfamiliar with the exact syntax.
But in short, it's composed of a series of nested HTML tags,
where we might say that this is the title of the page
and here is the body of the page.
And you might have paragraphs inside the body of the page and images
that are inside the body of the page.
And so HTML is this mark up language that
lets students describe the structure of the page.
And we don't introduce students to all of the various different HTML tags.
There are certainly too many to cover in any one lecture, for example.
But what we do show students are some of the common HTML elements,
things like lists and images and paragraphs
and other common HTML elements, headings and the like.
And then point students towards resources
where they can then find the other tags for whatever problems
that they're trying to solve.
And many of the projects will involve asking students
to do a little bit of work on their own to try and figure out
what's the right HTML tag to use here and how do I learn how to use it.
So we try to equip students with the tools in order to do that.
When teaching middle school kids, should they learn HTML first?
Or can they learn each HTML5 directly?
So HTML5 is just the latest version of this particular standard
for describing the page and things don't change all that much between HTML
versions.
And for the most part, they're very backwards compatible.
The things that used to work in previous versions of HTML
will often still work in HTML5, although some of the best practices
will change a little bit from version to version.
HTML5, in particular, just introduces a lot of new elements.
So it makes it easier to be able to create autocomplete dropdown lists
and to be able to create video elements and those sorts of things
that might have been harder to do in previous versions of HTML.
So certainly fine to just introduce students to the latest version of HTML.
They don't need to be using all of the latest tags
and all of the latest elements, but this at least
allows them the option of doing so if they choose to, for example.
Another question in the chat, will you please talk about Django deployment
at the end of the presentation?
Yes.
So we do talk a little bit at the end of the course
as to how you might take an application and deploy it to the internet
and what concerns around scalability and security students
need to be thinking about when doing that.
There are a number of options for how to deploy a Django application.
I think the simplest one is to deploy to a service called Heroku.
Heroku is a web application hosting service
that makes it pretty easy to take a web application
and just put it on the internet.
It's also nice because there is a free tier for Heroku
where, for free, students can put their website online
so that anyone can use it.
And they can also get access to a free Heroku database,
too, that lets them for free store up to 10,000 rows inside of a SQL database.
So that tends to be a common option for students
when trying to deploy Django applications.
And there is even--
I don't have the link offhand, but maybe someone can find it--
a Django-Heroku-Python package that you can just
install into your Django application, which automates the process
of setting up all the settings for Django as well.
That just makes it really simple to take a Django application and put it online.
There are other options, too, many good options for doing so.
But yes, so thank you, Arturo, for pasting the link for that in the chat.
There are many options, but Heroku tends to be the one that I recommend.
It's just an easy way to take applications and put them online.
And that's a lot of fun for students.
Especially with final projects, for example,
where they can then take their application,
put it online, and let friends and family access it and run it
and interact with each other as well.
Another question, which HTML editor the students use?
We leave it up to the students.
In class itself, in the lectures, I demonstrate
using Visual Studio Code from Microsoft.
In the 2018 version, I believe I used Atom, which is developed by GitHub.
So both VS Code and Atom are both very popular text editors
that work quite well.
But there are others, as well, that I happen to know of.
Sublime Text is another popular text editor, too.
And Brackets is one I've heard a lot of students using recently as well.
Because brackets does, like, a live updating page
where, as you type HTML code, you can see exactly what the HTML looks
like on a Chrome window without having to refresh the page over and over
again, so a bunch of good options.
Yeah, Atom, also a very good choice, PyCharm, another good one, yeah.
So there are a lot of different text editors.
We happen to use VS Code in the lectures.
But students can really use any text editor of their choosing,
whatever they like, and whatever they're comfortable with.
If you can't hear anything-- actually, I'm going to say this.
But someone should type this in the chat if they can't hear it.
In the bottom left of the Zoom window, there should be a join audio button
that you have to click.
And you have to click the join audio button in order
to be able to hear the session.
So if someone could please relay that message to Azimat, who's
asking in the chat, that might help.
How can one determine whether to use Django versus Ruby versus Node.js?
Ultimately, it comes down to some of the tools are better for certain things.
Node.js happens to be quite good at dealing
with asynchronous types of activities that we'll talk a little bit more
about later.
Ultimately, it comes down in large part to preference
in language and preference in what packages and tools are available.
We happen to just stick with Python for the most part in this class.
And Django happens to be probably the most full-featured Python web
application tool out there right now and one of the most popular.
All right, so in addition to just teaching students the syntax of HTML,
we also show the Document Object Model, which
is just a way of structuring an HTML page
and defining the various different components
and just thinking about things in a bit of a more organized way
as this hierarchy of nodes that are included with each other.
And we'll talk a little bit more about this when we get to JavaScript as well.
All right, a bunch of questions-- a link for the slides?
The slides are on the notion page where you found the invitation
for today's session.
So if someone could paste the slides there, as well, that would be great.
Question-- when I upload the app to Heroku with SQL database,
the data disappears.
Let me delay that question a little bit to when I talk about SQL itself,
which is coming up.
It's one of the topics of the course.
And if I forget, just remind me again.
Is it possible to teach this course to teenagers before teaching CS50X?
So we assume in this course a little bit of prior programming
experience in Python is really the main prerequisite.
So if students have taken CS50X, they're more than
well-equipped to be able to take this class.
Because they've already seen Python and potentially
even seen a little bit of web programming, as well.
It's possible for students to take the class without taking CS50X.
And students definitely have done that before.
But we do assume some prior programming familiarity, so familiarity
with things like loops and functions and conditions and variables and data
types.
Those are things that we introduce.
But we don't introduce them from scratch.
So if students have a little bit of prior background,
even if it's not in Python, then they may
be able to find that this course is accessible to them.
But we're not going to explain all of the programming fundamentals
from the ground up the way that CS50X does.
We do assume a little bit of prior programming familiarity first.
What is the best backend for websites with ML modules, so machine
learning, or ML?
Again, this is going to be something that people are reasonably
going to disagree about.
But definitely Python, I would say, is a very popular language for data science
and machine learning nowadays.
Especially with all these great Python libraries for machine
learning that now exist, some of which I'll
be talking about tomorrow when I talk about the artificial intelligence
course.
But I tend to think Python is a very good choice for machine learning
and for integrating machine learning with web applications, too.
So another good reason why Python is great for backends of web applications.
Do students develop projects locally or remotely on something like Repl.it?
We have students develop locally.
And this is a difference from CS50X itself.
Where for CS50X, most of students' work is inside the IDE.
That way everything is installed for them.
They don't have to worry about setting up their own local environment.
In the web programming class, we encourage
students to set up their own programming environment
just to get comfortable with doing so, to get more comfortable programming
on their own computer.
So that's something that we have students do, install their own text
editor, install all of the frameworks and libraries on their own computer
so that students can really get practice with that on their own, too.
Is their list of concepts required to make CS50W
a more user friendly class to take?
Really, the one prerequisite that we have is prior programming experience,
ideally in Python, since that's the language that students
are doing the most work with.
But here at Harvard, at least, we generally
ask that students have one or more years of prior programming
experience in any programming language in order to take the class.
All right, so after HTML in this lecture,
we introduce CSS, which is just a way of styling a web page.
So this is what CSS code might look like, for example.
To say, take a heading and change its color, center the text,
and so this is a lot of fun for students, as well,
to be able to customize the style of a page, to make it look the way
that they want that page to look, for example.
And then we dive a little more in detail into how all of this is working,
deeper than we do look at in CS50 itself, where CS50 introduces CSS.
But in this class, we take a little more of a critical eye
and think about things like how does specificity work?
What if there are two different CSS selectors that are saying--
one says you should make this red and the other one
says you should make this blue.
How does it work?
It turns out it doesn't just go, like, top to bottom order.
It's looking at how specific these various different selectors, as they're
called, are to try and identify how particular elements work.
So we talk through some of the logic for that as well.
And then we also always try to take an eye towards modern web design
practices.
In particular, things like responsive design, making sure your web page
looks good both on desktop and on mobile devices, for example.
So if this is what your website looks like on a desktop device,
it might look a little something like this if you just squished it down
into a mobile device.
But that's probably not a great user experience
in terms of what the person on the phone is going to see.
Because the text is probably really small.
And you've probably seen, if you use a mobile phone's web
browser, some websites that aren't really optimized for mobile phones.
Generally, websites are getting better about this.
But we talk about strategies for doing that.
How do you style your page so that it looks good on desktop devices
but also looks good on mobile devices as well?
And so we talk about strategies to make that work.
And we also tell students about ways that they might not
need to do all of this from scratch.
But before I get to that, Joe, I see you have your hand raised.
If you'd like to ask a question?
JOE: Yes.
Quick question as you start developing, because I notice some apps work better
in Chrome or won't work at all in other browsers,
is there any work you do to make it browser agnostic or browser specific?
And then I have a second part question, do you
do a session where you help us set up VS Code with, like, style50,
even if it's available as a package and all those things in the text editor?
BRIAN YU: Yes.
So great questions.
So first with regards to the style50, there was a session last week--
I think it was last Wednesday--
that was all about tools that you can install on your own computer.
So how to install, like, check50 and style50 on your computer.
And the recording for that is available on the notion page.
So if you take a look at that, we go through how to install all of the tools
in that session if you want to take a look at that.
And then, as for--
sorry.
Remind me what the other question was, the first one that you asked?
JOE: Chrome versus other browsers.
BRIAN YU: Oh, yes, web browser that you use.
So different browser support, different features of HTML and CSS, for example.
In the lectures, we try to demonstrate features
that will work across all major browsers, at least
in the latest versions of those browsers.
But there are some things where the rules may vary from browser to browser,
where you need might need to use slightly different CSS
instructions to be able to style different pages
correctly for different browsers.
And we refer students to some pages like W3Schools
is a website that has great documentation about this,
about how do you make sure the style is going to work across all
of these various different browsers.
So we refer students to those resources as well.
But in lecture, I'll predominantly use Google Chrome.
But most of the styling we show should be fine on other browsers
as well, at least the latest versions of those.
Charlene, I see you have your hand raised if you'd like to ask.
CHARLENE: Yes.
Can I just clarify, so all submission, then, is going to be via [INAUDIBLE]??
BRIAN YU: So what we have students do is we have students
upload their code directly to GitHub.
They can do that in one of two ways.
They can either push their code to GitHub.
And I'm going to talk in a moment about what
we teach students about Git and GitHub.
Or they can just you submit50, which is the tool
that I talked about last week that will upload code to GitHub directly.
So if you want to, you can adopt that exact same submission format.
Where you use submit50, you can use submit.CS50.io,
which I introduced last week, to be able to collect submissions for the class.
But if you want to have students upload their code directly to you
or use a different system, that's absolutely OK as well.
So we give you the option of using our tools.
CHARLENE: So sorry.
In the scratch module where you just upload to the file
with a search in slug, I did find that easier.
And I think students might find that easier.
Is that an option?
BRIAN YU: Yes.
Also an option, so in the same way that you
can upload to GitHub using submit.CS50.io's upload page,
just by choosing the files you want to upload,
you can do the same thing for this class as well.
Just choose the files that you want to upload.
Usually, you just zip them first into a compressed file
to make it easier to upload.
But you can use the exact same tool you use for uploading scratch
projects to upload these projects, too.
CHARLENE: And the slug, do I have to create that slug myself?
Or will that be it?
BRIAN YU: We have already created the slug.
Now the projects for this course are not automatically
graded, unlike CS50X, primarily because we give students
a lot of freedom and flexibility in how they implement these projects.
They can do it in so many ways that it would probably
be difficult for us to define a very fixed set of things
that we're checking for.
But we do already have submission slugs that you can already use.
And those are on the open courseware website
that you can use if you'd like to have students submit those projects.
CHARLENE: Thank you.
BRIAN YU: Yeah, of course.
Do students have a background in client and server
knowledge, what the front end means, what the backend means?
We explain that to students.
And I'll have a slide upcoming about that, too.
Question is could CS50W projects be completed locally on a Chromebook?
It's a good question.
I'm not 100% sure on that.
But my guess is it would be very challenging to do exclusively
on a Chromebook.
Because it would probably be difficult to get all the necessary command
line tools installed.
That's my guess.
I haven't actually tried.
But if you follow up, I can maybe do a little more digging
to figure that out as well.
Does the VS Code have a built in package for style50
or should we use another style editor?
VS Code-- style50 is a command line tool.
So there is no style50 VS Code plug in.
But there are other Python plug ins VS Code that do styling.
I'm forgetting their exact names.
And style50 is really checking for the same types of things.
And so other tools should be available, they're just not CS50-specific tools.
Oh, yeah.
If you have something that's running Linux,
that should absolutely be able to run all of the programs, all the software
that we need for the course as well.
If you're on Windows 10, you should also be able to run-- you can install Django
and you can install Python on Windows 10 as well.
The tricky part might be submitting.
Running submit50 does not work natively on Windows 10.
So you have to either upload via the web interface,
the way I was just talking to Charlene about a moment ago,
or you can install the Windows 10 Subsystem for Linux.
There are instructions for that on Microsoft's website.
But if you install the Windows 10 Subsystem for Linux,
that will let you run submit50 on Windows as well.
All of the course material, everything that I'm going to be talking about,
all of that is available on the open courseware website.
So the link is at the beginning of the chat
and also on the slides that are coming up, too.
All right, so just to wrap up a little bit about HTML, CSS.
We introduce students to Bootstrap, which is basically
a library that contains a whole bunch of already existing CSS code and HTML code
and JavaScript code, just to make it easier
to create a nice looking modern looking website very quickly so
that students don't have to build everything from scratch.
And Bootstrap is quite popular for styling pages on the web.
You've probably seen this sort of styling before.
And then finally, in this part of the course, we introduce students to Sass.
Which is an extension to CSS that add some additional features to CSS
as well.
It adds things like variables to be able to factor out
common code, so just teaching good design principles for style.
That often, if you're building a big website that
has a lot of different style sheets, using something
like Sass to keep track of variables and to keep track of repeated code
can often be quite helpful.
So that's the beginning of the course, HTML and CSS.
The next thing that we talk about is Git and GitHub.
And so what it is is it is a piece of version control software
that's useful for a number of things.
So first, we don't assume any prior knowledge of Git before.
But we start by talking about what it is that get can be used for.
So it's useful for things like tracking different versions of your code,
that if you're making updates to a web application,
you're often going to want to keep track of every feature you add,
keep track of every bug that you fix so that you can go back
and see the entire history of this project.
And this is useful not just for web applications,
but for any time you're writing code more generally.
But we introduce it primarily in the context
of creating those web applications. so tracking code, one common use for Git.
Also useful for collaborating on code, that if you're working on a team,
you're not designing the web application alone,
but you're working on some features and you have a collaborator who's
working on other features, and you two want to work together,
Git has a lot of features that make it much
easier to be able to collaborate and work together on that same code base.
And then finally, it's useful for experimenting.
It's useful for being able to test changes
to your code and experiment with it a little bit before deploying it,
before saying, yes, this is final, to be able to experiment, get feedback.
Try different things out separately before what we call
merge these changes all back together.
All right, so questions that are coming up,
is it possible to use Django in Python for web development
without needing any JavaScript?
Yes, absolutely.
In fact, the first couple of projects in this course
exclusively just use Django and Python and don't use any JavaScript.
JavaScript we primarily use on the front end
for being able to create some more interactive user interfaces.
But it's definitely possible to create a web application that
works with just Python and Django.
You might not be able to take advantage of all
of the features of modern front end web development without JavaScript,
but you can definitely still build applications.
And that's where we begin.
Before we introduce JavaScript, we start with just Django and Python.
A couple of questions about GitLab.
GitLab is just an alternative to GitHub.
Both are services for storing Git repositories on the internet.
We tend to use GitHub in this class primarily because it's more industry
standard and a bit more popular.
But if you learn one of these tools like GitHub,
learning to use another tool like GitLab or Bitbucket
or the various other different services for hosting repositories
is not too challenging, because a lot of these tools
are very similar in terms of the features that they offer.
So we teach students how to use Git.
We teach students how to make commits, which
are effectively saving their code, saving a version of their code.
And as I mentioned just now, we introduce students
to GitHub, which is a website that allows the storage of Git repository
so that you can see other people's code online,
you can collaborate on code online.
And it's just one of several tools that are
available for making it easier for students
to be able to collaborate together.
Do CS50W projects require a local web server?
We'll talk about Django in a moment.
But in short, when you run Django, Django
will start a local web server so that students
can experiment with their code running locally on their own computer.
Another question is will React include things like Redux and Native?
So we'll talk about that a little more when we get to React.
But in short, no.
We introduce React just as one part of one of the lectures, just
to briefly give students a sense for what the syntax of React is like
and what components are and how to use them.
I'll talk about that a little more later.
But we don't dive into a lot of the other extensions that
have been made to React, for things like React Native and Redux.
Those are probably more apt for a full-fledged programming and React
course, whereas this web programming course is designed more
to give a high level overview of a lot of the tools
that are available without going too much into the weeds
into all of the details of React, for example.
All right, so other things about Git that we teach,
we teach students how to push and pull from a Git repository,
uploading code to GitHub, downloading code
from GitHub as well, or any other Git server, for something like GitLab lab
or Bitbucket, for example.
And then, what happens if two people, for example,
try to both push their code, but there is some conflict?
Or I'm trying to push some change that I made and a colleague of mine
has made a change to the same line of code.
What's going to happen?
Well, in that case, you've get something called a merge conflict.
And we teach students what those are and how to fix them, what they look like,
and how you can look at what changes you made,
what changes some collaborator made, and how
you go about figuring out how to get those pieces of code
to resolve this conflict.
And then we also introduce students to branching, as well.
That this is a tool of Git that allows us
to be able to work not just on one branch of a code base, for example,
but to split off into various different branches
so that we're running different versions of the web application,
for example, experimenting with different features.
And these branches can eventually merge together as well.
So especially as web applications might grow with more features and more
collaborators, the ability to have different branches, each of which
is keeping track of different code can be quite helpful.
So we introduce students to these tools in the hope that, for this course
and for in the future, they'll be able to use tools like Git
to be able to be better at managing their own code,
to keep everything organized, to keep track of their changes,
to be able to hunt down bugs more quickly.
There's a great feature of Git called Git bisect, where
if you have a bug in your application, and you're not sure
where in your application, when in your commit history you introduced that bug,
you can effectively run a Git command that will automatically
do a binary search through your Git repository.
It will check the middle commit and say, is the bug there?
And if it's not, or if it is, we either jump forwards or jump back.
And you can very quickly triangulate on where
it is the bug was introduced in order to then go about fixing it.
So a lot of great tools that Git lends itself to that students
can take advantage of with just a little bit of familiarity
with some of these basic commands.
So those, then, are the first two topics of CS50W, HTML, CSS, and then Git.
And let me take a look now and see if there
are other questions that have come up.
In terms of whether to use Amazon or Google in order
to host web applications or store data, both are definitely quite popular.
It's probably going to come down to personal preference,
because both are very extensively used.
Do we introduce web servers?
So we introduce web servers in the context of just something
like Django's web server, which is going to be running the--
process handling the requests, and then responding to those requests.
And we talk a little bit about servers in the context of scalability.
But a lot of the details about some of the lower level setup
we don't talk about, just by introducing students
to tools they can use to automate a lot of that process,
to use tools like the Heroku tools I shared
earlier that allows for very easily taking a web application
and deploying it to the internet, for example.
All right, so moving on, the next topic we introduce students to is Python.
We assume that students have some programming background.
So we don't introduce everything from the ground up.
But we do introduce students to the fundamentals of Python syntax,
in case students might not have seen Python before
but have seen other programming languages,
or potentially have seen Python, but it's been a while
since they programmed in Python, maybe.
So we start by introducing variables and types,
talking about the different types of values in Python can have,
things like integers and floating point numbers, strings, Boolean values,
the special None value that exists in Python
that shows up in a lot of different contexts.
So we introduce students to that, too.
We also introduce students to object-oriented programming.
So a common paradigm used in programming for dealing with objects
and for dealing with actions, in other words, methods
that you can perform on those objects.
So we introduce students to that as well.
In particular, because it's going to come up later in web program.
That if you think about dealing with web applications that deal
with a lot of data, for example, you're often
going to work in an object-oriented paradigm.
Where you have one class, for example, if you're
familiar with object-oriented programming,
that represents each of your different categories of data
that your web application is storing.
So we start in Python by introducing what object-oriented programming is
and some of the basics of how it works so that students later
can use these sorts of ideas inside of their web applications as well.
We introduce students to Python data structures,
things like dictionaries and tuples and lists and sets, all of the various,
different, common, built in Python data structures
that students are going to face that serve a lot of different purposes.
And we use all of these in the context of web applications
over the duration of the course.
And then we introduce some of the more sophisticated features of Python
that are not focused on as much in CS50X itself, for things like exception
handling for dealing with errors.
Web applications are inevitably going to come across some sort of error
where someone tries to do something that the programmer didn't expect.
And so being able to handle those errors and deal with them appropriately
is something we first introduce just with command line Python,
but then translate into the world of web applications as well,
showing students how to deal with errors that
might come up as they build their web applications
and how to deal with that as a result.
All right, so some questions that have come up,
is it better to use TensorFlow or Python for the backend of websites
with embedded machine learning?
So TensorFlow, though you can use TensorFlow with a number of languages,
TensorFlow has a Python library such that in Python you
can install the TensorFlow Python package, such that from your Python
code you can run TensorFlow code.
So they're not mutually exclusive.
They're often used together.
I will talk a little more about TensorFlow, in particular,
tomorrow when I talk about the artificial intelligence class that
does introduce students to TensorFlow, which
is a very popular machine learning tool that's used in modern machine learning.
We don't introduce students to TensorFlow
in the web programming class.
But you could imagine that if students had this web programming background,
understood how to build a web application in Python,
and then had a little experience with using Python to do machine learning,
that it's not too much of a leap to then be able to combine
those things together, to be able to create a Python web application that
also supports some sort of machine learning
that's using a neural network, for example, or something like that.
For the question about Docker, I'll talk about that a little bit
at the end when we get to scalability and security.
Can the code notebooks be downloaded into Jupiter notebooks?
So we don't offer Jupiter notebooks for this Python part of the class.
But we do make available all of the source code.
So if you would like to create a Jupiter notebook out
of all of the source code files that we provide to you,
you're certainly more than welcome to do that.
Can you please speak more about the use cases
for using Python for web development?
Is it used for querying, massaging data, or presenting information on websites?
Python just happens to be a very popular language that's gaining a lot of usage,
especially in web programming.
But in particular, I find it useful because of the libraries
that you can install into Python.
So not only is it a relatively straightforward language
in terms of the syntax, but there are so many, now,
Python libraries that do so many things, in particular, for things like data
analysis and machine learning, that all of the tools that you
use for Python and data analysis, you can then
translate to a web programming context.
So that, I think, is one of the nice advantages.
And I also just think that among the modern popular languages,
I think Python is one of the easiest to pick up if you're just beginning.
Certainly JavaScript is also popular for designing backends
for web applications.
But in my own personal experience, I found that beginners struggle more
with trying to build applications in Node.js
just because of some of the quirks of JavaScript syntax
and some of the things that just aren't quite as intuitive, in my opinion.
But reasonable people will disagree about that, too.
And there are certainly ways to introduce students
to web programming in a bunch of different languages.
We just happened to use Python.
What's the name of the GitHub tool that detects where a conflict or a bug
was-- what commit a bug was introduced in?
It's called Git bisect.
It's just a command in the latest version of Git
that you can use for that.
What is a good way for students to learn Python
to be able to fulfill the prerequisites for the class?
One easy way is that CS50X itself has a Python lecture.
So that Python lecture and the corresponding problem set
introduces students to a lot of the fundamentals of Python syntax,
gives students practice with creating programs in Python, for example.
So getting that familiarity there and, in particular,
maybe even taking the web track of CS50X to get
experience using Python for web programming, all of that
can potentially be good practice as well.
All right, so we've gotten a lot of questions about front end, backend.
What exactly are we doing on the backend?
So that gets us to the next part of the class.
The next part of the class introduces Django.
And what Django is is it is a web framework written in Python.
If you're familiar with Flask from CS50X, Django is very, very similar.
And a lot of the syntax will look similar.
But it's far more full-featured.
There's more capacity that Django has to be
able to create more sophisticated web applications, especially
web applications that interact and deal with a large amount of data,
for example.
So all of that comes with Django for free, in effect.
And we explore some of the features that Django gives us
just to make it easier to be able to set up a web application very quickly.
So the first thing we introduce students to in this lecture
is HTTP, the Hypertext Transfer Protocol,
which is just the protocol that's used for communication
over the internet, communication between a client,
like the user's computer, and some web server, for example.
As you might make requests to some web server and expect back some web page
in response, for example.
And you're probably familiar with HTTP, perhaps
in the context of HTTP status codes, for things like 404,
if something is not found, or 500 if there's an internal server error.
So we introduce students to these sorts of status codes
and what they mean in the context of web programming in addition to some
that students might not have seen before,
like 301 for if the user has been redirected, for example,
or 200 if everything was OK and the page was loaded just fine.
Ramon, I see you have your hand raised.
I can pause now for a question.
SPEAKER 4: Yeah.
My question regards the drop of Flask in favor of Django
as the backend language in the versions.
But I would just like to say that the change
I like the most between the versions was the fact that in the new version,
the GitHub lecture comes after the HTML and CSS lecture.
In the previous version, the GitHub lecture was the first one.
But I thought that was kind of weird.
Because the students didn't have code yet to make versions of.
So I like this change in the new version.
Anyways, my question regards Flask versus Django.
I was wondering if in this new version, you guys
wanted to make students able to create more complex projects in one framework,
as opposed to be able to create intermediate level projects in two
different frameworks?
Was that one of the reasons for sticking to one framework this time?
And if that reason is correct, why do you guys favor Django over Flask
since both are still widely used in the industry?
BRIAN YU: All great questions.
So first, on the topic of the ordering of the lectures,
yeah, we also found that it was better to first introduce HTML and CSS so
that students could start building their web pages
and then introduce the version control tools they could use then afterwards.
So that is a switch between the 2018 version and the 2020 version.
And we just found that that helped students to get started more quickly.
So I'm glad you like the change.
I like the change, too.
I think the ordering makes a little bit more sense that way.
As for the decision to just focus on one web framework instead of two,
there are a couple of things that motivated that decision.
One was just that having students write a bunch of programs in Flask
and then translate to Django ultimately created a fair amount of confusion.
Insofar as the frameworks themselves are fairly similar in the syntax,
but there are slight nuances in how the templating works
and how particular features of the URL routing worked, for example.
That there was often some syntax confusion
where students would try to then be writing Flask-like code that they knew
that worked in Flask in Django, and they were
having to relearn everything that they had just learned in Flask as well.
So there was that element of confusion as well.
And the other part of it is that by focusing on just one framework,
we're able to introduce more features of that framework.
And we just have more time to really get a better understanding
for that framework than we did when we were splitting our attention
between two different frameworks.
So in the 2020 version, I've been able to talk more
in the lectures about common features of Django.
Things like automatically generating forums
and automatically validating forums, which I saw a lot of students
doing manually before, where they were manually
checking to make sure that all the form fields had the correct types of values.
Where Django can do this stuff automatically, but in the past,
we didn't have time to really get into that.
So the 2020 version tries to spend more time on these common features,
now that we have that available to us.
As for why we picked Django instead of Flask, in particular,
it has to do with Django taking care of a lot
of the more challenging parts of Flask.
That flask doesn't have a built in way to do things
like creating models for a SQL database or for updating that SQL database
with what are known as migrations.
You have to install third party packages to do that.
Whereas Django comes with all of that built in.
In Flask, if you want to be able to manage your database via the web,
you have to build an entire part of your web application
for managing all of that data.
In Django, Django comes with a built-in admin
interface that lets you modify all that data on your own.
So it just made a little bit more sense to, from the beginning,
use Django to be able to build these web applications.
Yeah.
Migrations-- someone's mentioning this in the chat--
are very tricky in Flask.
And they don't work very consistently or reliably, in my experience.
And Django handles migrations more cleanly.
It's just built into Django itself.
There's a lot of documentation and support available for it, too.
Joe, your hand is raised, too.
JOE: Because you mentioned object-oriented programming
and classes, do we just need to understand them?
Or will we need to build classes as part of this class?
BRIAN YU: So the classes that students will build in the class
are classes that basically define--
that represent tables inside of their database.
So we'll give students some examples that they
can model their own classes off of, and that's generally what students do.
They're not the most complex of classes, because a lot of the functionality
is built in already.
But you do need to have, like, methods that
are associated with those classes and some variables for storing that data.
But we'll get to that when we get to talking
a little more about SQL databases.
So in terms of what Django looks like, I'll just briefly
highlight some of these parts.
We introduce students to routes.
So these are things, like, if you go to Google.com/images
or Google.com/translate, each of those slash somethings are different routes
that you can visit on a web application.
And a web application might have multiple routes.
So we show students how to build multiple routes
and connect them to their code.
And then, we show them how to build what are known in Django as views, which
are these functions that decide what it is
that's going to be shown to the user.
And we start simple.
We start with what I think is one of the simplest and silliest websites
on the internet, which is isitchristmas.com.
If you're not familiar, isitchristmas.com
is a website that tells you whether or not it's Christmas.
So if you go to isitchristmas.com-- you can actually try this right now--
you will see a web page that says, "No."
So that is what the website does.
And this tends to be a simple web application that we can then
think about and try to ask and figure out, all right,
how exactly does it work?
How could we write our own version of this,
for example, for checking if it's New Year's, for example?
So we have students write a view that looks a little something like this.
If you look at the Python code, instead it's saying, what is the current date?
Is it January 1st?
And if it's January 1st, then that's going
to change the way that we're rendering the view.
And this is just to introduce students to the idea
that web applications change.
They're not always displaying the same content every time.
But different times you visit the page, they're
going to show you different content.
So it might be as simple as telling you whether or not it's Christmas.
It might be as complex as something like your news feed
that's showing you different posts based on who's posting things on your news
feed, for example.
So those views in Django are then connected to templates.
So here's a template, for example, that is going to either say, "yes" or "no,"
depending on whether or not it's New Year's.
So it has this if then else syntax that's
sort of reminiscent of Python, but that lets us decide what it is the user
is going to see by specifying different HTML content for the application.
So that, then, is how Django templates work.
And then, as I mentioned, we introduce some more sophisticated features
of Django, too, like the ability to automatically generate forms,
for example, which is quite common in a lot of applications
that students develop in this class and then on their own in the future, too.
Questions, then, about Django before I move on?
I see Andrew posted ismycomputeron.com as well, another similar web site.
That one we thought was a little bit too simple.
Isitchristmas sort of struck the right balance for the first application
that we had students create that used views and templates.
But yes, that's a great one.
I appreciate that that website exists on the internet.
And there are a bunch of similar websites,
if you find yourself looking around for things like it.
All right, so we have a web application, a web application that
has some server that's running, that's sending some HTML to the user.
The next thing we introduce students to is how do you
store data in those applications?
Basically, every modern web application is storing some kind of data,
whether it's all the users in the application or any
of the information that's getting shown on the application.
So we introduce students next to SQL, a language for interacting
with data, models, which are a way of representing
that data inside of Python, and then migrations, which are a way of updating
our database anytime we make any changes to the type of data
that we want to store.
Question in the chat-- if I understand correctly,
Django helps us organize files using Python.
Is that correct?
Yes, that's true.
Django has a specific file structure that it tends to use.
In short, Django divides its projects into multiple applications or apps,
each of which has a separate folder.
And that's designed because Django was really
meant to allow for developing very sophisticated, very large web
applications.
And many web applications nowadays have multiple different mini-apps within it.
So if you think about something like Google,
for example, there is Google Search, but there's also Google Images,
and there's also Google Translate, and there's also Google Maps.
And if you think of something like Amazon, for example,
there is Amazon Search.
There's Amazon shopping interface, but there's also Amazon Video,
and there is Amazon's web services, for example.
And all of this is Amazon.
But it's, like, different applications inside of Amazon
that might communicate with each other, but they are separate from each other.
So Django is designed to allow us to divide our project
into those multiple different parts.
A couple of people are asking about the architecture that Django uses.
Technically, Django uses an architecture called
MVT, which stands for Model View Template, where model is the data,
views are those Python functions that I showed you,
and the template is what gets rendered to the user, like the HTML.
This is very similar to MVC, which is another popular architecture, Model
View Controller.
The main difference with an MVT architecture
is that in MVT, usually the framework itself
is dealing with a lot of the controller code.
Where the controller code is usually the code that's
interfacing between the database and with the application,
like the Python code, for example.
In this case, Django handles a lot of that code just inside of the framework
itself so that you don't need to be writing a lot of the code that
does that connection.
And that's one of the nice things about Django.
So very slight nuance between MVC and MVT.
We don't really expect students to understand all the nuances
and distinctions there.
But since people were asking about MVT versus MVC,
that technically is the distinction.
And Django would technically fall under an MVT framework instead of MVC.
Is it possible to use Python's pandas library instead of SQL?
Certainly possible-- pandas if great for doing data analysis.
And it's especially common for reading from a spreadsheet, for example.
As web applications scale, generally you're
going to want a full-fledged database to be able to do a lot of the data storage
and handling many users using it at the same time.
So we introduce SQL for that reason.
But again, these don't necessarily have to be mutually exclusive.
You could store data in a SQL database and then use
pandas to do some of the data analysis, for example.
And that's totally possible.
So ultimately in SQL, this data is being stored in tables, where
these tables have rows and columns.
So the example I introduce in lecture is imagine
you're creating a web application for an airline to keep track of flights,
for example.
So every flight has an origin, where it's going from,
some destination where it's going to, and then some duration, how
long the flight is, for example.
And these columns of the table each have different text.
So things like Binary Large Object, which is blob,
or integers, other numeric data, real number data, text data.
So we introduce students to these types that exist in SQL as well.
There are a bunch of different databases that use the SQL language in response
to a question, that they do have slight nuances.
So MySQL is one popular one.
PostgreSQL is another popular one.
SQLite is another popular one.
We, in this class, have standardized on just
using SQLite for a couple of reasons.
One, it is the easiest to set up locally.
Because it's just stored inside of a file.
You don't need to be running a separate database server
to be able to run the application.
And two, because it's the default database that Django uses.
When you create a new Django project by default,
it's by default going to use a SQLite database.
But also, Django makes it very easy to swap out one database for another.
That really just by changing a couple of lines of code
in the settings file of Django, you can swap out the SQLite database
for a MySQL database or a PostgreSQL database,
for example, if you're planning to really scale the application.
So that's yet another nice feature of Django,
just very easy ability to be able to switch what kind of database
you're using.
So we introduce students to the types of queries they can run on that database,
trying to select particular rows of that database.
We talk about how to design a database for thinking
about if you have multiple different tables,
how should those tables relate to each other.
We talk about how to join multiple tables together.
That if you store data across multiple tables in different places,
at some point in your application you're probably
going to want to integrate all of those tables
together to be able to access data that is on multiple different tables
simultaneously, for example.
So that's definitely something that you can do as well.
Are NoSQL databases supported by Django?
It's possible.
I've definitely heard of cases where you can use a NoSQL database, something
like MongoDB, for example, with Django.
It's generally not their recommended approach,
because a lot of the way that Django has really designed its whole model for how
data works and how to interact with data is that it's all very table based.
That it uses classes to represent each table and variables in those classes
to represent columns in those tables.
So you could use a NoSQL database.
But you'd be losing out on a lot of what Django was for
and what Django gives to you for free in the administrative interface
that Django offers.
So generally, a SQL database is going to be recommended here.
And so there, too, we talk about some of the security concerns
that come up with SQL, things like SQL injection attacks
and how a hacker might be able to inadvertently run
SQL code on your server when you don't intend for that code to be run,
and how Django defends against it by using its own ORM, which
is just a way of using classes to represent individual Django tables.
And we talk about race conditions as well,
which is brought up in CS50X, too, for dealing
with what's happening if multiple people are trying
to access your database at the same time and what potentially could go wrong
there.
So we talk about how to build your database,
but also what potentially could go wrong and how
you can guard your application against those potential threats
and vulnerabilities that might come up over the course
of the lifetime of your application.
All right, so this alone is enough for students
to really start to build a lot of interesting web applications.
They can build web applications that render each HTML
pages to the user, applications that have a database,
so that's storing data with complex administrative interfaces
for managing that data.
We can generate all sorts of interesting applications just using these tools.
And some of the early projects do just that.
But we eventually want to introduce students
to front end web design as well and some of the advantages and tools that
are available there, too.
Before we get there, there's a question in the chat.
When I upload my application to Heroku with a SQLite database,
all the data gets erased effectively.
That's to be expected.
Because SQLite stores its database in a file,
when you upload your application to Heroku with a SQLite database.
it's just going to replace the existing database with whatever
file you've just uploaded.
So in general, when you're uploading a web application for use
in production, something on a server like a Roku,
you don't want to be using SQLite as the database.
You'll instead want to be using a separate database server.
And the easiest way to do this with Heroku
is to use Heroku Postgres, which is an add on you
can add to your Heroku web application that gives you a Postgres database
that you can use instead of SQLite.
And it's a few, just like one or two lines
that have to change inside of your Django application
in order to make that shift to Postgres.
And Heroku will give you a Postgres database with 10,000 rows for free
that you can use with your web application.
So if you're deploying it, that's something
you have to think about as well.
Will we run SQL commands in Python?
Or do you need a separate application?
So you can run SQL commands directly in Python.
But in Django, Django has, again, what's called
an ORM, which is an Object Relational Mapper that basically
uses object-oriented programming instead of using raw SQL
queries from the user's perspective.
So you, instead of writing raw SQL queries,
just use Django's built in functions for querying models and adding data
and manipulating data, for example.
And Django just figures out what the actual SQL commands that should be run
are going to be.
And so that lets you much more easily create more complex queries
without having to write all of the SQL syntax.
Because Django is doing a lot of that for you, so another of the nice
features that Django gives you.
Someone's asking my opinion.
Do I think Python is going to become more used than JavaScript
in the future of web development?
I think it's difficult to predict trends in web development
aside from saying that in web development and development
more generally, like, the languages that are popular are always going to change,
that over time new languages are going to become
more popular for certain things and less popular for other things.
The one shift that I think is particularly interesting that--
we don't talk about it in the course, per se--
but I am very much liking that there are all
of these ways now to write code in languages that
aren't JavaScript itself, but are like JavaScript
and then compiled to JavaScript.
So my favorite among these is typescript,
which is a typed version of JavaScript that is also
gaining a lot of popularity now, too.
But it's more secure than JavaScript, because it's doing
a lot of this type checking for you.
And ultimately, it's making it easier and faster
to be able to develop JavaScript applications.
That's a bit of a tangent, because we don't talk about typescript
in the web programming course itself.
But if today I were to write a web application,
I would probably do it in Python.
But if I was going to do it in JavaScript,
I would probably use typescript instead and then compile it to JavaScript.
All right, yeah, there are other frameworks that are getting popular,
too.
So there's no one framework that everyone is using.
There are a lot of possible options.
And oftentimes, once you learn one, it's easier to learn the next one.
So we introduce students to some of the possible frameworks
and tools in this class.
But students are more than welcome to go and explore their own, too.
All right, so that then takes us to the front end.
So we talked about Python on the backend, using a Django server.
And now we turn to JavaScript, which is the language that we're
going to be using on the front end to be able to run code on the client side,
inside of users' browsers.
So we talk about some of the basics of JavaScript syntax
for students who haven't necessarily seen that syntax before.
And then we introduce students to a great feature
of using JavaScript for client side programming, which is event handling.
That oftentimes we use JavaScript as an event-based language, where we're
running code not just right away, but in response to particular events,
when the user clicks on a button, when they mouse
over a region of the page, when they press a key, when the page loads,
or when some element loses focus and you focus on another thing in the web page.
And so all of these features then are events
that you can have JavaScript code listening for and handling.
Such that when a particular thing happens on the page,
you are then running some JavaScript code.
And so that opens up a lot of possibilities
for creating really interactive web pages.
So using JavaScript, we can then also manipulate the DOM.
So we talked about the DOM a little bit when we were talking about HTML.
But it represents this structure of this web page,
where I can now use JavaScript to, say, get access to this part of the web page
and manipulate it.
So that you can change the web page without needing to refresh the page
or visit a different page, for example.
And a lot of modern web applications are now
doing this, that you don't need to refresh social network websites.
You don't need to refresh even some news feeds, for example, news websites.
You don't have to refresh your email, for example.
New emails just show up when those new emails arrive.
And that's in large part thanks to the ability of JavaScript
to manipulate the DOM, to change what it is
that the user sees on the page in response to particular events,
for example.
So we show students how they can go about doing that DOM manipulation,
building simple web applications that are manipulating
what happens to be present on the page.
And then introduce students to some other features of JavaScript
as well, things like localStorage, which you can use in order
to store data inside of the user's web browser so
that when the user revisits the page the next time, their progress
or whatever they've been doing is saved in the page.
So you can reuse data that you saved from the last time
that a user visited that page.
We also introduce students to how to use JavaScript
to talk to API, to talk to other services
on the internet that are going to provide information
or data or other services, for example.
And the one we introduce in lecture is something like a currency converter.
Such that, for example, they can type in a currency
and get back what the exchange rate of that currency is with the US dollar
immediately, based on the latest exchange rate.
So it's not just that the application is storing some outdated exchange
rate that's never going to change, but that we're
accessing what is the latest exchange rate between the euro and the dollar
and then can we display that to the user.
So we show students how to use JavaScript to talk to those APIs,
get back some data, and then incorporate that data into their own web
application.
And that's something they can use with their own applications as well.
That they could build their own API.
And we have students do a little bit of this, too,
such that their front end is then talking to the API,
getting back some data, and then showing the results of that data
analysis on the page, too.
Someone's asking about TensorFlow.js versus TensorFlow in Python.
I don't have too much experience with TensorFlow.js.
I've primarily used TensorFlow in the context of Python.
And I've shown some of that in the artificial intelligence class
that we'll talk a little bit more about tomorrow.
But TensorFlow is gaining incredible popularity
across a number of different languages and a number of different places
just for being one of the easiest tools to very quickly do
machine learning work.
So I think either is going to be fine, depending on your use case.
What about Jinja?
Is it introduced to students?
Django uses a different templating language that is very similar to Jinja
but has some slight differences syntactically in terms of how it works.
That was another motivation for just focusing on one framework rather than
both Django and Flask.
Because now, instead of having to learn two different templating
languages, the Jinja templating language which Flask uses
and then Django's own templating language, we can just focus on one
and avoid some of that potential confusion.
Django does let you create your own commands.
That if you want to run particular commands on your web application,
Django supports those as well.
They're known as management commands, if you want to look for that.
We don't introduce xml as a format for representing data.
We primarily introduce json, J-S-O-N, as the data representation format.
Just because most of the REST APIs, especially REST APIs
nowadays, are returning data in that format.
And the built in Python and JavaScript libraries
for dealing with requesting data have a lot of nice features
for dealing with data in that format, for example.
All right, so once we've introduced students to the syntax of JavaScript,
we can then use JavaScript to build interactive and custom user
interfaces, to be able to create more interesting interfaces
that users can engage with.
So the first of those things that we talk about
is better understanding data that we get about the window.
It turns out that in JavaScript, you can access a whole bunch of information
about the user's current window, like how wide it is, how tall it is,
how far down on the page the user has scrolled,
and get access to all this information in code.
And there are a lot of user interface implications for this.
Because you want your application to do something different based
on the size of the window, based on where the user has
scrolled to on that page, for example.
If you've ever seen a web page where things are really changing on the page
as you scroll through it, they're probably
using some of this window information in order to do that.
And one of the most common examples is something like infinite scroll.
That if you use a social networking website like Twitter, for example,
you notice that you scroll down to the bottom,
and you can just immediately start loading more posts, for example.
So here, for instance, is what infinite scroll might look like.
We show students how you might have a whole bunch of posts.
And as you scroll through the page, as soon as you hit the bottom of the page,
new posts load automatically.
And so this is a common feature in many modern user interfaces
that use a whole bunch of data.
Rather than force the user to click a next button and next and next and next
again and again, just when the user gets down to the bottom of the page,
load the next page worth of information and show that to the user right away.
Parallax scrolling is another instance of things changing
when you're scrolling, for example.
You can do that with JavaScript.
I think there are also ways of just doing that with CSS.
So you might not necessarily need JavaScript in order
to do something like that.
I did mention REST.
REST is a particular way of constructing an API, like a service that web
applications are interacting with to get back to request information
or requests to make some sort of change on an application
and get back some kind of response.
That's something that we talk to students about in the course.
And then, in addition with user interfaces,
we introduce students to animation.
I'm personally a big fan of using animation
across a whole bunch of domains.
And JavaScript does a great job of making
it easy to be able to create animation.
So that if you want things that are moving in your application,
whether it's shapes that are moving around
or things that are changing in shape or size or color or other features
and moving seamlessly between those things,
we show students how to animate their web pages using JavaScript as well.
And that leaves open a lot of fun possibilities.
We show both CSS animation and JavaScript animation.
So they're both things that you can do with--
CSS animation is the one that we focus a little bit more
on, just because it's a bit simpler to set up.
And you just say what should the CSS be at the beginning
and what should the CSS be at the end.
But you can absolutely do animation in JavaScript as well.
And that becomes especially powerful when
you add it to something like React.
So React is a front end web framework that's
designed to make it very easy to build interactive user interfaces so
that the interface is reacting to things that are happening inside
of the web application.
So if one thing happens in one part of the application,
some other part of the application can automatically update.
And it's a different way of writing your front end code, just
to make it a little bit easier in order to do so.
And React as a big library.
There's a lot of features in it.
There's a lot of extensions to it, as were mentioned in the chat, too.
We don't talk about all of that.
But we do just introduce students to the fundamentals of React,
how to create what are known as React components, which are just
pieces inside of the React application that
can be reused in other parts of the application, for example.
And then we allow students to be able to use React in their web applications
if they want to.
It's effectively a substitute for just writing plain JavaScript
to be able to design your user interface.
You can use React instead.
And as was mentioned in the chat, one of the nice things about React
is that it can connect to any backend web server.
Because it's just meant to be used on the front end.
So you can use it with Django.
You can use it with Node.js.
You can use it with frameworks like Laravel, or Ruby On Rails,
or other popular web frameworks, too.
So a lot of those are possibilities, too.
Questions, then, about the JavaScript portion of the course?
We don't introduce students to pixi.js specifically.
But hopefully, we give students enough of the resources and tools
for how to use JavaScript libraries and tools that they should
be able to pick up on a lot of that syntax,
because they'll have seen a lot of similar types of syntax before.
Yeah, Ramon.
Go ahead.
SPEAKER 4: I would like to ask if, in the JavaScript world since 2018,
has any change happened that influenced the topics thought in the JavaScript
lecture and the front end lecture?
BRIAN YU: The main change in the front end lecture and responses is React.
React was already popular in 2018.
But it's only gotten more popular in recent years.
And so when I was going through some of the examples for the 2020 version,
there were a lot of examples that are a lot of sort of tedious JavaScript code
that React just makes a lot simpler.
And so I figured the better choice in this case
was probably to introduce students to the way that things are done now
and just some of really the fundamentals of React syntax
so that students get exposure to that.
Because if they go into the world of front end web development,
or want to design applications of their own, React will save a lot of time.
And it's also quite popular in the industry, too.
Someone's asking about React versus Angular.
So React and Angular are both popular frameworks for using--
for basically creating interactive applications.
People will disagree about this.
My opinion, after having tried both, and looked at tutorials for both,
and tried to approach both from a pedagogical lens,
is that React is a little bit easier to learn as a beginner,
just for getting things set up.
In particular, because you don't need the object-oriented syntax.
You can just use a function in React to be
able to create a component, for example, just to start things, for instance.
But Angular is going to be very similar.
They have their differences in how the frameworks work.
But you could certainly teach students how to write code in Angular as well.
Angular happens to use the language that I mentioned a little while back
in this session.
Typescript, that's the programming language
that it uses for programming in Angular, which
is an extension to JavaScript that adds some additional features to JavaScript.
And I quite like typescript as a language.
I think it's a great choice for Angular to use it.
But I thought it would probably especially
be too much for this class to not only introduce here's
how you program in typescript, but then here's Angular on top of that, too.
So we decided to just stick with React for the purpose of this class.
What is native in React Native?
So React Native is a way of using React code,
using the React library to be able to create native mobile applications,
to create applications that are running on mobile devices, in particular.
So we don't use React Native in this class
because we're focused on building web applications that really just use React
and what's known as ReactDOM, which is React library for rendering
React information into a web page.
Ramon, your hand is still raised.
Did you have another question?
SPEAKER 4: Yeah.
You just talked about trying to approach the course with a pedagogical lens in.
I realized that not much has changed when it comes
to the content between the versions.
You introduced React and a new Java class.
But on the overall scheme, the content remained the same.
But I would like to ask if, with that first experience in the other two years
that have passed by, is there something you
learned in terms of lecturing the content
that you tried to apply this time?
BRIAN YU: Yeah, so there are some smaller differences.
A lot of the big ideas in web programming
haven't changed all that much in the last two years.
A lot of the same ideas about requests and responses and views
and the separation of controller code from the model, from the template,
a lot of that has remained very similar.
So a lot of the core material of the course has remained very similar.
But we've made these adjustments in terms
of what we focus on to allow ourselves to go a little bit deeper into things.
And the big place where things have changed, in my opinion,
is also the projects, which I'll talk a little bit more
about after we get through the syllabus of the materials.
Because we really found with the projects
that students wanted to better understand
how the web applications that they interacted with work.
That I got a lot of questions, people coming to office hours and asking how
does Amazon's website work?
How does eBay's website work?
How does Google's website work?
And so using the projects as an opportunity
to apply the lecture topics to the types of applications
that students are seeing everyday was one of the big goals of the project.
So each of the projects is inspired by a popular web
application that's already out there.
Joe?
Go ahead.
JOE: Yes.
So does Django support anything besides web development
like, building a new website?
Can you use it to do automation?
Or just take an existing website, build additional functionality, for example?
BRIAN YU: I mean, Django is a web application framework.
So you could add, potentially, one app that is a small piece of a larger web
application separately using Django.
That's certainly a possible thing you can do.
We don't talk specifically about that in the class.
But it's an option available.
And I see a question in the chat.
Does Django support scaffold like Ruby On Rails?
If you mean that in the sense of creating the structure
for the beginning of the project, yes.
There is a command in Django called start project that will basically
create, will automatically generate all of the files
that you need to start working on the Django project.
And then you can just add to that all of the details
that you want to add for your particular application.
All right, so we introduce students to programming in Python with Django,
then in JavaScript for the front end.
The last part of the course focuses on some
of the best practices for developing web applications
and for thinking about how they scale and how we make them secure.
So we talk first about things like testing, so different ways
that you can test your code.
There is unittest, which is a Python framework
that you can use to automatically test individual functions.
That if you want to test small components of your code,
unittest is quite good for that.
Django has a bunch of built-in testing features
that make it easy for testing your Django application.
And this is especially helpful when you're
dealing with applications that work with big databases, for example.
That if you have an application and you want to test the ways
you interact with the database, Django's testing framework
will automatically create a fresh database just for your tests
so that you can run a whole bunch of tests on that testing database
without affecting your actual database, for example,
which happens to be quite nice.
And then Selenium is an example of a tool
that's used for browser-based testing.
That if you want to test users' interaction with a web page
as by checking what happens when a user clicks on something on a page,
for example, Selenium happens to be really great for that.
Automation with Selenium, someone's mentioning
in the chat-- it's very, very cool.
You basically just watch your computer take over the testing.
And you can see in the browser exactly what's being tested.
So it's a lot of fun to see and useful for being
able to test how user interaction works.
We then talk to students a little bit about continuous integration
and continuous delivery, which are tools that are commonly--
patterns of work that are commonly used for making sure that code is always
being integrated together.
It's always being tested.
Making sure that you're able to deploy small changes to code
instead of waiting months or years before you
release big versions of code.
That especially with web applications, it's
fairly easy to set it up such that you fix a bug and now
immediately that bug fix is deployed.
You don't have to wait for the next release cycle,
for example, before that change takes effect.
And there are a number of tools out there for doing CI/CD types of things.
In the 2018 version of the course, we spent
a fair amount of time talking about Travis, one of the tools
for doing that.
In the in between years, GitHub has released its own tool
for doing this kind of thing called GitHub Actions.
So that's what we show the students now, so that everything
stays right inside of GitHub as the tool for being
able to do this kind of thing.
And then, in answer to one of the questions from earlier before,
we also talk about Docker as well.
And Docker is a way of effectively creating containers
in this context in which your web application is going to run.
And those containers have pre-installed software, pre-installed packages.
And the advantage here is that you can guarantee a consistency
across environments.
That you can test your code inside of a Docker container on your own computer,
and then you can run your web application
in a Docker container that's based off of what's called a Docker image.
Such that students can make sure that when the web application is running
on the server, it's going to be using the same environment, same version
of all the software as the version that's running on their own computer.
Why isn't Travis featured in the new version of the course?
In particular, we just wanted to pick one tool
to show to students for what types of CI and automated testing we could use.
In 2018, the tool we used was Travis.
Travis is certainly still a popular tool that's very much used in the CI world.
But we decided just to stick with GitHub Actions so
as not to introduce yet another service that students
would have to sign up for.
So that students who already have GitHub accounts
can just use GitHub Actions to be able to do that kind of work.
But a lot of the CI tools will behave in similar ways, such
that you could do the same sorts of things.
And Travis CI, or Circle CI, or a number of other of these types of services do.
And then finally, the last topic we talk about with students
is scalability and security.
So thinking about as students' applications
grow bigger, what are the types of things they have to think about.
And even if they're not the person writing the web application,
if they're the person managing the web application, what
do you need to think about as more users start to use the application?
What vulnerabilities come up?
So a lot of these are topics that we also
talk about in classes like CS50B or CS50T or CS50L,
if you were at Monday's session with David.
But these are things like scaling your database, so vertical scaling,
taking a server and just using a bigger server in order
to be able to handle more users.
Or things like horizontal scaling, where you have a server,
and instead, you just add multiple servers.
So we ask students questions like, all right,
when you add multiple servers, what do you then need to do?
Well, now you need to have some sort of load balancer
that's balancing between both of these servers,
and put some users to one server and some users to another server.
And you have to answer questions, questions
like how do you decide which server to send to a user
to in a way that's consistent and in a way that's going to try and balance
between them as well.
And so those are the questions that we start to answer and look
at in this part of the class.
We talk about autoscaling.
So what might happen is your application is growing bigger and bigger
and you have more users of certain types of times of day than others.
You can have your application automatically scale up,
automatically add more servers.
And in addition to scaling up your web server,
you might also scale up your database.
If one database isn't enough, you might have multiple databases.
But then the question is how is it that you keep these databases in sync?
If you've replicated all these databases,
you need some way of having one of these databases
tell the other databases about any changes that
have been made, for example.
So we talk about a couple of models that can be used for that as well
to be sure to keep databases in sync.
And we talk about caching data, so that we
have some version that is faster to access which is very helpful as more
users start to use the application and things start to take a little bit more
time.
And we talk about the security problems that might come up
as you use an application.
So some of those are things like phishing, where one URL might
think you're going to one place.
You might think you're being taken to one website.
But you're actually being taken somewhere else.
We talk about public key cryptography, which
is at the heart of how secure communication over the internet works.
How is it that two computers, who have never talked to each other before,
can send a secret message over the internet
without anyone in between being able to intercept it?
We talk about hashing, how to store data in such a way
that we're not storing literal passwords,
but we're storing, ideally, hashed versions of those passwords
so that if there's ever a breach on the database or someone gets access
to the database, no one's able to actually see what those passwords are.
And we talk about other security concerns
as well, things like cross-site request forgery, which is a potential security
vulnerability that might happen where someone might be tricked
into sending a request to some website when they didn't intend to,
for example.
So questions then about anything in the syllabus?
[INAUDIBLE], yeah, go ahead.
SPEAKER 5: OK.
Thank you very much, Brian.
I have two questions.
The first one is which programming language offers the best tools
to transpose a project to another language for any different reason?
BRIAN YU: I'm not sure I understand exactly what you're asking.
Like, if you're translating on that project from one language to another?
SPEAKER 5: Translate, transpose, for example,
I have developed the project in JavaScript or in React.
And I want to use to another project or to another web developing prior,
but not in Java, but in another language.
And so which from them offers the best tool
that I can transpose it to another language, just from Java to React,
from React to next one?
BRIAN YU: Yeah.
So I don't know if there is a best tool that's objectively the best.
What I will say about tools like React, and this is also
true of Angular and a lot of the other libraries,
is that they're designed to allow you to build your entire application in React
if you want to, or only to build a small portion of your application in React.
And so a lot of web applications that transition to React
will do so little by little.
So that they'll start by just replacing one page or one part of one page
with a React component.
And then over time, start to build more and more React into the website,
replacing more and more of the existing code.
And that's a nice way of transitioning an existing project to React.
It's not an all or nothing, like the whole website must be React
or it is not.
React in a lot of similar frameworks will let you move things over slowly.
And some of the components we show in the lecture,
we'll talk about that, too.
SPEAKER 5: Thank you.
And the second, which offers the most suitable tools
to guarantee, or for configuring, or offering a high level of security?
BRIAN YU: For security, I think it's largely
going to depend on what framework you're using.
A lot of times the web framework itself is going to build in security tools.
So for example with Python and Django, Django
has built in cross-site request forgery protection.
So you don't need to write any of your own code
to be able to protect against this kind of vulnerability
because Django already has written the code that
is looking for this kind of vulnerability
and is trying to safeguard you against it.
So I think it's, in large part, going to depend on the frameworks.
Django is known for being a fairly secure framework.
But there are definitely other secure web frameworks that are out there.
Certainly, no framework is perfect.
There are always bugs that people are working on.
SPEAKER 5: In general, regarding confidentiality, availability,
and integrity?
BRIAN YU: Yeah.
Again, I think I don't want to definitively say
there is a single best framework for all of everything.
But I think a lot of the modern popular web frameworks, things like Express.js
for doing things in Node or Django for Python, they've given a lot of thought
to security.
And while they might not be perfect, certainly they handle a lot of things
that a user building a web application from scratch might forget about.
SPEAKER 5: OK.
Thank you very much.
BRIAN YU: Yeah, of course.
We do talk about cross-site scripting, too.
I didn't have a slide about it.
It came up in the chat.
Cross-site scripting is a way of sort of injecting JavaScript code
into the user's browser and getting them to run code they didn't mean to run.
But that is something we talk about, too.
Ramon, go ahead.
SPEAKER 4: OK.
So yesterday, Colton, he was talking about a game development course.
And he said that the number one rule or principle in game development
means to create your game in such a way that it gives the player the perception
that there is more to that virtual world than there really is.
I would like to ask you what is the rule or principle in your opinion for web
development that the instructor should have in mind when delivering the course
and also the developers should have in mind?
BRIAN YU: It's a good question.
So yeah, it is a common mantra in game development,
which is, like, every game is an illusion or something like that.
Where the things you don't see are oftentimes not there at all,
for instance.
I don't have a quippy, one sentence mantra for web programming.
But what I would say is a big theme of the course
is thinking about a web application is not just a single big thing.
It is composed of many different pieces.
And so a big part of what web application development is about
is A, deciding what pieces are going to be in your web application,
do you need a database, do you need a cache, what is your web server like,
what are the pieces on the front end, for example.
And then, how do those pieces communicate with each other?
How does the front end use an API, for example, to talk to the backend?
How is the backend talking to the database?
Is it using SQL queries?
Are we using an ORM?
What is the means of communication there?
So if I had to boil down this course into a theme, the theme of the course
is understanding what the pieces of a web application are
and understanding how those pieces communicate with each other.
Joe, go ahead.
JOE: Quick question about your Python skills,
how did you get from basic CS50X Intro to Python to,
I don't know how you would describe your level, but I'd say advanced level?
Look at books?
Or did you take different courses?
BRIAN YU: I definitely took other courses.
So CS50 was sort of the first class, computer science class at Harvard
that I took.
And I took other computer science courses later, some of which
spent some time in Python.
But I think in large part it was from learning on my own
through creating my own projects.
That I would have a project I was interested in working on.
And then, in the process of working on that project,
I would be forced to learn the necessary Python skills I needed in order
to work on that project.
And I think that's a good way to learn a language,
is not to learn the language in a vacuum and just learn all the syntax at once.
But to try to build something, and in the process of building,
realize what you'll need to add in order to do so,
what skills you'll need to learn, and what
syntax you'll need to learn in order to get that experience.
So that's personally what worked for me.
But I think it's going to vary.
I'll talk about projects in a moment, Charlene.
I'll just briefly show you what the projects are and what they're based on.
How is Heroku different from hosting from something like GoDaddy,
for example?
So GoDaddy is an example of a domain name provider.
It's primarily used if you want something.com or something.net,
if you want a domain name.
And there are a whole bunch of providers that
will sell you domain names, that usually you
have to pay for, for a certain price every year, for example.
Hosting the website is separate from that.
Once you have the domain name, you then need
to connect that domain to the actual server that
is hosting the application itself.
And so Heroku and GoDaddy are not mutually exclusive tools.
In fact, if you purchase a domain with GoDaddy,
you can connect it to your application on Heroku.
Such that when you go to the domain name that you
bought on GoDaddy or some other domain name provider,
you'll be taken to your Heroku web application.
So you can definitely use that, too.
Just to briefly talk about the projects, because a couple of people
have asked about the projects.
Each one is based on an existing web application.
We ask students to think about how that application might work
and how they not recreate it.
So first with just HTML and CSS, we ask students
to reimplement Google, reimplementing things like Google Search and Google
Image Search and even the Advanced Search that lets you
search for various different fields.
Because all this is really some CSS to center everything,
some HTML to describe the structure of the page, and then some HTML forms,
to be able to submit them.
Once we introduce students to Django, we have students build, effectively,
their own version of Wikipedia that lets them create pages, edit those pages,
generate, look at random pages, for example.
And this is just an experiment with different views
and being able to render different views and creating
places where people can type text into those views,
for example, creating forms within Django.
Once we introduce students to databases in Django,
we then have students implement an e-commerce site,
something equivalent to something like eBay or Amazon, for example.
eBay in particular being, like, an auction site
where students can create listings for products
they want to sell and then let people bid on those individual listings.
And you have to update your database with all of the latest listings
and what the latest price is, and you have
to calculate who the highest bidder is.
And all of this is using Python code that's interacting with the database
and then displaying it to the user.
Once we introduce students to JavaScript and building things on the front end,
we then introduce students to have them build their own mail client, something
like Gmail or Outlook, for example.
Where they're able to get new mail, they're able to click on things
and see new mail.
And this is all happening on one page.
Where it's not reloading new pages, it's JavaScript
manipulating the DOM to change what it is that the user is seeing.
And then finally, we have students put this all together
and build a big social networking website that basically is something
effectively kind of like Twitter or Facebook, where users can make posts,
they can comment on other posts, they can heart other posts,
they can follow other friends of theirs that are on the social networking
website as well, just to give students an idea for how all these pieces fit
together.
At the end, we have students create a final project of their own
that uses these features and more to create something of their own choosing.
But these are the projects that we have students work on, in particular,
to give students a sense for how you can use the tools learned in this class
and apply them to better understand or even create
the kinds of web applications that students interact with.
So these, then, are the topics we talk about in the web programming class.
We start with HTML, CSS, talk about Git.
We use Python to then introduce Django and use Django to introduce databases.
We use JavaScript to build front ends.
And then we talk about continuous integration and testing
and how you make sure your web application
can scale and hopefully can do so securely as well.
We are at 2 o'clock.
So we are just about wrapped up.
So thank you all so much.
And tomorrow we'll reconvene for the final session of this educator
workshop, where we'll be talking about our course on an introduction
to artificial intelligence.
So I hope to see you all then.
And enjoy the rest of your day.
Thanks, everyone.