1 A Course on Web Systems
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:
- HTML fundamentals, but not necessarily newer HTML5 structuring elements.
- CSS fundamentals, but not necessarily newer layout techniques such as Flexbox and Grid.
- 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:
- Modern HTML5, SVG, and Markdown
- Modern CSS including Flexbox and Grid, as well as a look at CSS Frameworks.
- A modern frontend end framework: React and its ecosystem.
- Web applications built with React interacting with a server via a JSON based API.
- Networking, HTTP(S) 1.1, 2.0, Cookies, Sessions, caches, CDNs
- Backend (server side) implementation via Node.js/Express, a bit of web security: TLS, encryption, secure hashes, protection of passwords, OWASP cheat sheets
- Tools and Deployment Architectures: Git, Bundlers, Babel, etc…
Subjects not covered:
- Other server side environments such as Flask, Django, PHP, Wordpress.
- Static site generators and templates. This is well covered in the undergraduate course.
- Classic HTML form processing and server page rendering (covered in the undergraduate course)
- Relational databases and object relational mappers (ORM). The university has separate courses on relational databases.
- 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
|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|
|04/06||12||Document Databases, Midterm #2|
|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|