1 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.
1.1 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)
- 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:
- Markdown, Git/GitHub (remote repositories, branches), Node.js, NPM (the largest open source software repository), and modern browser development tools.
1.2 Advanced Student Options
For those students that have recently taken my CS351 course you will find significant overlap with this course. Or you may already have experience with a lot of the technologies and tools being used in CS651. If either is the case you have two options: (1) take the class and do the assignments, projects, and exams as they are, or (2) work on advanced assignments and projects that you work with me to define. This would include required weekly meetings with me as a group at a time to be arranged. You would still be responsible for learning or knowing the regular class material.
2 Required Readings, Computer/Network Resources, and Software
2.1 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:
- Mozilla Developer Network will be our main source for learning materials and we will follow the following learning tracks:
- MDN: Structuring the web with HTML
- MDN: Learn to style HTML using CSS
- CSS-Tricks: Great CSS resources. We will use them as primary reference material for CSS Flexbox and CSS Grid.
2.2 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.
2.2.1 Web Browsers
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.
2.2.2 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.
2.2.3 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. There are a number of extremely good free code editors. I use actually use several. I’d recommend looking at:
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
- Running our backend web server and application.