Difference between revisions of "WebFund 2015W Lecture 3"

From Soma-notes
Jump to navigation Jump to search
 
(3 intermediate revisions by 2 users not shown)
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==
==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?
1)browser sends HTTP GET
2) 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.


1) 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:
1) 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
134.117.222.90:3000
3000 is the default
 
3000 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>

Latest revision as of 22:57, 30 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
Retrieved from "https://homeostasis.scs.carleton.ca/wiki/index.php?title=WebFund_2015W_Lecture_3&oldid=19744"