1 A Course on Web Systems

Spring 2020

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 Development Tools and Such

  • Web Browsers: You need an up to date version of either Chrome or Firefox. I use both.

  • Version Control. Every programmer should be using version control for all but the smallest projects. We also need a way to privately share many files between student and teacher/grader. For this we will use GitHub classroom. We’ll learn enough about git to aid you in dealing with your assignments and personal projects on your local machine and with a remote repository. Use is required for most homework assignments.

  • Debugging and development tools: These come with Chrome and Firefox and they are amazing compared to anything we had in the past.

  • Code editors. There are a number of good free editors. I use several. Most provide some “linting”, “auto-completion”, and other things that ease a programmers burden. You can use any editor your like. I’d recommend looking at:

  • We’ll use (and you’ll need) node.js for the following tasks:
    • Package management for 3rd party libraries and development tools via its companion program npm
    • For running our templates, Markdown processor, and static site generation code.
    • Running our backend web server and application.

In summary to do the assignments in this class you will need a computer running node.js (with npm), git, a free GitHub account, and a text editor. I will announce the recommended versions of these systems at the start of the course. We will be adding modules to the node.js environment as the course progresses. Note that your development environment is your responsibility!!!. I cannot configure your computer for you.

4 Tentative Schedule Spring 2020

Date Week # Topic
01/20 1 Short week no Monday class, Intro, Git, GitHub, Markdown
01/27 2 HTML, CSS, JS 1 & 2, HW#1 Due
02/03 3 JS Objects, JS DOM, CSS Selectors, HW#2 Due
02/10 4 JS DOM, SVG, SVG DOM, DOM Events, Cascade, CSS Layout/Float, HW#3 Due
02/17 5 CSS Flexbox, CSS Grid, Node.js and NPM, JS Modules, React Intro, HW#4 Due
02/24 6 JS This, JS Functions, React JSX, React function components, HW#5 Due
03/02 7 JS Classes, React class components, Midterm #1
03/09 8 React Class Components, Interactivity, Networking (Eth, IP, TCP, DNS), HW#6 Due
03/16 9 Async JS I, JS Promises, Async/Await, HTTP, HW#7 Due
03/23 10 HTTP cont., Web Servers, Security, Authentication, HW#8 Due
03/30 11 Spring Break
04/06 12 Document Databases, Midterm #2
04/13 13 HTTP Cookies, Sessions, REST, JavaScript Testing, HW#9 Due
04/20 14 Server Testing, Fetch/AJAX, HW#10 Due
04/27 15 React + Fetch, Full stack Multi-user app dev
05/04 16 Full stack Multi-user app dev, HW#11 Due
05/11 17 Final Exam week