Good morning, everyone.
I hope you all are well. I have just um
just getting started here so
First of all.
tutorial, as you all should have seen from what teams
tutorial one and two, the deadlines have been expected October 9th because the assignment
One is due October 9th.
So that's tomorrow night.
If you'll notice, submissions are technically open
Until um
just before class on Thursday.
But please try to get it, you know.
get it in on the 9th.
But there's no penalty as long as you get it in before submissions close.
But I'm not going to
Like, oh, I tried submitting it and it's you know
it's, you know, I miss the 1130. It's like
No, she should have gotten it in closer.
Unless there's some extenuating circumstances. There's some extenuating circumstances and you've already talked to me then
Don't worry about it.
Assignment two.
is now out.
It is due on the 16th. The only thing it hasn't been finalized is
I have to make the template and the submission and everything.
But otherwise, unless someone noticed any problems, I think this is basically in good shape.
And is what I'm planning on talking about today in class.
Unless there are any specific questions.
This is about…
this program called DB Demo 2.
that I put together yesterday. It's basically similar to
DB demo.
Actually, I'm sorry, I'm not going to talk this too much. I want to talk about um
So I can tell you a couple of things. So basically what it is, I'll
The big thing to notice is this one has a nice little
menu.
So this has now become an ad screen
And then there's this nice little
you that when you first start the application.
And there's a few other little things throughout the code that you'll figure out when you do the questions.
So sorry, I forgot. I'm not going to actually talk about this too much because that's what you're doing for your assignment.
What I'm hoping to do is talk about
more general web technologies and start um
talking about client serving stuff, but I'm happy to spend time
answering questions about things in general.
What will be the turnaround time on marking the first assignment?
So, um.
The turnaround time will not
it's not going to be
If we're lucky, we can get the assignment. I mean, if you look at it.
there's a week.
here so um
So you all should really get working on assignment two as soon as possible. Honestly, if you're turning an assignment
you get working outside too. Hopefully you've been keeping up with the tutorials. So this is just a modified version of database demo.
It's not so. Will we have this created by
Assignment 2 submission.
Maybe, maybe not, actually.
I'll work with the TAs, but I'm not going to make any guarantees about that. The plan is to have all your assignments graded before the midterm exam.
So that you have
So you know where you're standing in the course.
that button.
Will assign the two be finalized just after class.
I just need to make the, I just haven't made the validator
And this template made submissions.
a shared folder between our home computer and the class VM.
Is there a way to create a shared folder between the home computers and the class VM?
There are various ways. Yeah, Git certainly
I'd say, yeah, just make something on GitHub and check it in and pull it out stuff.
But honestly, you can also just remotely access it.
And oxidize it feels local but
Yeah, Git's also a really good way of doing it.
As far as there's a random question here.
When is the deadline for tutorial for?
The deadline for tutorial four
is the same as October 16th.
the same as the due date for
here so
Other web browser games coded in JavaScript.
Ah.
If it's on the web, it involves JavaScript to some degree.
But there's…
there's a lot of technologies here.
Uh.
So, um.
What I'm going to talk about today
Let me stop sharing now. So unless
FCP works well. Well, so the
the thing about a shared folder is like you want to be able to have it continuously synced
And what you can do if you can actually
mounted. There's things like SSHFS where you can access remotely. The question is.
what do you mean by having a shared folder? If a shared folder just means it's remotely accessible.
that's like a network drive and then you have to be online to access it if you want
If you actually want to synchronize, you probably want to have multiple copies and you might as well
you sort of like version control and check in and check out and then you get other benefits.
Does the OpenStack admin will have access so there's a
uh…
I got a question about using Git with OpenStack and stuff.
The thing if you're trying to understand how to do things with the OpenStack VM,
The OpenStack VM is just an Ubuntu
2404 instance.
which can do anything Ubuntu can do
running behind
a set of firewalls.
That's all it is. So outgoing traffic is easy. Incoming traffic is very restricted.
You can do SSH in however as long as you're on the Carlton network.
So if you do that. So given all that, you can do like there's a million solutions like that.
I would recommend…
If you're not going to
If you don't want to just do remote access and you want to have a local copy that you can access on the remote server.
No questions?
I wasn't sharing my Emacs.
He started typing and I hadn't shown it so
Access.
But like this sort of thing using Git to access things on GitHub with it like that's
It's a classic workflow it's
It's great to figure out. It's kind of beyond the scope of this class and I've got a lot of other material I'd like to cover, so I'm not planning on
focusing on that.
it's good to there. So again, I'm happy to answer questions regarding this stuff so
At this point, just in terms of the…
Where are we now?
So here we are now. We are sitting here at lecture nine.
So.
we have next, we have class on Thursday.
On Thursday, I'll go over tutorial five.
Which is not on
the midterm, just to be clear.
But if you look at the material of tutorial five, that will help build up your conceptual model. That's really for
the next assignment, which is going to be after the midterm.
So that's there.
then we have
you know we have tutorial five and i'll start cutting material here
Tutorial 6 will not come out until after the midterm.
And October 17th will be
the assignment
you know this is where I will go over solutions
for, sorry, on Thursday, I'll be going over a solution for assignment one.
On…
Following Thursday, I'll go over a solutions for assignment two.
which will serve as the midterm review because the midterm
is on the first Tuesday when we get back.
after the break. So that's when you're, you know.
your assignment should all be done. And you have then, once that's done you have
the break to get your head around the material if you feel like you're
You know, there are some things you didn't quite get and then the midterms there and then we'll be moving on
after that quickly.
The…
Does the way this class works is I'm building up a big conceptual model of lots of things
that there's lots of different technologies and stuff and
It takes a while for it to all kind of gel together and i find that
Even after you may have done the assignment, like, what did I really do
thinking about it and looking through it will help you
understand things. I will be around during the week of fall break, you know, available online
And I'm happy to answer questions through Teams. Feel free to message me on the boards or to
post things um
you know post things to you know
you know posting the forms, send me direct messages
I'm even willing to have um
a live session for people. I can schedule one later during the week or something if people had questions.
you know.
I'm flexible that people
are interested in that but
Oops, no.
Everything up to including lecture 11 is on the midterm, correct?
No, no, no, up tonight.
Now I'm going to start covering material today.
that's not on the midterm.
Because what the midterm is
is the midterm is based on the first two assignments. You're wondering what's the format of the midterm?
It's exactly the format of the assignments in terms of
the thing that you submit. You're going to submit a text file in the same way, but you'll do it through Brightspace
The only difference is it'll be through a control timed
assignment on Brightspace that will only be open for a limited period of time.
where you'll have to submit and
I think I'll have to check on
figure out logistics and stuff. The standard time will be during class time
For those of you who may have some conflicts, I'll have a
a second time period, but you may have to request access to that one.
then
I have to figure out those logistics. But basically, it's going to be a timed thing your assignment you
So upload the text file
And that's it.
So.
So here's the problem with
I talk about things in lecture.
And then I make a song, you know, you have the tutorials, what we call the tutorials and the
Lectures are kind of synchronized.
The assignments lag that.
And then the exams, they lag that so
If I want to use my lecture time
efficiently have to kind of move ahead. Now the
Beautiful thing is if you kind of like
or get mined or something, you can skip this lecture and let's watch it later. That's the nice thing about it being recorded.
But I do think it's worth
attending the lectures and kind of keeping up with them, even though the material on them
isn't directly tested on the midterm because it's part of the larger context
understanding the web.
And to understand the web.
where does this thing happen? Where does that thing happen
That's what we're going to be talking about.
Oh, God, yes. We'll be short on the assignment? Yes.
The plan is for this to be only doable during a class period. So yeah, the questions are going to be
a different sort of question.
And it's really going to be about
what you did in the assignments.
Now, my expectation
So my expectation is that you will understand
the code of the assignments and be able to do it one by one.
So their midterm's about one and a half hours. Yes, exactly.
80 minutes.
Because if you take off the five minutes before and the five minutes after.
When I say every line, so like, you know, you go to um
So if you look at DB demo here.
And we go through the code here.
you'll see that we have um
you know there's all these lines things here like
what is each line here doing?
This isn't that much code.
And if you have questions about what why any of these lines are here.
you know you should figure it out.
And so that's
So as I said, the way I organize this course is I really base it much more on
trying to understand code I give you rather than you making your own code.
And the reason for this is because in the real world, that's what you have to spend most of your time doing, figuring out other people's code.
either reading documentation or looking at the actuals.
code there because you can't add in your code unless you understand their code.
And that's certainly the case on the web.
So that's why this course is focused that way so like
How many lines here? There's
277, you know.
But the assignment's a bit longer
So that's what you should be trying to understand.
So a question was, if you're having trouble understanding JavaScript syntax
So, uh.
First of all, definitely ask.
If you have questions about JavaScript syntax.
I'm happy to discuss.
Anything specifically?
I definitely recommend looking at the books.
that I've suggested, you know, the eloquent JavaScript, the things that go through the basics
At this point.
this is your third programming language.
So I kind of, and there's not really, there's a few weird things but
this code actually isn't doing a lot of weird stuff.
But I'm happy to answer questions about what these things are doing. The main thing to understand is these
objects that are just sort of dynamically created.
But yeah, yeah.
please ask things.
Yeah, the midst will be through a Brightspace assignment.
that you'll just upload your answers. Now, oh, one thing to remember.
I'm just going to remind you, remember, at some point we'll start doing interviews
I'm just going to say that. I'll talk about that more.
Later. And so the interviews are going to make sure that your answers
correspond with what you submitted.
It won't be everyone that's interviewed, but it'll be
randomized and targeted.
We'll probably message you through Teams.
to try to contact you first.
If you're not on Teams, then we may try um
then we'll try email. But all of you at this point should be on Teams. Although I'm still getting a few stragglers, they're only adding themselves to it. I'm going like.
you're just missing out if you're not on Teams at this point.
Because I definitely give hints.
regarding things there. And that's where I'll be mainly answering questions.
Okay, moving on.
Okay, so, so today I want to talk about client-side JavaScript, although I will stop to answer that question because that's actually a very valid thing.
So the question is, is in my code.
I use VAR a lot.
I don't use let.
Why don't I use let more?
So.
it's all about, so VAR is an older JavaScript syntax. Let is a newer thing that was added to JavaScript.
And it's mainly about scoping. So both are used to declare variables.
And…
So the only real difference between them is
var is function scope.
let is block scope.
And so the typical thing is um
My phone was buzzing me.
So what does that mean?
So when I declare var here.
its scope is the entire function
here. If I had declared let.
that's the enclosing block. It'd be exactly the same.
If I had instead used, so where we people typically use let
is in the context
of like defining like
a smaller block of code.
that um
And you want that variable to be only defined within that block of code and not within the whole function.
So the one reason why people
So if I were to say var here, like somewhere here, like right at the middle of the function
It actually, well, actually, that's easy to show the main one here.
I feel like, how many functions where I declare var?
Yeah, okay, so like for example here
I declare var here. Anyway, here I say bodies here.
And then I see, I just find response here. By declaring a response here this way.
it acts as if it was declared at the top of the function.
Its scope is the entire function, where if I had done let
it would have been limited to, although I don't think it would necessarily do much different here
So VAR is not accessible everywhere.
VAR is still limited to the function which it's declared.
VAR is not global.
So that's why, you know, these are still local variables
So…
Yeah.
Again, you know, so let does have smaller scope
Exactly, yeah.
So what am I saying here?
If, for example, in this year, I wanted to have a variable
that was just within the
just within this if statement, I was doing something there.
that makes sense for let because that means that it's limited there. If you put in var, it would be valid for the entire function, and in particular might be valid in the other clauses.
And that can get problematic.
Now, it all depends on what you're doing in your code.
much of the time
the different branches of your if statement are all dealing with the same basic data. So it doesn't make sense to declare the variable separately. You just declare a variable and they do different things with it.
Again, it depends on how you structure your code. So I'm not saying you should never use let.
some people I think default
to let.
Which is fine.
Again, it's the newer thing but
Most of the time I like to say, you know, VAR, it's like, okay, in this entire function, this variable's there.
And if I'm using let, it's kind of like, oh no, this is going to be limited to here so
I prefer to use limited uses of let only when it makes sense.
But that's a style thing. And honestly.
I'm not saying there aren't other ways. And if there are some people say never use VAR, just use let
that's fine.
Yeah.
So this is actually a good thing to talk about because this gets into scoping.
Which is something I haven't talked that much about. I know I talked much more in class.
So let's do some…
Let's do some a little, let's talk about a little code.
Okay, so here we were, actually, that's so funny
I already did this in a previous class.
So you have an outer function, inner function. Let's talk about
Let's add some variables to it. So if I say.
bar.
X here.
this X and I say.
bar x here.
Five.
Seven.
Okay, and then…
So here I'm just let's talk we're just talking here about function scopes
And then we'll talk about
Okay, so…
Okay, so I've got Deno running here.
And so now I'm going to just
paste this code into here. There's a way to get the
the REPL running here, but I'll just
You may want to do that for later.
So now at the top level here, x is 12.
If I call…
So now here I'm returning
the inner function here.
Yeah. So, oh, by the way, so there's a quick question about quizzes. Quizzes are due
they're due for a week at the start of class.
Submissions are open till the end of day.
I don't close off submission so
If you got it in, you got it in, but you really are supposed to get it in before class.
That's why that deadline's there.
Anyway, so here we've got this FZARO whatso say
So f of seven is 29.
Oh, God, I've got to
I'll restart my Emacs after this.
keep forgetting that start and reverse video. That works better for some of these highlights.
So what do we have? Why do we have 29 here?
If you submit, you're fine.
if it accepts it.
If you don't get it in by the end of the day, then it's just gone and you can't do it.
Unless I make special provisions.
So…
you know, get it done.
So I said F of seven is 29. I added extra blank line. Don't worry about that.
But let's see, why do we get 29?
Because we have, so this is returning a plus B plus X.
So A was…
A was the outer one.
So we called um
That's 21.
That was A.
And then B was seven.
So 21 plus 7 is 28.
plus one is 29 so this x
is here.
Right. And then, but now let's redefine this function
instead of returning a function.
let's call, let's return
Let's define it this way.
Please.
Now I'm annoyed.
Do this separately.
Screen sharing.
going to instead
Share this terminal.
Sorry about that.
got kicked kicked myself out.
By trying to share the window.
Anyway, it looks like the recording kept going.
So let me share my terminal again.
Hopefully that will work.
Good.
So now I'm on the VM. Let's talk Denno.
And now we can, I'm going to bring up my code again
Okay, so where was I? So let's put this code back in.
And we've got this.
That was not what I wanted.
So now we have outer.
Notice inner is not defined
Because inner is just declared inside of outer.
x is 12 here.
if we say outer
of
Breathe.
Now what we have is we get the value nine
Because three is coming in here.
Five is here. So five gets passed in here.
So B is 5.
A is this A, which is 3 plus 5.
is eight plus this x.
Which is nine.
So.
I get my oops.
So if you had asked some questions while I was there, my chat window got cleared.
So please ask it again.
When I restarted zoom which is
Interesting that it does that but
Anyway.
So the question now is here, what does let do in this sort of context?
Well, if I change these
you know, if I restart dento
And I…
There's two.
There we go. We have Ditto. That's defined. It's a var
x equals 12.
Exodus 12, notice we have not defined x anywhere in here.
So if I say outer
of
Three.
Okay.
what's my answer going to be?
Anyone?
18.
27.
So why is it 27 because
Here we return inner of x.
So that's 12 that's passed in.
We have a three here.
So we have three.
coming in here as b
And X coming from outside.
which is there. So we have 12 plus 12 is 24.
Plus three is 27.
So that's…
So what does this say? The scenes deal. The variables
here are declared locally
it's because actually, I'll explain that in a second. I just want to show one other thing.
And then we'll talk about
Okay, good.
I've got an example here.
So yeah, exactly. I'm going to demonstrate this. I'll explain the scoping rules
So here what I've done is
I've declared this to be outer, inner
If B is SX here stuff.
So there. So now X right now is defined as 12
You also say, if I sell, say.
If I say…
And I do outer of three out of three
We get not a number because we're putting it at a
you're putting in something that is
not defined.
But if we now say x is equal to
Let me call outer sub
Three.
we get 11. So why do we get 11 here?
So this should make, you know, so this test fails
This is what we expect here. So we have inner is equal to x.
which is here, which is 4.
four is passed in here.
And we get four
Plus four is plus four.
Four plus four is eight.
Plus three is 11.
notice this test failed so we don't get this
this variable here.
But if we instead call
If we say now x is equal to 12,
it's 27.
Is that right?
So is this what you expect here? So is this 27 weeks? So 27,
we have actually it's
12 is here.
24, A is 327. So this thing didn't do anything
Right?
Now…
I'm not sure actually what this does, but I
I think I know what this will do.
actually test this out. Let's see whether it does.
So I'm now redefining it
to be this.
Now we have x is 12.
Which is what we wanted.
outer of three.
20.
So now let's figure out how did this 20 work here?
Notice all I've changed here
is this from let to var.
That's all I changed.
x is greater than, you know, so X is paying passed in here
from the outer scope. So this is going to be 12.
12 comes in here to the function here.
And it says B's greater than
um you know seven 12 is greater than seven
So now it does this var x.
is equal to 5.
So now, because this has function scope.
X is now five within this whole function.
So we have five
bus 12.
is 17 plus three
is 20.
B is the original value. B is the original value of x.
which was passed in here.
This x now takes the value of
this scope of X.
And then we have
Yeah, and A comes from here.
But notice that
we had this, you declared the variable in here, but it's valid outside. When I did let.
When they go again and we do the same thing. Not change anything else except
Just change it to a let.
Exactly the same code, just
do the letting sew there. And so now we say our outer of three
And we get 27.
because let is only defined within the scope of this if statement.
It's not defined outside.
And so it doesn't affect the statement at all, no matter what it does, whether this clause is true or false.
you're going to get the same answer.
Because the LAT's limited. But if it was var.
it goes to the whole function. So you see JavaScript had a need
for a way to declare variables if you want to have block scope.
it let is useful.
But if you're mostly defining functions that should be
global to the function
That's what VAR means.
So you do that.
So, uh.
Play with us.
play with this sort of thing. I will put this code into…
When we stop sharing, I'm going to put this into the um
lecture notes here.
Great. So I'm going to put this
Thanks.
Compare those if you want to understand what
It's happening.
Ah.
This is a good question because Joshua do shallow or
deep copies.
So when you say, if you say like a equals a
Say B equals a.
A and B both refer to the same array.
Arrays and objects are always mutable in JavaScript.
And there are no other thing. So if you want to
if you want to pass things
If you want to make a copy, you're going to have to make a copy.
There are some various ways of copying things there's like
But you have to use at least a function that
creates a new object.
I forget what the standard JavaScript way of duplicating objects.
Yeah, there's a standard way of copying it. It doesn't come up that often.
So A and B points to the array. Yes, exactly. They're both
If you're declared constant, they're just immutable pointers.
So.
JavaScript's a deep language. It's actually got lots of fancy features at this point.
I'm curious what the
Oh, right.
Yeah, there's a few ways of
I just found this link.
you want to look up different ways to do things.
So…
Yeah, copying it.
Ooh.
So there's a question about so
While you can intuitively think of these things as
as pointers kind of, but they're not really pointers because they're not
You can't manipulate them very well. They're really references to memory.
And JavaScript, certain things, because it's always going to be memory safe. It's not going to let you do weird things.
So when you start connecting it to
connecting it to C or C++.
the syntax get weird. There was a question I got directly about that. I'm not going to
discuss that. I'm happy to discuss the syntax offline.
If you want to compare it exactly to what's happening in C or C++.
I don't want to get into that. Think of this more, this is much closer
to the memory model of Python.
JavaScript and Python have a lot of similarities in both their dynamic languages and
dynamic languages tend to work this way.
Oh, okay.
Other questions?
Oh, so why do you say it won't be recursive, why would it be?
There are, that's a good question. There might be some
So if you have an array of objects
and you use like the slice
operator or something to do a copy, you know, to try copying it
the slice operator
will create a new array
of objects, object references.
But the objects that are being referred to will be the same objects.
So…
And if you didn't you
If you understand how things work underneath, it makes sense why this is
But if you're just naively thinking, well, I just want a completely separate copy.
it won't work the way you expect.
I mean, in general.
when you work with compound data structures in most languages that are mutable.
When you pass them around, you're passing them around by reference.
And since you're passing them around by reference.
if there's any modifications to them then there.
It more depends on how you structure your code.
whether you how it um
I guess manipulative like like if you're in a true functional language
everything's immutable.
But we don't use those most of the time.
Yes. Well, whether you alter or not, you just have you know where the semantics that it's the same objects.
theater values out. Okay.
But I've got a little bit of time left.
another 26 minutes.
Let's talk about translate JavaScript.
But we've kind of covered JavaScript a little bit
backwards in that we're talking about JavaScript from the server side
with Denno. But that's not where JavaScript was developed. JavaScript was developed
for the web browser.
So that's just like you have
header tags and
paragraph tags.
and list tags and all these other things in html
In Java, you would just have it.
So with the script tag inside of a web page that encloses actual JavaScript, or you can from there load in
JavaScript from external sources using
I'm forgetting the tag now but
I believe you say script source.
Okay, I'll
A source. Thank you. Source.
CSU, so source equals to whatever so
So to understand what JavaScript's doing
inside of a web page.
So the original idea of this was
very modest.
So.
I got the question that was just sent here about embedded JS. I'll get to that in a bit.
Originally, the idea was very modest.
you just want to do little things inside the webpage.
So JavaScript originally had lots of limitations.
One was it would only run when the page was first loaded into the browser or when specific events happened.
Particularly user actions such as when a user pressed a button or something.
that's when the code would run.
So originally, JavaScript was also very limited in terms of would only run in specific circumstances in response to specific events.
And it was heavily sandboxed.
couldn't access local files, couldn't really access much of anything locally.
had no persistent storage.
you know.
in the browser, no person stores in the browser.
very low to network access.
So what does this combined meaning?
So Java code couldn't run for very long. It couldn't access much.
And so that's part of what kept JavaScript secure.
That's what they really want to do. They wanted to make web apps.
not web documents.
And there was this little
We'll talk about this more.
So how does this limitation make it secure? That's a good question.
So how do these limitations make JavaScript secure?
security
In general, to keep code secure, you want to limit what it can do.
And the idea with JavaScript, we just made sure that
You're downloading JavaScript code from any random website.
So it was inherently untrusted. It still is inherently untrusted.
So the JavaScript code could be doing anything.
you have to make sure it's running in a context where it's not going to be able to do damage.
So by making sure it doesn't have local file access or local system access, it can't go and read your files and delete your data and other things.
It's all confined.
But there was also this idea we really don't want to give it much resources because it would
slow down the computer and might be able to use to do like network attacks or other things and
And so that's why it was like limited to not run all the time.
You can't just load a web page and have JavaScript just run.
It would only run when specific events happen and thus
you couldn't do as much because it's like
there just isn't the cycles
But these got relaxed.
And in particular, this thing XML HTTP request.
really changed the game. This was added.
They don't remember what an active X control was. He wouldn't remember this way before your time, but…
Most of you, I think.
And what an active X control is?
I'll talk about TypeScript later on this good question, but…
So ActiveX controls were a way of extending browser functionality, essentially by allowing Windows programs to be downloaded Internet Explorer and run.
And they could do anything that any random Windows program could do.
But they're downloaded and automatically run in the browser.
Only way it was restricted is that they were assigned to have come from some entity that was trust in the
because the digital signature process, they couldn't be tampered with and stuff.
But all kinds of bad ActiveX controls got signed and got distributed or existing ActiveX controls had security weaknesses let them be exploited.
It was bad, bad, bad, bad.
that's not the way you do security it was
it was we knew it was a bad idea what was introduced, but Microsoft liked it because
They give the proprietary advantage.
But the hilarious thing is
the most successful ActiveX control
was XML HTTP request, which turned out to be a key bit of functionality
that was necessary for the web.
Oh, no, we knew it was bad at the time and
they still implemented and it was a security disaster and it finally went away
But the…
Microsoft created
XML HTTP request.
And it was really the one technology that was needed on top of the
I mean, certainly JavaScript has gotten to be a nicer platform and stuff like that but
This was the technology that got added
And we'll talk about its API, but it allowed for
background network connections, background JavaScript execution that allowed for making of real web apps.
So I always find this the most ironic.
this little
quirk of history is that this thing, XML HTTP request, was implemented as an ActiveX control
for Outlook Web Access.
Because Outlook said, oh, Outlook is this
email client produced by Microsoft. And they said, well, we want to give access
to Outlook, but through a web browser
So how do we do this? Well, we need to make a
an email client inside of a browser.
there were existing email clients, but they were really pretty janky they just
they didn't work that well because they didn't work that
every time you do something, every time you click to button or scrolled or whatever.
it would have to get MU data from the
from the server and that would just make all interactions really slow.
The Outlook team realized this was a bad, this wouldn't make for a good experience so they
added the code necessary to make a good experience.
And then everyone else figured this out and they said, oh, this is a great idea. And they started building alternatives to desktop apps.
in the web.
you know.
Do you note the two big web apps that just like blew everyone's minds?
when they first were introduced.
Gmail and Google Maps.
when they were introduced.
basically Outlook web access wasn't something that everyone used because it was limited to you know
because it was a
you had to have an Outlook account. Not everyone had Outlook.
That was only for enterprises and stuff. So it wasn't something that
it certainly worked well, but it was a
minor thing, but Google engineers
took this and they made Gmail and Google Maps.
And everyone just was blown away because it was like, oh, I can scroll a map in a web browser and it just sort of moves.
there was like this another one called map quest
which just had like
the interface just was not good.
And again, Gmail versus past
web clients was just so much better because
It did all these things in the browser as opposed to relying on the server for everything.
I'm telling you this is a high level.
you're going to see this.
in the rest of the semester as we do things
in as we put more and more implementation onto the client and we see the kind of
interfaces we can build
and how they coordinate with the server in order to make a rich experience, yet do also a lot of computation in the browser.
So that's kind of what I want to be doing for
much of the rest of the class, because we've gotten the basics
of server-side support.
and
really servers
are in general much simpler
than clients. The service can be complex because there's lots of back end
logic or something like you know that there's
part of the application. I'm not saying it can't be ridiculously complex, but
that's in a sense another thing like there's a web server, there's all these other backend stuff, and then there's
web client, which can be have all this complex user interface.
So that's what we're going to start trying to understand is how that
buying stuff gets built up in that technology.
They'll…
Oh, Facebook was older.
then Gmail and Google Maps, certainly. Facebook is. But Facebook originally
wasn't that fancy.
it didn't have…
Facebook didn't have the kind of…
It was a good web app, but it was a social media app.
So it didn't require a lot of interactivity
And now Facebook, of course, has all kinds of fancy things
there, but the original Facebook, I mean, it was
you know, it works well with standard web apps.
It wasn't trying to do something where
you're dealing with, you're downloading a lot of data
That's what comes with both Gmail and Google Maps. You're downloading a lot of data and want to allow the user to manipulate it.
So with Google Maps, I want to be able to pan and scroll
smoothly
With Gmail, I want to be able to go through my inbox and quickly interact with it and reply and delete and, you know.
change the order of things and filter.
That's why you need that client-side functionality.
We will talk about restful
that's a loaded term.
website with Amazon with a bunch of web pages, how do they store all that data like separate files or templates?
Oh, basically for any website that have any complexity
it's
the content stored in databases.
their databases
with things that are used to fill in templates.
it's really just a scaled up version of what we're doing with our pages.
You query your database, you assemble a page and send it off.
It's just a fancy version of that.
The last thing I want to mention is the
So this is probably the big thing
that has actually kept JavaScript around as the language of the web.
And is the thing that
that makes so much of the modern web possible.
So.
you have a web page. The document is this HTML document.
If you want to make it dynamic.
you either have to add a layer on top
or you have to manipulate the HTML.
So the idea of the document object model is you convert that HTML document
into a bunch of JavaScript objects that you can query and manipulate.
And by doing so, when you change those objects, you change the state of the HTML that's rendered to the user.
That's the data structure you manipulate. Now, when you work.
In any other language
So this is really why JavaScript has been so
important for the development of a web.
It's because it is the language
that has access to the DOM. And in fact, the semantics of the DOM are very tied with JavaScript. And the fact that JavaScript is dynamically typed
His diet language is taken advantage of and manipulating the document model. And in fact.
If you go to stackly typed languages.
doing things with a DOM just gets ugly fast. Now, TypeScript
is basically JavaScript plus types, but those types are optional. They don't have to be everywhere. And you really
the types normally apply to internal logic and not necessarily to the DOM.
Because there it just gets
complicated, although I haven't really played with it that much but
I know that's where it is, but TypeScript is JavaScript plus types.
that's really all it is. And again.
the whole point of the document object models is this dynamic
data structure
And that's where dynamic language really helps.
And we'll be seeing this throughout the rest of the semester.
I'm out of time. I will stop here.
And we will talk about assignment one solutions on Thursday.
And tutorial five.
As time permits.
have a see you Thursday.