1 A Course on Web Systems

Fall 2019

A graduate class on Web Systems could cover an unlimited amount of material, this particular class is being taught at California State University East Bay and the catalog description is:

Current practices and trends in software design, development, and deployment of web-based systems, with particular emphasis on e-commerce. Projects incorporating the latest technologies and techniques used by the Internet community. Review of literature.

The undergraduate level course on Website Development that I teach is a prerequisite to this course however there is much variation in what one might encounter in an undergraduate website development course. I will assume that a students undergraduate web development course covered at least:

  1. HTML fundamentals, but not necessarily newer HTML5 structuring elements.
  2. CSS fundamentals, but not necessarily newer layout techniques such as Flexbox and Grid.
  3. JavaScript fundamentals, but not necessarily modern JavaScript
  4. Static websites and classic server side rendering and form processing

This course will emphasize modern secure multi-user web applications with sophisticated browser user interfaces based on a modern front end framework such as React that interact with servers through data centric machine to machine interfaces such as REST or GraphQL utilizing JSON.

Subjects to be covered will include:

  1. Modern HTML5, SVG, and Markdown
  2. Modern CSS including Flexbox and Grid, as well as a look at CSS Frameworks.
  3. Modern JavaScript (ES6, ES2017) including Promises and Async/Await, the DOM, the open source JavaScript ecosystem,
  4. A modern frontend end framework: React and its ecosystem.
  5. Web applications built with React interacting with a server via a JSON based API.
  6. Networking, HTTP(S) 1.1, 2.0, Cookies, Sessions, caches, CDNs
  7. Backend (server side) implementation via Node.js/Express, a bit of web security: TLS, encryption, secure hashes, protection of passwords, OWASP cheat sheets
  8. Tools and Deployment Architectures**: Git, Bundlers, Babel, etc…

To minimize repeating of content/exercises from my undergraduate course initial CSS and JavaScript/DOM work will be applied to SVG (Scalable Vector Graphics) which is the prime method for 2D data visualization on the web.

Subjects not covered:

  1. Other server side environments such as Flask, Django, PHP, Wordpress.
  2. Other server side languages: We will only use JavaScript to minimize the confusion of switching languages during the course.
  3. Static site generators and templates. This is well covered in the undergraduate course.
  4. Classic HTML form processing and server page rendering (covered in the undergraduate course)
  5. Relational databases and object relational mappers (ORM). The university has separate courses on relational databases.
  6. Cloud computing, containers, virtualization, etc… are covered in other university courses.

2 Books and Such

There will be required weekly readings based on the topics. These are all currently freely available from sources on the web.

3 Tentative Schedule Fall 2019

Schedule Outline:

  1. Review of HTML, SVG, CSS, JavaScript, DOM.
  2. CSS Layout Techniques: Flexbox and Grid
  3. React for Front End
  4. Advanced JavaScript and CSS: asynchronous programming, transitions
  5. Server Side and Networking: Express.js, Requests, HTTP, Cookies and sessions, datastores.
  6. Website security
  7. Full Stack Application Development, Multi-user website.
Date Week # Topic
08/19 1 Short week no Monday class, late start no Wednesday class
08/26 2 Intro, Git, GitHub, Markdown, HTML, CSS
09/02 3 HW#1 Due, Labor day, no Monday class, JS 1 & 2, JS Objects, JS DOM, CSS Selectors
09/09 4 JS DOM, SVG, SVG DOM, DOM Events, Cascade, CSS Layout/Float, HW#2 Due (Wed)
09/16 5 CSS Flexbox, CSS Grid, JS Functions, Node.js and NPM HW#3 Due (Wed)
09/23 6 JS This, JS Modules, React, Async JS I, JS Classes, HW#4 Due (Wed)
09/30 7 React class components, Midterm #1 (10/02/2019)
10/07 8 Networking (Eth, IP, TCP, DNS), HTTP, Web Servers
10/14 9 JS Promises, Async/Await, Fetch/AJAX
10/21 10 Document Databases
10/28 11 HTTP Cookies, Sessions
11/04 12 Server Testing, Midterm #2 (11/06/2019)
11/11 13 Multi-user app design, TBD
11/18 14 Multi-user app design and development, TBD
11/25 15 Thanksgiving Break
12/02 16 Multi-user app design and development, TBD
12/09 17 Final Exam week