WebFund 2014W Lecture 4

The audio from the lecture given on January 17, 2014 is available here.

Lecture 4

Assignment 1 Discussion

• Pieces of the code

 o	  Node
 o	  Jade
 o	  HTTP
 o	  Bootstrap
 o	  jQuery
 o	  HTML

• app.js

 o	  JavaScript

• How do the other pieces fit?

 o	  Look at the top, at the require lines
 o	  Reference to the node's module system 
   	    Searches for the directory indicated for an index.js file
   	    All loaded into variable you loaded it into (an 'exports' object is returned)
   	    Methods in the index.js beginning with "exports" are accessible by the var you loaded the object into

• When does app.js end?

 o	  In the fraction of the second of when it's called
 o    	  Purpose of the file is to set up the page
 o	  app.get and app.post
   	    Registered as callbacks since they run once and never again, but the functions that are registered ran everytime it's requested
   	    for app.get: if one parameter, you're accessing a field; 2 parameters and you're specifying a path
 o	  app.use
   	    calls specific code from the parameter indicated
   	    path: directory name
   	    express.static

• apache; a static webserver; anything in the directory indicated can be accessed

 o	  app.set
   	    sets a field in the app object specified in the first parameter, to whatever specified in the second parameter
 o	  Ordering of lines in app.js is important
   	    e.g. having something loaded before loading the public folder's files tells node that the previous file takes precedence

• When rendering an object (res.render) for a response to a request, you pass in a jade template, and an object with fields (parameterizing the template) • View engine: engine used as a template for HTMLs (e.g. 'jade')

 o	  completely restricted access to server objects/variables due to security concerns; templates are isolated
 o	  since we want to dynamically generate the page, we have to use a template
 o	  some things we want to keep constant and not have to rerender all the time, and sometimes we want to change specific content
 o	  makes it clear that we're not writing HTML, just a template that will be converted into an HTML document

• Spaces and tabs do not mix in jade. Use one only. • Why do we need a different language for Jade?

 o	  Domain-specific languages
   	    In Computer Science, a way to solve a problem is to create a language to solve it
   	    Makes things, previously complicated, easy
   	    CSS does not look like HTML, because it is a domain-specific language
   	    Compound languages: always language embedding

• Bootstrap

 o	  Built off jQuery
 o	  Runs on the client; completely in the browser
   	     allows you to dynamically change CSS to fit user's browser/screen (i.e. on the phone), less intensive on you (offloading a lot of work onto the browser)
   	    Major Reason: latency

• Everytime you make a request, to the server, it takes time an incredibly short time • Annoying for the user to constantly wait for pages/response to actions • Downloads webpages in the background; predicting what you will need soon in order to save time

 o	  Allows you to grab an applet/webpage from another web server
   	    Cons: may not be always up, may send something different, usually done in faith, your application could break because of another web server that you don't have control over
 o	  2 portions: CSS (for styles), and JavaScript (code that makes it do things)
   	    JavaScript runs inside the browser (not yet ran something like this)