Web Systems

Dr. Greg Bernstein

January 16, 2020

Course Basics

Course Syllabus

  • The course syllabus explains the rules for this course
  • It is posted on Blackboard and will not change except under extraordinary circumstances
  • You and I are responsible for conforming to it. These slides are just a summary.

Class, Professor, and Website

CS651 Catalog Description

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.

Prerequisites: CS 351 and CS 401.

Prerequisite – Web

CS 351 - Website Development, Units: 3

Website development emphasizing presentation layer with client side and server side technologies. Topics covered include HTML, CSS, media, JavaScript, CGI server-side programming.

Prerequisite – Web (cont.)

I will assume you are familiar with:

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

Prerequisite – SW Eng

CS 401 - Software Engineering, Units: 3

Concepts and issues in the development of large software projects. Approaches to requirements, analysis, design, implementation, testing, and maintenance of high-quality software. Systems for software design, management, documentation and testing such as UML, GIT, Javadoc and Junit. Programming in Java.

I will assume you are somewhat familiar with a version control system like git.


Which Topics?

There are a huge number of topics that a web developer may encounter and use in the real world and many opinions on what a developer should know in any given year.

See for example Developer Roadmaps (frontend and backend).

Which Topics?

This course will emphasize the development of 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.

Topics 1

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,

Topics 2

  1. A modern frontend end framework: React and its ecosystem.
  2. Web applications built with React interacting with a server via a JSON based API.
  3. Networking, HTTP(S) 1.1, 2.0, Cookies, Sessions, caches, CDNs

Topics 3

  1. Backend (server side) implementation via Node.js/Express, a bit of web security: TLS, encryption, secure hashes, protection of passwords, OWASP cheat sheets

  2. Tools and Deployment Architectures: Git, Bundlers (Parcel, Webpack), Babel, ngrok, etc…

Subjects not covered 1

  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.

Subjects not covered 2

  1. Classic HTML form processing and server page rendering (covered in the undergraduate course)
  2. Relational databases and object relational mappers (ORM). The university has separate courses on relational databases.
  3. Cloud computing, containers, virtualization, etc… are covered in other university courses.

Procedures and Such

Weekly Readings 1

Mozilla Developer Network will be our main source for learning materials and we will use the following learning tracks:

Weekly Readings 2

Other sources of weekly readings include:


  • Weekly problems sets will be posted on the course website with a reminder sent through Blackboard.

  • GitHub classroom for almost all the work in this class.

  • Assignment submission will consist of a commit of programming resources (HTML files, CSS files, JavaScript files, Images, etc…) to your private class repository on the properly named branch prior to the assignment deadline.


  • No late assignments will be accepted for any reason.
  • No email submissions!
  • Repository branch names will be given with the assignment and must be followed exactly or the assignment will not be graded. A randomly selected subset of problems will be graded for each assignment.

Course Materials

  • All public course materials will be posted to the course website
  • Reminders and non-public materials distributed via Blackboard.
  • No paper copies will be distributed during class


  • Midterms: There will be two midterm examinations. These are currently scheduled for Wednesday March 4th, 2020 and Wednesday April 8th, 2020.

  • Final (cumulative): 8AM-10AM Wednesday, May 13, 2020 per the University’s final schedule.

  • University policy states that no final exam may be taken before or after the scheduled time for any reason.

  • All final exams must also remain with the instructor.

Academic Dishonesty


  • Homework: 20%
  • Midterms: 25% each
  • Final: 30%

Other Issues

  • Student Rights and Responsibilities

  • Documented disability and want academic accommodations: contact me

  • Title IX and CSU policy prohibit discrimination, harassment and retaliation, including Sex Discrimination, Sexual Harassment or Sexual Violence.

Development Environment

Poll: Operating Systems

What will be your main operating system for course work in this class:

Mac OS (versions)

MS Windows (versions)

Linux (versions, distribution)

Don’t Understand the Question

Web Browsers

  • Latest version of either Chrome or Firefox.
  • Debugging and development tools in Chrome and Firefox are amazing compared to anything we had in the past. Shift-Ctl-I
    • HTML, CSS, DOM
    • Networking, JavaScript debugger

Code editors

Version Control.

  • Git/GitHub will play an integral role in this course
  • We will be using GitHub classroom technology (grant from GitHub)
  • You will need to run git on your local machine


  • This is Chrome’s JavaScript engine
  • Package management via npm
  • Build system via webpack
  • Webserver framework via Express.js

Dev Env Installation

  • A code editor (your choice)
  • Git version control (command line tool), GitHub account (free)
  • Node.js (npm comes with Node.js)
  • Everything else we’ll install via npm

Deployment Environments

We will get department server accounts for each student (Apache server) for our sites and applications.