WebFund 2024F Lecture 3: Difference between revisions

From Soma-notes
Created page with "Note that this lecture will be asynchronous for most of you, as it is being recorded earlier due to Anil's travel schedule."
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
Note that this lecture will be asynchronous for most of you, as it is being recorded earlier due to Anil's travel schedule.
==Video==
 
Video from the lecture given on September 12, 2024 is now available:
* [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/lectures/comp2406-2024f-lec03-20240912.m4v video]
* [https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/lectures/comp2406-2024f-lec03-20240912.cc.vtt auto-generated captions]
 
==Notes==
 
<pre>
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
</pre>

Latest revision as of 02:49, 17 September 2024

Video

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

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