WebFund 2015W Lecture 3: Difference between revisions

Latest revision as of 02:57, 31 January 2015

Topics & Readings

Go through the Code Academy tutorials.

Audio & Video

Audio and video from the lecture given on January 12, 2015 are now available. The video has a partial audio track due to corruption; for full audio listen to the mp3.

Notes

Web applications versus web pages

A web page is made up of HTML + CSS + JavaScript.

HTML (Hyper Text Markup Language) defines structure of page
CSS (Cascading Style Sheets) is responsible for the styling of the web pages
JavaScript is the code of the webpage

A web Application is a set of webpages + Server side logic.

When a web page is loaded, the browser sends an HTTP GET request to the web server, the server returns an HTML document. The document can have references to other resources needed to create the web page. Those resources will then be obtained by subsequent GET requests sent out by the browser. Note that other resources may come from other web servers.

What does the server side logic do?

It changes what is returned in response to GET (and POST) requests. Static web servers serve files, while on the other hand dynamic web servers implement logic.

Early web server used CGI (Common Gateway Interface) to do dynamic web pages. An Example of CGI would be executing a perl script to generate dynamic web pages. The problem with using CGI for everything is that you have to run separate process for each web request, which is rather expensive and not a great architecture.

One solution is to keep a program continuously running to handle each incoming request. Doing this alleviates the cost of creating a new process at each request.

Keep in mind that node does not eliminate a static server, but instead it offers an easier way to implement a dynamic server.

Node

What is Node?

Node is a JavaScript execution environment with networking and disk input and output (I/O) support.

JavaScript is limited in what it can do. Node helps to deal with this limitation however, Node by itself still does not have much functionality, we need to add *modules* to make it better.

NPM

NPM = Node Package Manager

The Node Package Manager lets us load the modules that a node application depends on.

Express

A framework is a scaffolding for an application. A framework generation tool helps you to generate a simple application that runs but doesn't do much, then you can add in the functionality you want. The Express generator can me used to make a basic Node application with a MVC (model, view, controller) styled structure and some useful modules.

Some important contents of an Express application:

bin/www: This is the startup script for the application.
app.js: This is the main file that you will start editing when working on your application. Although it is not the highest level script of the application, it is the highest level one that you should have to modify.
public folder: All static resources (html pages, images, css) should be placed in here.
node_modules folder: This is where all modules will be kept.
packages.json: Contains information about the dependencies of the application. From the root of the application, the command npm install can be entered in a terminal to install all dependencies to the node_modules folder.

With a basic application generated and its dependencies installed, it can then be run as a server. This is done by running the startup script (the www script located in the bin folder). By default, the server can be accessed at localhost:3000.

localhost:3000 - What does this mean?

localhost is the machine you are operating on. In 2406 we will do everything off localhost. local host can be replace with your IP address i.e 134.117.222.90:3000. 3000 is the standard development port we will be using. Usually to connect to port 80 you have privileges, and we do not want that, because no one knows how your code will react.

A favicon is the little icon that shows on the corner of your browser tab for a web site.

JavaScript

Some items that throw people off:

It is loosely typed
Weird globals
null is an object

JavaScript can be said to be a first draft of a great language. The first rule of the web is compatibility, which is one of the reasons why JavaScript has not been "fixed".

Some properties of JavaScript:

C-like syntax
Loosely typed - What does this mean? It means you do not specify types for variables. That doesn't mean there are no types.
Identifiers can refer to data of any type
Numbers are ALL DOUBLES i.e Double Precision Floats(floating point i.e no integers)
Object-oriented
NO CLASSES - only prototypes
Lexically scoped - Meaning that a variable can only be reference within the scope in which it was defined
JavaScript has no compile phase

@@ Line 1: / Line 1: @@
-[http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec03-12Jan2015.mp3 Audio] and [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec03-12Jan2015.mp4 video] from the lecture given on January 12, 2015 are now available.  The video has a partial audio track; for full audio listen to the mp3.
+==Topics & Readings==
+Go through the Code Academy tutorials.
+==Audio & Video==
+[http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec03-12Jan2015.mp3 Audio] and [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec03-12Jan2015.mp4 video] from the lecture given on January 12, 2015 are now available.  The video has a partial audio track due to corruption; for full audio listen to the mp3.
 ==Notes==
