CS651 Web Systems

Dr. Greg Bernstein

August 6th, 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

Warning

This is a programming course that uses current industry standard tools that you must install and use.

The assignments may seem very simple/easy at the start but expand and build on each other to become quite complex.

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.

Overview of Full Stack Web Dev

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 1

Students will be able create styled web pages, Graphical User Interfaces (GUIs), and front-end only applications using the following technologies…

Front-end learning objectives 2

  • 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.

Back-end learning objectives 1

  • Understanding and applying Web Networking basics including TCP/IP, HTTP(S), URLs, WebSockets, and DNS.
  • 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, etc.
  • Understanding and application of automated testing suites such as Mocha or Jest along with assertion libraries such as Chai for server side testing.

Back-end learning objectives 2

  • 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 and understand the security issues associated with such a website.

Experience Objectives 1

  • Use Procedural, object oriented, and functional programming techniques applied to the client and server in JavaScript.
  • Including at least two asynchronous programming techniques: callbacks and promises.
  • Tools: Markdown, Node.js, NPM, Browser development Tools

Experience Objectives 2

  • Software integration and debugging
  • Across multiple file types and technologies (HTML, CSS, JavaScript, DOM, Server)
  • Network integration and debugging (full stack)

My CS351 vs CS651

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.

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.

Schedule

The tentative course schedule is in the syllabus and maintained only at https://www.grotto-networking.com/WebSystems/WebSystemsMaterials.html#working-schedule-and-lectures-fall-2020

Topics

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.

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.

Reading Sources

Mozilla Developer Network will be our main source for readings and reference

Online Course Compute and Networking Requirements

  • Laptop or desktop running modern version of Windows, MacOS, or Linux.

  • Ability to install required Open Source (free) development tools

  • Network connectivity and bandwidth: This course will be using Zoom for online course lectures and office hours.

Required Software

  • This course uses modern industry standard development tools
  • 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.

Your Development Environment

your development environment is your responsibility!

  • I cannot configure your computer for you.

  • I will encourage students to help each other with their development environments.

  • Most 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

  • 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.

  • Use is required for all submissions of homework and exams.

Code Editors 1

  • You will need a good code editor for this course.
  • Minimal features should include syntax highlighting, auto-indent, and some form of “auto-completion”
  • Enhanced features include: code beautification (formatting), “linting”, graphical git tools, etc.

Code Editors 2

Very good free editors

Node.js and NPM

You’ll need to install node.js

  • This enables server side JavaScript
  • This comes with the package manager NPM
  • This gives us access to a wide range of open source tools and libraries

Course Assessments and Procedures

Evaluation Criteria 1

All assignment, project, and exam grading is based on the techniques, procedures, and styles taught in class.

Evaluation Criteria 2

Credit may not be given to random solutions obtained via the internet even if they “work”. There will be no debates on this criteria.

Evaluation Criteria 3

If you believe that you have a superior technique for solving a problem discuss it with me prior to using it on an assignment or exam.

Credit for a problem on an assignment does not endorse a technique.

Assignments/Projects (35%)

  • Problems sets will be generally be assigned on a weekly basis and will be posted on the course website with a reminder sent through Blackboard.

  • We will be using GitHub classroom for almost all the work in this class.

  • Assignment submission will consist of a commit/push of programming resources to your private class repository on the properly named branch prior to the deadline.

Assignments/Projects 2

  • No email submissions or Blackboard submissions will be accepted!

  • 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 or all of the problems will be graded for each assignment.

Midterm (15%)

There will be one midterm examination. Approximately 1/3 into the course. This will be a time limited programming assignment, turned in via Git and graded primarily on working functionality.

Code Review/Interview (30%)

In depth review of coding assignment/project during the 2/3 of the course. This includes evaluation of functional/non-functional code against assignment/project requirements and a 30 minute online interview/code walk between the instructor and the student.

Final (15%)

This will be a time limited programming assignment, turned in via Git and graded primarily on working functionality.

Class Participation (5%)

Class participation credit can be earned in a number of ways:

  • Attending Zoom class sessions
  • Responding to in class polls and questions
  • Asking questions or participating in discussions

Class Participation

Outside of class sessions class participation credit can be earned by:

  • Finding and alerting the instructor to mistakes (“bug bounties”) in
    1. Homework assignments
    2. Course materials (broken links)
    3. Course Website and Blackboard posts
  • Suggesting improvements to course materials including
    1. Slides, references,
    2. Supplementary web sites
    3. Programming techniques
    4. Development tools

