1 An Overview Course on Web Systems

A class on Web Systems can 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.

This still leaves much leeway in the choice of subject matter however the course description emphasizes current practices and trends. Current trends emphasize the front end (browser) as much as the back end (server) of web development hence in this class will cover the following subjects:

  • Web Sites from simple pages, to elaborate static sites via static site generators, to traditional server rendered sites, to web applications built with React interacting with a server via a JSON based API.

  • Front End Technologies: HTML5, CSS, JavaScript (ES6, ES2017), the DOM, the open source JavaScript ecosystem, CSS Frameworks (BootStrap, Foundation, Semantic-UI, etc.), React and its ecosystem.

  • Server Technologies: Web servers (NGINX, Apache), Node.js and the Express.js microframework and its ecosystem, templating systems such as Handlebars or Nunjucks, data stores, etc…

  • Networking and a bit of Web Security: TCP/IP, HTTP(S), switches, routers, middleboxes, proxies, caches, CDNs. TLS, encryption, secure hashes, protection of passwords, OWASP cheat sheets.

  • Tools and Deployment Architectures: Git, Webpack, Babel, etc… Virtual Machines, Containers, Reverse Proxies, Load balancers, Micro-services architectures.

By the end of the course the students will have created two websites that they can add to their portfolio one would be a example static web site at the level (or hopefully exceeding that of the Professors own web site) and a dynamic web application at the level or exceeding one of the Professors example applications, e.g., windsurf log or network visualizer.

Why so many topics? Here is one view of the roadmap for a React Developer. For the server side take a look at Web Architecture 101.

What this course will not cover: PHP, server side Java, Ruby, or Perl. Students may optionally use Python and a Python micro server framework such as Flask for their projects but this is not required.

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. See the topic pages in the menu to the left for the readings on each topic. Both professor and students will be presenting this material in class.

3 Tentative Schedule

Schedule Outline:

  1. Review of HTML, CSS, JavaScript, DOM. Project: handcrafted restaurant mobile friendly web site. Using CSS framework (BootStrap, Semantic UI, etc).
  2. Node.js, templates, static site generators (MetalSmith). Project: moderate size static website of students choosing. Suggestion: student resume/portfolio site.
  3. Server Side and Networking: Express.js, asynchronous programming, Requests, HTTP, Cookies and sessions, datastores. Project work: final project planning and approval.
  4. Web Applications with React: React and its ecosystem, web developer security, design and build outline multi-member web application with security, email verification, lost password, user management. Project: final project work.
Date Week # Topic
8/20 1 Git, HTML, CSS, JavaScript, DOM
8/27 2 Git, HTML, CSS, JavaScript, DOM
9/03 3 CSS Frameworks, JavaScript
9/10 4 Node.js, templates, JavaScript, CSS
9/17 5 templates and static site generators
9/24 6 networking, static site generators, JavaScript
10/1 7 Server side TBD
10/8 8 Server side TBD
10/15 9 Server side TBD
10/22 10 React TBD
10/29 11 React TBD
11/5 12 Multi-user site Server and Security TBD
11/12 13 Multi-user site Server and Security TBD
11/19 14 Multi-user site Server and Security TBD
11/26 15 Thanksgiving Week
12/3 16 Multi-user site Server and Security TBD
12/10 17 Final Exam Week