WebFund 2024F Lecture 3

Video

Video from the lecture given on September 12, 2024 is now available:

• video
• auto-generated captions

Notes

Lecture 3
---------

Deno & JavaScript

Technologies of the web: HTML, CSS, JavaScript
 - HTML is for defining the structure of a page, providing content
 - CSS is for styling
 - JavaScript is for interactivity (code) in a page

==> this is all "frontend stuff"

Originally, the web was just HTML & HTTP
 - with HTTP being the networking protocol


So the web is a client-server architecture
 - web servers & web clients
 - a browser is a web client
 - web server is the "backend"
 - web client is the "frontend"

So when you type in a URL or click on a link
 - the client opens a connection to the designated server
 - it then requests a resource from the server

Structure of a URL

https://homeostasis.scs.carleton.ca/wiki
^^^^^^^^                                  Protocol
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^       Hostname
	                           ^^^^^  Resource
Hostname is defined by DNS   <--- can talk about later

GET <URL>   <---- that's 90+% of HTTP requests


Really, HTTP was designed as a file transfer protocol
 - connect to a host, ask for a file
 - request and response can contain some metadata, e.g. what type of file is it

The cool thing about the web was that it could combine multiple files into one document
 - HTML file could have <img> tags which included images
 - so you had text + images


For the modern web, you're sometimes downloading files, but for dynamic content you're downloading the output of a program

So, to do modern web dev, you need to have a programming language for the server (backend) along with a programming language + content for the client (HTML, CSS, JavaScript)

So what language for the server (backend)? There have been many:
 - Perl
 - PHP
 - Python
 - Ruby
 - Java
 - C#

and many more. Basically any programming language can be used for web server side code.

But we have to cover JavaScript in this course, because it is the language of the client. Why not also use it for the server? That's what we are doing in this class.
 - has some other benefits beyond us just having to learn 1 vs 2 languages for programming here

So, when we want a server-side language, we want a language for generating HTML (basically).
 - so needs to be good at dealing with text

Should also probably be more "dynamic", i.e., not need to be compiled
(but that is no longer the case)


(Coffeescript), typescript - used in the client rather than JavaScript
 - but these compile down to JavaScript

There's also a way to run arbitrary code in the browser
 - webassembly, i.e., compile code to webassembly
 - but webassembly code still needs some JavaScript currently to work in a browser


I had mentiend SQL before, where does that fit into this picture?

So, we have many frontends (browsers) connecting to a backend, requesting content
 - if it is just static files, no problem
 - but what if it is data that changes?

Concurrency becomes an issue
 - ever had two programs try to change the same file on disk?
 - so, so easy for there to be different versions, for one to save the file
   and the other to lose its changes

Idea: use a technology that has been developed for dealing with concurrent access to data - databases

frontend <->
frontend <->  backend server <-> backend database
frontend <->

relational databases
 - first big application: airline reservations
     - make sure payments, customer info, and flight manifests are in sync

SQL is the language of relational databases

When are tutorials due?
 - must be finished by the associated assignment

So A1 will require T1, T2, so T1, T2, & A1 must all be completed by A1's due date.
 - but you really don't want to fall behind
 - can only get checked off by talking to a TA