Grading

35% assignments, 15% midterm, 30% code review/interview, 15% final. No extra credit will be assigned.

The grading scale is as follows: A 92.5%, A- 90.0%, B+ 87.5%, B 82.5%, B- 80.0%, C+ 77.5%, C 72.5%, C- 70.0%, D+ 67.5%, D 60.0%, F lower than 60%

Class Courtesies and Expectations

  • Our primary modes of communication outside of class will be emails and office hours.
  • Appointments outside of normal office can be requested via email and will be accommodated as my schedule permits.
  • If you think an error has been made in grading, Send an brief email explaining the problem.

Zoom Classes and Office Hours

  • Audio and Chat questions are encouraged!!! This is the point of live instruction.
  • Start class with your microphone muted
  • Start office hours with your microphone on
  • Use video when you can and if you feel comfortable, I do like to see you but this is not required.

Office Hours

  • Office hours are shared amongst the many students in my class. Most times demand for my attention is moderate, but when there are many students waiting I will need to limit each students time to try to accommodate as many students as possible.

  • I will be encouraging students to help each other during office hours. Such assistance to your fellow students counts as “class participation”

Email Etiquette 1

  • Keep emails short as possible but no shorter. If you email me about a problem and then find a solution, let me know!
  • It can take a day or two for me to respond to emails though sometimes much quicker.
  • Emails sent for help the evening that assignments are due seldom get answered before the deadline.

Email Etiquette 2

We live in a multi-cultural world! At US universities there are certain customs and protocols that are typically observed.

  • Addressing your professor/instructor: Dr. Last_Name, Prof. Last_Name,
    1. Strictly speaking Dr. is for those with PhDs or MDs. Professor may be limited to those holding tenure track positions
    2. For me: Dr. Bernstein, Professor Bernstein, Dr. B., Prof. B.
  • Many students, many classes, one professor: You need to let me know which class and section you are in. In addition, your NetId makes sure I don’t get you confused with students with similar or identical names and give them credit for your work!

Email Etiquette 3

  • Don’t Addressing your professor/instructor:
    1. By your professors first name. This is considered overly informal and show lack of respect in US culture.
    2. “Sir”: Too formal and somewhat derogatory.
    3. “Respected Professor”: Never used in US culture;

Email Etiquette 4

  • “I have doubts on XYZ” sounds to native English speakers that you may not consider “XYZ” valid or good in some sense.

  • What is typically intended is “I do not understand XYZ”, and even better yet let me know the details of exactly you don’t understand.

General Information

Cheating and Academic dishonesty

Accommodations for students with disabilities

If you have a documented disability and wish to discuss academic accommodations, or if you would need assistance in the event of an emergency evacuation, please contact me as soon as possible. Students with disabilities needing accommodation should speak with the Accessibility Services.

Emergency information

California State University, East Bay is committed to being a safe and caring community. Your appropriate response in the event of an emergency can help save lives. Information on what to do in an emergency situation (earthquake, electrical outage, fire, extreme heat, severe storm, hazardous materials, terrorist attack) may be found at: http://www20.csueastbay.edu/af/departments/risk-management/ehs/emergency-management/index.html Please be familiar with these procedures. Information on this page is updated as required. Please review the information on a regular basis.

A Note on Discrimination, Harassment, and Retaliation (DHR)

Title IX and CSU policy prohibit discrimination, harassment and retaliation, including Sex Discrimination, Sexual Harassment or Sexual Violence. CSUEB encourages anyone experiencing such behavior to report their concerns immediately. CSUEB has both confidential and non-confidential resources and reporting options available to you. Non-confidential resources include faculty and staff, who are required to report all incidents and thus cannot promise confidentiality. Faculty and staff must provide the campus Title IX coordinator and or the DHR Administrator with relevant details such as the names of those involved in an incident. For confidential services, contact the Confidential Advocate at 510-885-3700 or go to the Student Health and Counseling Center. For 24-hour crisis services call the BAWAR hotline at 510-845-7273. For more information about policies and resources or reporting options, please visit the following websites: https://www.csueastbay.edu/riskmanagement/complaint.html, http://www.csueastbay.edu/titleix

Student Conduct

The University is committed to maintaining a safe and healthy living and learning environment for students, faculty, and staff. Each member of the campus community should choose behaviors that contribute toward this end http://www.csueastbay.edu/studentconduct/student-conduct.html.