the FULL stack:

working on our

back-end!

videos: https://github.com/ycoady/CSC-101-UVic-Untangling-the-Web/wiki

browser or "client"

running a browser, rendering web content!

That content is the FRONT-END!

connect with "servers"

servers often manage data & perform work!

That data/work is the BACK-END!

connect with "servers"

HTTP requests to GET (and PUT!)

http://blog.udacity.com/2014/12/front-end-vs-back-end-vs-full-stack-web-developers.html

TONIGHT!!!!!

a little review
- front end, back end, server...
- plumbing and FUN(erals!)
- SCRUM for YOUR APPS!!!
more on the FULL STACK
- some the "in betweens"!
- what you will need for your projects

EVENTS!

Nov 26th
- networking, contracts?
Dec 2nd
- city hall!
Dec 10th
- 6 - 8 hour(!) of code

Front-end

the part that users interact with
HTML, CSS, and JavaScript cooked up in your computer’s browser
But wait... There's SOME data management in your browser too! (stay tuned)

Back-end

consists of a server, an application, and a database
typically if you enter data into a website and it can be retrieved when you login, there is some kind of "back-end" application/data management system involved!
But wait... there are more APIs available for squirting data around all the time, and different plumbing to get it! (stay tuned)

THE FULL STACK!!!!

full stack developers are jacks-of-all-trades!

a full stack developer can work on the full “stack” of technology, i.e. both the front-end and back-end and everything in between!

"in between"!!!!

Network

Doman Name System
- Name => IP (Internet Protocol) Address!
- typically using an ISP DNS server, can change that!
- what if the DNS is "bad"!?!?
Virtual Private Networks (VPNs)
- Using a protocol within a protocol, typically encryption!
  - IPSec, Secure Socket Layer, Tunnelling
- Danish friends on facebook!

caching DNS entries

chrome://dns

chrome://about

chrome://local-state

www.myipaddress.com/

VPNs!

Cookies and Storage

Cookies

files created by websites that you've visited that store browsing information, such as your site preferences or profile information.

Local Store

key : value more room than cookies

Session Store

deleted when tab is closed!

try view -> developer tools -> "Resources" tab!

mileage varies!!! https://github.com/mozilla/localForage

"Browser" Storage

realtime requests... T.O.!

https://secure.toronto.ca/webwizard/ws/requests.json?start_date=2015-11-06T00:00:00Z&end_date=2015-11-07T00:00:00Z&jurisdiction_id=toronto.ca

make sense of them...

https://jsonformatter.curiousconcept.com/

realtime requests... T.O.!

https://secure.toronto.ca/webwizard/ws/requests.json?start_date=2015-11-06T00:00:00Z&end_date=2015-11-07T00:00:00Z&jurisdiction_id=toronto.ca

make sense of them...

https://jsonformatter.curiousconcept.com/

data format!

{

key : value,

...

}

{  
         "service_request_id":101003676897,
         "status":null,
         "status_notes":null,
         "service_name":"Road - Pot hole",
         "service_code":"CSROWR-12",
         "description":null,
         "agency_responsible":"311 Toronto",
         "service_notice":null,
         "requested_datetime":"2015-11-06T18:04:00-05:00",
         "updated_datetime":"2015-11-16T14:02:00-05:00",
         "expected_datetime":"2016-02-04T18:04:00-05:00",
         "address":"Ellesmere Rd / Victoria Park Ave / Parkwoods Village Dr, North York",
         "address_id":13449013,
         "zipcode":null,
         "long":-79.315248662,
         "lat":43.75787803,
         "media_url":null
      },

can you map them all with their "issue" and time?

RESTful APIs!!!!

Representational State Transfer (REST)
- an architectural style used by the Web!
- client-server organization
- client knows API, caching is interesting!
HTTP verbs (GET, POST, PUT, DELETE)
Uniform Resource Identifier (URI)
- can be either a Uniform Resource Locator (URL), or a Uniform Resource Name (URN), or both.

RESTful APIs!!!!

Representational State Transfer (REST)
- "Representations" of a resource (often in JSON!)
  - an architectural style used by the Web!
  - client-server organization
    - squirting JSON around!!!
    - client knows API, data (resources!) accessed caching is interesting!
HTTP verbs (GET, POST, PUT, DELETE) work on the API
Can do it all through your browser!
- query and update data!
- back-end application (on server) needs to be set up to deal with this!