Page Contents

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.

Description, Objectives, and Learning Outcomes

Warning: This is a programming course that uses current industry standard tools that you must install and use. The assignments will seem very simple/easy at the start but expand and build on each other to become quite complex.

A more appropriate course title would be: Overview of full stack web development. Full stack web development includes development for the front end (browser or mobile platform), the backend (servers of content and/or data), and the network (protocols and architectures).

Front-end learning objectives/outcomes: student will be able create styled web pages, Graphical User Interfaces (GUIs), multi-page static web sites, and front-end only applications using:

  • HTML5, SVG, and their Document Object Models (DOM)
  • Cascading Style Sheets (CSS)
  • JavaScript (ES 6)
  • A modern front end framework (library) such as React or Vue.

The student will learn Server side (back-end) fundamentals and apply them to the creation of dynamic websites and web apps. Key learning objectives/outcomes include:

  • Understanding and applying Web Networking basics including TCP/IP, HTTP(S), URLs, WebSockets, and DNS. These are important for configuring websites and servers, but also in the debugging of web applications.
  • Understanding the role and functions of Web servers and server frameworks. The student will able able to create custom web servers using Node.js, Express.js and the No-SQL database NEDB.
  • Understanding and application of automated testing suites such as Mocha or Jest along with assertion libraries such as Chai for server side testing.
  • Understanding and Application of JSON Schema to data validation on server and client.
  • Understanding basic Security concepts, threats and mitigation techniques for web developers. The student will be able to create a multi-user website/app utilizing password based authentication with role based access control for authorization and understand the security issues associated with such a website.

The student will gain experience with and understanding of a set of modern software development tools and techniques including:

  • Procedural, object oriented, and functional programming techniques applied to the client and server in JavaScript. This will include at least two asynchronous programming techniques: callbacks and promises.
  • Markdown, Git/GitHub (remote repositories, branches), Node.js, NPM (the largest open source software repository), and modern browser development tools.
  • Software integration and debugging. Web development requires integration of potentially many different file types CSS, HTML, and JavaScript that may have interdependencies. This presents new challenges when debugging a website or app, i.e., which file or combination of files is leading to the bug. For full stack applications the debugging complexity is further increased by the fact that we now have to deal with multiple software systems interacting over a network.

Note Topics we will cover in CS651 that are not covered in my CS351 class: SVG, JSON-Schema, JavaScript server testing, REST APIs, and WebSockets. Topics in my CS351 class that we will not cover in CS651 include: templates and static site generators. Note that the pace of CS651 is significantly faster on HTML, CSS, and JavaScript fundamentals.

Required Readings, Computer/Network Resources, and Software

Required Readings

Students are required to review the course slides for each module taught in class and to read the supplemental material indicated in the slides. These form the course readings.

Readings for each course module will be assigned weekly from the following free sources:

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

  2. CSS-Tricks: Great CSS resources. We will use them as primary reference material for CSS Flexbox and CSS Grid.

  3. Learn CSS! "An evergreen CSS course and reference to level up your web styling expertise." From some of the people behind the CSS Podcast.

Other recommended references: Smashing Magazine and W3Schools.

Required Software

This course uses modern industry standard development tools and techniques. You are responsible for installing these tools on the computer that you will be using for this course. All these tools are free and Open Source.

Note that your development environment is your responsibility! I cannot configure your computer for you. I will encourage students working on similar systems (Mac, Windows, Linux) to share information concerning any issues in setting up development environments. Problems encountered with computers, software, or networks do not excuse late submissions of assignments or exams.

Web Browsers

You will need an up to date version of either Chrome or Firefox. I use both.

The desktop/laptop versions of Chrome and Firefox contain debugging and development tools that are amazing compared to anything we had in the past. These tools are not present in mobile versions of these browsers.

Version Control

Every programmer should be using version control for all but the smallest projects. In this class we will use git.

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 all homework assignments.

Code editors

You will need a good code editor for use in this course. Features such as syntax highlighting, auto-indent, and some form of "auto-completion" should be present in even the most basic code editor.

Better editors provide (or have plugins that provide) code beautification (formatting), "linting", extensive "auto-completion", graphical git tools, etc. These have a learning curve but greatly increase productivity and significantly aid in debugging. There are a number of extremely good free code editors. I'd recommend looking at:

  • Visual Studio Code -- Full featured, free,integrated development environment with many useful extensions for web work. I use this.
  • Atom

Server Side JavaScript and Package Management

We'll use (and you'll need to install) node.js for the following tasks:

  • Package management for 3rd party libraries and development tools via its companion program NPM
  • For running templates, Markdown processors, static site generators, JavaScript bundlers, etc...
  • Running our backend web server and application.