-			Web applications versus web pages
+<h3>Web applications versus web pages</h3>
-		*Web page  HTML + CSS + JAVASCRIPT
+A web page is made up of HTML + CSS + JavaScript.
+<ul>
+  <li>HTML (Hyper Text Markup Language) defines structure of page</li>
+  <li>CSS (Cascading Style Sheets) is  responsible for the styling of the web pages</li>
+  <li>JavaScript is the code of the webpage</li>
+</ul>
-		HTML(Hyper Text Mark Up Language) defines structure of page
+A web Application is a set of webpages + Server side logic.
-		(define HTML)
-		CSS is  responsible for the styling of the webpages
-		JavaScript is the code of the webpage
-		Web Applications:Set of webpages + Server side logic
+When a web page is loaded, the browser sends an HTTP GET request to the web server, the server returns an HTML document. The document can have references to other resources needed to create the web page. Those resources will then be obtained by subsequent GET requests sent out by the browser. Note that other resources may come from other web servers.
-		when you a loading a webpage the serves does two things:
+What does the server side logic do?
-)browser sends HTTP GET
-) Server returns HTML document
-		* The document has references to other resources
-			_ The browser does GETs for those
-			What does the server side logic do?
+It changes what is returned in response to GET (and POST) requests. Static web servers serve files, while on the other hand dynamic web servers implement logic.
-) It changes what is returned in response to GETs, (and POST)
+Early web server used CGI (Common Gateway Interface) to do dynamic web pages. An Example of CGI would be executing a perl script to generate dynamic web pages. The problem with using CGI for everything is that you have to run separate process for each web request, which is rather expensive and not a great architecture.
-		Static Web Servers serve files, while on the other hand Dynamic web servers implement logic.
+One solution is to keep a program continuously running to handle each incoming request. Doing this alleviates the cost of creating a new process at each request.
-		Early web server used  CGI to do dynamic web pages
+Keep in mind that node does not eliminate a static server, but instead it offers an easier way to implement a dynamic server.
-		CGI: Common Gateway interface
-		An Example of a CGI would be a program, for example a perl script
-		the web started with static web pages
-		The problem with using CGI for everything is that:
-) You have to run seperate process for each web request, which is rather expensive and not a great architecture
-		One solution is to keep dynamic program running
-		-this is usually used with PHP (does not pay overhead of executing)
-		With  node we eliminate the static web server .
-		What is node?
+<h3>Node</h3>
-		Node is a javascript execution environemnt with networking and disk Input and Ouput(I/O) support
+What is Node?
-		Javascript is limited in what it can do
-		On the other hand, node by itself does not have much functionality, we need to add *modules* to make it better
-		NPM = node package manager
-		The node package manager lets us load the code that node depends upon
-		FrameWork: All a framework is a scaffolding for an application
-		Also a framework helps you to gennerate a simple application that runs but doesnt does much, then you have the functionality you want.
+Node is a JavaScript execution environment with networking and disk input and output (I/O) support.
-		app.js: contains the code
+JavaScript is limited in what it can do. Node helps to deal with this limitation however, Node by itself still does not have much functionality, we need to add *modules* to make it better.
-		Public folder : anything you put in here, static web server  i.e images, style sheets etc
-		packages.js: contains dependencies
+<h4>NPM</h4>
-		bin: contains the file you run
+NPM = Node Package Manager
-		with node,all the code you will need will live in a node_module directory
+The Node Package Manager lets us load the modules that a node application depends on.
-		we type cat package.json on the terminal to view the dependencies
+<h4>Express</h4>
+A framework is a scaffolding for an application. A framework generation tool helps you to generate a simple application that runs but doesn't do much, then you can add in the functionality you want. The Express generator can me used to make a basic Node application with a MVC (model, view, controller) styled structure and some useful modules.
-		we also type "npm install" on terminal to install the NPM
+Some important contents of an Express application:
-		after the instalation is complete  a node module directory will be downnloaded/installed
+<ul>
+  <li>bin/www: This is the startup script for the application.</li>
+  <li>app.js: This is the main file that you will start editing when working on your application. Although it is not the highest level script of the application, it is the highest level one that you should have to modify.</li>
+  <li>public folder: All static resources (html pages, images, css) should be placed in here.</li>
+  <li>node_modules folder: This is where all modules will be kept.</li>
+  <li>packages.json: Contains information about the dependencies of the application. From the root of the application, the command <code>npm install</code> can be entered in a terminal to install all dependencies to the node_modules folder.</li>
+</ul>
-		now we can run the web server.
+With a basic application generated and its dependencies installed, it can then be run as a server. This is done by running the startup script (the www script located in the bin folder). By default, the server can be accessed at localhost:3000.
-		localhost:3000? what does this mean
+localhost:3000 - What does this mean?
-		localhost is the machine you are operating on. In 2406 we will do everything off localhost.
-		local host can be replace with your ip i.e
-.117.222.90:3000
-is the default
-is the standard development port we will be using.
-		usually to connect to port 80 you have to priviledges, and we do not want that, because no one knows how your code will react.
-		favicon is the little icon that shows on the corner of your browser while it is running.
-					JavaScript
+localhost is the machine you are operating on. In 2406 we will do everything off localhost.
-					-it is loosely type
+local host can be replace with your IP address i.e 134.117.222.90:3000.	3000 is the standard development port we will be using. Usually to connect to port 80 you have privileges, and we do not want that, because no one knows how your code will react.
-					-Weird globals
-					-null is an object etc
-		JavaScript can also be said that it can be said that it is a first draft of a great language.
+A favicon is the little icon that shows on the corner of your browser tab for a web site.
-		First rule of the web is Compatibility , and which is one of the reasons why JavaScript has not "fixed"
+<h3>JavaScript</h3>
+Some items that throw people off:
+<ul>
+  <li>It is loosely typed</li>
+  <li>Weird globals</li>
+  <li>null is an object</li>
+</ul>
-							Properties of JavaScript
+JavaScript can be said to be a first draft of a great language. The first rule of the web is compatibility, which is one of the reasons why JavaScript has not been "fixed".
-				-C like syntax
-				-loosely typed : what does this mean? It means you do not specify types for variables, that doesn't mean there    are no types
-				-identifiers can refer to data of any type
-				-numbers are ALL DOUBLES i.e Double Precision Floats(floating point i.e no integers)
-				-Object Oriented
-				-NO CLASSES - only prototypes
-				-lexical scoped: meaning the range of which a variable can be seen or range of functionality of a variable, so that it can only be called from the scope/ the block of code where the variable was defined
-				Prototypes have no compile phase.
+Some properties of JavaScript:
+<ul>
+  <li>C-like syntax</li>
+  <li>Loosely typed - What does this mean? It means you do not specify types for variables. That doesn't mean there are no types.</li>
+  <li>Identifiers can refer to data of any type</li>
+  <li>Numbers are ALL DOUBLES i.e Double Precision Floats(floating point i.e no integers)</li>
+  <li>Object-oriented</li>
+  <li>NO CLASSES - only prototypes</li>
+  <li>Lexically scoped - Meaning that a variable can only be reference within the scope in which it was defined</li>
+  <li>JavaScript has no compile phase</li>
+</ul>